In this step, you'll add the script that will populate the chart with data. The script you'll add will also control the drill-down action.
<head> </head> tags in your Main.aspx file. You'll add all the script you need within these tags.<head> tags:
To write code in Source View
<!--jQuery References-->
<script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.min.js" type="text/javascript"></script>
<!--Theme-->
<link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css" />
<!--Wijmo Widgets JavaScript-->
<script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20132.9.min.js" type="text/javascript"></script>
<script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20132.9.min.js" type="text/javascript"></script>
To write code in Source View
<script type="text/javascript"></script>
To write code in Source View
$(document).ready(function () {
//ajax call to get the data
$.ajax({
type: "POST",
url: "GetOrders.asmx/GetDataOnLoad",
contentType: "application/json; charset=utf-8",
dataType: "json",
data: {},
success: function (data) {
var arr = [];
try {
//push the data in an array
$.each(data.d, function (i, elem) {
arr.push({
Year: elem.Year,
OrderAmount: elem.OrderAmount
});
});
//initialize the barchart widget
$("#C1BarChart1").c1barchart({
shadow: false,
hint: { content: function () { return this.data.label + '\n ' + this.y + ''; } },
//set the datasource of the BarChart
dataSource: arr,
seriesList: [{
label: "Yearly Amount of Orders",
legendEntry: true,
data: { x: { bind: "Year" }, y: { bind: "OrderAmount" } }
}],
seriesStyles: [{ fill: "180-#ff9900-#ff6600", stroke: "#ff7800", opacity: 0.8 }],
});
}
catch (e) {
alert(e);
return;
}
},
error: function (result, status) {
if (status = "error") {
alert(status);
}
}
});
Next, add the script that contains the click event for your first drill-down level:
To write code in Source View
$("#C1BarChart1").c1barchart({
click: function (sender, args) {
//ajax call to get the data
$.ajax({
type: "POST",
url: "GetOrders.asmx/GetOrderByMonth",
contentType: "application/json; charset=utf-8",
dataType: "json",
//pass the year selected
data: "{Year:'" + args.x + "'}",
success: function (data) {
var arr = [];
try {
//push the data in an array
$.each(data.d, function (i, elem) {
arr.push({
Month: elem.Month,
OrderAmount: elem.OrderAmount
});
});
//set the datasource of the BarChart
$("#C1BarChart1").c1barchart({
horizontal: false,
dataSource: arr,
seriesList: [{
label: "Orders By Month in year " + args.x,
legendEntry: true,
data: { x: { bind: "Month" }, y: { bind: "OrderAmount" } }
}],
//attach new handler with click event
click: OrdersByDay
});
//Save the selected year for further driling down
$("#HiddenField1")[0].value = args.x;
}
catch (e) {
alert(e);
return;
}
},
error: function (result, status) {
if (status = "error") {
alert(status);
}
}
});
}
});
});
The last section of script to add controls the final drill-down level for the chart. The script will call the appropriate data to fill the chart on a click event:
To write code in Source View
//method invoked when Month is selected to drill down to days in a month
function OrdersByDay(sender, args) {
var year = $("#HiddenField1")[0].value;
var month = args.x;
//ajax call to get the data
$.ajax({
type: "POST",
url: "GetOrders.asmx/GetOrderByDay",
contentType: "application/json; charset=utf-8",
dataType: "json",
data: '{"Month":"' + month + '","Year":"' + year + '"}',
success: function (data) {
var arr = [];
try {
//push the data in an array
$.each(data.d, function (i, elem) {
arr.push({
Day: elem.Day,
OrderAmount: elem.OrderAmount
});
});
//set the datasource of the BarChart
$("#C1BarChart1").c1barchart("destroy");
$("#C1BarChart1").c1barchart({
shadow: false,
textStyle: { fill: "#b2b2b2", "font-weight": "bold", "font-size": 15 },
axis: {
y: {
labels: { style: { fill: "#242529", "font-size": 11 } },
gridMajor: { style: { stroke: "#353539", "stroke-dasharray": "- " } }
},
x: {
labels: {
style: { fill: "#7f7f7f", "font-size": 11 }
}
}
},
hint: { content: function () { return this.data.label + '\n ' + this.y + ''; } },
header: { text: "Order Details" },
horizontal: false,
dataSource: arr,
seriesList: [{
label: "Orders By Days in Month " + month + "," + year,
legendEntry: true,
data: { x: { bind: "Day" }, y: { bind: "OrderAmount" } }
}],
seriesStyles: [{ fill: "180-#ff9900-#ff6600", stroke: "#ff7800", opacity: 0.8 }],
seriesHoverStyles: [{ "stroke-width": 1.5, opacity: 1 }]
});
$("#C1BarChart1").c1barchart("redraw");
}
catch (e) {
alert(e);
return;
}
},
error: function (result, status) {
if (status = "error") {
alert(status);
}
}
});
}
In this step, you added the script to populate the chart with data, and to control the drill-down action. In the next step, you will run your application and test some of the run-time capabilities.