Rev 915 | Blame | Compare with Previous | Last modification | View Log | RSS feed
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>amCharts examples</title><link rel="stylesheet" href="style.css" type="text/css"><script src="../amcharts/amcharts.js" type="text/javascript"></script><script src="../amcharts/serial.js" type="text/javascript"></script><script>var chart;var chartData = [{"year": 1995,"cars": 1567,"motorcycles": 683,"bicycles": 146},{"year": 1996,"cars": 1617,"motorcycles": 691,"bicycles": 138},{"year": 1997,"cars": 1630,"motorcycles": 642,"bicycles": 127},{"year": 1998,"cars": 1660,"motorcycles": 699,"bicycles": 105},{"year": 1999,"cars": 1683,"motorcycles": 721,"bicycles": 109},{"year": 2000,"cars": 1691,"motorcycles": 737,"bicycles": 112},{"year": 2001,"cars": 1298,"motorcycles": 680,"bicycles": 101},{"year": 2002,"cars": 1275,"motorcycles": 664,"bicycles": 97},{"year": 2003,"cars": 1246,"motorcycles": 648,"bicycles": 93},{"year": 2004,"cars": 1218,"motorcycles": 637,"bicycles": 101},{"year": 2005,"cars": 1213,"motorcycles": 633,"bicycles": 87},{"year": 2006,"cars": 1199,"motorcycles": 621,"bicycles": 79},{"year": 2007,"cars": 1110,"motorcycles": 210,"bicycles": 81},{"year": 2008,"cars": 1165,"motorcycles": 232,"bicycles": 75},{"year": 2009,"cars": 1145,"motorcycles": 219,"bicycles": 88},{"year": 2010,"cars": 1163,"motorcycles": 201,"bicycles": 82},{"year": 2011,"cars": 1180,"motorcycles": 285,"bicycles": 87},{"year": 2012,"cars": 1159,"motorcycles": 277,"bicycles": 71}];AmCharts.ready(function () {// SERIAL CHARTchart = new AmCharts.AmSerialChart();chart.dataProvider = chartData;chart.marginTop = 10;chart.categoryField = "year";// AXES// Categoryvar categoryAxis = chart.categoryAxis;categoryAxis.gridAlpha = 0.07;categoryAxis.axisColor = "#DADADA";categoryAxis.startOnAxis = true;// Valuevar valueAxis = new AmCharts.ValueAxis();valueAxis.stackType = "regular"; // this line makes the chart "stacked"valueAxis.gridAlpha = 0.07;valueAxis.title = "Traffic incidents";chart.addValueAxis(valueAxis);// GUIDES are vertical (can also be horizontal) lines (or areas) marking some event.// first guidevar guide1 = new AmCharts.Guide();guide1.category = "2001";guide1.lineColor = "#CC0000";guide1.lineAlpha = 1;guide1.dashLength = 2;guide1.inside = true;guide1.labelRotation = 90;guide1.label = "fines for speeding increased";categoryAxis.addGuide(guide1);// second guidevar guide2 = new AmCharts.Guide();guide2.category = "2007";guide2.lineColor = "#CC0000";guide2.lineAlpha = 1;guide2.dashLength = 2;guide2.inside = true;guide2.labelRotation = 90;guide2.label = "motorcycle maintenance fee introduced";categoryAxis.addGuide(guide2);// GRAPHS// first graphvar graph = new AmCharts.AmGraph();graph.type = "line"; // it's simple line graphgraph.title = "Cars";graph.valueField = "cars";graph.lineAlpha = 0;graph.fillAlphas = 0.6; // setting fillAlphas to > 0 value makes it area graphgraph.balloonText = "<img src='images/car.png' style='vertical-align:bottom; margin-right: 10px; width:28px; height:21px;'><span style='font-size:14px; color:#000000;'><b>[[value]]</b></span>";graph.hidden = true;chart.addGraph(graph);// second graphgraph = new AmCharts.AmGraph();graph.type = "line";graph.title = "Motorcycles";graph.valueField = "motorcycles";graph.lineAlpha = 0;graph.fillAlphas = 0.6;graph.balloonText = "<img src='images/motorcycle.png' style='vertical-align:bottom; margin-right: 10px; width:28px; height:21px;'><span style='font-size:14px; color:#000000;'><b>[[value]]</b></span>";chart.addGraph(graph);// third graphgraph = new AmCharts.AmGraph();graph.type = "line";graph.title = "Bicycles";graph.valueField = "bicycles";graph.lineAlpha = 0;graph.fillAlphas = 0.6;graph.balloonText = "<img src='images/bicycle.png' style='vertical-align:bottom; margin-right: 10px; width:28px; height:21px;'><span style='font-size:14px; color:#000000;'><b>[[value]]</b></span>";chart.addGraph(graph);// LEGENDvar legend = new AmCharts.AmLegend();legend.position = "top";legend.valueText = "[[value]]";legend.valueWidth = 100;legend.valueAlign = "left";legend.equalWidths = false;legend.periodValueText = "total: [[value.sum]]"; // this is displayed when mouse is not over the chart.chart.addLegend(legend);// CURSORvar chartCursor = new AmCharts.ChartCursor();chartCursor.cursorAlpha = 0;chart.addChartCursor(chartCursor);// SCROLLBARvar chartScrollbar = new AmCharts.ChartScrollbar();chartScrollbar.color = "#FFFFFF";chart.addChartScrollbar(chartScrollbar);// WRITEchart.write("chartdiv");});</script></head><body><div id="chartdiv" style="width:100%; height:400px;"></div></body></html>