How-To: Create Beautiful Charts with Kendo UI with Local Data

If you know jQuery, and want to include data-viz elements in your web page without all the hassle, you are at the right place. I am going to give you a gist of how Kendo works with jQuery to create robust data-viz elements.

We will build a ratings pie chart, step by step. Final product is shown below.

1. Download

First things first. You need to download Kendo UI. There are several paid versions, and a free (trial) version. Trial is more than enough for trying it out.

Download Kendo UI for a trial period from here. You will have to sign up to download it.

2. Transport

Extract the downloaded ZIP archive to an easily accessible location. We are going to need it’s js and css folders.

3. Kickstart

Kickstart the project by creating a new folder, say kendo-pie. Copy the downloaded js and css folders in kendo-pie.

Now, create a new HTML file in kendo-pie, say index.html. This is our main webpage. The pie chart will reside here.

4. The HTML

Open index.html with your favourite text editor. Add some starter code.

Give it a title, say Overall Ratings. Link all the necessary js and css files, inside head.

Time to populate the body. Create a wrapper (div), with id overall. The actual chart element and it’s script will reside in this wrapper. Create the chart div inside the wrapper, with id chart. Give it some style with a style attribute.

The above goes inside body, and the whole thing up-to this point looks something like this:

5. The jQuery

Create a script element inside the wrapper, and add some starter jQuery code.

Inside the document-ready function, select the chart element with jQuery’s id selector, and apply kendoChart() method.

6. The Kendo

kendoChart() takes a configuration object as an argument. This configuration object is used to describe the chart and include data (local or remote) to be represented.

Let’s contsruct the configuration object:

  1. Add title property.

2. Add legend property.

3. Add some defaults.

4. Add series properties: type of chart and local data.

5. Add tooltip property.

kendoChart() method is ready. So is the script. Coding part is complete. Wrapper should look like this.

These were the basic steps to create a pie chart using jQuery and Kendo, mostly Kendo. Now, open index.html in browser, and you should see output as below.

I hope the above steps were helpful in giving you a basic idea about Kendo UI. It’s up to you now to tweak the chart however you want, or create a new element altogether. There are loads available. Docs are available here, and demos here.

Note: This post is authored by Mr. Abhay Kumar, interning with GTM Catalyst (distributor of Telerik controls in India).

Advertisements

How to work with Pie Charts in JavaScript based Application for Windows 8

In this post we will take a look on working with Pie Charts in JavaScript based Application for Windows Store. We will follow step by step approach in this blog post.

Step 1: Add References

Very first we will add Telerik JS and CSS files references in the project. If first time you are working with Rad Controls in Windows 8, I suggest you to read blog post to setup the environment

After adding the files in the project we need to refer them on the html file . Files can be referred as given in 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 data-win-control attribute of a div as Telerik.UI.RadChart and setting 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
 }

 }
 ]}"

 />

&nbsp;

In above code snippet,

  • We are setting data-win-control attribute as Telerik.UI.RadChart
  • In data-win-options , series type is set as pie
  • In data-win-options data is set locally.
  • Data array contains two properties. They are values and categories

At this point if we go ahead and run the application, we will get an output something like below

image

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 following,

  1. colorField
  2. explodeField
  3. categoryFiled

Assume you have data source as following

image

You can configure these values for pie chart as following

image

On running you will pie chart as following. You will find that colours of categories have been changed.

image

You can explode a category as following. Even though in following example we are setting explode attribute with explode property in data array, you are free to set any property of data array as explode field by setting explodeField attribute as we set colorField.

image

On running you will pie chart as following.

image

In this we can work with pie charts. Below is the consolidated code of 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
 }

 }
 ]}"

 />

&nbsp;

</body>
</html>

&nbsp;

Future Post

In this post we learnt working with pie Charts. We focused on only one type of series. In further posts we will explore various series type and working with remote data in the Rad Chart. I hope you find this post useful. Thanks for reading.