Title: Highcharts is not working in Easyui Panel
Post by: thecyberzone on February 08, 2018, 11:20:17 PM
I have created a simple Easyui panel as follows : <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Panel</title> <link rel="stylesheet" type="text/css" href="./ui/themes/ui-cupertino/easyui.css"> <link rel="stylesheet" type="text/css" href="./ui/themes/icon.css"> <link rel="stylesheet" type="text/css" href="./ui/demo/demo.css"> <script type="text/javascript" src="./ui/jquery.min.js"></script> <script type="text/javascript" src="./ui/jquery.easyui.min.js"></script> </head> <body> <div id="p" class="easyui-panel" title="Basic Panel" style="width:700px;height:600px;padding:10px;" data-options="href:'pie.php'">ok</div> </body> </html> Here as a source of Panel I have called "pie.php". If I call pie.php directly it is rendering pie chart correctly, and displays what I want, but when I call this as source of Panel, nothing is displayed in panel. Here is the content of pie.php : <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>TAPP</title> <script type="text/javascript" src="./Highcharts/api/js/jquery.min.js"></script> <script type="text/javascript" src="./Highcharts/api/js/jquery.easyui.min.js"></script> <script type="text/javascript"> $(document).ready(function() { // Make monochrome colors var pieColors = (function () { var colors = [], base = '#265b8c', i;
for (i = 0; i < 10; i += 1) { // Start out with a darkened base color (negative brighten), and end // up with a much brighter color colors.push(Highcharts.Color(base).brighten((i - 3) / 7).get()); } return colors; }());
var options = { chart: { renderTo: 'container1', plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false }, legend: { align: 'center', verticalAlign: 'bottom', layout: 'vertical', labelFormatter: function () { return (this.name+'.'.repeat(40)).substring(0, 40) + ' ' +this.y; } }, title: { text: 'Manpower Distribution - CHRD' }, tooltip: { formatter: function() { return '<b>'+ this.point.name +'</b>: '+ this.percentage.toFixed(2) +' %'; } }, plotOptions: { pie: { allowPointSelect: true, cursor: 'pointer', colors: pieColors, dataLabels: { enabled: false, color: '#265b8c', connectorColor: '#5194d0', formatter: function() { /* return this.y; */ } }, showInLegend: true } }, series: [{ type: 'pie', name: 'Browser share', colorByPoint: true, data: [] }] } $.getJSON("data.php?secode=09001", function(json) { options.series[0].data = json; chart = new Highcharts.Chart(options); }); }); </script> <script src="./Highcharts/js/highcharts.js"></script> <script src="./Highcharts/js/modules/exporting.js"></script> </head> <body> BACD <div id="container1" style="width: 400px; height: 500px; display: block;">ok</div> </body> </html>
Calling backend data.php returns json data correctly as follows : [["AUDIO VISUAL SERVICE",2],["COMPUTER LAB",1],["DOCUMENTATION CELL",2],["ELECTRICAL, ELECTRONICS & PLC LAB",3],["HYDRAULICS & PNEUMATICS LAB",1],["LIBRARY",2],["OFFICE",4],["WORKSHOP",8],["UNALLOTED EMPLOYEE",3]] I have also copied the jquery and jquery.min file from easyui directory to highcharts/api directory to make the same version of both jquery addins. Still nothing is display within Panel, where as calling directly it displays pie correctly.
Title: Re: Highcharts is not working in Easyui Panel
Post by: stworthy on February 09, 2018, 12:13:07 AM
Only the <body> element of the content page(pie.php) can be extracted when using the 'href' property to load a page. So please move all the css and js code from the <head> to the <body>.
Title: Re: Highcharts is not working in Easyui Panel
Post by: thecyberzone on February 09, 2018, 02:48:05 AM
Thanks stworthy for your quick reply. It displays pie chart within panel, but it refreshes display infinite times, refreshes and refreshes ... just I have changed the location of script tags from header to body in pie.php as follows: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>TAPP</title> </head> <body> <script type="text/javascript" src="./Highcharts/api/js/jquery.min.js"></script> <script type="text/javascript" src="./Highcharts/api/js/jquery.easyui.min.js"></script> <script type="text/javascript"> $(document).ready(function() { // Make monochrome colors var pieColors = (function () { var colors = [], base = '#265b8c', i;
for (i = 0; i < 10; i += 1) { // Start out with a darkened base color (negative brighten), and end // up with a much brighter color colors.push(Highcharts.Color(base).brighten((i - 3) / 7).get()); } return colors; }());
var options = { chart: { renderTo: 'container1', plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false }, legend: { align: 'center', verticalAlign: 'bottom', layout: 'vertical', labelFormatter: function () { return this.name+' - '+this.y; } }, title: { text: 'Manpower Distribution - CHRD' }, tooltip: { formatter: function() { return '<b>'+ this.point.name +'</b>: '+ this.percentage.toFixed(2) +' %'; } }, plotOptions: { pie: { allowPointSelect: true, cursor: 'pointer', colors: pieColors, dataLabels: { enabled: false, color: '#265b8c', connectorColor: '#5194d0', formatter: function() { /* return this.y; */ } }, showInLegend: true } }, series: [{ type: 'pie', name: 'Browser share', colorByPoint: true, data: [] }] } $.getJSON("data.php?secode=09001", function(json) { options.series[0].data = json; chart = new Highcharts.Chart(options); }); }); </script> <script src="./Highcharts/js/highcharts.js"></script> <script src="./Highcharts/js/modules/exporting.js"></script>
BACD <div id="container1" style="width: 400px; height: 500px; display: block;">ok</div> </body> </html>
Title: Re: Highcharts is not working in Easyui Panel
Post by: thecyberzone on February 09, 2018, 07:47:16 AM
Problem solved, just I have removed calling of jQuery js from called file pie.php. That's all.
|