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

Comparing JSON data strings on Android with different strings

After fetching data from a MySQL database and displaying it in JSON format, I encountered an issue with comparing strings. According to the logs, all the necessary data is present. try{ JSONArray jArray = new JSONArray(result); for(int i=0;i< ...

androidjsonstringcompare

What is the best way to swap out one component for another in a design?

I am working with a component that has the selector 'app-view', and I need to replace a specific part of the template: <div> content </div> The part that needs to be replaced will be substituted with another component: selector: &a ...

javascriptangulartypescript

How can angular/typescript be used to convert a percentage value, such as 75.8%, into a number like 75.8?

I have obtained a value (for example, "75.8%") as a string from an API and I need to convert it to a number in order to apply conditions. For instance: <div class="container" [ngClass]="{ 'pos' : value > 0, ...

angulartypescript

Transferring information from a mobile app on an Android device to a web-based server through a data stream

Currently, I am working on developing an Android app that retrieves vehicle data in the form of a JSON array and then displays it on the screen dashboard. However, I am facing an issue when trying to upload this data to a remote HTTP server for future use. ...

androidjsonnode.jshttpserver

What is the best way to display multiple HTML files using React?

Looking to develop a web application using React that consists of multiple HTML pages. For instance, login.html and index.html have been created and linked to URIs through the backend - resulting in localhost:8080/login and localhost:8080/index. However, R ...

htmltypescriptreact-nativejsxtsx

Saving JSON data within a List

Currently, I am working on scraping a series of websites with similar formats such as www.website1.com, www.website2.com, www.website3.com, and so on. In order to extract JSON data from each website, I have implemented a code snippet that includes a "time ...

rjsonloops

Is it possible to locate/create a JSON keyname in a jQuery $.post function?

Currently, I am diving back into the world of Ajax after a long break. At this point, I have created a page that is able to fetch a dynamic number of elements (initially ten, but this can change), and populates each of the ten divs with relevant text. In ...

jqueryarraysajaxjsonfor-loop

An error has occurred: Type 'x' is not compatible with type 'x' (during Vercel deployment)

I encountered an issue during Vercel deployment which displays the following error message: - Type error: Type ' ({ params }: DashboardPageProps) = Promise' is not compatible with type 'FC<.DashboardPageProps>' Type 'Promise ...

typescriptnext.jsvercel

What is the best way to determine the accurate true or false outcome from a JSON assertion in JMeter?

Our task involves the identification of "elements" and then determining whether they are true or false. { "first": { "second": [ { "element": 1, "elementrec": null, "enabled": true, ...

jsonjmeterresponseextractor

"Utilize JavaScript to extract data from JSON and dynamically generate a

I'm currently facing an issue with reading JSON data and populating it in my HTML table. The function to load the JSON data is not working as expected, although the data typing function is functioning properly. I have shared my complete HTML code alo ...

javascripthtmljson

Exporting data in JSON format using Python's `

My JSON file has the following structure: {"environment": "production", "classes": {"nfs::server": {"exports": ["/srv/share1","/srv/share3"]}} } When I execute this code using Python 3.6 fp=open('example.json', 'r') data=json. ...

pythonjson

The issue is that TypeScript is indicating that the type 'string | string[]' cannot be assigned to the type 'string'

https://i.sstatic.net/ZaJvb.pngI recently upgraded to Angular 16 and encountered an issue with an @Input() property of type string | string[]. Prior to the upgrade, everything was functioning correctly, but now I am experiencing errors. I am uncertain abou ...

angulartypescriptangular16

Develop interactive web applications using Typescript

Having difficulty compiling and executing the project correctly in the browser. The "master" branch works fine, but I'm currently working on the "develop" branch. It's a basic web project with one HTML file loading one TS/JS file that includes i ...

javascripthtmltypescriptweb

Retrieving JSON data from Firebase and transforming it into an array containing identical values [Swift]

Recently, I've been working with a JSON database in Firebase that looks something like the snippet below: "Trips" : { "-KnH34F_WZYNHMsTzj0X" : { "Distance" : 500, "Transport" : "Walk", "TripName" : "Work" ...

arraysjsonswiftfirebaseappend

Mastering Generic Types in Functions in Typescript

My current structure looks like this: export interface Complex { getId<T>(entity: T): string } const test: Complex = { getId<Number>(entity){return "1"} // encountering an error 'entity is implicitly any' } I am wondering w ...

javascripttypescript

Potential Issue: TypeScript appears to have a bug involving the typing of overridden methods called by inherited methods

I recently came across a puzzling situation: class A { public method1(x: string | string[]): string | string[] { return this.method2(x); } protected method2(x: string | string[]): string | string[] { return x; } } class B extends A { prot ...

typescriptinheritancemethodsoverriding

Encountering an error with loading in Angular may require a suitable loader

I am currently working on integrating an AWS QuickSight dashboard into an Angular application. For implementation in Angular, I am referring to the following URL: https://github.com/awslabs/amazon-quicksight-embedding-sdk Could someone provide me with sa ...

node.jsangulartypescriptaws-sdkangular-components

Determine the value of a specific key by referencing another key within the same node of a JSON file in C#

My goal is to extract the status of a component within this JSON structure. { "data": { "id": 0, "name": "name1", "childFolders": [ { "id": 60, "name": "name2", "chil ...

c#jsonjson.net

The code you provided is not a valid status code and has resulted in a RangeError [ERR_HTTP

Upon attempting to access http://localhost:5000/express_backend, the following error message is displayed in its entirety: https://i.sstatic.net/q0Fx3.png An issue occurred when trying to send a JSON object to the server. The content of my server.js fil ...

node.jsjsonexpress

Vue cannot detect the component that is provided by my plugin

This unique plugin, currently only includes a single component (coded in TypeScript): import _Vue, { PluginObject } from "Vue"; import MyComponent from "./MyComponent.vue"; const VuePlugin: PluginObject<void> = { install(Vue: typeof _Vue): void { ...

typescriptvue.jsvuejs2vue-component