image.png

How to create Custom Theme for Kendo UI DataViz

Kendo UI DataViz is our Data Visualization package as part of the Kendo UI Framework. Kendo UI DataViz is HTML5 compliant and generates SVG (Scalable Vector Graphics) on HTMl5 supported browsers and falls back to VML (Vector Markup Language) on browsers that don’t support HTML5. VML is supported by pretty much all browser versions. If you are keen to know more about Kendo UI DataViz, head over to our DataViz demos online: http://demos.telerik.com/kendo-ui/area-charts/index

This blog post will walk you through how to create a custom theme for DataViz charts. Out of the box we ship the following 11 themes:

Default
image

Blue Opal
image

Bootstrap
image

Silver
image

Uniform
image

Metro
image

Black
image

Metro Black
image

High Contrast
image

Moonlight
image

Flat
image

I don’t know about you guys but I say those are pretty good themes for me. But we do understand that not all the times you will go with the default themes we ship. You may want to customize it to your organizational or even project color combination. So we will see how we can do the customization in the coming section.

Kendo UI Themebuilder:

The tool which will help you to customize Kendo UI themes is known as “Kendo UI ThemeBuilder”. It lets you modify themes so that they match the look and feel of our DataViz widgets to that of your site or app. It is an online tool and no we don’t charge you to use it. You can look at the ThemeBuilder tool here: http://demos.telerik.com/kendo-ui/themebuilder/

Steps to Customize DataViz Widgets:

  1. Navigate to ThemeBuilder tool online.
  2. To start customization, you are required to first select one of the default themes. This is like a foundation to start the customization. So select any default theme first.
    image 
  3. Next start the ThemeBuilder tool by clicking on the button named “Kendo UI ThemeBuilder”. This will launch the ThemeBuilder GUI tool and will appear on the right hand side of the page. Give it a couple seconds to load the GUI.
    image
  4. Since we want to customize the DataViz widgets, select the button labeled “DataViz” in the ThemeBuilder GUI tool. This will provide us with a UI which will help us to customize different aspects of the DataViz widgets.
    image 
  5. Things that can be customized on the DataViz Widgets are: Title, Legend, Charting Area, Axes, Tooltip, Series Colors and Gauge
  6. Scroll Down the page to see the DataViz widgets. Then change the appropriate widget property to your custom value. For e.g. I have changed the chart area color to a custom value and as soon as I do it – I get a instant update of how the widget will look like. Here is a snapshot of my changes:
    image
    Like this you can set your custom colors for all the customization points available for the widget.
  7. Once you are done with your changes, click on the “Get JSON” button available on top of the GUI tool. This will spit out a JSON structure of the changes you just did.
    image 
  8. The JSON code will look like below:
    image
    Notice that by default the custom code is named as “newTheme”. You can change that and provide your own custom name. Remember the name as this is the name you will use to set a theme on a DataViz widget. All we are doing is – we register this new theme with the DataViz ui and later when we set theme property of DataViz widgets to this custom theme name, Kendo UI will be able to apply your color schemes to the widgets.
  9. Copy the JSON code and add that into a new JavaScript file. Give JS file a meaningful name and include it in any page where you need the custom theme.

Using Custom Theme:

In the previous section, we saw how to create a custom theme. In order to use the custom theme, all you need to do is to set the “theme” property on DataViz widgets to the new custom theme name you have provided during registration. Here is a code snippet of setting the theme on a DataViz widget:

$("#area-chart").kendoChart({

        theme:"LohithTheme",

            transitions: false,

            title: {

                text: "Internet Users"

            },

            legend: {

                position: "bottom"

            },

            seriesDefaults: {

                type: "area"

            },

            series: [

                {

                    name: "United States",

                    data: [67.96, 68.93, 75, 74, 78]

                }, {

                    name: "World",

                    data: [15.7, 16.7, 20, 23.5, 26.6]

                }

            ],

            valueAxis: {

                labels: {

                    format: "{0}%"

                }

            },

            categoryAxis: {

                categories: [2005, 2006, 2007, 2008, 2009]

            },

            tooltip: {

                visible: true,

                format: "{0}%"

            }

        });

I have named my theme as “LohithTheme” and use that name while creating a chart.

