V3: Area with time based data
HTML
<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/serial.js"></script>
<div id="chartdiv" style="width: 100%; height: 362px;"></div>
JavaScript
var chart;
var chartData = [];
AmCharts.ready(function () {
// first we generate some random data
var firstDate = new Date();
// now set 1000 minutes back
firstDate.setMinutes(firstDate.getDate() - 1000);
// and generate 1000 data items
for (var i = 0; i < 10; i++) {
var newDate = new Date(firstDate);
// each time we add one minute
newDate.setMinutes(newDate.getMinutes() + i);
// some random number
var visits = Math.round(Math.random() * 40) + 10;
// add data item to the array
chartData.push({
date: newDate,
visits: visits
});
}
// SERIAL CHART
chart = new AmCharts.AmSerialChart();
chart.pathToImages = "http://www.amcharts.com/lib/3/images/";
chart.dataProvider = chartData;
chart.categoryField = "date";
//chart.plotAreaFillColors = "#000000";
// AXES
// Category
var categoryAxis = chart.categoryAxis;
categoryAxis.parseDates = true; // in order char to understand dates, we should set parseDates to true
categoryAxis.minPeriod = "mm"; // as we have data with minute interval, we have to set "mm" here.
categoryAxis.gridAlpha = 0.07;
categoryAxis.axisColor = "#DADADA";
// Value
var valueAxis = new AmCharts.ValueAxis();
valueAxis.gridAlpha = 0.07;
valueAxis.title = "Unique visitors";
valueAxis.axisColor = "#DADADA";
chart.addValueAxis(valueAxis);
// GRAPH
var graph = new AmCharts.AmGraph();
graph.type = "line"; // try to change it to "column"
graph.title = "red line";
graph.valueField = "visits";
graph.lineAlpha = 1;
graph.behindColumns = true;
graph.lineColor = "#d13f9a";
fillColorsField
graph.fillColors = ['#ff661b', '#fdddcd','#ff661b', '#fdddcd','#ff661b', '#fdddcd','#ff661b', '#fdddcd','#ff661b', '#fdddcd','#ff661b', '#fdddcd','#ff661b', '#fdddcd','#ff661b', '#fdddcd','#ff661b',...