What is the best way to create dynamic series data for highcharts?

Question

What is the best way to create dynamic series data for highcharts?

I have integrated angular-highcharts into my project and utilized this column chart from https://www.highcharts.com/demo/column-basic for visualizing my data. Below is the format of my data:

[
    {
        "project": "train project1",
        "hours": {
            "AD": 58265
        }
    },
    {
        "project": "butify",
        "hours": {
            "AD": 3940
        }
    },
    {
        "project": "skler",
        "hours": {
            "AD": 563250
        }
    },
    {
        "project": "Internal Application",
        "hours": {
            "AD": 33325,
            "DAM": 328095
        }
    },
    {
        "project": "train2project",
        "hours": {
            "AD": 137215
        }
    },
    {
        "project": "CELLProje1",
        "hours": {
            "DAM": 488470
        }
    },
    {
        "project": "rangeselector",
        "hours": {
            "AD": 3015,
            "DAM": 71175
        }
    },
    {
        "project": "Android dev",
        "hours": {
            "AD": 99160
        }
    },
    {
        "project": "Web Application",
        "hours": {
            "AD": 72720
        }
    }
];

The values inside "hours" may be one or more. I have shared a fiddle where I have been attempting to format the JSON for the series data. Additionally, I am trying to construct the X-axis array for the graph:

categories: [
            'train project1',
            'beautify',
            'skler',
            'Internal Application',
            'train project2',
            'rangeselector',
            'Android',
            'Web Application'

        ],

Am I formatting the X-axis correctly?

http://jsfiddle.net/harifrais/uxpvs8fw/34/

javascript json highcharts

Answer 1

Answer №1

If you want to format the data in a specific way, follow these steps:

[ 
    {
       name:"series-name",
       data:[ ... ]
    }
]

In order to use categories effectively, each series must have the same number of elements as there are categories. Since not all hours elements contain the same data, additional work is required.

Create a list of unique keys from hours
Iterate through each element and treat it as a category using the project
Insert zeros where missing elements are found in hours

You can achieve this with a simple 2-step process using reduce and map.

var data = [{"project":"train project1","hours":{"AD":58265}},{"project":"butify","hours":{"AD":3940}},{"project":"skler","hours":{"AD":563250}},{"project":"Internal Application","hours":{"AD":33325,"DAM":328095}},{"project":"train2project","hours":{"AD":137215}},{"project":"CELLProje1","hours":{"DAM":488470}},{"project":"rangeselector","hours":{"AD":3015,"DAM":71175}},{"project":"Android dev","hours":{"AD":99160}},{"project":"Web Application","hours":{"AD":72720}}];

// get a distinct list of hour keys
var seriesData =  data.reduce( (acc, {hours}) => {
     Object.keys(hours).forEach(key => {
        if(!acc[key]) acc[key] = [];
    })
    return acc;
},{});

// reduce the original data to get categories and series values
// filling in zeros where necessary
var result = data.reduce( (acc, {project,hours}) => {
   acc.categories.push(project);
   
   Object.keys(acc.seriesData).forEach(s => {
       acc.seriesData[s].push(hours[s] || 0);
   });
   
   return acc;
},{categories:[],seriesData:seriesData});

// shape the data to how highcharts wants it
var categories = result.categories;
var series = Object.entries(result.seriesData).map( e => ({
    name: e[0],
    data:e[1]
}));

console.log(categories);
console.log(series);

To see the results in a fiddle for highcharts/your data, check out this link: https://jsfiddle.net/u7opL2dw/2/

Answer 2

If you want to format the data in a specific way, follow these steps:

[ 
    {
       name:"series-name",
       data:[ ... ]
    }
]

In order to use categories effectively, each series must have the same number of elements as there are categories. Since not all hours elements contain the same data, additional work is required.

Create a list of unique keys from hours
Iterate through each element and treat it as a category using the project
Insert zeros where missing elements are found in hours

You can achieve this with a simple 2-step process using reduce and map.

