Retrieving data from API using Javascript

Question

I'm trying to build a dynamic chart that updates every second off of this API data using CanvasJS: http://www.coincap.io/history/1day/BTC

I can't get the correct values to show. Right now it is only showing the first data set (MktCap) in the X axis. I need the data from the second set (Price). Am I messing up the keys?

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
window.onload = function() {
    var dataPoints = [];
    var chart;
    $.getJSON("http://www.coincap.io/history/1day/BTC", function(data) {  
        $.each(data, function(key, value){
            dataPoints.push({x: value[1][0], y: parseInt(value[1][1])});
        });
        chart = new CanvasJS.Chart("chartContainer",{
            title:{
                text:"Live Chart with dataPoints from External JSON"
            },
            data: [{
                type: "line",
                dataPoints : dataPoints,
            }]
        });
        chart.render();
        updateChart();
    });
    function updateChart() {
    $.getJSON("http://www.coincap.io/history/1day/BTC", function(data) {
        $.each(data, function(key, value) {
            dataPoints.push({
            x: parseInt(value[1][0]),
            y: parseInt(value[1][1])
            });
        });
        chart.render();
        setTimeout(function(){updateChart()}, 1000);
    });
    }
}
</script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
</body>
</html>

Ignacio · Accepted Answer · 2017-08-13 05:21:40Z

3

The problem is in $.each(data, ... because data is an object, with the following shape:

{
  "market_cap": [[0, 1], [1, 2], [2, 1], ...],
  "price": [[0, 21], [1, 42], [2, 11], ...],
  "volume": [[0, 10], [1, 3], [2, 2], ...],
}

When calling $.each over the object, it is iterating over the keys of the object. With you code, it is getting only two items of the array. What you would want to do is choose "price", so it will iterate over all of the items. For example:

$.each(data.price, function(key, value) {
  dataPoints.push({
    x: value[0],
    y: value[1],
  })
})

Both in the initial and updateChart functions. Please note that you don't need to use parseInt because it is already an integer. After that, you will see the correct line.

answered Aug 13, 2017 at 5:21

Ignacio

6885 silver badges17 bronze badges

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

3 Comments

Leonard Hoss Over a year ago

Thanks! It is working now. The only issue I'm having is the value[0] is being displayed as miliseconds in the chart. Is there a way to convert it to a date string (like "12-May") without needing to add a function?

Ignacio Over a year ago

Not sure about CanvasJS. Unless you use a third party library like momentjs (very useful), you could do it with just JavaScript but it will take a few lines. Please take a look into: w3schools.com/jsref/jsref_obj_date.asp . Basically, you want create a new date: new Date(value) and the call .getMonth() and .getDay(). You will need to have an array of the months strings

Sanjoy Over a year ago

Are you looking for xValueType: "dateTime"[canvasjs.com/docs/charts/chart-options/data/xvaluetype/]

Collectives™ on Stack Overflow

Retrieving data from API using Javascript

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related