I have put up a full fledged demo with a custom theme here: http://trykendoui.telerik.com/@kashyapa/icAJ. This is our new shiny playground for Keno UI called “Kenod UI Dojo”. In the code section you can review the JS code and when you click on Run button output will be shown on the right hand side. Here is snapshot of my custom theme in action:

image

And that’s as easy as it can get to customize a DataViz theme.

Hope this blog post helps you if you have a similar scenario of customizing our DataViz widgets. Do let us know your feedback on this blog post through the comments.

Till next time – Happy Coding.

Drill Down Chart

Drill Down Charts using Kendo UI DataViz

One of the fascinating things about being an evangelist is that, everyday I get to hear a new problem that people are trying to solve. It always keeps me on my toes as it gives me an opportunity to dig into our documentation once again and unearth the code necessary to solve the problem. In this blog post I will talk about one such problem a customer sent us. They wanted to know if Kendo UI DataViz charts support drill down or not. Out of the box Kendo UI DataViz does not have the capability in built but we provide events on the chart which will help you to achieve this functionality easily. So this blog post is all about achieving drill down functionality using Kendo UI DataViz chart. So if you have such a situation in your project, you may want to sit back and follow rest of the post.

Step 1 – Define the markup:

As you know in order to work with Kendo UI DataViz you will need to first add reference to Kendo UI DataViz CSS and then add reference to Kendo UI DataViz Theme CSS. Theme can be anything for e.g. black, metro, blue opal etc. Then add a reference to Jquery and Kendo UI DataViz JavaScript. Next define a div and give it a id of “chart”.

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.dataviz.black.min.css">
<body>
<div id="chart" ></div>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.416/js/kendo.all.min.js"></script>
<script>
<!-- chart draw logic here -->
</script>
</body>

Step 2 – Prepare Data:

For the sake of this blog post i am going to fake some data about browsers market share. So initially i will show column chart for major browsers. Then on clicking each column i should be able to drill down into its specific data. I will create my data as a JavaScript array and use them for binding to chart. Here are my data array which i will use while binding to chart:

<script>
var chartInitialData=[
 {category:"MSIE",value:55.11},
 {category:"Firefox",value:21.63},
 {category:"Chrome",value:11.94},
 {category:"Safari",value:7.15},
 {category:"Opera",value:2.14},
 ];
 var msieData = [
 {category:"MSIE 6.0",value:10.85},
 {category:"MSIE 7.0",value:7.35},
 {category:"MSIE 8.0",value:33.06},
 {category:"MSIE 9.0",value:2.81},
 ];
</script>

As you can see, I have an initial data to bind to the chart. And also the drill down data. For the sake of simplicity i have only shown drill down data for one of the columns. At the end of this post i will give link to the code which will have drill down data for all the columns of the chart.

Step 3 – Initialize the Chart:

Now we are ready to initialize the chart and bind the initial data to it. Here is the code snippet for initializing the chart:

$(document).ready(function(){

 $("#chart").kendoChart({
 theme:"Black",
 title: { text: "Browser market share, March, 2014"},
 dataSource:{ data:chartInitialData },
 series: [{
 type:"column",
 field:"value",
 categoryField:"category",
 labels:{
 visible:true,
 template:"${value}%"
 }
 }],
 tooltip:{
 visible:true,
 template:"<center>${category}: <b>${value}% market share</b><br/>Click to see ${category} versions</center>"
 },
 });
 })

Let me go over the code once. I access an element with id “chart” and then initialize Kendo Chart on that element. I set the theme to Black. Then i provide a title to the chart. Next comes the data source and i create a Kendo.data.DataSource object and provide the value of chartInitialData to data property. Then I set the series as a column chart type. Next I set the value field and category field of the chart to corresponding column name from the data source. I also set the labels to be visible on top of each column. Lastly I set the tooltip to a custom template. Now if we run the code this is what we see:

Drill Down Chart

Drill Down Chart Initial Look


Step 4 – Handle Series Click:

Now that we have our chart initialized and see that the data is getting bound correctly, next step is to handle the series click. Series Click is an event fired when the user clicks on any columns in the chart. Chart API exposes a method called setDataSource(). So in order to achieve a drill down, handle the series click event and set a new data source to the chart. What this does is, it will repaint the chart area and provides the drill down effect. So here is the code snippet for the seriesClick event:

