V3: Line with duration on value axis
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 chartData = [
{
"date": "2012-01-01",
"distance": 227,
"duration": 6032919
},
{
"date": "2012-01-02",
"distance": 371,
"duration": 482
},
{
"date": "2012-01-03",
"distance": 433,
"duration": 562
},
{
"date": "2012-01-04",
"distance": 345,
"duration": 379
},
{
"date": "2012-01-05",
"distance": 480,
"duration": 501
},
{
"date": "2012-01-06",
"distance": 386,
"duration": 443
},
{
"date": "2012-01-07",
"distance": 348,
"duration": 405
},
{
"date": "2012-01-08",
"distance": 238,
"duration": 309
},
{
"date": "2012-01-09",
"distance": 218,
"duration": 287
},
{
"date": "2012-01-10",
"distance": 349,
"duration": 485
},
{
"date": "2012-01-11",
"distance": 603,
"duration": 890
},
{
"date": "2012-01-12",
"distance": 534,
"duration": 810
}
];
var chart;
AmCharts.ready(function () {
// SERIAL CHART
chart = new AmCharts.AmSerialChart();
chart.dataProvider = chartData;
chart.categoryField = "date";
chart.dataDateFormat = "YYYY-MM-DD";
chart.marginTop = 0;
// AXES
// category axis
var categoryAxis = chart.categoryAxis;
categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true
categoryAxis.minPeriod = "DD"; // our data is daily, so we set minPeriod to DD
categoryAxis.autoGridCount = false;
categoryAxis.gridCount = 50;
categoryAxis.gridAlpha = 0;
categoryAxis.gridColor = "#000000";
categoryAxis.axisColor = "#555555";
// we want custom date formatting, so we change it in next line
categoryAxis.dateFormats = [{
period: 'DD',
format: 'DD'
}, {
period:...