• Open in:

XY chart with date-based axis

Value axis of XY (also serial) chart can accept display dates. This allows charts with two or even more date-based axes, as XY chart can have any number of value axes, on any side.

Demo source

<!-- Styles -->
<style>
#chartdiv {
  width: 100%;
  height: 500px;
}
</style>

<!-- Resources -->
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/xy.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />

<!-- Chart code -->
<script>
var chart = AmCharts.makeChart("chartdiv", {
    "type": "xy",
    "theme": "none",
    "marginRight": 80,
    "dataDateFormat": "YYYY-MM-DD",
    "startDuration": 1.5,
    "trendLines": [],
    "balloon": {
        "adjustBorderColor": false,
        "shadowAlpha": 0,
        "fixedPosition":true
    },
    "graphs": [{
        "balloonText": "<div style='margin:5px;'><b>[[x]]</b><br>y:<b>[[y]]</b><br>value:<b>[[value]]</b></div>",
        "bullet": "diamond",
        "id": "AmGraph-1",
        "lineAlpha": 0,
        "lineColor": "#b0de09",
        "fillAlphas": 0,
        "valueField": "aValue",
        "xField": "date",
        "yField": "ay"
    }, {
        "balloonText": "<div style='margin:5px;'><b>[[x]]</b><br>y:<b>[[y]]</b><br>value:<b>[[value]]</b></div>",
        "bullet": "round",
        "id": "AmGraph-2",
        "lineAlpha": 0,
        "lineColor": "#fcd202",
        "fillAlphas": 0,
        "valueField": "bValue",
        "xField": "date",
        "yField": "by"
    }],
    "valueAxes": [{
        "id": "ValueAxis-1",
        "axisAlpha": 0
    }, {
        "id": "ValueAxis-2",
        "axisAlpha": 0,
        "position": "bottom",
        "type": "date",
        "minimumDate": new Date(2014, 11, 31),
        "maximumDate": new Date(2015, 0, 13)
    }],
    "allLabels": [],
    "titles": [],
    "dataProvider": [{
        "date": "2015-01-01",
        "ay": 6.5,
        "by": 2.2,
        "aValue": 15,
        "bValue": 10
    }, {
        "date": "2015-01-02",
        "ay": 12.3,
        "by": 4.9,
        "aValue": 8,
        "bValue": 3
    }, {
        "date": "2015-01-03",
        "ay": 12.3,
        "by": 5.1,
        "aValue": 16,
        "bValue": 4
    }, {
        "date": "2015-01-04",
        "ay": 2.8,
        "by": 13.3,
        "aValue": 9,
        "bValue": 13
    }, {
        "date": "2015-01-05",
        "ay": 3.5,
        "by": 6.1,
        "aValue": 5,
        "bValue": 2
    }, {
        "date": "2015-01-06",
        "ay": 5.1,
        "by": 8.3,
        "aValue": 10,
        "bValue": 17
    }, {
        "date": "2015-01-07",
        "ay": 6.7,
        "by": 10.5,
        "aValue": 3,
        "bValue": 10
    }, {
        "date": "2015-01-08",
        "ay": 8,
        "by": 12.3,
        "aValue": 5,
        "bValue": 13
    }, {
        "date": "2015-01-09",
        "ay": 8.9,
        "by": 4.5,
        "aValue": 8,
        "bValue": 11
    }, {
        "date": "2015-01-10",
        "ay": 9.7,
        "by": 15,
        "aValue": 15,
        "bValue": 10
    }, {
        "date": "2015-01-11",
        "ay": 10.4,
        "by": 10.8,
        "aValue": 1,
        "bValue": 11
    }, {
        "date": "2015-01-12",
        "ay": 1.7,
        "by": 19,
        "aValue": 12,
        "bValue": 3
    }],

    "export": {
        "enabled": true
    },

    "chartScrollbar": {
        "offset": 15,
        "scrollbarHeight": 5
    },

    "chartCursor":{
       "pan":true,
       "cursorAlpha":0,
       "valueLineAlpha":0
    }
});
</script>

<!-- HTML -->
<div id="chartdiv"></div>