Highchart not executed

Question

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

You don't need " $(function () { }); " part. The whole thing is already inside document ready instance. The way you are accessing your highcharts within your getJson function is incorrect. Check your console. You can access the chart by storing it in a variable something like var myChart=$("#container").highcharts(); then update it using this variable. — srijan, Jul 28 '14 at 14:40

score 0 · Answer 1 · answered Jul 28 '14 at 15:01

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

score 0 · Answer 2 · edited May 23 '17 at 11:44

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

check out for drill down in pie chart

Highchart not executed

2 Answers2