amCharts with dynamic updates
by nwinkler
HTML
<script src="http://www.amcharts.com/lib/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/raphael.js"></script>
<div id="chartdiv" style="width: 680px; height: 400px;"></div>
<button id="ping">Ping</button>
<button id="stop">Stop</button>
JavaScript
var lineChartData = [
{date:22,"OPEN":33,"CLOSED":10,"INIT":30},
{date:23,"OPEN":20,"CLOSED":20,"INIT":20},
{date:24,"OPEN":40,"CLOSED":36,"INIT":60},
{date:25,"OPEN":50,"CLOSED":26,"INIT":56},
{date:26,"OPEN":20,"CLOSED":21,"INIT":33},
{date:27,"OPEN":4,"CLOSED":23,"INIT":13}];
var second = 28;
var lineChart;
$(document).ready(function() {
for (i=0;i<=144;i++){
var open = Math.floor((Math.random()*50)+1);
var close = Math.floor((Math.random()*50)+1);
var int = Math.floor((Math.random()*60)+1);
lineChartData.push(
{date:second,"OPEN":open,"CLOSED":close,"INIT":int});
second = second +1;
}
lineChart = new AmCharts.AmSerialChart();
lineChart.dataProvider = lineChartData;
lineChart.marginRight = 5;
lineChart.marginLeft = 10;
lineChart.marginTop = 5;
lineChart.marginBottom = 5;
lineChart.categoryField = "date";
var categoryAxis = lineChart.categoryAxis;
categoryAxis.dashLength = 2;
categoryAxis.gridAlpha = 0.15;
categoryAxis.axisColor = "#DADADA";
var valueAxis = new AmCharts.ValueAxis();
valueAxis.gridAlpha = 0;
valueAxis.axisColor = "#DADADA";
valueAxis.axisThickness = 2;
valueAxis.inside = true;
valueAxis.maximum = 70;
lineChart.addValueAxis(valueAxis);
var landingGraph = new AmCharts.AmGraph();
landingGraph.valueAxis = valueAxis;
landingGraph.type = "smoothedLine";
landingGraph.title = "Landing";
landingGraph.valueField = "OPEN";
landingGraph.lineColor = "#FF0F00";
landingGraph.lineThickness = 2;
lineChart.addGraph(landingGraph);
var boardingGraph = new AmCharts.AmGraph();
boardingGraph.valueAxis = valueAxis;
boardingGraph.type = "smoothedLine";
boardingGraph.title = "Boarding";
...