I have used highchart to draw pie chart.I got the ajax response but my chat is not executed.I had put the alert also but alert("highchart called"); is not executed till that line my all alert is executed.I think options.series[0].data = responsePIE; is wrong but not sure. My main12.js code is as below.
$(document).ready(function()
{
$(function ()
{
$('#container').highcharts(
{
chart:
{
plotBackgroundColor: null,
plotBorderWidth: 1,//null,
plotShadow: false
},
title:
{
text: 'Browser market shares at a specific website, 2014'
},
tooltip:
{
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions:
{
pie:
{
allowPointSelect: true,
cursor: 'pointer',
dataLabels:
{
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style:
{
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: []
}]
});
});
$.getJSON("GetReportdata", function(json) {
var call11 = JSON.stringify(json);
alert(call11);
var responsePIE = jQuery.parseJSON(call11);
alert(responsePIE[1].title);
options.series[0].data = responsePIE;
alert("highchart called");
var chart = new Highcharts.Chart(options);
});
});
My jsp code is as below.
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link href="../css/demo.css" rel="stylesheet">
<script src="../js/jquery.js"></script>
<script src="../external js/jquery-1.9.1.js"></script>
<script src="../external js/jquery-ui.js"></script>
</head>
<body>
<script src="../js/highcharts.js"></script>
<script src="../js/exporting.js"></script>
<script src="../js/main12.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
<div id="container2" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
</body>
</html>
Thanks
It looks like this line is wrong:
options.series[0].data = responsePIE;
in that you haven't defined options.
Either set an options variable to the full chart definition and create the chart in the getJson callback, or create the chart first, and then set the series data on the exinsting chart in the getJson callback using the series setData() method (http://api.highcharts.com/highcharts#Series.setData).
your script should look like:
<script type="text/javascript">
$(function () {
var chart2;
$.getJSON("pie.json", function(json2) {
chart2 = new Highcharts.Chart({
chart: {
type:'pie',
renderTo: 'container2',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Interactive Pie'
},
tooltip: {
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.y +' %';
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: json2
}]
});
});
});
</script>
and json data format: [["chrome",15],["firefox",20],["Android",26],["safari",6]]