I currently have the following code where I am statically assigning values. Now, I need to dynamically retrieve values and display a chart. I want to populate the 'items' variable from the controller in the same format, and then display the chart. Thank you.
<!DOCTYPE html>
<html>
<head>
<script src="http://www.amcharts.com/lib/amcharts.js" type="text/javascript"></script>
</head>
<body>
<div id="chartdiv" style="width: 100%; height: 355px;"></div>
<script type="text/javascript" language="javascript">
var chart;
var chartData = [{
year: "FY 2011-12",
visits: 3025
},
{
year: "FY 2011-12",
visits: 1882
},
{
year: "FY 2011-12",
visits: 1809
},
{
year: "FY 2011-12",
visits: 1322
}
}];
AmCharts.ready(function() {
// SERIAL CHART
chart = new AmCharts.AmSerialChart();
chart.autoMarginOffset = 0;
chart.dataProvider = chartData;
chart.categoryField = "year";
chart.startDuration = 1;
chart.depth3D = 20;
chart.angle = 30;
// AXES
// category
var categoryAxis = chart.categoryAxis;
categoryAxis.labelRotation = 45; // this line makes category values to be rotated
categoryAxis.gridAlpha = 0;
categoryAxis.fillAlpha = 1;
categoryAxis.fillColor = "#FAFAFA";
categoryAxis.gridPosition = "start";
// value
var valueAxis = new AmCharts.ValueAxis();
valueAxis.dashLength = 5;
valueAxis.title = "Visitors from country";
valueAxis.axisAlpha = 0;
chart.addValueAxis(valueAxis);
// GRAPH
var graph = new AmCharts.AmGraph();
graph.valueField = "visits";
graph.colorField = "color";
graph.balloonText = "[[category]]: [[value]]";
graph.type = "column";
graph.lineAlpha = 0;
graph.fillAlphas = 1;
chart.addGraph(graph);
// WRITE
chart.write("chartdiv");
});
</script>
</body>
</html>