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="chartdiv"></div>

CSS

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

JavaScript

var pre_month = "";
var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "theme": "light",
  "usePrefixes": true,
  "legend": {
    "useGraphSettings": true,
    "position": "top"
  },
  "dataProvider": [{
      "200": "3875",
      "month": "JAN",
      "205": "310"
    },
    {
      "200": "3500",
      "month": "FEB",
      "205": "280"
    },
    {
      "200": "3875",
      "month": "MAR",
      "205": "310"
    },
    {
      "200": "3750",
      "month": "APR",
      "205": "300"
    },
    {
      "200": "3875",
      "month": "MAY",
      "205": "310"
    },
    {
      "200": "3750",
      "month": "JUN",
      "205": "300"
    },
    {
      "200": "3875",
      "month": "JUL",
      "205": "310"
    },
    {
      "200": "250",
      "month": "AUG",
      "205": "20"
    },
    {
      "200": "0",
      "month": "SEP",
      "205": "0"
    },
    {
      "200": "0",
      "month": "OCT",
      "205": "0"
    },
    {
      "200": "0",
      "month": "NOV",
      "205": "0"
    },
    {
      "200": "0",
      "month": "DEC",
      "205": "0"
    }
  ],
  "valueAxes": [{
    "axisAlpha": 1,
    "axisColor": "#cccccc",
    "gridCount": 10,
    "position": "left",
    "title": "Place taken",
    "dashLength": 5,
    "axisThickness": 2,
    "tickLength": 0

  }],
  "startDuration": 0.5,
  "graphs": [{
    "balloonText": "[[value]]",
    "bulletColorField": "selected",
    "bullet": "round",
    "title": "200",
    "valueField": "200",
    "fillAlphas": 0
  }, {
    "balloonText": "[[value]]",
    "bulletColorField": "selected",
    "bullet": "round",
    "title": "205",
    "valueField": "205",
    "fillAlphas": 0
  }],
  "chartCursor": {
    "pan": false,
    "valueLineEnabled": false,
    "valueLineBalloonEnabled": false,
    "cursorAlpha": 1,
    "cursorColor": "#e2e2d9",
    "color": "black",
    "valueLineAlpha": 1,
    "valueZoomable": true,
    "fullWidth": true
  },
  "categoryField": "month",
  "categoryAxis": {
    "gridPosition":...