So you’ve got an amazing app or service, more users than you can
count, and a ton of data that you want to share with the world.
So what do you do with that data? Do you write your own charts and graphs
in pure HTML and CSS? Do you slog through the process of drawing
your own with a raw HTML Canvas or SVG library? Or do you
sit back, relax and drop a few Kendo UI DataViz
controls in place, tell them where to grab your data and take a
vacation while the rest of the internet tries to get browser
compatibility in to their hand-built charts?
I think the answer is pretty obvious. I’m not about to take the
time to learn how to use an API directly on top of SVG,
Canvas or any other technologies to build charts. I want to
display charts in my app, not build charts for any app. But
now that you’ve got your DataViz license and the files
donwloaded, where do you start? And how can you more
effectively show the information you have?
Not to worry. It’s easy to get started, get data loaded in to
your charts, and have them display the information you need
in the manner that best fits your users.
Reference The JavaScript
Kendo UI provides a lot of files in the download. There are
individual files for every aspect, including the DataViz
charts. There’s also the all-in-one “kendo.all.min.js” file,
which - as the name implies - is all of the JavaScript for
all Kendo UI features in one file.
If this is your first time working with Kendo UI, the easiest
way to get started is to reference the “all” file. This way you
only have one file to reference, and you’re set for the
JavaScript side of things.
<script src="/kendoui/js/kendo.all.min.js">
Do note the size of this file, though. It’s quite large because
it contains EVERYTHING in Kendo UI - all of the Web
widgets, all of the DataViz charts and graphs, and all of the
Kendo UI Mobile bits, too.
If you’re familiar with Kendo UI, I recommend not using the
“all” file in your production projects. You can limit the
files you need and reduce the size significantly, this way.
In the case of DataViz, you could go with another single
file:
<script src="/kendoui/js/kendo.dataviz.min.js">
This file contains all of DataViz and the things it
depends on, without any of the Web or Mobile bits. If you know
you need a large majority of the DataViz charts and graphs,
you may want to use this file.
Lastly, you always have the option of including invidual files
or creating a custom build
(note: you need a Telerik.com / KendoUI.com login to view this link)
that only has the bits that you need. If you’d like to include
only the files you need, see this page on the JavaScript dependencies.
Reference The CSS Files
The DataViz styling is a bit of a hybrid approach between CSS
and vector graphics with style rendered in to them. According
to the DataViz styling documentation,
The Kendo UI DataViz widgets use a mix of browser technologies to attain the required precision and responsiveness.
The visualizations are rendered as vector graphics. Their layout is computed in advance. In contrast, interactive features are built using traditional HTML elements.
As a result, appearance settings are split between declarative options and traditional CSS.
This means that you need to include the CSS files for Kendo UI
DataViz, including the theme that you wish to use. For example,
if I want to include the stylishly new “flat” theme, I would
reference these files:
<link rel="stylesheet" href="/kendoui/styles/kendo.dataviz.css">
<link rel="stylesheet" href="/kendoui/styles/kendo.dataviz.flat.css">
Note that you need to include the base “kendo.dataviz.css” file before
the theme-specific file to make sure everything turns out correctly.
Set The Chart Theme
Remember that note about dual-mode styling (CSS and vector graphics)
from a moment ago? This means you need to set the theme
within the charts, directly, in addition to including the correct
theme CSS files.
$("#chart").kendoChart({
// set the theme to flat for this chart
theme: "flat",
// ... other options for the chart
});
Basically, the vector graphics don’t use the
CSS files directly. But when you set the theme to the same name
as the CSS file that you included, you will get a consistent
look and feel for the charts’ vector graphics and the other
interactive bits that are built with HTML and CSS.
Create A Chart With A Series
Ok, I’ve already given away the secret to this one. Creating
a Kendo UI DataViz chart is as simple as any other Kendo UI
control. You only need to call the appropriate .kendo****
method from a jQuery selector to create the chart you want.
You should note that the .kendo****
method to call is most
likely going to be .kendoChart
, though. There are some
exceptions to this, like the .kendoSparkLine
call. But for
the most part, the majority of charts are created with the
.kendoChart
method. The thing that sets apart the chart
types is the series
type that you specify in the chart
options.
For example, set the series
type to pie
(along with
the title
and a few other options for the chart):
$("#chart").kendoChart({
title: {
position: "bottom",
text: "Share of Internet Population Growth, 2007 - 2012"
},
legend: {
visible: false
},
chartArea: {
background: ""
},
seriesDefaults: {
labels: {
visible: true,
background: "transparent",
template: "#= category #: #= value#%"
}
},
series: [{
type: "pie"
}]
});
The result is … !!!
Well, nothing. It turns out we haven’t specified any data to
show, so there isn’t anything to render!
Set Some Data To Show
In order to do anything useful, the DataViz charts need data.
It’s easy to hard code some data in to the charts, too. You
just need to add a data
parameter to the series
section:
$("#chart").kendoChart({
title: {
position: "bottom",
text: "Share of Internet Population Growth, 2007 - 2012"
},
legend: {
visible: false
},
chartArea: {
background: ""
},
seriesDefaults: {
labels: {
visible: true,
background: "transparent",
template: "#= category #: #= value#%"
}
},
series: [{
type: "pie",
startAngle: 150,
data: [{
category: "Asia",
value: 53.8,
color: "#9de219"
},{
category: "Europe",
value: 16.1,
color: "#90cc38"
},{
category: "Latin America",
value: 11.3,
color: "#068c35"
},{
category: "Africa",
value: 9.6,
color: "#006634"
},{
category: "Middle East",
value: 5.2,
color: "#004d38"
},{
category: "North America",
value: 3.6,
color: "#033939"
}]
}],
tooltip: {
visible: true,
format: "{0}%"
}
});
}
And the result of this is actually something useful!

But you don’t want to hard code your data all the time, do you?
Reference Data From An API
Adding a dataSource
to the chart options will let you specify any valid
Kendo UI DataSource
configuration. The easiest way to get started is to point your dataSource at
a JSON-based API end-point. Specify the dataType
as “json” and the DataSource
will know how to work with the data from that end-point.
$("#chart" + year).kendoChart({
dataSource: {
transport: {
read: {
url: "http://example.com/api/screen-resolution",
dataType: "json"
}
},
filter: {
field: "year", operator: "eq", value: year
},
sort: {
field: "year",
dir: "asc"
}
},
title: {
text: year
},
legend: {
position: "top"
},
seriesDefaults: {
type: "pie"
},
series: [{
field: "share",
categoryField: "resolution",
padding: 0
}],
tooltip: {
visible: true,
format: "N0",
template: "#= category # - #= kendo.format('{0:P}', percentage)#"
}
});
Put this together with multiple charts, like our demo page shows
and you can end up with a nice little dashboard of data.

More Than Just Pie-Charts
I have to admit. I love pie-charts, pie, and π but I especially
love cherry-pie-charts. They’re the best.

Kendo UI’s DataViz has far more than just this one pie-chart, though.
There are bar charts, line charts, radial charts, spark lines, guages, stock
charts and so much more!

Be sure to check out the demo section
and the documentation
for a more complete list of what Kendo UI
DataViz can do, and how to do it!
BUT WAIT! THERE’S MORE!
Kendo UI’s DataViz charts and graphs are already impressive,
if you ask me. But we’re not done, yet. We’ve got a bunch of
new features, a few new charts and other surprises up our sleeves!
If you’d like to see what we’re up to and get a closer look at
the next big thing in our charts and graphs toolbelt, be sure
to sign up for
the Q3 2013 Release Keynote.
