How to parse my JSON to Highcharts JSON

[saifhasn]

I’m using Highcharts stock in my Angular application and I need to understand how to parse my json data to Highcharts JSON?

MY JSON:

Code: Select all

"values": {
        "2021-02-07T02:02:00.000Z": [
            {
                "min": 2256.11,
                "max": 2256.11
            }
        ],
        "2021-02-07T06:17:00.000Z": [
            {
                "min": 2288.07,
                "max": 2288.07
            }
        ],
        "2021-02-07T10:32:00.000Z": [
            {
                "min": 2300.65,
                "max": 2300.65
            }

Required JSON:

Code: Select all

[
               1167609600000,
               0.7537
        ],
        [
               1167696000000,
               0.7537
        ],
        [
               1167782400000,
               0.7559
        ],
        [
               1167868800000,
               0.7631
        ],

MY CODE:

Code: Select all

import { Component } from "@angular/core";
import * as Highcharts from "highcharts/highstock";
import { Options } from "highcharts/highstock";

// For demonstration purposes only.
import random from "highcharts-random";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  Highcharts: typeof Highcharts = Highcharts;

  chartOptions: Options = {
    plotOptions: {
      series: {
        dataGrouping: {
          //enabled: false,
          forced: true,
          units: [["day", [1]]]
        }
      }
    },
      xAxis: {
        type: 'datetime',[code]

},
yAxis: {
gridLineWidth: 1,
title: {
text: "RO",
//textAlign : 'center',
style: { color: "purple", fontSize: "15px" }
},

plotLines: [
{
value: 3.5,

color: "red",

width: 1.5,

label: {
text: "LL"
}
},
{
value: 4,

color: "orange",

width: 1.5,

label: {
text: "L"
}
},

{
value: 5.7,

color: "red",

width: 1.5,

label: {
text: "HH"
}
},

{
value: 5,

color: "orange",

width: 1.5,

label: {
text: "H"
}
}
]
},

series: [
{
type: "line",
pointStart: Date.UTC(2010, 0, 1),
pointInterval: 24 *3600 * 1000,
data: random.data(5000)
}
]
};
}[/code]

[pawelys]

HI! Welcome to the official highcharts forum, and thanks for contacting us with your question!
You just need to write some small js function, which will do the job. I assumed you want to get something with 3 values, so I created a data format the same as here: https://api.highcharts.com/highcharts/s ... range.data

Check the following demo: https://jsfiddle.net/BlackLabel/0jwfb5ny/

In case of any further questions feel free to contact us again!
Kind regards,