You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
209 lines
7.4 KiB
209 lines
7.4 KiB
<!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 CHART |
|
chart = new AmCharts.AmSerialChart(); |
|
|
|
chart.dataProvider = chartData; |
|
chart.categoryField = "year"; |
|
|
|
chart.addTitle("Traffic incidents per year", 15); |
|
|
|
// AXES |
|
// Category |
|
var categoryAxis = chart.categoryAxis; |
|
categoryAxis.gridAlpha = 0.07; |
|
categoryAxis.axisColor = "#DADADA"; |
|
categoryAxis.startOnAxis = true; |
|
|
|
// Value |
|
var valueAxis = new AmCharts.ValueAxis(); |
|
valueAxis.title = "percent"; // this line makes the chart "stacked" |
|
valueAxis.stackType = "100%"; |
|
valueAxis.gridAlpha = 0.07; |
|
chart.addValueAxis(valueAxis); |
|
|
|
// GRAPHS |
|
// first graph |
|
var graph = new AmCharts.AmGraph(); |
|
graph.type = "line"; // it's simple line graph |
|
graph.title = "Cars"; |
|
graph.valueField = "cars"; |
|
graph.lineAlpha = 0; |
|
graph.fillAlphas = 0.6; // setting fillAlphas to > 0 value makes it area graph |
|
graph.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>"; |
|
chart.addGraph(graph); |
|
|
|
// second graph |
|
graph = 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 graph |
|
graph = 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); |
|
|
|
// LEGEND |
|
var legend = new AmCharts.AmLegend(); |
|
legend.align = "center"; |
|
legend.valueText = "[[value]] ([[percents]]%)"; |
|
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); |
|
|
|
// CURSOR |
|
var chartCursor = new AmCharts.ChartCursor(); |
|
chartCursor.zoomable = false; // as the chart displayes not too many values, we disabled zooming |
|
chartCursor.cursorAlpha = 0; |
|
chartCursor.valueZoomable = true; |
|
chartCursor.pan = true; |
|
chart.addChartCursor(chartCursor); |
|
|
|
// VALUE SCROLLBAR |
|
chart.valueScrollbar = new AmCharts.ChartScrollbar(); |
|
|
|
// WRITE |
|
chart.write("chartdiv"); |
|
}); |
|
</script> |
|
</head> |
|
|
|
<body> |
|
<div id="chartdiv" style="width:100%; height:400px;"></div> |
|
</body> |
|
|
|
</html> |