How to set dynamic data in highcharts

Question

I get data from the servlet and my sysout of the json object that I am sending from the servlet is {"JsonArray": [{"Bugzilla": 20, "redmind": 14}]}

Now my java script

<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> 

Alerts print the received data: ['bugzilla', 20], ['redmind', 14], which I expect, but the problem is that I install it on

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

then my pie chart doesn't work. It shows only one part, such as 1/4 circle without a hint

Answer 1

Your data is a String, it should be an array of the array, where the internal array consists of two elements, the first of which is the key as a string, and the second is a value in numerical 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); } 

Answer 2

First you can prepare your data, as in @Jugal Thakkar's answer above, and then use the update function available from v5.

 chart.update({ series: preparedSeriesData }); 

this will lead to a dynamic update of the chart.