DataViz Does Rendering Modes And Browser Support

Kendo UI’s DataViz suite is one of the most flexible and versatile data visualization suites around. It has a leading number of charts, graphs, geo-spacial visualizations, and other bits, letting you chart, plot and pie your way to amazing dashboards and graphs. It also also has a suite of rendering engines that support browsers all the way back to IE7.

Yes, that’s right. I said IE7!

But don’t worry - DataViz is not mired in ancient technologies that keep it from moving forward. IE7 support is handled through one of three rendering engines in the suite: the VML engine, SVG or Canvas.

So how does this work? Which engine should I choose? How do I get IE7 support if I want Canvas or SVG as well?

Fear Not IE7 Compatibility

I know, I know. At least … well… 99% of you are thinking this right now:

But don’t worry! IE7 support is transparent to you, the developer! You literally don’t have to think about it. Not one bit. Never. EVAR.

The DataViz suite is a highly intelligent system that knows when you’re in a browser that doesn’t support SVG or Canvas. When it sees that, it drops back to VML support for you. Even if you explicitly tell DataViz to render using Canvas or SVG, it will still drop back to VML when it seems an old browser that doesn’t support your specified rendering mode.

Here are some screenshots of DataViz chart rendered in IE7, just to prove the point (click to view larger version).

Yes, these are all rendered in IE7. The first two directly from a Windows XP machine, and the second two from BrowserStack Screenshots. As you can see, it’s nearly impossible to get IE7 support wrong, because of the intelligence in the suite. You simply don’t need to worry about it.

If you want to explicitly specify VML as the rendering engine, you can. It’s not necessary as the DataViz suite will fall back to VML. But if you need to force browsers in to using VML, you can.

function createChart() {
    $("#chart").kendoChart({
        title: {
            position: "bottom",
            text: "Share of Internet Population Growth, 2007 - 2012"
        },
        // ..., 


        // set the rendering engine
        renderAs: "vml",


        series: [{
            type: "pie",
            startAngle: 150,
            data: [{
              // ...
            }]
        }],
        // ...
    });
}

$(document).ready(createChart);

Scale Those Vector Graphics!

The SVG engine has been the default rendering engine of DataViz for some time now, and it is still the default. This is largely due to the number of browsers that support SVG. It’s a very common thing - far more common than most people think, honestly. Other than really really old browsers, like IE7, there are very few browsers that don’t support SVG these days.

What this really means, is you don’t have to do anything to specify SVG as the rendering engine. Just configure your chart with your daata, labels, etc, and you’ll see the SVG rendering in to your browser.

If you want to explicitly specify SVG as the rendering engine, you can. It’s not necessary right now, as SVG is the default, but you can specify it.

function createChart() {
    $("#chart").kendoChart({
        title: {
            position: "bottom",
            text: "Share of Internet Population Growth, 2007 - 2012"
        },
        // ..., 


        // set the rendering engine
        renderAs: "svg",


        series: [{
            type: "pie",
            startAngle: 150,
            data: [{
              // ...
            }]
        }],
        // ...
    });
}

$(document).ready(createChart);

Rendering As Canvas

If you’re targeting the latest and greatest browsers, and want the potentially awe-inspiring speed of the newest rendering engine around, you should check out the Canvas engine for DataViz. To do this, just set the renderAs attribute to … “canvas”! (I know, shocking surprise as to how you set that, right?)

function createChart() {
    $("#chart").kendoChart({
        title: {
            position: "bottom",
            text: "Share of Internet Population Growth, 2007 - 2012"
        },
        // ..., 


        // set the rendering engine
        renderAs: "canvas",


        series: [{
            type: "pie",
            startAngle: 150,
            data: [{
              // ...
            }]
        }],
        // ...
    });
}

$(document).ready(createChart);

You should note that the support for Canvas is limited to modern browsers (IE10+, Chrome, Firefox, etc). There are also some limitations in the interactivity of charts with canvas mode rendering. These limitations will become less and less of an issue over time, of course. As browsers die off and as new features are added to DataViz, I expect canvas to become the way to work with data visualizations.

Support All The Browsers, No Problem

As you can see, DataViz supports a massively wide range of browsers through it’s three rendering egines:

• VML
• SVG
• Canvas

If you want the most browser support for your charts, or if you’re dealing with slightly older browsers, you’ll probably want to stick with SVG for now. But moving forward, the web is jumping all over HTML5’s Canvas element. And of course, DataViz is right there in that line, to help you take advantage of the new-shiny modern.