Rahul P Rahul P - 3 months ago 42
JSON Question

how to set dynamic data in highcharts

I'm getting data from servlet and my sysout of json object which i'm sending from servlet is
{"jsonArray":[{"bugzilla":20,"redmind":14}]}

Now my java script is

<script type="text/javascript">
var chart;
$(document).ready(
function() {
chart = new Highcharts.Chart({
chart : {
renderTo : 'container',

},
title : {
text : 'Bug chart'
},

tooltip : {
formatter : function() {
var s;
if (this.point.name) { // the pie chart
s = '' + this.point.name + ': ' + this.y
+ ' Bugs';
} else {
s = '' + this.x + ': ' + this.y;
}
return s;
}
},
labels : {
items : [ {
html : 'Total Bugs',
style : {
left : '40px',
top : '8px',
color : 'black'
}
} ]
},
series : [ {

type : 'pie',
name : 'Total Bugs',
data : [],
center : [ 100, 80 ],
size : 100,
showInLegend : false,
dataLabels : {
enabled : false
},
}, ]

}, function getdata(chart) {
var tmp="";
var receivedData="";

$.ajax({
url : 'http://localhost:8080/PRM/GraphServlet',
dataType : 'json',
error : function() {
alert("error occured!!!");
},
success : function(data) {

$.each(data.jsonArray, function(index)
{
$.each(data.jsonArray[index],
function(key,value) {
tmp = "['" + key + "', " + value + "],";
receivedData += tmp;
alert("receivedData: " + receivedData);

});

});
alert(receivedData.substring(0, 34));
chart.series[0].setData([receivedData.toString().substring(0, 34)]);



}

}
);
});

});
</script>


alert prints receivedData: ['bugzilla', 20],['redmind', 14] which i'm expecting
but problem is when i'm setting it to

chart.series[0].setData([receivedData.toString().substring(0, 34)]);

then my pie chart is not working. It shows only one part like 1/4 circle with no tooltip

Answer

Your data is a String, it needs to be an array of array, where the inner array consists of two elements, the first being the key as string, and 2nd the value in numeric form.

success : function(data) {
   var chartData=[];
   $.each(data.jsonArray, function(index)
    {
     $.each(data.jsonArray[index], 
      function(key,value) {
       var point = [];
       point.push(key);
       point.push(value);
       chartData.push(point);                          
      });
   });
   chart.series[0].setData(chartData);
 }