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.
