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.
191 lines
6.4 KiB
191 lines
6.4 KiB
1 year ago
|
<!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>
|
||
|
|
|
||
|
|
// this chart is exactly the same as in areaStacked.html, only made using JSON except JavaScript API
|
||
|
|
|
||
|
|
var chartData = [{
|
||
|
|
"year": 2000,
|
||
|
|
"cars": 1587,
|
||
|
|
"motorcycles": 650,
|
||
|
|
"bicycles": 121
|
||
|
|
}, {
|
||
|
|
"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.makeChart("chartdiv", {
|
||
|
|
type: "serial",
|
||
|
|
dataProvider: chartData,
|
||
|
|
marginTop: 10,
|
||
|
|
categoryField: "year",
|
||
|
|
categoryAxis: {
|
||
|
|
gridAlpha: 0.07,
|
||
|
|
axisColor: "#DADADA",
|
||
|
|
startOnAxis: true,
|
||
|
|
guides: [{
|
||
|
|
category: "2001",
|
||
|
|
lineColor: "#CC0000",
|
||
|
|
lineAlpha: 1,
|
||
|
|
dashLength: 2,
|
||
|
|
inside: true,
|
||
|
|
labelRotation: 90,
|
||
|
|
label: "fines for speeding increased"
|
||
|
|
}, {
|
||
|
|
category: "2007",
|
||
|
|
lineColor: "#CC0000",
|
||
|
|
lineAlpha: 1,
|
||
|
|
dashLength: 2,
|
||
|
|
inside: true,
|
||
|
|
labelRotation: 90,
|
||
|
|
label: "motorcycle maintenance fee introduced"
|
||
|
|
}]
|
||
|
|
},
|
||
|
|
valueAxes: [{
|
||
|
|
stackType: "regular",
|
||
|
|
gridAlpha: 0.07,
|
||
|
|
title: "Traffic incidents"
|
||
|
|
}],
|
||
|
|
|
||
|
|
graphs: [{
|
||
|
|
type: "line",
|
||
|
|
title: "Cars",
|
||
|
|
hidden: true,
|
||
|
|
valueField: "cars",
|
||
|
|
lineAlpha: 0,
|
||
|
|
fillAlphas: 0.6,
|
||
|
|
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>"
|
||
|
|
}, {
|
||
|
|
type: "line",
|
||
|
|
title: "Motorcycles",
|
||
|
|
valueField: "motorcycles",
|
||
|
|
lineAlpha: 0,
|
||
|
|
fillAlphas: 0.6,
|
||
|
|
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>"
|
||
|
|
}, {
|
||
|
|
type: "line",
|
||
|
|
title: "Bicycles",
|
||
|
|
valueField: "bicycles",
|
||
|
|
lineAlpha: 0,
|
||
|
|
fillAlphas: 0.6,
|
||
|
|
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>"
|
||
|
|
}],
|
||
|
|
legend: {
|
||
|
|
position: "bottom",
|
||
|
|
valueText: "[[value]]",
|
||
|
|
valueWidth: 100,
|
||
|
|
valueAlign: "left",
|
||
|
|
equalWidths: false,
|
||
|
|
periodValueText: "total: [[value.sum]]"
|
||
|
|
},
|
||
|
|
chartCursor: {
|
||
|
|
cursorAlpha: 0
|
||
|
|
},
|
||
|
|
chartScrollbar: {
|
||
|
|
color: "FFFFFF"
|
||
|
|
}
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<div id="chartdiv" style="width:100%; height:400px;"></div>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|