Automatically calculate the quantity of pie charts to showcase and present each one individually on a CanvasJS-generated page

Question

Automatically calculate the quantity of pie charts to showcase and present each one individually on a CanvasJS-generated page

I am looking to create multiple pie charts dynamically and display them together on a webpage. The number of pie charts needed will be determined by the elements in a JSON object. Here is an example of how the data will be structured:

[
  {
    "id" : "123",
    "data" : [20, 40, 10, 20, 10]
  },
  {
    "id" : "456",
    "data" : [10, 20, 20, 30, 20]    
  },
  {
    "id" : "789",
    "data" : [25, 35, 5, 10, 25]
  }
]

My goal is to have a pie chart for each element that contains both 'id' and 'data' attributes. The 'data' values will be used as dataPoints in the pie charts for their corresponding 'id'. How can I go about achieving this?

javascript json pie-chart canvasjs

Answer 1

Answer №1

Successfully extracting data from JSON and transferring it to chart options. See the provided code snippet below:

var dataPoints = [];
var dataSeries = [];
var charts = [];

$.when( $.getJSON("https://api.myjson.com/bins/us9mk", function(result) {  
  for(var i = 0; i < result.length; i++) {
    dataPoints = [];
    for(var j = 0; j < result[i].data.length; j++) {
      dataPoints.push({y: result[i].data[j]});
    }
    dataSeries.push({id: result[i].id, type: "pie", dataPoints: dataPoints})
  }
})).then(function( data, textStatus, jqXHR ) {
  for(var i = 0; i < dataSeries.length; i++) {
    $("#chartsContainer").append("<div id='" + dataSeries[i].id + "' style='width: 100%; height: 200px;'></div>");
    charts[i] = new CanvasJS.Chart(dataSeries[i].id, {
      title: {
        text: dataSeries[i].id
      },
      data: [dataSeries[i]]
    });    
    charts[i].render();
  }
});

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="chartsContainer"></div>

Answer 2

Successfully extracting data from JSON and transferring it to chart options. See the provided code snippet below:

var dataPoints = [];
var dataSeries = [];
var charts = [];

$.when( $.getJSON("https://api.myjson.com/bins/us9mk", function(result) {  
  for(var i = 0; i < result.length; i++) {
    dataPoints = [];
    for(var j = 0; j < result[i].data.length; j++) {
      dataPoints.push({y: result[i].data[j]});
    }
    dataSeries.push({id: result[i].id, type: "pie", dataPoints: dataPoints})
  }
})).then(function( data, textStatus, jqXHR ) {
  for(var i = 0; i < dataSeries.length; i++) {
    $("#chartsContainer").append("<div id='" + dataSeries[i].id + "' style='width: 100%; height: 200px;'></div>");
    charts[i] = new CanvasJS.Chart(dataSeries[i].id, {
      title: {
        text: dataSeries[i].id
      },
      data: [dataSeries[i]]
    });    
    charts[i].render();
  }
});

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="chartsContainer"></div>

Automatically calculate the quantity of pie charts to showcase and present each one individually on a CanvasJS-generated page

Answer №1

Similar questions

Extracting POST information through PHP's AJAX Request

Mock needed assistance

Connect an Angular Service object to a Controller's Scope and keeping it in sync

Javascript function to deselect all items

Transforming HTML tables into JSON using JQuery

Utilizing ng-if within ng-repeat for dynamically generated option tags in HTML and AngularJS

What is the process of implementing FFT in node.js?

Unveil concealed information within a freshly enlarged container

DRF: Error - Unable to serialize <Model: Model object> as JSON

I would like for this message to appear periodically following the initial execution

Despite calling this.setState to update my state, the render() method is still displaying the previous values

Steps to retrieve an ext.js grid using data from a database

A JSON request is being processed within a while loop

Assign the value of a state by accessing it through a string path key within a complexly

Unexpected Token E encountered in the Twitter stream.on function

Ways to effectively go through local storage using a loop

Collapsing Bootstrap menu bar causing logo overlap

Declare the variable as a number, yet unexpectedly receive a NaN in the output

What could be causing one of my images to not appear on my Gatsby page?

Ways to retrieve the ID attribute value of the third ancestor above