Looping through a JSON object in Highcharts to populate data series

I'm brand new to Java Script and I'm on a mission to loop through my JSON object and populate the Highcharts data series. You can take a look at my static demonstration of what I'm trying to achieve on JS Fiddle. Check out JsFiddle here

Any kind soul out there willing to lend me a hand with this?

Below is the JSON object that needs to be iterated through in order to fill the Highcharts data Series.

{
    "OuterKey": {
        "v4_acl": {
            "aggregate": 100,
            "S1": 40,
            "S2": 30,
            "S3": 20,
            "S4": 10
        },
        "v6_acl": {
            "aggregate": 120,
            "S1": 14,
            "S2": 13,
            "S3": 12,
            "S4": 11
        },
        "v4_qos": {
            "aggregate": 125,
            "S1": 30,
            "S2": 14,
            "S3": 17,
            "S4": 19
        },
        "v6_qos": {
            "aggregate": 80,
            "S1": 22,
            "S2": 21,
            "S3": 20,
            "S4": 23
        },
        "v4_nf": {
            "aggregate": 90,
            "S1": 20,
            "S2": 20,
            "S3": 20,
            "S4": 26
        },
        "v6_nf": {
            "aggregate": 111,
            "S1": 11,
            "S2": 44.5,
            "S3": 45,
            "S4": 80.5
        },
        "baseline": {
            "aggregate": 130,
            "S1": 60,
            "S2": 10,
            "S3": 10,
            "S4": 10
        }
    }
}

And here's a snapshot of the statically displayed rendered chart for reference.

javascriptjsonhighcharts

Answer №1

If you're looking to perform a specific transformation, the following code snippet might help:

const raw = {
    "ExampleKey": {
        "categoryA": {
            "aggregate": 100,
            "Item1": 40,
            "Item2": 30,
            "Item3": 20,
            "Item4": 10
        },
        "categoryB": {
            "aggregate": 120,
            "Item1": 14,
            "Item2": 13,
            "Item3": 12,
            "Item4": 11
        },
        "categoryC": {
            "aggregate": 125,
            "Item1": 30,
            "Item2": 14,
            "Item3": 17,
            "Item4": 19
        },
        // More categories and data entries here
    }
};

const transformedData = Object.values(raw.ExampleKey)
  .reduce((memo, v) => { 
    for (s in v) { 
      memo[s] = memo[s] || []; 
      memo[s].push(v[s]); 
    } 
    return memo; 
  }, {});
  
const series = Object.entries(transformedData)
  .map(([name, data]) => ({name, data}));

Highcharts.chart('container', {
    title: {
        text: 'Custom JSON Chart'
    },
    yAxis: {
        title: {
            text: 'JSON VALUE'
        }
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle'
    },
    xAxis: {
        categories: Object.keys(raw.ExampleKey),
        crosshair: true
    },
    series
});
#container {
min-width: 310px;
max-width: 800px;
height: 400px;
margin: 0 auto
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container"></div>

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

Sending specific names as properties

Looking to streamline my repetitive form inputs by abstracting them into a component, I want the following functionality: <InputElement title="someTitle" v-model="someName" @blur="someFunction" name="someName" type="someType"> The desired output wo ...

javascriptvue.js

Tips for including an external babel JS (ES6) file in an HTML document:

To include the babel js file in an HTML file, take a look at the code snippet below: <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudfl ...

javascriptjqueryhtmlecmascript-6babeljs

Why does the request for server parameter 'occupation=01%02' function correctly, while 'occupation=01%2C02' or 'occupation=01&occupation=02' result in an error?

There seems to be an issue with the parameter when using the API to request data from the server. The value 'occupation=01%02' works correctly when entered directly into the browser URL, but errors occur when using 'occupation=01%2C02' ...

javascriptjavaurlencodingrequest

Formatting in Cx framework: Configuring right alignment and decimal precision on NumberField

Currently, I am involved in a project that involves UI development using Cx, a new FrontEnd framework based on React. You can find more information about Cx at One of the tasks in my project involves creating a Grid with filter fields located at the top ...

javascriptreactjsfrontendnumber-formattingcxjs

Omit a certain td element from the querySelectorAll results

Greetings! I am currently working with an HTML table and I need to figure out how to exclude a specific td element from it, but I'm not sure how to go about it. Here's the HTML code: <table id="datatable-responsive" c ...

javascripthtmljavascript-objects