seriesClick: function(e)
 {
 var categorySelected = e.category;
 var chart = $("#chart").data("kendoChart");
 if(categorySelected === "MSIE")
 {
 chart.setDataSource(new kendo.data.DataSource({data:msieData}));
 }
 else if(categorySelected === "Firefox")
 {
 chart.setDataSource(new kendo.data.DataSource({data:ffData}));
 }
 else if(categorySelected === "Chrome")
 {
 chart.setDataSource(new kendo.data.DataSource({data:chromeData}));
 }
 else if(categorySelected === "Safari")
 {
 chart.setDataSource(new kendo.data.DataSource({data:safariData}));
 }
 else if(categorySelected === "Opera")
 {
 chart.setDataSource(new kendo.data.DataSource({data:operaData}));
 }
 else
 {
 //not handling the child level drill down - setting the chart back to original data source
 chart.setDataSource(new kendo.data.DataSource({data:chartInitialData}));
 }
 }

And thats all it is there to create a drill down with Kendo UI DataViz.

Here is a link to the source code of this demo: http://trykendoui.telerik.com/@kashyapa/eCEP/3.

The demo code is done using our Kendo UI Dojo. When you navigate to the demo page, left hand side will have the source code and right hand side will show the output. You will need to click on the Run button on the page to see the output.

Hope this demo helps somebody who want to achieve the same scenario.

Till next time – Happy Coding.

India_elearning_webinars_April_May.jpg

Webinar Recap: Easy HTML5 Data Visualization with Kendo UI DataViz

Apr – May 2013 will see a series of webinar from Telerik India pertaining to Data Visualization, Team Pulse, Windows 8, SiteFinity, Windows Phone 8 and Kendo UI. If you are interested in any of these webinars do take a look at the following post: https://telerikhelper.net/2013/03/19/ninja-enough-telerik-india-webcasts-april-may-2013/.

On Apr 11 we delivered a webinar on HTML5 Data Visualization titled – “Easy HTML5 Data Visualization with Kendo UI DataViz”. This post is a recap of the webinar. As part of the webinar we discussed the following things:

  • What is Data Visualization ?
  • Why do we need Data Visualization ?
  • How do we do Data Visualization ?
  • What does HTML5 technology define for Data Visualization ?
  • Introducing Kendo UI DataViz
  • Demo

Here is the slide deck used for the webinar:

Here is the video recording of the webinar:

Easy HTML5 Data Visualization with Kendo UI DataViz from Telerik Helper on Vimeo.

