Search code examples
jquerychartsgoogle-visualization

Google Charts , getting data from JSON

I am currently trying to build a chart, that contains financial values as well as dates, which however seem to be UNIX timestamps, however I am unable to get these into Google Charts.

Here is my current code in which I specify the key to be prices:

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

  <script src="https://www.gstatic.com/charts/loader.js"></script>

  <script type="text/javascript">
     google.charts.load('current', {'packages':['corechart']});
     google.charts.setOnLoadCallback(drawChart);
     function drawChart() {
  var jsonData = $.ajax({
     url: "prices.json",
     dataType: "json",
     async: false
  }).responseJSON;
  var key = "prices";
  var ar = Object.entries(jsonData[key]).map(([a, b]) => [a, Number(b)]);
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'date');
  data.addColumn('number', 'value');
  data.addRows(ar);
  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(data, {width: 800, height: 400});
  }
  </script>
  <div id="chart_div" style="width: 100%; height: 100%"></div>

And here the contents of the JSON file:

{
    "prices": [
    [
        1660694400000,
        1.3773296984378443
    ],
    [
        1660780800000,
        1.4831769984789143
    ],
    [
        1660867200000,
        1.4806663666679991
    ],
    [
        1660897499000,
        1.3085747624144402
    ]
    ]
}

Using everything you see here above I am still just getting an empty chart

enter image description here

Some expert help would be greatly appreciated, thank you very much

Solution

  • You are parsing your JSON incorrectly which will give a NaN as you are trying to parse an array to a Number

    Here is the correct way to parse 1st key of prices as Date and second as Number

    Object.entries(jsonData["prices"]).map(([a, b]) => [new Date(b[0]).toLocaleDateString("en-US"), b[1]]]);

    Also, you need to encapsulate the logic in a drawChart function as it is used as a callback (if you haven't done already)

    Here is the Working Code below

    google.charts.load('current', {
  'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var jsonData = {
    "prices": [
      [
        1660694400000,
        1.3773296984378443
      ],
      [
        1660780800000,
        1.4831769984789143
      ],
      [
        1660867200000,
        1.4806663666679991
      ],
      [
        1660897499000,
        1.3085747624144402
      ]
    ]
  };
  var key = "prices";
  var ar = Object.entries(jsonData["prices"]).map(([a, b]) => [new Date(b[0]).toLocaleDateString("en-US"), b[1]]);
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'date');
  data.addColumn('number', 'value');
  data.addRows(ar);
  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(data, {
    width: 800,
    height: 400
  });
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://www.gstatic.com/charts/loader.js"></script>

<div id="chart_div" style="width: 100%; height: 100%"></div>