Dynamic jSON to Highcharts Pie Chart

Question

I'm fighting Highcharts right now, trying to get data. If I hard code the parameters and the series, I can make it work - so this is not my configuration (i.e. scripts, css, etc.)

I reviewed the following question here about SO as it was related: Ajax JSON in a Highcharts Pie Chart

Unfortunately, this did not help. Can someone take a look and see what I'm doing wrong?

(This code is directly related to the previously mentioned SO post)

function renderChart(divId, chartType, chartTitle){ var options = createOption(divId, chartType, chartTitle); var series = createSeries(); options.series = series; var chart = new Highcharts.Chart(options); } function createOption(divId, chartType, chartTitle){ var options = { chart: { renderTo: divId, defaultSeriesType: 'pie' }, title: { text: chartTitle }, plotOptions: { pie: { allowPointSelect: true, cursor: 'pointer', dataLabels: { enabled: false }, showInLegend: true } }, series: [] }; return options; } function createSeries(){ var series = []; series.push('['); series.push('{'); series.push('"type" : "pie",'); series.push('"name" : "fruits",'); series.push('"data" : ['); series.push('['); series.push('"Apple",') series.push('43.0'); series.push('],'); series.push('['); series.push('"Pear",') series.push('57.0'); series.push(']'); series.push(']'); series.push('}'); series.push(']'); return series.join(''); } 

Thanks in advance.

Ignoring The easiest way is to prepare the server for a serial object. See This post: iterating a JSON response using jQuery for Highcharts

Answer 1

You load the Highcharts line:

 '[{"type" : "pie","name" : "fruits","data" : [["Apple",43.0],["Pear",57.0]]}]' 

where he expects an array of configuration objects for the following series:

 [{ type : "pie", name : "fruits", data : [["Apple",43.0],["Pear",57.0]] }] 

Answer 2

You can directly link the chart to JSON data. You just need to specify json property names as the standard standard. "Y" for the value and "name" for the label.

Your JSON should look like this:

[{name: "Apple", y: 25}, {name: "Pear", y: 20}]