During this webinar we had a lot of questions and I am trying to address them here:

  1. There are couple of free jquery plug-in available on the net. which do all these charts. how Kendo UI different from  them?
    Kendo UI aims at providing unified framework for HTML5 & JavaScript Apps/Sites. Kendo UI is all about HTML5 powered client side javascript frame work. The DataViz package of Kendo UI spits out the Charts/Graphs/Gauges using SVG technology on modern browsers and will render as VML on older browsers. So if you use Kendo UI DataViz to perform your data visualization rest assured that you are HTML5 complaint.
  2. Being a .Net developer why I should use HTML5 and not Silverlight for all this. same can  be achieved with Silverlight as well?
    The decision to use Silverlight or HTML5 will depend on the nature of the project. Silverlight is still a plugin based technology where as HTML5 is trying to standardize the web world with a common structure to be supported by all browsers.
  3. For running Silverlight applications , user has to download the runtime first. Is it the same for Kendo UI code?
    Kendo UI is a pure client side JavaScript framework. Kendo UI relies on Stylesheet and JavaScript. We have only one dependency and that is of Jquery. Apart from this nothing else is needed.
  4. Why we need to choose separate chart product – when asp.net charting can give the charting option?
    The charting option provided by ASP.NET as far as I know if not HTML5 based. Meaning the output of the chart/graph through ASP.NET charting is still Image based and does not use the HTML5 recommended SVG for output. Where as Kendo UI is a HTML5 compliant and outputs the charts/graphs as SVG on modern browsers and as VML on older browsers.
  5. Can we add Kendo UI references into the PHP project?
    Absolutely. Kendo UI is serer agnostic. Meaning it does not care what server side technology has been used. This is because Kendo UI is a client side JavaScript framework. And to use Kendo UI you only reference a couple of style sheets and scripts and you are up and running. For data you will need to make sure that you create JSON end points as Kendo UI works well out of the box with JSON and XML.
  6. Can we change the styles according to us?
    Yes very much. We provide an easy way to custom style all the Kendo UI widgets. We have an online theme builder for web and for mobile controls. For more information check out this page: http://demos.kendoui.com/
  7. Can we use Kendo on Windows 8 metro & mobile apps ?
    Kendo UI consists of 3 packages – Web, DataViz and Mobile. The Web can be used for Web Applications. Mobile controls can be used to develop Cross Platform Hybrid Mobile Apps. So Kendo UI Mobile Controls support Windows Phone. As of now we do not have support for Windows 8.
  8. can we use it for 3D, is there any support for that?
    We do not support 3D charting at the moment.
  9. Will this work on mobile browsers ?
    Since DataViz output SVG as the format for the chart/gauges, it can run on both desktop browsers and mobile browsers.
  10. Does the charts support Drill Down option?
    Drill-down functionality is not supported out of the box yet. However the chart exposes a seriesClick event which can be used instead. You can find a live demo here.
  11. In the demo shown, was usage of valueAxis , categoryAxis, tooltip…. are these syntax to use kendo ui or some sort of data…??
    These are the configuration settings you do on the Kendo UI DataViz objects and at runtime the chart is generated based on these settings.
  12. Can i use Kendo UI in my .net application instead of SSRS charts?
    Absolutely. You just need to make sure you provide an endpoint which can return JSON payload and the Kendo UI DataViz widgets can consume data and plot it.
  13. How do we know Kendo Chart options ? as you are passing some options to it. is there any full fledged docs ?
    The Kendo UI Documentation can be found at http://docs.kendoui.com. We have the API reference, Getting Started, Tutorials at the documentation site.
  14. Does this come with Samples?
    Yes. whether you download the trial or licensed version of Kendo UI – we ship the demo source code with it.
  15. can we populate the data from database and bind this data to kendo charts?
    Kendo UI is server side agnostic and does not care about what is the technology used for server side. Having said that the way Kendo UI works is – it can understand JSON or XML. So as long as data is passed as JSON/XML we don’t care about anything else. So you need to make sure that you create endpoint i.e. services which can return data in JSON or XML format. Kendo Widgets will be able to read data from those services out of the box.

Also, we had promised to attentive members from the audience will get our Telerik Ninja t-shirt. Well here are 2 winners we picked:

  • Ravi Gadag
  • Narendra Bisht

Congratulations to the winners and we will be getting in touch with you soon. Rest of you don’t loose heart. We have 5 more webinars in April and May and in each webinar we will be giving out 2 shirts each.

Hope you liked this webinar and we hope to see you back in our future webinars.

4 Steps to Kendo UI


Overview:

In this post, we will look at the steps involved in working with Kendo UI. For those of you who are hearing about Kendo UI for the first time – I would recommend you head straight to www.KendoUI.com and spend couple of moments there to familiarize yourself with Kendo UI. In brief Kendo UI is

Kendo logo

A comprehensive, end-to-end framework, compatible with jQuery, and custom-built from the ground up for rock-solid reliability and lightning-fast performance. Includes MVVM support, a rich DataSource, several UI widgets, and everything you need to build rich JavaScript applications today.

It takes 4 steps to working with Kendo UI. So lets see the 4 steps in detail in the coming sections.

 


Step 1:

The simplest of all the steps :). This step involves downloading of Kendo UI. You can download Kendo UI from the download page at: http://www.kendoui.com/download.aspx.

Kendo UI comes in 3 flavors, namely:

  • Kendo UI Web – UI controls to be used in web applications
  • Kendo UI Data Viz – Data Visualization controls for both Web and Mobile platforms
  • Kendo UI Mobile – UI controls for Mobile platforms like iOS, Android and BlackBerry

Kendo UI comes with a free 30 day trial and I highly recommend downloading that. Rest of the sections will assume that you have downloaded kendo ui on to your hard disk.


Step 2:

Once you have downloaded the Kendo UI on to your hard drive next step is to start using it in a HTML page. First piece to get in place is the stylesheets required by the Kendo itself. These stylesheets are responsible for giving the look and feel of the UI controls or widgets as we call them. When you install the Kendo ui the styles folder contains all the required stylesheets. Kendo UI ships with  5 themes namely – Default, Black, Blue Opal. Metro and Silver.