Is it possible for a property to be null or undefined on class instances?

Consider this TypeScript interface: export interface Person { phone?: number; name?: string; } Does having the question mark next to properties in the interface mean that the name property in instances of classes implementing the interface ca ...

javascripttypescript

When loading a page with Puppeteer using the setContent method, images may not be loaded

Currently, I am experiencing an issue with Puppeteer where it does not load resources that are specified with relative paths (such as background.png in the image src or in CSS url()). When I try to load the content of a local file using setContent(), the o ...

javascriptnode.jspuppeteerwebautomation

What is the process of adding a div to the left side of the parent element in AngularJS

I am trying to append the code on the left side of the click. My current controller code looks like this: demo.$inject = ['$scope']; demo.directive("boxCreator", function($compile){ return{ restrict: 'A', l ...

javascriptangularjs

Utilize button element with both href and onClick attributes simultaneously

I'm in the process of preparing a button that includes href and onClick. After testing it on my local environment, everything seems to be working smoothly. Do you know of any specific browsers that may encounter issues with this setup? <Button cl ...

javascriptreactjsmaterial-ui

Navigating through a series of items in VueJS can be easily accomplished by using a

Below is the Vue instance I have created: new Vue({ el: '#app', data: { showPerson: true, persons: [ {id: 1, name: 'Alice'}, {id: 2, name: 'Barbara'}, {id: 3, name: &a ...

javascriptvue.js

ASP.NET DIV is experiencing issues with Jquery functionality, causing it to flicker and remain fixed in place

As a beginner in JQuery, I am facing an issue with my code in asp.net. Whenever I click on linkbuttons, the behavior is not as expected. The div flickers and does not change its direction. My goal is to move the DIV left or right by 200px, but no matter wh ...

javascriptjquerycssasp.net

show button after the page has finished loading

I have a button similar to this: <input type="submit" id="product_197_submit_button" class="wpsc_buy_button" name="Buy" value="Add To Cart"> However, I am encountering an issue where if the user clicks the button before all scripts are loaded, an e ...

javascriptjquery

The default theme has not been specified in Tailwind CSS

During my recent project, I utilized React, Next.js in combination with Tailwind CSS. In this project, I delved into styling customization by implementing react-slick for a specialized slider. To achieve the desired aesthetic, I made modifications to the r ...

javascriptcssreactjstailwind-cssreact-slick

Showcase a sizable picture broken down into smaller sections

I am interested in creating a mapping application similar to Google Maps that can asynchronously load images from the backend. I am seeking guidance on where to begin and how to proceed in this endeavor. The ultimate goal is to have the image displayed w ...

javascriptjqueryhtml

Focus issue with MUI Custom Text Field when state changes

Currently, I've integrated the MUI library into my React Js application. In this project, I'm utilizing the controlled Text Field component to establish a basic search user interface. However, an unexpected issue has surfaced. Following a chang ...

javascriptreactjsreact-hooksmaterial-uiuse-state

Attempting to call setState (or forceUpdate) on a component that has been unmounted is not permissible in React

Hello everyone! I am facing an error message in my application after unmounting the component: Warning: Can't call setState (or forceUpdate) on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, canc ...

javascriptreactjs

Issue with parsing JSON data in jQuery Ajax requests

Trying to utilize php and jquery ajax with json datatype method for sending data. Check out the code below: $("#username").on("keyup change keypress", function () { var username = $("#username").val(); $.ajax ({ type: "POST", // method ...

phpajaxjson

Issues with AngularJS ng-bind-html failing to display list items

I am working with a basic HTML document that looks like this... <ol> <li><strong>Test 1</strong></li> <li><strong>Test 2</strong></li> </ol> ...and I am attempting to connect it to a div ...

javascripthtmlangularjsng-bind-html

Tips on assigning a data-id attribute

After a click event, I am attempting to dynamically set the data-id and/or value of a span using my JavaScript file. <span id="test"></span> Here is an example of the JavaScript code: nextLink: function(event) { $('#test').val ...

javascript

Instantiate a fresh Date object in JavaScript by passing in my specific parameter

Check out this code snippet: $(function () { var timestamp = 1443563590; //Tue, 29 Sep 2015 21:53:10 GMT var today2 = moment.unix(timestamp).tz('America/New_York').toString(); alert(today2); //var dateinNewYork = new Date(wh ...

javascriptjquerydatetime