JSON api timestamp + data parsing

Question

I'm making a chart using Highcharts.js

The API I'm using has a different output than what Highchart uses.

Highchart reads JSON data as [timestamp, data]

which looks something like this: [1512000000000,171.85],

furthermore, the rest of the data is parsed within the same call.

Now MY Api outputs data by a single call for each timestamp (via url &ts=1511929853 for example

outputs {"ENJ":{"USD":0.02154}} (the price for that point in time)

Now here's where things get complicated. I would need to parse the price from a certain date, till now.

I've already made a ++ variable for the timestamp, but how would I include the timestamp and the price for that timestamp within the array for the data output.

It's a bit confusing, as the calls would have to be repeated so many times to draw a historical graph of the price. Some help would be appreciated. If you need more clarification, I'm right here.

Data is parsed via data function

full code here

var startDate = 1511929853;
var endDate = Math.floor((new Date).getTime()/1000); 

  function count() {


      if (startDate != endDate) {
          startDate++
      }
      else {

      return false;
  }
  };
    count();

$.getJSON('https://min-api.cryptocompare.com/data/pricehistorical?fsym=ENJ&tsyms=USD&ts=' + startDate, function (data) {
    // Create the chart
            var enjPrice = `${data.ENJ.USD}`;

    console.log(enjPrice);

    Highcharts.stockChart('container', {

        xAxis: {
            gapGridLineWidth: 0
        },

        rangeSelector: {
            buttons: [{
                type: 'hour',
                count: 1,
                text: '1h'
            }, {
                type: 'day',
                count: 1,
                text: '1D'
            }, {
                type: 'all',
                count: 1,
                text: 'All'
            }],
            selected: 1,
            inputEnabled: false
        },

        series: [{
            name: 'AAPL',
            type: 'area',
            data: JSON.parse("[" + enjPrice + "]"),
            gapSize: 5,
            tooltip: {
                valueDecimals: 2
            }

        }]
    });
});

Could you share the code please ? Also Highcharts can take data in different formats. — eshunsharma
– eshunsharma, Commented Feb 17, 2018 at 9:28

Jefry Dewangga · Accepted Answer · 2018-02-17 09:27:39Z

1

You can use spread operator, like this,

let var = [new Date().getTime(), { ...data }.ENJ.USD]

This will result [1512000000000, 171.85] as you expected.

answered Feb 17, 2018 at 9:27

Jefry Dewangga

8491 gold badge11 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

eshunsharma · Accepted Answer · 2018-02-17 09:54:43Z

0

You need to make different functions for getting the data and generating the chart. Below is an example of how would you do it.

var startDate = 1511929853;
var endDate = Math.floor((new Date).getTime() / 1000);
var data = [];

function count() {
  if (startDate != endDate) {
    data.push(getPrice(startDate));
    startDate++;
  } else {

    generateChart();
  }
};

count();

function getPrice(timestamp) {
  $.getJSON('https://min-api.cryptocompare.com/data/pricehistorical?fsym=ENJ&tsyms=USD&ts=' + startDate, function(data) {
    return [timestamp, data.ENJ.USD];
  });
}

function generateChart() {
  Highcharts.stockChart('container', {

    xAxis: {
      gapGridLineWidth: 0
    },

    rangeSelector: {
      buttons: [{
        type: 'hour',
        count: 1,
        text: '1h'
      }, {
        type: 'day',
        count: 1,
        text: '1D'
      }, {
        type: 'all',
        count: 1,
        text: 'All'
      }],
      selected: 1,
      inputEnabled: false
    },

    series: [{
      name: 'AAPL',
      type: 'area',
      data,
      gapSize: 5,
      tooltip: {
        valueDecimals: 2
      }

    }]
  });
}

Though this is not the best way how you would do it but you get an idea.

answered Feb 17, 2018 at 9:54

eshunsharma

1719 bronze badges

3 Comments

Sanel Over a year ago

Brilliant coding. I can see where you're going with this. To my eyes it is good, I am not familiar with the data.push, but it makes sense. However I'm still having trouble generating a chart. Will be tinkering for the rest of the day with this. Thanks for the effort, man, really helpful.

eshunsharma Over a year ago

@Sanel You need to play with the code and make changes according to your needs, I could give you the whole code but you would learn better if you try on your own :)

Sanel Over a year ago

Hey there @eshunsharma I am proud to say. after studying js for a bit that I have sat down and solved the problem in mere minutes. I am so happy to say, it was such a good feeling. this is easy! Look at my comment for the code.

Sanel · Accepted Answer · 2018-02-25 13:15:24Z

I managed to solve the problem, by using a different API, which indexes data for past 30 days. I iterated into each index, 31, of them and grabbed the time and high(price) values and parsed them into a number since I was getting a "string" and then looped them into an array and put them into the final data [array]. just what I needed for the chart to work. If anyone needs any help just ask away. :) PS: Excuse the console.logs as I was using them to debug and test which helped me tremendously, you can remove them, as shall I

 $.getJSON('https://min-api.cryptocompare.com/data/histoday?fsym=ENJ&tsym=USD', function(data) {

      var x = `${data.Data[0].time}`;
      var y = `${data.Data[0].high}`;
      console.log(x);
   console.log(y);
   var tempData = [];
  console.log(tempData);

  for (var i = 0; i < 31; i++ ) {
  var a = `${data.Data[i].time}`;
  var b = `${data.Data[i].high}`;
  function numberfy(val){

    parseFloat(val);
  }
     a = parseFloat(a);
     a = a * 1000;
     b = parseFloat(b);

     x = [a , b];
     tempData.push(x);

  };

  data = tempData;
  console.log(data.length);




    Highcharts.stockChart('container', {

Collectives™ on Stack Overflow

JSON api timestamp + data parsing

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related