Creating a Simple Sales Pie-chart using Javascript & HighCharts
In my last post, I gave a brief introduction about HighCharts, a java-script charting library.
In this post, let us create a Pie-chart using it. First, let us assume that a Product X has the below percentage of sales across these countries.
- China 15%
- US 25%
- India 35%
- Japan 2%
- Canada 12%
- Australia 11%
To represent this illustration programmatically using Pie-chart, let us create a new website project.
(A plain HTML file is more than enough but I prefer creating a visual studio website project as I am used to it :) )
First, download the HighChart library from http://www.highcharts.com/downloads/zips/Highcharts-2.1.9.zip, extract the files and keep them handy.
- Create a new website project in visual studio
- In the HTML Body, add a Div Container to hold the pie chart.
- Copy the Highcharts.js file (the one from the zip file you downloaded) to solution
- In the webpage, Add a Script Reference to Jquery Library & the Highcharts.js and configure the chart options.
- You are done!
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Pie Charts Demo</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="highcharts.js" type="text/javascript"></script>
<script type="text/javascript">
var chart;
$(document).ready(function () {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Global Product Sales, 2012'
},
tooltip: {
formatter: function () {
return '<b>' + this.point.name + '</b>: ' + this.percentage + ' %';
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function () {
return '<b>' + this.point.name + '</b>: ' + this.percentage + ' %';
}
}
}
},
series: [{
type: 'pie',
name: 'Product Sales',
data: [
['China', 15],
['United States', 25],
{
name: 'India',
y: 35,
sliced: true,
selected: true
},
['Japan', 2],
['Canada', 12],
['Australia', 11]
]
}]
});
});
</script>
</head>
<body>
<!-- 3. Add the container -->
<div id="container" style="width: 800px; height: 400px; margin: 0 auto">
</div>
</body>
</html>
Now, let me explain the code.
renderTo: Tells the library which tag to use as a container to render the chart. In the above example, the chart will be rendered on 'container' div.
You can configure the chart background color, border and shadow using the plotBackgroundColor, plotBorderWidth and plotShadow parameters.
I've given a title for the chart using the "title:" parameter. Also have configured the tool tip for the portions of the chart.
The most important part is to configure the "plotOptions: " like type of chart, formatters and specify the actual data with the"series :".
['China', 15] indicates that there is a 15% sales in china. You can also select a portion of the chart by clicking it.
Thats not all, you can select the themes, provide the data in fractions and there is so much to explore. Take some time and explore the library yourself.
