Kendo UI DataViz – Advance Charting

Exclusive offer: get 50% off this eBook here
Kendo UI Cookbook

Kendo UI Cookbook — Save 50%

Over 50 recipes to help you rapidly build rich and dynamic user interfaces for web and mobile platforms.

$29.99    $15.00
by Sagar Ganatra | June 2014 | Cookbooks Open Source Web Development

In this article by Sagar Ganatra, author of Kendo UI Cookbook, we will learn about different charting widgets provided by the Kendo UI that can be used to visualize data. These include the Stock Chart widget that shows you the stock price history of a particular stock, the Gauge widget that creates a dashboard that contains gauge charts, and Barcode and QRCode widgets that allow you to create codes that can be used to identify products.

(For more resources related to this topic, see here.)

Creating a chart to show stock history

The Kendo UI library provides a specialized chart widget that can be used to display the stock price data for a particular stock over a period of time. In this recipe, we will take a look at creating a Stock chart and customizing it.

Getting started

Include the CSS files, kendo.dataviz.min.css and kendo.dataviz.default.min.css, in the head section. These files are used in styling some of the parts of a stock history chart.

How to do it…

A Stock chart is made up of two charts: a pane that shows you the stock history and another pane that is used to navigate through the chart by changing the date range.

The stock price for a particular stock on a day can be denoted by the following five attributes:

  • Open: This shows you the value of the stock when the trading starts for the day
  • Close: This shows you the value of the stock when the trading closes for the day
  • High: This shows you the highest value the stock was able to attain on the day
  • Low: This shows you the lowest value the stock reached on the day
  • Volume: This shows you the total number of shares of that stock traded on the day

Let's assume that a service returns this data in the following format:

[ { "Date" : "2013/01/01", "Open" : 40.11, "Close" : 42.34, "High" : 42.5, "Low" : 39.5, "Volume": 10000 } . . . ]

We will use the preceding data to create a Stock chart. The kendoStockChart function is used to create a Stock chart, and it is configured with a set of options similar to the area chart or Column chart. In addition to the series data, you can specify the navigator option to show a navigation pane below the chart that contains the entire stock history:

$("#chart").kendoStockChart({ title: { text: 'Stock history' }, dataSource: { transport: { read: '/services/stock?q=ADBE' } }, dateField: "Date", series: [{ type: "candlestick", openField: "Open", closeField: "Close", highField: "High", lowField: "Low" }], navigator: { series: { type: 'area', field: 'Volume' } } });

In the preceding code snippet, the DataSource object refers to the remote service that would return the stock data for a set of days. The series option specifies the series type as candlestick; a candlestick chart is used here to indicate the stock price for a particular day. The mappings for openField, closeField, highField, and lowField are specified; they will be used in plotting the chart and also to show a tooltip when the user hovers over it. The navigator option is specified to create an area chart, which uses volume data to plot the chart. The dateField option is used to specify the mapping between the date fields in the chart and the one in the response.

How it works…

When you load the page, you will see two panes being shown; the navigator is below the main chart. By default, the chart displays data for all the dates in the DataSource object, as shown in the following screenshot:

In the preceding screenshot, a candlestick chart is created and it shows you the stock price over a period of time. Also, notice that in the navigator pane, all date ranges are selected by default, and hence, they are reflected in the chart (candlestick) as well. When you hover over the series, you will notice that the stock quote for the selected date is shown. This includes the date and other fields such as Open, High, Low, and Close.

The area of the chart is adjusted to show you the stock price for various dates such that the dates are evenly distributed. In the previous case, the dates range from January 1, 2013 to January 31, 2013. However, when you hover over the series, you will notice that some of the dates are omitted. To overcome this, you can either increase the width of the chart area or use the navigator to reduce the date range. The former option is not advisable if the date range spans across several months and years.

To reduce the date range in the navigator, move the two date range selectors towards each other to narrow down the dates, as shown in the following screenshot:

When you try to narrow down the dates, you will see a tooltip in the chart, indicating the date range that you are trying to select. The candlestick chart is adjusted to show you the stock price for the selected date range. Also, notice that the opacity of the selected date range in the navigator remains the same while the rest of the area's opacity is reduced. Once the date range is selected, the selected pane can be moved in the navigator.

There's more…

There are several options available to you to customize the behavior and the look and feel of the Stock Chart widget.

Specifying the date range in the navigator when initializing the chart

By default, all date ranges in the chart are selected and the user will have to narrow them down in the navigator pane. When you work with a large dataset, you will want to show the stock data for a specific range of date when the chart is rendered. To do this, specify the select option in navigator:

