I am a new to Highcharts and json and I'm using the pie chart with gradient fill. I have been facing issues for the past few days with extracting in json data from php and mysql to populate a pie chart with gradient fill using the Highchart library. I have already tried all the suggestions of StackOverflow and Google search though I'm unable to find a particular solution for this.My Pie chart shows me [object Object]:0.0 , not shows proper graph.pie image
Please tell why i m getting this error.My code is in below.
$(function () {
// Radialize the colors
Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function(color) {
return {
radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
stops: [
[0, color],
[1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
]
};
});
// Build the chart
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: ' Rate of a specific project'
},
tooltip: {
pointFormat: '{series.name}: {point.percentage:.1f}'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '{point.name}: {point.percentage:.1f}',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
},
connectorColor: 'silver'
}
}
},
series: [{
type: 'pie',
name: 'Total Marketing',
data:[]
}]
});
$.getJSON("data.php", function(data){
//options.series[0].data = json;
chart.series[0].setData(data);
chart = new Highcharts.Chart(options);
});
});
Here is data.php
$sql="SELECT mozila,ie,chrome,opera,safari,torch FROM webmarketing";
$resultSql = mysql_query($sql);
$result = array();
while($rows=mysql_fetch_array($resultSql)) {
$result[] = array('name' => 'MOZILA', 'y' => $rows['mozila']);
$result[] = array('name' => 'IE', 'y' => $rows['ie']);
$result[] = array('name' => 'CHROME', 'y' => $rows['chrome']);
$result[] = array('name' => 'OPERA', 'y' => $rows['opera']);
$result[] = array('name' => 'OTHERS', 'y' => $rows['safari']+$rows['torch']);
}
print json_encode($result, JSON_NUMERIC_CHECK);
json looks like
[{"name":{"MOZILA":45.0}},{"name":{"IE":26.8}},{"name":{"CHROME":12.8}},{"name": {"OPERA":6.2}},{"name":{"OTHERS":9.2}}]
Please give me solution.
Answer
Based on your comment your JSON is wrong. Highcharts expects data to look like:
[val1, val2, val3,...,valN]
Or
[{"name1", val1},{"name2", val2},{"name3", val3},...,{"nameN", valN}]
Or
[{name: "name1", y: val1},{name: "name2", y: val2},{name: "name3", y: val3},...,{name: "nameN", y: valN}]
You need to adjust your JSON builder to output one of those formats. For PIE charts I recommend the {"name1", val1}
version.
No comments:
Post a Comment