Question 185196 in Json Question posted in
Our archive of expertly curated questions and answers provides insights and solutions to common problems related to this popular data interchange format. From parsing and manipulating JSON data to integrating it with various programming languages and web services, our archive has got you covered. Start exploring today and take your JSON skills to the next level

How to Convert my custom JSON data Object into Highcharts Angular Series data?

I have some JSON Data object and its needs to convert into Highchyour textarts Series data, I tried lot with my minimal knowledge in JS, but I can’t:
Json Object:


{"Matrix":[{"mdate":2002-02-09,"mvalue":33.0,"mt":23,"mb":99},
{"mdate":2002-02-09,"mvalue":34.0,"mt":23,"mb":99},
{"mdate":2002-03-09,"mvalue":39.0,"mt":23,"mb":99},
{"mdate":2002-04-09,"mvalue":340.0,"mt":23,"mb":99},
{"mdate":2002-05-09,"mvalue":348.0,"mt":23,"mb":99}
]
}

The above data needs to be converted to be like below:
and I want to display the mdate on x axis categories and the Matrix as title.

series: [
    {
      name: 'm-1',
      data: [33.0,23,99],
    }, {
      name: 'm-2',
      data: [34.0,23,99],

    },

]

Please help me out to fix this , Thanks in Advance.

Tags:

2

Answers


  1. 0

    To convert your JSON data object into Highcharts Angular series data, you can iterate over the "Matrix" array in your JSON and transform each item into the desired format. Here’s an example of how you can achieve this:

    // Assuming you have your JSON data stored in a variable called jsonData
const jsonData = {
  "Matrix": [
    {"mdate": "2002-02-09", "mvalue": 33.0, "mt": 23, "mb": 99},
    {"mdate": "2002-02-09", "mvalue": 34.0, "mt": 23, "mb": 99},
    {"mdate": "2002-03-09", "mvalue": 39.0, "mt": 23, "mb": 99},
    {"mdate": "2002-04-09", "mvalue": 340.0, "mt": 23, "mb": 99},
    {"mdate": "2002-05-09", "mvalue": 348.0, "mt": 23, "mb": 99}
  ]
};

// Create an empty array to store the converted series data
const seriesData = [];

// Iterate over each item in the "Matrix" array
jsonData.Matrix.forEach(item => {
  // Create an object for each item in the desired format
  const seriesItem = {
    name: `m-${item.mvalue}`,
    data: [item.mvalue, item.mt, item.mb]
  };

  // Push the converted item to the series data array
  seriesData.push(seriesItem);
});

// Output the converted series data
console.log(seriesData);

    This code will iterate over each item in the "Matrix" array and create an object for each item in the desired format. The name property is set to m- followed by the mvalue from each item. The data property is an array containing mvalue, mt, and mb from each item. The converted series data is then pushed into the seriesData array.

    Make sure to adjust the code according to your Angular component and Highcharts configuration. You can assign the seriesData to your Highcharts configuration object or use it as needed in your application.

    Login or Signup to reply.
  2. 0

    The easiest way I could think of is the JavaScript array map() function. This will allow you to transform the data.

    highchartData = jsonData.Matrix.map((item, index) => ({
  name: `m-${index + 1}`,
  data: [item.mvalue, item.mt, item.mb]
}));

    Sample HighChart:

    const jsonData = {
  "Matrix": [{
      "mdate": "2002-02-09",
      "mvalue": 33.0,
      "mt": 23,
      "mb": 99
    },
    {
      "mdate": "2002-02-09",
      "mvalue": 34.0,
      "mt": 23,
      "mb": 99
    },
    {
      "mdate": "2002-03-09",
      "mvalue": 39.0,
      "mt": 23,
      "mb": 99
    },
    {
      "mdate": "2002-04-09",
      "mvalue": 340.0,
      "mt": 23,
      "mb": 99
    },
    {
      "mdate": "2002-05-09",
      "mvalue": 348.0,
      "mt": 23,
      "mb": 99
    }
  ]
};

const highchartData = jsonData.Matrix.map((item, index) => ({
  name: `m-${index + 1}`,
  data: [item.mvalue, item.mt, item.mb]
}));

console.log(highchartData);


Highcharts.chart('container', {
    series: highchartData

});
    <script src="https://code.highcharts.com/highcharts.js"></script>

<figure class="highcharts-figure">
    <div id="container"></div>
</figure>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search