Coldfusion ファイルで amchart を使用してグラフをプロットしようとしていますが、ブラウザーに何も表示されないのはなぜでしょうか。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Cfchart</title>
<script src="http://www.amcharts.com/lib/amcharts.js" type="text/javascript"></script>
<!--- August 01 --->
<script type="text/javascript">
var chart;
var chartData = [{
date: 2013-07-31,
FIRSTCONN: 3,
SECONDCONN: 4
},
{
date: 2013-08-15,
FIRSTCONN: 5,
SECONDCONN: 10
},
date: 2013-08-17,
FIRSTCONN: 6,
SECONDCONN: 8
}
];
AmCharts.ready(function() {
// SERIAL CHART
chart = new AmCharts.AmSerialChart();
chart.dataProvider = chartData;
chart.marginRight = 0;
chart.autoMarginOffset = 5;
chart.categoryField = "date";
chart.startDuration = 0.5;
chart.balloon.color = "#000000";
// AXES
// category
var categoryAxis = chart.categoryAxis;
categoryAxis.fillAlpha = 1;
categoryAxis.fillColor = "#FAFAFA";
categoryAxis.gridAlpha = 0;
categoryAxis.axisAlpha = 0;
categoryAxis.gridPosition = "start";
categoryAxis.position = "top";
// value
var valueAxis = new AmCharts.ValueAxis();
valueAxis.title = "Number of Connections";
valueAxis.dashLength = 5;
valueAxis.axisAlpha = 0;
valueAxis.minimum = 1;
valueAxis.maximum = 6;
valueAxis.integersOnly = true;
valueAxis.gridCount = 10;
valueAxis.reversed = true; // this line makes the value axis reversed
chart.addValueAxis(valueAxis);
// GRAPHS
// FIRST Connection graph
var graph = new AmCharts.AmGraph();
graph.title = "FIRST";
graph.valueField = "FIRSTCONN";
graph.hidden = true; // this line makes the graph initially hidden
graph.balloonText = "Number of FIRST connections [[category]]: [[value]]";
graph.lineAlpha = 1;
graph.bullet = "round";
chart.addGraph(graph);
// GRAPHS
// SECOND Connection graph
var graph = new AmCharts.AmGraph();
graph.title = "SECOND";
graph.valueField = "SECONDCONN";
graph.hidden = true; // this line makes the graph initially hidden
graph.balloonText = "Number of SECOND connections [[category]]: [[value]]";
graph.lineAlpha = 1;
graph.bullet = "round";
chart.addGraph(graph);
// LEGEND
var legend = new AmCharts.AmLegend();
legend.markerType = "circle";
chart.addLegend(legend);
// WRITE
chart.write("chartdiv");
});
</script>
</head>
<body>
<div id="chartdiv" style="width: 100%; height: 362px;"></div>
</body>
</html>