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
<!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> |