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
Some expert help would be greatly appreciated, thank you very much
CodePudding user response:
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>