shubham bhindwal shubham bhindwal - 3 months ago 34
Javascript Question

amCharts Serial Chart unable to display data after enabling data parsing "parseDates": true

I am using spring as webservice and JSON response after hitting is following:

[ {
"date": "2016-04-17",
"open": 1085.0,
"high": 1092.2,
"low": 1072.0,
"close": 1088.3,
"volume": 54100,
"value": 1088.3
}, {
"date": "2016-04-14",
"open": 1081.25,
"high": 1081.25,
"low": 1081.25,
"close": 1081.25,
"volume": 0,
"value": 1081.25
} ]


I am trying to create chart for stock analysis. When I set
"parseDates": false
graph showing data. But of course, date is not parsed. When I set
parseDates
to
true
it stops showing data.

Here's my JavaScript Code:

var chart = AmCharts.makeChart( "chartdiv", {
"type": "serial",
"theme": "light",
"dataDateFormat": "YYYY-MM-DD",
"valueAxes": [ {
"position": "left"
} ],
"graphs": [ {
"id": "g1",
"proCandlesticks": true,
"balloonText": "Open:<b>[[open]]</b><br>Low:<b>[[low]]</b><br>High:<b>[[high]]</b><br>Close:<b>[[close]]</b><br>",
"closeField": "close",
"fillColors": "#7f8da9",
"highField": "high",
"lineColor": "#7f8da9",
"lineAlpha": 1,
"lowField": "low",
"fillAlphas": 0.9,
"negativeFillColors": "#db4c3c",
"negativeLineColor": "#db4c3c",
"openField": "open",
"title": "Price:",
"type": "candlestick",
"valueField": "close"
} ],
"chartScrollbar": {
"graph": "g1",
"graphType": "line",
"scrollbarHeight": 30
},
"chartCursor": {
"valueLineEnabled": true,
"valueLineBalloonEnabled": true
},
"categoryField": "date",
"categoryAxis": {
"parseDates": false
},
"dataProvider": resp,
"export": {
"enabled": true,
"position": "top-right"
}
} );

chart.addListener( "rendered", zoomChart );
zoomChart();


function zoomChart() {
chart.zoomToIndexes( chart.dataProvider.length - 50, chart.dataProvider.length - 1 );
}

Answer

The data points on date-based chart must be ordered in ascending order. Oldest first, newest last. Looking at your data sample, it seems to be that they are in descending order.

To fix that simply call reverse() on your resp array:

resp.reverse();

Working demo:

/**
 * Source data
 */
var resp = [ {
  "date": "2016-04-17",
  "open": 1085.0,
  "high": 1092.2,
  "low": 1072.0,
  "close": 1088.3,
  "volume": 54100,
  "value": 1088.3
}, {
  "date": "2016-04-14",
  "open": 1081.25,
  "high": 1081.25,
  "low": 1081.25,
  "close": 1081.25,
  "volume": 0,
  "value": 1081.25
} ];

/**
 * Reverse array
 */
resp.reverse();

/**
 * Create chart
 */
var chart = AmCharts.makeChart( "chartdiv", {
  "type": "serial",
  "theme": "light",
  "dataDateFormat": "YYYY-MM-DD",
  "valueAxes": [ {
    "position": "left"
  } ],
  "graphs": [ {
    "id": "g1",
    "proCandlesticks": true,
    "balloonText": "Open:<b>[[open]]</b><br>Low:<b>[[low]]</b><br>High:<b>[[high]]</b><br>Close:<b>[[close]]</b><br>",
    "closeField": "close",
    "fillColors": "#7f8da9",
    "highField": "high",
    "lineColor": "#7f8da9",
    "lineAlpha": 1,
    "lowField": "low",
    "fillAlphas": 0.9,
    "negativeFillColors": "#db4c3c",
    "negativeLineColor": "#db4c3c",
    "openField": "open",
    "title": "Price:",
    "type": "candlestick",
    "valueField": "close"
  } ],
  "chartScrollbar": {
    "graph": "g1",
    "graphType": "line",
    "scrollbarHeight": 30
  },
  "chartCursor": {
    "valueLineEnabled": true,
    "valueLineBalloonEnabled": true
  },
  "categoryField": "date",
  "categoryAxis": {
    "parseDates": true
  },
  "dataProvider": resp,
  "export": {
    "enabled": true,
    "position": "top-right"
  }
} );
<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv" style="height: 200px"></div>