Oct 13, 2011, 10:55 AM
Hi again.
I have now this code. No errors but the Chart is not displaying.
I have now this code. No errors but the Chart is not displaying.
<head runat="server">
<title></title>
<ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="ScriptFiles" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/myJS.js"></script>
<script type="text/javascript" src="js/highcharts.js"></script>
<script type="text/javascript" src="js/Ext.ux.HighChart.js"></script>
<script type="text/javascript">
function panelLoaded() {
var chart;
var store2 = new Ext.data.JsonStore({
fields: ['season', 'total'],
data: [{
season: 'Summer',
total: 150
}, {
season: 'Fall',
total: 245
}, {
season: 'Winter',
total: 117
}, {
season: 'Spring',
total: 184
}]
});
chart = new Ext.ux.HighChart({
store: store2,
height: 325,
series: [
{
type: 'pie',
name: 'Views',
categorieField: 'season',
dataField: 'total'
}
],
chartConfig: {
chart: {
margin: [50, 150, 60, 80]
},
title: {
text: 'Employees By Business Unit',
style: {
margin: '10px 100px 0 0' // center it
}
},
subtitle: {
text: 'Source: DeAngelo Brothers Inc',
style: {
margin: '0 100px 0 0' // center it
}
},
legend: {
layout: 'vertical',
style: {
left: 'auto',
bottom: 'auto',
right: '10px',
top: '100px'
}
}
}
});
Chart1Panel.add(chart);
Chart1Panel.doLayout();
}
</script>
</head>
<body>
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<form id="form1" runat="server">
<div>
<ext:Panel ID="Chart1Panel" runat="server" Title="Personal Data & Chart Settings"
Collapsible="true" Collapsed="false">
<Content>
</Content>
<Listeners>
<AfterRender Handler="panelLoaded();" />
</Listeners>
</ext:Panel>
<div id="container">
</div>
</div>
</form>
</body>