KendoUI DataViz Tips and Tricks

The Windows Phone analytics service Wensus uses KendoUI DataViz components to draw the reports. The DataViz documentation is good but I think that there can never be enough examples. So, here’s few more. All the examples are available through jsFiddle.

The examples have been tested with KendoUI version 2012.2.710.

Bar chart with the margins removed between series

By default, if you create a Bar Chart with multiple series, there’s a margin between the bars which represent different series.

To make the chart more readable, it may be better to remove the margin. You can do this by setting the “spacing”-property to 0.

jsFiddle: http://jsfiddle.net/HdFsr/1/

Code:

$("#chart").kendoChart({
    title: {
        text: "Kendo Chart Example"
    },
    series: [{
        name: "Example Series",
        data: [200, 450, 300, 125],
        spacing: 0},
    {
        name: "Another Series",
        data: [200, 450, 300, 125],
        }],
    categoryAxis: {
        categories: [2000, 2001, 2002, 2003]
    }
});​

Automatically adjust step to make charts readable for an unknown amount of datapoints

Step-property can be used to configure how many labels are rendered for the categoryAxis. Without setting “step” and if there’s too much data, the chart may get messy:

But it’s much more readable when step is set to 10:

But what happens when you set the step to 10 and your backend sends you only few datapoints? The chart respects the step-property and again the chart may look clumsy:

The solution is to adjust the step-property dynamically, based on the amount of data. For this you can use chart’s dataBound-event in combination with the DataSource-component:

function dataBound(e) {
    var chart = $("#chart").data("kendoChart");
    if (dataSource.view().length > 4) {
        chart.options.categoryAxis.labels.step = 10;
    }
    else {
        chart.options.categoryAxis.labels.step = 1;
    }    
}

jsFiddle: http://jsfiddle.net/wkGud/1/

Code:

var dataSource = new kendo.data.DataSource({
    data: [{
        "ReportDate": "2012-01-02T00:00:00",
        "Value": 500.000000},
    {
        "ReportDate": "2012-06-01T00:00:00",
        "Value": 350.000000},
    {
        "ReportDate": "2012-07-01T00:00:00",
        "Value": 100.000000},
    {
        "ReportDate": "2012-08-16T00:00:00",
        "Value": 150.000000},
    {
        "ReportDate": "2012-08-17T00:00:00",
        "Value": 250.000000}]
});

function dataBound(e) {
    var chart = $("#chart").data("kendoChart");
    if (dataSource.view().length > 4) {
        chart.options.categoryAxis.labels.step = 10;
    }
    else {
        chart.options.categoryAxis.labels.step = 1;
    }    
}

$("#chart").kendoChart({
    title: {
        text: "Employee Sales"
    },
    dataSource: dataSource,
    series: [{
        type: "line",
        field: "Value"}],
    categoryAxis: {
        field: "ReportDate",
        type: "Date",
        baseUnit: "days"
    },
    dataBound: dataBound

});

Customizing the series colors:

KendoUI provides different themes out of the box, but configuring just the colors used by the charts is easy with seriesColors-property.

For example the default theme uses red and green:

If we want to display the same chart with different shades of blue, we can set the seriesColors:

seriesColors: ["#b4dbeb", "#8cc7e0", "#174356", "#0c242e"],

jsFiddle: http://jsfiddle.net/BmQd9/1/

Code:

$("#chart").kendoChart({
    title: {
        text: "Kendo Chart Example"
    },
    seriesColors: ["#b4dbeb", "#8cc7e0", "#174356", "#0c242e"],
    series: [{
        name: "Example Series",
        data: [200, 450, 300, 125]},
    {
        name: "Another Series",
        data: [200, 450, 300, 125]
        }],
    categoryAxis: {
        categories: [2000, 2001, 2002, 2003]
    }
});​

Links:

KendoUI Dataviz Documentation