Generate Highchart Column Using JSON Data

Question

Generate Highchart Column Using JSON Data

I am currently working on a project that requires me to create a column chart using Highchart. To populate the data, I am utilizing $.ajax and the JSON data structure I have looks like this:

[{
    "city": "Tokyo",
    "totalA": "10",
    "totalB": "15"
},
{
    "city": "Seoul",
    "totalA": "20",
    "totalB": "27"
},
{
    "city": "New York",
    "totalA": "29",
    "totalB": "50"
}]

I would like my resulting JSON string to follow this format:

[{
"name": "city",
"data": ["Tokyo", "Seoul", "New York"]
}, {
"name": "totalA",
"data": [10, 20, 29]
}, {
"name": "totalB",
"data": [15, 27, 50]
}]

Your guidance on achieving this outcome is greatly appreciated. Thank you.

javascript ajax json highcharts

Answer 1

Answer №1

Assuming all the elements share the same structure (having identical fields): Check out this Live Example

// src is the source array
// Retrieve the fields from the first element
var fields = Object.keys(src[0]);

// Map each key to...
var result = fields.map(function(field) {
    // Extract data from the original source array
    var data = src.reduce(function(result, el) {
        // Create an array of data
        return result.concat(el[field]);
    }, []);
    // Format the data as desired
    return {name: field, data: data};
});

console.log(result);

If the elements have different structures, the code becomes a bit more complex: View the Live Example here

// Determine the fields by iterating through all elements
// Add keys not yet encountered to an array
var fields = src.reduce(function (fields, current) {
    return fields.concat(Object.keys(current).filter(function (key) {
        return fields.indexOf(key) === -1;
    }));
}, []);

var result = fields.map(function (field) {
    // Another step required here to filter out elements
    // lacking the specific field we're interested in
    var data = src.filter(function (el) {
        return !!el[field];
    })
    // Proceed with the steps mentioned above.
    .reduce(function (result, el) {
        return result.concat(el[field]);
    }, []);
    return {
        name: field,
        data: data
    };
});

console.log(result);

Answer 2

Assuming all the elements share the same structure (having identical fields): Check out this Live Example

// src is the source array
// Retrieve the fields from the first element
var fields = Object.keys(src[0]);

// Map each key to...
var result = fields.map(function(field) {
    // Extract data from the original source array
    var data = src.reduce(function(result, el) {
        // Create an array of data
        return result.concat(el[field]);
    }, []);
    // Format the data as desired
    return {name: field, data: data};
});

console.log(result);

If the elements have different structures, the code becomes a bit more complex: View the Live Example here

// Determine the fields by iterating through all elements
// Add keys not yet encountered to an array
var fields = src.reduce(function (fields, current) {
    return fields.concat(Object.keys(current).filter(function (key) {
        return fields.indexOf(key) === -1;
    }));
}, []);

var result = fields.map(function (field) {
    // Another step required here to filter out elements
    // lacking the specific field we're interested in
    var data = src.filter(function (el) {
        return !!el[field];
    })
    // Proceed with the steps mentioned above.
    .reduce(function (result, el) {
        return result.concat(el[field]);
    }, []);
    return {
        name: field,
        data: data
    };
});

console.log(result);

Generate Highchart Column Using JSON Data

Answer №1

Similar questions

javascript implement a process to iteratively submit a form using ajax

Showing Nested Arrays in Angular 2

How do I check the value of a JavaScript variable in an XSL choose statement?

Display the duplicated values of an array extracted from a JSON object just once

When using Next.js, importing multiple components from the index manifest will automatically import everything

I'm experiencing issues with my AJAX as it fails to post or respond after the user clicks on the submit

Updating the load context variable in Django template after making changes via an AJAX call: a step-by-step guide

`How can I update a textbox's value using JQuery Ajax?`

Interpret data from an external JSON file into a HighCharts chart using JavaScript

How to Utilize ngIf and ngFor Together in Angular 4 for the Same Element in ngFor

What is the reason for the denial of JSON permission within a Linux user's account?

Guide to making a fully interactive JSONObject

What is the best way to arrange the information in JSON in ascending order and display it in a table format?

Enter a keyword in the search bar to find what you're looking

No receiving an AJAX reply

Tracking every AJAX call initiated by JQuery within the WooCommerce platform

What is the process for eliminating transparency from the overlay feature while utilizing Dojox/Standby?

The ElasticClient encountered a problem while verifying the connection status

The methods $.get() and $.ajax() in jQuery are failing to retrieve data from PHP

`Even though I specified `{cache: $templateCache}` in the $http call, the directive is still showing $templateCache as