Creating charts using kendoChart

The Kendo data visualization library provides several charting widgets that can be built with ease. In this recipe, we will first build a column chart and then customize its look and feel. A column chart displays vertical bars, visually representing the provided data.

Getting started

The kendo.all.min.js file contains all the components, that is, Web, Mobile, and DataViz widgets. However, if you're building only data visualization components, then include the kendo.dataviz.min.js file.

How to do it…

To create a chart, let's add a container to the page, specifying the dimension of the chart area, as shown in the following line of code:

<div id="chart" style="width:500px; height: 400px">

Notice that the chart has a width of 500 pixels and a height of 400 pixels. This area will be used to render the chart. The next step is to initialize the chart using the kendoChart function, as shown in the following line of code:

$("#chart").kendoChart()

In the preceding code...