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