How to display data from server in pie chart?

Question

I want to display data in pie chart. Data is retrieved from server in JSON format ie single int value and I want to display it using pie chart. Suppose that data is 66 , then i want to show that 66% full in pie chart.

I have retrieved data but not able to find the function in javascript to accept data

For Ex. :

$(function(){
  $("#doughnutChart").drawDoughnutChart([
    { title: "Full", value:  66,   color: "#FC4349" },
    { title: "Empty",      value:  34,   color: "#6DBCDB" },
  ]);
});`

Then instead of already defined values in above function i want to accept value from server and display in pie chart.

in index.html I added statement
<script> $(document).ready(function(){ $("button").click(function(){ $.getJSON('http://api.thingspeak.com/channels/79448/feed/last.json?callback=?', function(data){ $("div").append(data.field1 + " "); }); **var x=data.field1;** }); }); </script>

---

This is my index.js file :

$("#doughnutChart").drawDoughnutChart( dataFromServer);

`$(function(){
  `$("#doughnutChart").drawDoughnutChart([
        {  title:"Full" value: dataFromServer.y1, color: "#FC4349"  },
        {  title: "Empty" value: dataFromServer.y2, color: "#6DBCDB" },
      ]);
});`
`var formattedData = [];`

// "dataFromServer" contains an array of differently-formatted objects

for ( var i = 0; i < dataFromServer.length; i++ ){ formattedData.push({ value: dataFromServer[i].y, }); } $("#doughnutChart").drawDoughnutChart( formattedData );

So please tell me is this way i should write in index.js file??? dataFromServer.y1=x; Please suggest me the correct way.

Answer 1

This depends upon the form of your data. A;; you're going to do is use variables instead of literals. For instance, if your data is an array of objects with a title, value, and color, you could just call:

// "dataFromServer" is an array of appropriately formatted objects
$("#doughnutChart").drawDoughnutChart( dataFromServer);

If, on the other hand, you have a complex object you need to map out, you could do it explicitly like so:

// "dataFromServer" contains all of the right data, but in different locations
$("#doughnutChart").drawDoughnutChart([
    { title: dataFromServer.x1, value: dataFromServer.y1, color: dataFromServer.z1 },
    { title: dataFromServer.x2, value: dataFromServer.y2, color: dataFromServer.z2 },
]);

Most likely you will have an array of differently formatted object, which you will want to turn into an array of objects formatted in this manner, in which case you would want to loop through the objects from the server and create a new variable from them:

// formattedData is the array that will be passed into the chart
var formattedData = [];

// "dataFromServer" contains an array of differently-formatted objects
for ( var i = 0; i < dataFromServer.length; i++ ){
    formattedData.push({ title: dataFromServer[i].x,
                         value: dataFromServer[i].y,
                         color: dataFromServer[i].z });
}

$("#doughnutChart").drawDoughnutChart( formattedData );

Addendum:

Upon comment clarification, I am adding the following. Assuming the Title and Color values are static (ie not coming from the database), you may simply insert the integer "values" into the code directly, like so:

// "mySanFranciscoDataValue" is the single integer you're trying to insert
//    into the chart. Simply reference it directly, whether it's a
//    variable or a function. Presumably you will have two of them,
//    one for each city, so I've included a "myNewYorkDataValue" too.
$("#doughnutChart").drawDoughnutChart([
    { title: "San Francisco", value:  mySanFranciscoDataValue,   color: "#FC4349" },
    { title: "New York",      value:  myNewYorkDataValue,   color: "#6DBCDB" },
]);