Question 49600 in Javascript Question posted in
A very good W3school tutorial can be found here.

How to make json format match? – Javascript

I have followed a tutorial to create a candlestick graph in javascript ajax. But now I want to implement an api so there can be a chosen timescale instead of a fixed one in the json file used by the tutorial.

The format of the original:

`{
    "x": 1483381800000,
    "y": [
        65.860001,
        66.139999,
        64.599998,
        65.400002
    ]
}`

I’m not sure what x is referring to but I’m assuming it has to be time, though not sure why it’s that value.
But for the y it is [open,high,low,close] as I compared them to the api’s values.

The format from my api:

`{
        "datetime": "2017-01-03",
        "open": "65.86000",
        "high": "66.14000",
        "low": "64.60000",
        "close": "65.40000",
        "volume": "9519838"
 }`

How can I convert this to the format of the original so that the code from the tutorial still works?
This is the actual code:

`function parseData(result) {
    console.log(result.values);
        for (var i = 0; i < result.length; i++) {
    dps.push({
        x: result[i].datetime,
        y: result[i].open
        });
    }
    chart.render();
}`

Here is the whole code I have set the ticker and TDKEY variables:

<html>
<head>
<script>
window.onload = function() {

var dps = [];
var chart = new CanvasJS.Chart("chartContainer", {
zoomEnabled: true,
exportEnabled: true,
title: {
    text: (ticker+" Stock Price")
},

axisX: {
    valueFormatString: "DD MMM"
},
axisY: {
    title: "Price",
    interval: 5,
    prefix: "$"
},
data: [{
    type: "candlestick",
    name: ticker+" Stock Price",
    showInLegend: true,
    yValueFormatString: "$##0.00",
    xValueType: "dateTime",
    dataPoints: dps
}]
});

$.getJSON("https://api.twelvedata.com/time_series?start_date=2020-05-06&outputsize=5&symbol="+ticker+"&interval=1day&apikey="+TDKEY, parseData);

function parseData(result) {
    console.log(result.values);
    for (var i = 0; i < result.length; i++) {
        dps.push({
            x: result[i].datetime,
            y: result[i].open
        });
        }
     chart.render();
}

}
</script>
</head>
<body>
<div id="chartContainer" style="height: 370px; width: 100%;"> 
</div>
<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/jquery.canvasjs.min.js"> 
</script>
</body>
</html>
Tags:

2

Answers


  1. 0

    Should be able to do

    function parseData(result) {    
    for (var i = 0; i < result.length; i++) {
        var date = new Date(result[i].datetime);

        dps.push({
          x: date.getTime(),
          y: result[i].open
        });
    }
    chart.render();
}
    Login or Signup to reply.
  2. 0

    If you are right and the original and the "x" in the original format are datetime, then as we can see, they must be in miliseconds.

    With this simple code, we can convert miliseconds to datetime in javascript

    const x = 1483381800000; // timestamp
const date = new Date(x); // create a new Date object
console.log(date); // Mon Jan 02 2017 15:30:00 GMT-0300 (Argentina Standard Time)

    To convert this new date to miliseconds again, just do this

    // date is a datetime object.
console.log(date.getTime()) // datetime in miliseconds

    Now you must be extremely careful when working with dates because of the time zone difference, Keep this in mind when doing this kind of stuff.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search