Menu
In this code is showing charts nicely with real data. I have to show better code for the headings the company name and dates.
How is best way to display this type of data? this bit here: title: {
text: ‘Prospect Park Res. Department Spending May 2011 ‘
},
<%@ Page Language=”C#” AutoEventWireup=”true” CodeBehind=”PieChart.aspx.cs” Inherits=”SA_Dashboard.PieChart” %>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “
<html xmlns=”
<head runat=”server”>
<title>Highchart real data drill sample</title>
<script src=”Javascript/jquery-1.5.1.js” type=”text/javascript”></script>
<script src=”Javascript/highcharts/highcharts.js” type=”text/javascript”></script>
<script src=”Javascript/highcharts/modules/exporting.js” type=”text/javascript”></script>
</head>
<body>
<form id=”form1″ runat=”server”>
<div id=”container” style=”width: 100%”>
</div>
</form>
<script type=”text/javascript”>
//Global Chart
var chart;
var customerID = ‘<%=this.CustomerID %>’;
$(document).ready(function () {
DrawDeptChart();
});
function DrawCategoriesChart(DepartmentID) {
//Call Ajax
$.ajax({
url: “Ajax/AjaxHelper.aspx/GetCustomerDepartmentCategories”,
data: “{‘customerID’:'” + customerID + “‘,’departmentID’:'” + DepartmentID + “‘}”,
type: “POST”,
contentType: “application/json; charset=utf-8”,
dataType: “json”,
success: function (data) {
//$(‘.Pager’).html(msg.d);
var series = {
type: ‘pie’,
name: ‘Categories’,
data: []
};
chart.series[0].remove();
jQuery.each(data.d, function (itemNo, item) {
//Get the items from the JSON and add then
//to the data array of the series
series.data.push({
name: item.CategoryName,
y: parseFloat(item.Expense),
CategoryID: item.CategoryID,
AllowDrillDown: item.AllowDrillDown
})
});
chart.addSeries(series);
//options.series.push(series);
//Create the chart
//chart = new Highcharts.Chart(options);
//chart.render();
}
});
}
function DrawDeptChart() {
//define the options
var options = {
chart: {
renderTo: ‘container’,
margin: [50, 200, 60, 170]
},
title: {
text: ‘Prospect Park Res. Department Spending May 2011 ‘
},
plotArea: {
shadow: null,
borderWidth: null,
backgroundColor: null
},
tooltip: {
formatter: function () {
return ‘<b>’ + this.point.name + ‘</b>: ‘ + this.y + ‘ %’;
}
},
plotOptions: {
pie: {
//allowPointSelect: true,
cursor: ‘pointer’,
point: {
events: {
click: function () {
var drilldown = this.AllowDrillDown;
if (drilldown) { // drill down
DrawCategoriesChart(this.DepartmentID);
} else { // restore
DrawDeptChart();
}
}
}
},
dataLabels: {
enabled: true,
formatter: function () {
return ‘<b>’ + this.point.name + ‘</b>: ‘ + this.y + ‘ K’;
},
style: {
font: ’13px Trebuchet MS, Verdana, sans-serif’
}
}
}
},
legend: {
layout: ‘vertical’,
style: {
left: ‘auto’,
bottom: ‘auto’,
right: ’50px’,
top: ‘100px’
}
},
series: []
};
//Call Ajax
$.ajax({
url: “Ajax/AjaxHelper.aspx/GetCustomerDepartments”,
data: “{‘customerID’:'” + customerID + “‘}”,
type: “POST”,
contentType: “application/json; charset=utf-8”,
dataType: “json”,
success: function (data) {
//$(‘.Pager’).html(msg.d);
var series = {
type: ‘pie’,
name: ‘Departments’,
data: []
};
jQuery.each(data.d, function (itemNo, item) {
//Get the items from the JSON and add then
//to the data array of the series
series.data.push({
name: item.DepartmentName,
y: parseFloat(item.Expense),
DepartmentID: item.DepartmentID,
AllowDrillDown: item.AllowDrillDown
})
});
options.series.push(series);
//Create the chart
chart = new Highcharts.Chart(options);
chart.render();
}
});
}
</script>
</body>
</html>