Converting Poloniex API Callback JSON into format suitable for Highcharts.Stockchart

Question

I am trying to get JSON from Poloniex's public API method (specifically the returnChartData method) to display chart history of cryptocurrencies against one another into a Highchart Stockchart graph (looking like the demo one here. ).

This is part of my JavaScript code to use the Poloniex returnChartData callback, get the JSON from it and implement it into the 'data' segment of the chart. So far it is not working and I can't for the life of me figure out what I need to change.

var poloniexUrl = "https://poloniex.com/public?command=returnChartData&currencyPair=BTC_XMR&start=1405699200&end=9999999999&period=14400";
$.getJSON(poloniexUrl, function(data){
  results = data;
});
// Creates Chart
var chart = new Highcharts.StockChart({


chart: {
 renderTo: 'cryptoChart',
 backgroundColor: 'white'
},

title: {
  text: currentTitle
},

series: [{
  data: results,
  turboThreshold: 1000
}],

xAxis: {
 original: false
},

rangeSelector: {
 selected: 1
},

plotOptions: {
 line: {
  gapSize: 2
 }
}
});

Would love any help!

Answer 1

Refer to this live demo: http://jsfiddle.net/kkulig/0f4odg5q/

If you use turboThreshold the points' options need to be given as an integer or an array ( Explanation: https://api.highcharts.com/highstock/plotOptions.series.turboThreshold ). In your case the format is JSON, so I disabled turboThreshold to prevent Higcharts error 12 ( https://www.highcharts.com/errors/12 ):

  turboThreshold: 0

$.getJSON is asynchronous - the best way to make sure that data variable is initialized is using it inside callback function (second argument of getJSON ):

$.getJSON(poloniexUrl, function(data) {

  // Creates Chart
  var chart = new Highcharts.StockChart({
    chart: {
    (...)

The data that you fetch looks like candlestick series - I changed the type of the series:

  type: 'candlestick'

Date will be properly understood by Highcharts if it's kept in the x property of JSON object (not date ):

  data: data.map((p) => {
    p.x = p.date;
    return p
  }),