Highcharts 股票图表未显示自定义数据

Question

I am trying out the highcharts stock chart. This is the official Fiddle , which works on data from this URL :

I am trying out the same code with a slightly different data form, which I have tweaked in code to resemble exactly the same as in the official demo. This is the URL from which I am fetching the data , and this is the code which tweaks that data to make it look like the official data.

var realData = data["Time Series (5min)"];
    
    for (var k in realData)
    {
        var someDate = new Date(k);
            someDate = someDate.getTime();

        var val = realData[k];
        var li = [];
      var vol = [];
      li.push(someDate);
      
      li.push(val["1. open"]);
      li.push(val["2. high"]);
      li.push(val["3. low"]);
      li.push(val["4. close"]);
      ohlc.push(li);
      
      vol.push(val["1. open"]);
      vol.push(val["5. volume"]);
      
      volume.push(vol);
    }

However, as you can see in the output, I am getting a blank pane and not the custom data based chart. Any pointer towards fixing this will be helpful.

Edit. Made some changes in the data tweaking based on an answer below, but still I get a weird looking vertical chart here. What I was expecting was a horizontal chart, since the stock value remains constant throughout the day:

Answer 1

Your values were strings and not numbers also first value of element in volume should be timestamp, if you switch your loop to this it works

    for (var k in realData)
    {
    
      var someDate = new Date(k);
      someDate = someDate.getTime();

      var val = realData[k];
      var li = [];
      var vol = [];
      li.push(someDate);
      
      li.push(val["1. open"]);
      li.push(val["2. high"]);
      li.push(val["3. low"]);
      li.push(val["4. close"]);
      ohlc.push(li.map(x=>Number(x)));
      
      vol.push(someDate);
      vol.push(Number(val["5. volume"]))
      
      volume.push(vol);
    }

also don't use var and preferably don't mutate everything

Answer 2

In addition to converting string values to numbers, you need to reverse your data order.

    var ohlc = [],
        volume = [],
        dataLength = data.length,
        i = 0;

    var realData = data["Time Series (5min)"];

    for (var k in realData) {
        var someDate = new Date(k);
        someDate = someDate.getTime();

        var val = realData[k];
        var li = [];
        var vol = [];
        li.push(someDate);

        li.push(Number(val["1. open"]));
        li.push(Number(val["2. high"]));
        li.push(Number(val["3. low"]));
        li.push(Number(val["4. close"]));
        ohlc.push(li);

        vol.push(someDate);
        vol.push(Number(val["5. volume"]))
        volume.push(vol);
    }

    Highcharts.stockChart('container', {
        ...,
        series: [{
            ...,
            data: ohlc.reverse(),
        }, {
            ...,
            data: volume.reverse()
        }]
    });

---

Live demo: https://jsfiddle.net/BlackLabel/21aw98j7/