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.

by Rohit Bisht

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

CSS

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

JavaScript

var cummulative_vs_actual_remaining_budget = AmCharts.makeChart("cumulative_vs_actual_remaining_budget", {
  "theme": "light",
  "type": "serial",
  "autoMargins": false,
  "marginTop": 10,
  "marginBottom": 30,
  "marginLeft": 50,
  "marginRight": 0,
  "bold": false,
  "dataProvider": [{
    "months": "Jan",
    "Cumulative_Till_Month": 3.5,
    "Cumulative_Budget": 4.2,
    "Cumulative_Remaining_Budget": 5.2
  }, {
    "months": "Feb",
    "Cumulative_Till_Month": 1.7,
    "Cumulative_Budget": 3.1,
    "Cumulative_Remaining_Budget": 1.2
  }, {
    "months": "Mar",
    "Cumulative_Till_Month": 2.8,
    "Cumulative_Budget": 2.9,
    "Cumulative_Remaining_Budget": 1.3
  }, {
    "months": "Apr",
    "Cumulative_Till_Month": 2.6,
    "Cumulative_Budget": 2.3,
    "Cumulative_Remaining_Budget": 2
  }, {
    "months": "May",
    "Cumulative_Till_Month": 1.4,
    "Cumulative_Budget": 2.1,
    "Cumulative_Remaining_Budget": 6.2
  }, {
    "months": "Jun",
    "Cumulative_Till_Month": 2.6,
    "Cumulative_Budget": 4.9,
    "Cumulative_Remaining_Budget": 0.2
  }, {
    "months": "Jul",
    "Cumulative_Till_Month": 6.4,
    "Cumulative_Budget": 7.2,
    "Cumulative_Remaining_Budget": 1.2
  }, {
    "months": "Aug",
    "Cumulative_Till_Month": 8,
    "Cumulative_Budget": 7.1,
    "Cumulative_Remaining_Budget": 5.2
  }, {
    "months": "Sep",
    "Cumulative_Till_Month": 5.9,
    "Cumulative_Budget": 10.1,
    "Cumulative_Remaining_Budget": 2.2
  }, {
    "months": "Oct",
    "Cumulative_Till_Month": 9.9,
    "Cumulative_Budget": 11.1,
    "Cumulative_Remaining_Budget": 2.2
  }, {
    "months": "Nov",
    "Cumulative_Till_Month": 6.9,
    "Cumulative_Budget": 3.1,
    "Cumulative_Remaining_Budget": 3.2
  }, {
    "months": "Dec",
    "Cumulative_Till_Month": 6.9,
    "Cumulative_Budget": 1.1,
    "Cumulative_Remaining_Budget": 4.2
  }],
  "valueAxes": [{
    "position": "left",
    "title": "Budget",
  }],
  "startDuration": 1,
  "graphs": [{
    "balloonText": "Cumulative...