navigator: { series: { type: 'area', field: 'Volume' }, select: { from: '2013/01/07', to: '2013/01/14' } }

In the previous code snippet, the from and to date ranges are specified. Now, when you render the page, you will see that the same dates are selected in the navigator pane.

Customizing the look and feel of the Stock Chart widget

There are various options available to customize the navigator pane in the Stock Chart widget. Let's increase the height of the pane and also include a title text for it:

navigator: { . . pane: { height: '50px', title: { text: 'Stock Volume' } } }

Now when you render the page, you will see that the title and height of the navigator pane have been increased.

Using the Radial Gauge widget

The Radial Gauge widget allows you to build a dashboard-like application wherein you want to indicate a value that lies in a specific range. For example, a car's dashboard can contain a couple of Radial Gauge widgets that can be used to indicate the current speed and RPM.

How to do it…

To create a Radial Gauge widget, invoke the kendoRadialGauge function on the selected DOM element. A Radial Gauge widget contains some components, and it can be configured by providing options, as shown in the following code snippet:

$("#chart").kendoRadialGauge({ scale: { startAngle: 0, endAngle: 180, min: 0, max: 180 }, pointer: { value: 20 } });

Here the scale option is used to configure the range for the Radial Gauge widget. The startAngle and endAngle options are used to indicate the angle at which the Radial Gauge widget's range should start and end. By default, its values are 30 and 210, respectively. The other two options, that is, min and max, are used to indicate the range values over which the value can be plotted. The pointer option is used to indicate the current value in the Radial Gauge widget.

There are several options available to configure the Radial Gauge widget; these include positioning of the labels and configuring the look and feel of the widget.

How it works…

When you render the page, you will see a Radial Gauge widget that shows you the scale from 0 to 180 and the pointer pointing to the value 20.

Here, the values from 0 to 180 are evenly distributed, that is, the major ticks are in terms of 20. There are 10 minor ticks, that is, ticks between two major ticks. The widget shows values in the clockwise direction. Also, the pointer value 20 is selected in the scale.

There's more…

The Radial Gauge widget can be customized to a great extent by including various options when initializing the widget.

Changing the major and minor unit values

Specify the majorUnit and minorUnit options in the scale:

scale: { startAngle: 0, endAngle: 180, min: 0, max: 180, majorUnit: 30, minorUnit: 10, }

The scale option specifies the majorUnit value as 30 (instead of the default 20) and minorUnit as 10. This will now add labels at every 30 units and show you two minor ticks between the two major ticks, each at a distance of 10 units, as shown in the following screenshot:

The ticks shown in the preceding screenshot can also be customized:

scale: { . . minorTicks: { size: 30, width: 1, color: 'green' }, majorTicks: { size: 100, width: 2, color: 'red' } }

Here, the size option is used to specify the length of the tick marker, width is used to specify the thickness of the tick, and the color option is used to change the color of the tick.

Now when you render the page, you will see the changes for the major and minor ticks.

Changing the color of the radial using the ranges option

The scale attribute can include the ranges option to specify a radial color for the various ranges on the Radial Gauge widget:

scale: { . . ranges: [ { from: 0, to: 60, color: '#00F' }, { from: 60, to: 130, color: '#0F0' }, { from: 130, to: 200, color: '#F00' } ] }

In the preceding code snippet, the ranges array contains three objects that specify the color to be applied on the circumference of the widget. The from and to values are used to specify the range of tick values for which the color should be applied.

Now when you render the page, you will see the Radial Gauge widget showing the colors for various ranges along the circumference of the widget, as shown in the following screenshot:

In the preceding screenshot, the startAngle and endAngle fields are changed to 10 and 250, respectively. The widget can be further customized by moving the labels outside. This can be done by specifying the labels attribute with position as outside.

In the preceding screenshot, the labels are positioned outside, hence, the radial appears inside.

Updating the pointer value using a Slider widget

The pointer value is set when the Radial Gauge widget is initialized. It is possible to change the pointer value of the widget at runtime using a Slider widget. The changes in the Slider widget can be observed, and the pointer value of the Radial Gauge can be updated accordingly.

Let's use the Radial Gauge widget. A Slider widget is created using an input element:

<input id="slider" value="0" />

The next step is to initialize the previously mentioned input element to a Slider widget:

$('#slider').kendoSlider({ min: 0, max: 200, showButtons: false, smallStep: 10, tickPlacement: 'none', change: updateRadialGuage });

The min and max values specify the range of values that can be set for the slider. The smallStep attribute specifies the minimum increment value of the slider. The change attribute specifies the function that should be invoked when the slider value changes.

