Date Based Data

Our serial chart can accept data as date strings, date objects or time stamps. Dates on category axis are placed at logical intervals using any <a href="/tutorials/formatting-dates/">date format</a> you want. Period beginning can be marked as bold and use a different date format. Your data can be yearly, monthly, daily, hourly, up to milliseconds - the chart will handle any time span. The chart can be zoomed-in or panned, Chart scrollbar can shows a rough graph of all your data and you can use it both to scroll or to zoom the chart to desired position. <h2>Hidden bullets</h2> If you zoom-in the chart to a smaller time span, you will notice that the bullets are displayed. When zooming-out at some point bullets are hidden. This is done to avoid a messy look. You can configure this using <strong>hideBulletsCount</strong> property of the graph. <h2>Chart Scrollbar with a graph inside</h2> In the bottom (it can also be on the top) of the chart you have a chart scrollbar which can be used to zoom-in or zoom-out the chart. This scrollbar can be just a simple one or have a graph inside it to show a rough view of how data changed over the whole period of the data available. <h2>Zoomable Value Axis</h2> Besides category axis, value axis can also be zoomable - both using vertical scrollbar and cursor. In this demo value-zooming with cursor is not enabled, as we recommend using it for one direction zooming only.

HTML

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.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" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="serialDateBasedChartDiv1"></div>

CSS

#serialDateBasedChartDiv1 {
  width: 100%;
  height: 500px;
}

JavaScript

var serialDateBasedChart_1 = AmCharts.makeChart("serialDateBasedChartDiv1", {

  "type": "serial",
  "theme": "light",
  "marginRight": 40,
  "marginLeft": 40,
  "autoMarginOffset": 20,
  "mouseWheelZoomEnabled": true,
  "dataDateFormat": "YYYY-MM-DD",
  "valueAxes": [{
    "id": "v1",
    "axisAlpha": 0,
    "gridAlpha": 0,
    "position": "left",
    "ignoreAxisWidth": true,
    "integersOnly": true,
    "labelsEnabled": false,
    "maximum": 20,
    "minimum": 1,
    "guides": [{
      "lineAlpha": 0.15,
      "value": 1,
      "label": "1"
    }, {
      "lineAlpha": 0.15,
      "value": 2,
      "label": "2"
    }, {
      "lineAlpha": 0.15,
      "value": 3,
      "label": "3"
    }, {
      "lineAlpha": 0.15,
      "value": 4,
      "label": "4"
    }, {
      "lineAlpha": 0.15,
      "value": 5,
      "label": "5"
    }, {
      "lineAlpha": 0.15,
      "value": 6,
      "label": "6"
    }, {
      "lineAlpha": 0.15,
      "value": 7,
      "label": "7"
    }, {
      "lineAlpha": 0.15,
      "value": 8,
      "label": "8"
    }, {
      "lineAlpha": 0.15,
      "value": 9,
      "label": "9"
    }, {
      "lineAlpha": 0.15,
      "value": 10,
      "label": "10"
    }, {
      "lineAlpha": 0.15,
      "value": 11,
      "label": "11"
    }, {
      "lineAlpha": 0.15,
      "value": 12,
      "label": "12"
    }, {
      "lineAlpha": 0.15,
      "value": 13,
      "label": "13"
    }, {
      "lineAlpha": 0.15,
      "value": 14,
      "label": "14"
    }, {
      "lineAlpha": 0.15,
      "value": 15,
      "label": "15"
    }, {
      "lineAlpha": 0.15,
      "value": 16,
      "label": "16"
    }, {
      "lineAlpha": 0.15,
      "value": 17,
      "label": "17"
    }, {
      "lineAlpha": 0.15,
      "value": 18,
      "label": "18"
    }, {
      "lineAlpha": 0.15,
      "value": 19,
      "label": "19"
    }, {
      "lineAlpha": 0.15,
      "value": 20,
      "label": "20"
    }]

  }],
  "balloon": {
    "borderThickness": 1,
    "shadowAlpha": 0
...