In this article we will have a look at working with Pie Charts in JavaScript based Application for Windows Store. We will use a step-by-step approach.
Step 1
Add References
The very first thing to do is to add references for Telerik JS and CSS files in the project. If this is the first time you have worked with Rad Controls in Windows 8 then I suggest you read blog post to setup the environment .
After adding the files to the project we need to refer to them on the HTML file. Files can be referred to as given in the following code snippet:
<!--Telerik References -->
<script src="/Telerik.UI/js/jquery.js"></script>
<script src="/Telerik.UI/js/ui.js"></script>
<link href="/Telerik.UI/css/dark.css" rel="stylesheet" />
<link href="/Telerik.UI/css/common.css" rel="stylesheet" />
Step 2
Create a Chart
A Pie chart can be created by setting a data-win-control attribute of a div as Telerik.UI.RadChart and setting the series type as pie:
<div id="performancechart" data-win-control="Telerik.UI.RadChart"
data-win-options="{
series: [{
type: 'pie',
data : [
{value:30,category:'Math'},
{value:20,category:'Physics'},
{value:22,category:'Chemistry'},
{value:28,category:'Economics'}
],
lables :
{
visible:true
}
}
]}"
/>
In the above code snippet:
-
We are setting the data-win-control attribute to Telerik.UI.RadChart
-
In data-win-options, the series type is set to pie
-
In data-win-options the data is set locally
-
Data array contains two properties; they are values and categories
At this point, if we run the application then we will get an output something as in the following:
![data-win-control-attribute.jpg]()
Step 3
Configure More Pie Chart options
You can configure common options of char series as discussed in this blog post . Apart from common options you can configure options like the following:
-
colorField
-
explodeField
-
categoryFiled
Assume you have a data source as in the following:
![Figure 2.jpg]()
You can configure these values for the pie chart as in the following:
![Figure 3.jpg]()
Upon running that, your pie chart will appear as in the following. You will find that the colors of the categories have changed.
![pie-chart.jpg]()
You can explode a category as in the following. Eventhough in the following example we are setting the explode attribute with the explode property in the data array, you are free to set any property of the data array as an explode field by setting the explodeField attribute as we set the colorField.
![Figure 5.jpg]()
Upon running that, your pie chart will appear as in the following.
![Figure 6.jpg]()
In this we can work with pie charts. The following is the consolidated code of the above discussion:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>TestDemoJavaScript</title>
<!-- WinJS references -->
<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
<!--Telerik References -->
<script src="/Telerik.UI/js/jquery.js"></script>
<script src="/Telerik.UI/js/ui.js"></script>
<link href="/Telerik.UI/css/dark.css" rel="stylesheet" />
<link href="/Telerik.UI/css/common.css" rel="stylesheet" />
<!-- TestDemoJavaScript references -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
</head>
<body>
<h1>Chart Demo</h1>
<div id="performancechart" data-win-control="Telerik.UI.RadChart"
data-win-options="{
series: [{
type: 'pie',
data : [
{value:30,subject:'Math',color :'red',exlode : 'true'},
{value:20,subject:'Physics',color:'blue',explode:'false'},
{value:22,subject:'Chemistry',color:'green',explode:'true'},
{value:28,subject:'Economics',color:'gray',explode:'true'}
],
field: 'value',
categoryField: 'subject',
colorField :'color',
lables :
{
visible:true
},
tooltip :
{
visible : true
}
}
]}"
/>
</body>
</html>
Future Articles
In this article we learnted about working with pie Charts. We focused on only one type of series. In further articles we will explore various other series types and working with remote data in the Rad Chart. I hope you find this article useful. Thanks for reading.