var data = [{"project":"train project1","hours":{"AD":58265}},{"project":"butify","hours":{"AD":3940}},{"project":"skler","hours":{"AD":563250}},{"project":"Internal Application","hours":{"AD":33325,"DAM":328095}},{"project":"train2project","hours":{"AD":137215}},{"project":"CELLProje1","hours":{"DAM":488470}},{"project":"rangeselector","hours":{"AD":3015,"DAM":71175}},{"project":"Android dev","hours":{"AD":99160}},{"project":"Web Application","hours":{"AD":72720}}];

// get a distinct list of hour keys
var seriesData =  data.reduce( (acc, {hours}) => {
     Object.keys(hours).forEach(key => {
        if(!acc[key]) acc[key] = [];
    })
    return acc;
},{});

// reduce the original data to get categories and series values
// filling in zeros where necessary
var result = data.reduce( (acc, {project,hours}) => {
   acc.categories.push(project);
   
   Object.keys(acc.seriesData).forEach(s => {
       acc.seriesData[s].push(hours[s] || 0);
   });
   
   return acc;
},{categories:[],seriesData:seriesData});

// shape the data to how highcharts wants it
var categories = result.categories;
var series = Object.entries(result.seriesData).map( e => ({
    name: e[0],
    data:e[1]
}));

console.log(categories);
console.log(series);

To see the results in a fiddle for highcharts/your data, check out this link: https://jsfiddle.net/u7opL2dw/2/

Answer 3

Answer №2

Check out my approach on how to utilize your data with the Highcharts library, regardless of the number of properties present in the data.hours object.

Take a look at the demonstration: http://jsfiddle.net/UniquelyCoded/7h29sm4t/

const categories = sampleJson.map(data => data.project);

const getSeriesNames = sampleJson.map(data => {
    for (let i in data.hours) {
        return i
    }
}).filter((item, i, ar) => ar.indexOf(item) === i);


const series = getSeriesNames.map(name => {
    let output = {
        name: name,
        data: []
    };

    sampleJson.forEach(data => {
        if (data.hours[name]) {
            output.data.push(data.hours[name])
        } else {
            output.data.push(null)
        }
    });
    
    return output
})

Answer 4

Check out my approach on how to utilize your data with the Highcharts library, regardless of the number of properties present in the data.hours object.

Take a look at the demonstration: http://jsfiddle.net/UniquelyCoded/7h29sm4t/

const categories = sampleJson.map(data => data.project);

const getSeriesNames = sampleJson.map(data => {
    for (let i in data.hours) {
        return i
    }
}).filter((item, i, ar) => ar.indexOf(item) === i);


const series = getSeriesNames.map(name => {
    let output = {
        name: name,
        data: []
    };

    sampleJson.forEach(data => {
        if (data.hours[name]) {
            output.data.push(data.hours[name])
        } else {
            output.data.push(null)
        }
    });
    
    return output
})

What is the best way to create dynamic series data for highcharts?

Answer №1

Answer №2

Similar questions

Learn the process of transmitting JSON data from a server-side (nodejs) to the client-side using Ajax

Discovered a few JSON logical operators within a Chat API - curious to learn how they operate

Optimal Approach: Utilizing Python3 to Parse Facebook JSON Data into MongoDB

What is the best way to have two div elements scroll simultaneously?

The affluent text editor's input field fails to retain information

Alerts are essential for the proper functioning of the AJAX function. Without them

adding SVG elements inside a DOM element using SnapSVG

Leverage Java variables within JavaScript

"What is the purpose of using the `position: absolute` property for movement transitions while deleting an item from a list

What is the best way to retrieve $_SESSION variables following an Ajax request?

Unlocking Controller Functions in AngularJS Directives: A Step-by-Step Guide

Navigate through two distinct elements by categorizing them based on their types

An error was encountered while linting /app/layout.tsx at line 16: Rule "@typescript-eslint/no-empty-function" was violated due to inability to read properties of undefined (reading 'getTokens')

The result returned by Restkit after sending a postObject request

Utilizing a mutual RxJS subject for seamless two-way data binding in Angular 2

implement a dropdown feature for a vertical menu with the help of Jquery

JSON conversion error: Unable to convert circular structure to JSON - locate problem within JSON structure

An error of type `TypeError`: attempting to call `[0,1]` as a function arises while using an IIFE

Utilizing nested JSON data with React

Experiencing the power of DoJo with the latest Wordpress 4