Converting custom JSON data into Highcharts Angular Series data: A simple guide

I am struggling to convert a JSON Data object into Highcharts Series data. Despite my limited knowledge in JS, I have attempted multiple times without success: 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 transformed into the following format where mdate is displayed on the x-axis categories and Matrix serves as the title.

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

    },

]

I would greatly appreciate any assistance in resolving this issue. Thank you in advance.

jsontypescriptobjecthighcharts

Answer №1

If you're looking for the simplest method, one option is to utilize the JavaScript array map() function. This enables you to alter the data accordingly.

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

Illustrative 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 chartData = jsonData.Matrix.map((item, index) => ({
  name: `m-${index + 1}`,
  data: [item.mvalue, item.mt, item.mb]
}));

console.log(chartData);


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

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

<figure class="highcharts-figure">
    <div id="container"></div>
</figure>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The abundance of information presented in the "object" type, specifically "[object Object]," prevents serialization as JSON. It is advised to exclusively provide data types that are JSON

Utilizing NextJS, I initially made internal calls to a /api route using fetch(). However, for production, it was evident that internal api calls within getServerSideProps are not allowed. Consequently, I am attempting to directly access my MongoDB database ...

javascriptreactjsjsonnext.js

The property length is undefined and cannot be read

I'm currently utilizing a dexi.io robot for the purpose of automating data extraction from permit databases. This particular robot has the capability to process custom JavaScript in order to dissect the incoming JSON object. While this code does func ...

javascriptjsonrestparsing

Check the @versionColumn value for validation prior to the entity save operation in TypeORM

I am currently in the process of saving data in a PostgreSQL database using TypeORM with NestJS integration. The data I am saving includes a version property, which is managed using TypeORM's @VersionColumn feature. This feature increments a number ea ...

node.jstypescriptnestjstypeorm

Stop webpack from stripping out the crypto module in the nodejs API

Working on a node-js API within an nx workspace, I encountered a challenge with using the core crypto node-js module. It seems like webpack might be stripping it out. The code snippet causing the issue is: crypto.getRandomValues(new Uint32Array(1))[0].toS ...

node.jstypescriptwebpacknx-workspace

Can the Gson Reader only be read once?

Currently, I am experimenting with the Gson parser for handling Json objects and object model. One puzzling aspect that I have come across is why a Reader can only read once? For instance, consider the following code snippet: Reader targetReader = new St ...

androidgsonjson

JavaScript - convert the values of an array within a JSON object into separate strings

I am receiving a JSON object from an API, and my next step involves some string analysis of each key value. This process works perfectly for 90% of the objects I receive because the key values are strings. { ID: '0012784', utm_source: 'webs ...

javascriptarraysjson

Utilizing the useSelect hook in Typescript to create custom types for WordPress Gutenberg, specifically targeting the core/editor

As I delve into development with WordPress and the Gutenberg editor, my goal is to incorporate TypeScript into the mix. However, I encounter a type error when trying to utilize the useSelect() hook in conjunction with an associated function from the core/e ...

reactjstypescriptwordpresswordpress-gutenberg

Can someone please provide me with the correct syntax for a jQuery AJAX PUT request that is JSON encoded?

Here is the ajax PUT request that I have written: jQuery.ajax({ url: url_lab_data+"backend/read/{\"f_anid\":"+anid+"}", type: "PUT", data: JSON.stringify({"read": 1}), ...

jqueryajaxjsonrequestput

Discover how to effortlessly unveil JSON data by clicking on data retrieved from an API

After successfully parsing data from a Tumblr API, I encountered an issue when introducing tags within the body description, which includes images and hyperlinks. The main task at hand is to create a list of blog titles where the corresponding blog descri ...

jqueryhtmljsonajaxapi

"Troubleshooting issues with data loading using React's useEffect function

While working on my project, I encountered a strange issue where the isLoading state is being set to false before the data fetching process is completed. I am using the useEffect hook to show a loading spinner while fetching data from an API, and then disp ...

javascriptreactjstypescriptreact-hooks

No matter what I attempt, Ng-options is still failing to work properly

This is my custom selection element: <select ng-options="country.country for country in countries" formControlName="country"></select></label> Below is the TypeScript component code associated with it: import { Component } from ' ...

htmlangulartypescript

Would you like to learn how to display the value of a different component in this specific Angular 2 code and beyond

Hey there, I need your expertise to review this code and help me locate the issue causing variable "itemCount" to not display any value in about.component.html while everything works fine in home.component.html. I am attempting to only show "itemCount" in ...

javascriptangulartypescript

Understanding the basics of Maven imports: troubleshooting class not found errors

After adding the following to my pom.xml: <dependency> <groupId>org.json</groupId> <artifactId>json</artifactId> <version>20170516</version> </dependency> The desired json classes, such as JSONArray, ...

javajsonmavenimport

The name property of event.currentTarget is now being returned as currentTarget

I am facing an issue with my handleChange function in typescript. When I try to retrieve the name attribute from a text field and log it, it returns 'currentTarget' instead of the assigned name. Additionally, the value is showing up as undefined. ...

reactjstypescriptmaterial-uijsx

Retrieving information from a local JSON file in Vue.js using the jQuery $.getJSON() method

Currently, I am in the process of developing a demo application using Vuejs which involves extracting map data from a local .json file. The extracted data is then used to obtain specific information like latitude and longitude values that are necessary for ...

javascriptjqueryjsonvuejs2vue-component

Disable the yellow curly error lines in Visual Studio Code

Currently, I am utilizing VSCode with ESlint for Typescript development. I'm curious about how to turn off or remove the yellow curled error lines in my code editor, like the ones displayed in this example image: https://i.stack.imgur.com/Zdtza.png M ...

typescriptvisual-studio-codeeslint

Slanting Line Element within Rate Limit Status JSON Data

According to the Twitter Rest API 1.1, the number of queries that can be performed in a 15-minute window is limited to 180. I am interested in finding out my remaining query count. The documentation can be found here. However, there seems to be an issue w ...

phpjsontwitterslash

Encountering a Jackson class not found exception in Spring MVC when working with JSON data

I am having trouble getting Spring's JSON support to work properly. In my spring-servlet.xml file, I have included the following lines: <mvc:annotation-driven/> <context:component-scan base-package="my.packagename.here" /> <context:ann ...

jsonspring-mvcjackson

How can Cucumber be used to validate data from multiple JSON files?

I am currently working with a collection of JSON files within my automation framework. Each JSON file consists of an array containing multiple similar JSON objects. My goal is to utilize these files for validation in a web application using Cucumber and Se ...

javajsonseleniumcucumbergson

What is the best approach for implementing recursion within a foreach loop in TypeScript?

Problem Situation I am attempting to develop a customized typewriting effect similar to the one demonstrated here with a 100ms delay using Angular. The TypeScript code I have written for this purpose is as follows: private arr: string[] = ["Lead Dev ...

angulartypescriptrecursion