Overlapping Area Chart
HTML
<script type="text/javascript" src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/serial.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/themes/none.js"></script>
<div id="chartdiv"></div>
CSS
#chartdiv {
width : 100%;
height : 500px;
}
JavaScript
var chartData = generateChartData();
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "none",
"pathToImages": "http://www.amcharts.com/lib/3/images/",
"legend": {},
"dataProvider": chartData,
"valueAxes": [{
// stackType control the stacking behaviour of the graphs
// http://docs.amcharts.com/3/javascriptcharts/ValueAxis#stackType
"stackType": "none",
"position": "left"
}],
"graphs": [{
"title": "Red",
"valueField": "visits",
"fillAlphas": 1
}, {
"title": "Yellow",
"valueField": "hits",
"fillAlphas": 1
}, {
"title": "Green",
"valueField": "views",
"fillAlphas": 1
}],
"chartScrollbar": {},
"chartCursor": {},
"categoryField": "date",
"categoryAxis": {
"parseDates": true,
"axisColor": "#DADADA",
"minorGridEnabled": true
}
});
chart.addListener("dataUpdated", zoomChart);
zoomChart();
// generate some random data, quite different range
function generateChartData() {
var chartData = [];
var firstDate = new Date();
firstDate.setDate(firstDate.getDate() - 100);
for (var i = 0; i < 100; i++) {
// we create date objects here. In your data, you can have date strings
// and then set format of your dates using chart.dataDateFormat property,
// however when possible, use date objects, as this will speed up chart rendering.
var newDate = new Date(firstDate);
newDate.setDate(newDate.getDate() + i);
var visits = Math.round(Math.random() * 100) + 50;
var hits = Math.round(Math.random() * 100) + 50;
var views = Math.round(Math.random() * 100) + 50;
chartData.push({
date: newDate,
visits: visits,
hits: hits,
views: views
});
}
return chartData;
}
function zoomChart(){
chart.zoomToIndexes(chart.dataProvider.length - 20,...