The updateRadialGuage function should then update the value of the pointer in the Radial Gauge widget:

function updateRadialGuage() { $('#chart').data('kendoRadialGauge') .value($('#slider').val()); }

The function gets the instance of the widget and then sets its value to the value obtained from the Slider widget.

Here, the slider value is changed to 100, and you will notice that it is reflected in the Radial Gauge widget.

Kendo UI Cookbook Over 50 recipes to help you rapidly build rich and dynamic user interfaces for web and mobile platforms.
Published: June 2014
eBook Price: $29.99
Book Price: $49.99
See more
Select your format and quantity:

Using the Linear Gauge widget

The Linear Gauge widget is also used to indicate where a value lies in the given range. It is similar to the Radial Gauge widget and takes the same set of options as well. It is used to display the value on a linear scale.

How to do it…

Linear Gauge is created by invoking the kendoLinearGauge function on the DOM element. It uses the same options as the Radial Gauge widget:

$("#chart").kendoLinearGauge({ pointer: { value: 20, }, scale: { min: 0, max: 200, majorUnit: 20, minorUnit: 10 } });

This will display the Linear Gauge widget with its pointer at 20. By default, the widget is displayed vertically, that is, the value is projected on the y axis. To display the widget horizontally, specify vertical as false under the scale option. This will display the widget horizontally.

How it works…

When you render the page, the Linear Gauge is displayed vertically, as shown in the following screenshot:

After setting vertical as false, the widget is displayed horizontally.

As with the Radial Gauge, the Linear Gauge can also include the ranges option. After including the ranges option, you will see the widget showing this option along its scale.

There's more…

The pointer shown on the Linear Gauge is barIndicator by default. The other option available is arrow. To change the pointer, set shape to arrow under the pointer option:

pointer: { value: 20, shape: 'arrow' }

Now when you render the page, you will see an arrow.

Generating barcode images using various encoding methods

The Kendo UI library provides APIs that can be used to generate the barcode graphic image for the given value. For example, each product in the supermarket can have a barcode associated with it. When a customer purchases the product, the barcode would be used to get the product price and other details. The library can generate the barcode by referring to the unique identifier.

How to do it…

A barcode image can be generated by invoking the kendoBarcode function on the DOM element:

$("#chart").kendoBarcode({ value: '1234567' });

Here, the 1234567 value will be encoded using the default encoding, that is, code39. You can also specify the encoding method to be used by specifying the type field:

$("#chart").kendoBarcode({ value: '1234567', type: 'ean8' });

In the preceding code snippet, the encoding type is set to ean8. The other possible values are EAN13, UPCE, UPCA, Code11, Code39, Code39Extended, Code93, Code93Extended, Code128, Code128A, Code128B, Code128C, GS1-128, MSImod10, MSImod11, MSImod1010, MSImod1100, and POSTNET. The value attribute is mandatory and a barcode is generated using the value and the specified encoding type.

How it works…

When you don't specify the encoding type, the code39 encoding is used to generate the barcode, as shown in the following code snippet:

The value is shown in the previous barcode. To hide the value, specify the text attribute and set the visible option to false:

$("#chart").kendoBarcode({ value: '1234567', text: { visible: false } });

When you use some other encoding type, for example, ean8, the barcode is generated accordingly.

Summary

In this article, we looked at advanced data visualization components that allow us to build dashboard-like applications with ease. This includes creating a Stock chart, creating a radial and linear gauge, and generating barcode and QR code.

Resources for Article:


Further resources on this subject:


Kendo UI Cookbook Over 50 recipes to help you rapidly build rich and dynamic user interfaces for web and mobile platforms.
Published: June 2014
eBook Price: $29.99
Book Price: $49.99
See more
Select your format and quantity:

About the Author :


Books From Packt


Building Mobile Applications Using Kendo UI Mobile and ASP.NET Web API
Building Mobile Applications Using Kendo UI Mobile and ASP.NET Web API

Learning Kendo UI Web Development
Learning Kendo UI Web Development

Instant Kendo UI Grid
Instant Kendo UI Grid

Instant Kendo UI Mobile
Instant Kendo UI Mobile

ASP.NET 4 Social Networking
ASP.NET 4 Social Networking

Enhancing Microsoft Content Management Server with ASP.NET 2.0
Enhancing Microsoft Content Management Server with ASP.NET 2.0

ASP.NET jQuery Cookbook
ASP.NET jQuery Cookbook

ASP.NET 3.5 Application Architecture and Design
ASP.NET 3.5 Application Architecture and Design


Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software