We need to first reference the common stylesheet required by the Kendo framework. The link tag for this as follows:

<link href=”styles/kendo.common.min.css” … />

Here are the theme specific stylesheet which must be referenced while applying a particular theme:

  • Default theme:

<link href=”styles/kendo.black.min.css” … />

  • Black theme:

<link href=”styles/kendo.black.min.css” … />

  • Blue Opal theme:

<link href=”styles/kendo.blueopal.min.css” … />

  • Metro theme:

<link href=”styles/kendo.metro.min.css” … />

  • Silver theme

<link href=”styles/kendo.silver.min.css” … />

If you are using DataViz framework then you would need to refer DataViz stylesheet apart from the common stylesheet. Here is the link tag for that:

<link href=”styles/kendo.dataviz.min.css” … />

Here is the HTML code for step 2:

<!DOCTYPE html>
<html>
  <head>
    <title>Kendo UI</title>
    <!-- Kendo UI Web styles -->
    <link rel="stylesheet" href="styles/kendo.common.min.css" />
    <link rel="stylesheet" href="styles/kendo.default.min.css" />
  </head>
  <body>
  </body>
</html>

Step 3:

Once we have the stlesheet in place, next it to add the Javascripts which is required for the initialization of the UI controls/widgets themselves.

So for web applications, the first script to reference is the jquery. Then reference the kendo.web.min.js file from the js folder. Here is how the =script tag will look like:

<script src=”js/jquery.min.js” ..></script>
<script src=”js/kendo.web.min.js” ..></script>

If you are working with Data Visualization, then instead of the kendo.web.min.js you will need to refer kendo.dataviz.min.js file.

Here is the HTML code for step 3:

<!DOCTYPE html>
<html>
  <head>
    <title>Kendo UI</title>
    <!-- Kendo UI Web styles -->	
    <link rel="stylesheet" href="styles/kendo.common.min.css" />
    <link rel="stylesheet" href="styles/kendo.default.min.css" />

    <!-- Kendo UI Web scripts -->
    <script src="js/jquery.min.js"></script>
    <script src="js/kendo.web.min.js"></script>	

  </head>
  <body>
  </body>
</html>

Step 4:

This is the interesting step. With Step 2 and Step 3 we have set the stage for the most interesting part of the journey with Kendo UI. Stykesheets and scripts necessary to work with Kendo UI has been referenced. Now we see how to initialize the kendo UI controls or widgets. Kendo UI Web as nearly 19 widgets to work with. You can know more about this at http://demos.kendoui.com/web/overview/index.html.

For this exercise I will take a simple control like Calendar widget and show you how to initialize that. To start with, place a div in the HTML body and give it name, let’s say “kendo-calendar”. Next spin up a jquery statement for document ready and code the following:

<script>
  $(document).ready(function(){
    $("#kendo-calendar").kendoCalendar();
  })
</script>

well that’s all its there to working with kendo UI. What we have done is, we have grabbed the div which have placed it in the HTML body and used kendo framework to turn that into a pretty neat calendar. Here is the code for the Step 4:

<!DOCTYPE html>
<html>
  <head>
    <title>Kendo UI</title>
    <!-- Kendo UI Web styles -->	
    <link rel="stylesheet" href="styles/kendo.common.min.css" />
    <link rel="stylesheet" href="styles/kendo.default.min.css" />

    <!-- Kendo UI Web scripts -->
    <script src="js/jquery.min.js"></script>
    <script src="js/kendo.web.min.js"></script>	

  </head>
  <body>
	<div id="kendo-calendar"></div>
	<script>
		$(document).ready(function(){
			$("#kendo-calendar").kendoCalendar();
		});
	</script>
  </body>
</html>

Here is the live version of the same code that I have created in jsfiddle:

http://jsfiddle.net/kashyapa/CrEZb/


Summary:

In this post we saw how easy it is to work with Kendo UI. with simple 4 steps you are ready to take a ride with Kendo UI. Although we saw a simple example of calendar being initialized, pretty much all the widgets in Kendo UI can be initialized in the same mechanism. Hope you will do the step 1 and following along till step 4.

Till next time, Happy coding.