Geek Answers Handbook

Screen charts display nothing but a blank html page

I tried using the example provided on the highcharts website. But when I use all this, I get an empty html page. Someone please help me with the code. I don’t understand why the code doesn’t load properly, tell me if I should add something extra to this, and please let me know how to use the php array so that this graph works as well.

<html> <head> <script src="http://code.highcharts.com/highcharts.js"></script> <script src="http://code.highcharts.com/modules/exporting.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> <script> $(function () { var chart; $(document).ready(function() { chart = new Highcharts.Chart({ chart: { renderTo: 'container', plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false }, title: { text: 'Browser market shares at a specific website, 2010' }, tooltip: { pointFormat: '{series.name}: <b>{point.percentage}%</b>', percentageDecimals: 1 }, plotOptions: { pie: { allowPointSelect: true, cursor: 'pointer', dataLabels: { enabled: true, color: '#000000', connectorColor: '#000000', formatter: function() { return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %'; } } } }, series: [{ type: 'pie', name: 'Browser share', data: [ ['Firefox', 45.0], ['IE', 26.8], { name: 'Chrome', y: 12.8, sliced: true, selected: true }, ['Safari', 8.5], ['Opera', 6.2], ['Others', 0.7] ] }] }); }); }); </script> </head> <body> <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div> </body> </html>
+4
source share
2 answers

I believe your problem is that you have included scripts. Try placing jQuery first:

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> <script src="http://code.highcharts.com/highcharts.js"></script> <script src="http://code.highcharts.com/modules/exporting.js"></script>

Demo ( works / does not work ).

Update: to download your data from MySQL using PHP, see this example . However, as you pointed out yourself, JSON encoding might be the best option:

 $data = array(); while($row = mysql_fetch_array($results)) { $data[] = array($row[1], $row[0]); } echo json_encode($data);

This last echo can be used either to return the entire array using ajax (for example, the linked example above), or when creating the page itself (i.e., "hard coding" in the script):

  series: [{ type: 'pie', name: 'Browser share', data: <?php echo json_encode($data)?> }]

This will work, since your array, when JSON is encoded, can be used instead of a JavaScript literal (and json_encode should take care of everything, preventing XSS vulnerabilities).

+11
source

The order of inclusion of javascripts should be:

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> <script src="http://code.highcharts.com/highcharts.js"></script> <script src="http://code.highcharts.com/modules/exporting.js"></script>

By this, I mean that you must first include the jQuery library before any other script.

+5
source

More articles:


All Articles