Transforming JSON data into a visually appealing pie chart using highcharts

Question

Transforming JSON data into a visually appealing pie chart using highcharts

I'm having trouble loading my JSON string output into a highcharts pie chart category. The chart is not displaying properly.

Here is the JSON string I am working with:

var json = {"{\"name\":\"BillToMobile\"}":{"y":2.35},"{\"name\":\"Telenav\"}":{"y":13.59}}
Highcharts.chart('container', {
    chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false,
        type: 'pie'
    },
    title: {
        text: ''
    },
    tooltip: {
        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
    },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                enabled: true,
                format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                style: {
                    color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                }
            }
        }
    },
    series: [{
        name: 'Brands',
        colorByPoint: true,
        data: json
    }]
});

The resulting chart from the above JSON string is displayed below. Any help or guidance on this issue would be greatly appreciated as I am new to working with Highcharts. Thank you in advance.

https://i.stack.imgur.com/ocQuF.png

javascript java json charts highcharts

Answer 1

Answer №1

Here is a suggested way to format your JSON data:

var jsonData = [{name: "BillToMobile", y: 2.35}, {name: "Telenav", y: 13.59}]

If you need to convert your existing JSON, you can follow these steps:

For ES5 or earlier versions:

var properJson = [];
for (var i in jsonData) {
   var item = JSON.parse(i);
   for (var j in jsonData[i]) {
      item[j] = jsonData[i][j];
   }
   properJson.push(item);
}

For ES6 and newer versions:

var properJson = [];
for (var i in jsonData) {
   var item = JSON.parse(i);
   Object.assign(item, jsonData[i]);
   properJson.push(item);
}

Answer 2

Here is a suggested way to format your JSON data:

var jsonData = [{name: "BillToMobile", y: 2.35}, {name: "Telenav", y: 13.59}]

If you need to convert your existing JSON, you can follow these steps:

For ES5 or earlier versions:

var properJson = [];
for (var i in jsonData) {
   var item = JSON.parse(i);
   for (var j in jsonData[i]) {
      item[j] = jsonData[i][j];
   }
   properJson.push(item);
}

For ES6 and newer versions:

var properJson = [];
for (var i in jsonData) {
   var item = JSON.parse(i);
   Object.assign(item, jsonData[i]);
   properJson.push(item);
}

Transforming JSON data into a visually appealing pie chart using highcharts

Answer №1

Similar questions

AngularUi Mobile Modal List Display

Is the default behavior of Ctrl + C affected by catching SIGINT in NodeJS?

Implementing NgRx state management to track and synchronize array updates

Exploring the technique of parsing a nested JSONArray within a JSON Array in Android/Java

What is the best way to implement a user-customizable dynamic URL that incorporates API-generated content in a NextJS and React application?

Verification - enter a unique key for each ajax call

Customize Bootstrap radio buttons to resemble standard buttons with added form validation styling

How can I dynamically remove an option from a select dropdown if it already exists in another option using jQuery?

Creating a custom route in Node.js using Express for posting content and adding it to a specific user's page

Error: The variable "user" has not been declared in server.js when using passportjs

What is the best way to showcase a collection of items using a table layout in JavaScript?

api for enhancing images in Laravel app through preview, enlarge, and zoom functionalities

Measuring Internet speed using Node.js

The ngIf statement in the template isn't functioning properly after a refresh; instead, it is causing a redirection to the homepage

How can JavaScript determine if this is a legitimate JS class?

eliminating various arrays within a two-dimensional array

What is the best way to verify changing input fields in vue.js?

Sending JSON data to a targeted object in iOS

Stop the time-dependent function from executing within a specific condition

Ext.js Ext.grid.Panel with advanced filtering capabilities