Easy Charting with JavaScript and HTML5

One of the coolest things that HTML5 brings to the table is technology for doing rich visualizations directly in the browser. Think about it. For years, web developers have been forced to do one of three things if they want to present a rich visual element (like a chart):

1. Make a round-trip to the server
   The server creates or fetches the necessary image data and pipes the results back to the browser. Works everywhere, but the results are usually static. Any changes to the image require more trips to the server.
2. Use a browser plug-in
   Plug-ins clearly work-around browser limits and can provide rich visual renderings, but they require a software install and introduce a whole new (non-standard) layer of technology that must be learned and maintained by developers.
3. Fugly browser hacks
   You've seen them. CSS and HTML that's manipulated and abused to give the appearance of something more "image-like." This method is painful, crude, and wrong. But it's been one of the only options for years…

None of these options are ideal for the HTML/JavaScript developer. For doing something as simple as drawing a basic shape, web developers have been out-of-luck in the browser.

Until now.

HTML5 is bringing with it two technologies that give developers the ability to draw in the browser: Canvas and Scalable Vector Graphics (SVG). Both give developers a way to directly manipulate pixels in the browser, which unlocks a whole host of new possibilities for "pure" HTML and JavaScript applications. These two technologies have some key differences, though.

Canvas

Canvas is part of the HTML5 spec. It provides developers with what amounts to a writable bitmap area on a page that can be manipulated with JavaScript. In fact, you must use JavaScript to display anything on a canvas. It is not markup based, so API calls are required to draw.

The pixel-driven nature of canvas makes it ideal for scenarios where rendering speed is key, such as games. It doesn't matter if you have 1 or 10,000 "objects" being painted to your canvas, if the resolution is the same, it's all about redrawing the same pixel area.

The downside of canvas' pixel-driven nature is that it's harder to interact with. If you do have "objects" that you want users to interact with, you have create and track those objects on your own in JavaScript. And a designer can't create a "canvas" in Illustrator. API calls have to be programmed to make canvas work.

SVG

Scalable Vector Graphics have actually been around much longer than HTML5. Browsers like Firefox, Opera, and Safari have offered varying degrees of support for SVG since 2005. Why is SVG only now getting a lot of attention?

You guessed it. Internet Explorer.

One of the only browsers not to support SVG in the last 5 years was IE. And since IE was (and is) the dominant browser during this time, SVG usage was minimal. IE9 has finally added SVG support, though, and along with improved support across all other browsers, SVG is finally ready for primetime.

Unlike canvas, SVG is vector-based (not pixel-based) and is created with markup (instead of APIs). SVG elements, when rendered, actually become part of the page DOM, which means they have properties, events, and are much easier to use for illustrations that expect user interaction. And since SVG is markup-based, designs can be easily exported to SVG format from Illustrator, loaded by the browser, and even cached like images.

The downside to living in the DOM is memory. Highly complex visualizations (thousands of objects) will strain browsers since every element in the SVG image is an object (with its own memory needs). That makes SVG great for things like data visualization or logos, leaving complex visual rendering to canvas.

Older Browsers?

Clearly, adopting canvas and SVG for rich, interactive visualizations in HTML is a no-brainer, but what happens for older browsers, especially IE (which, as we said, lacks any SVG support pre-IE9)? Fortunately, there is a very similar technology to SVG baked-in to IE5 through IE9 called Vector Markup Language (VML).

Originally created for Microsoft Office, VML has a lot of overlap with SVG. When used in conjunction with SVG, VML gives us a way to reach most actively used browsers with some type of in-browser rendering.

Kendo UI Charts

Now that you fully understand the "drawing" technologies of HTML5, let's look at how Kendo UI Charts make it easy for you to add rich data visualizations to any HTML site or app.

Kendo UI charting uses two technologies to automatically provide broad browser support: SVG and VML. You don't have to worry about older versions of IE. Kendo UI Charts will provide the proper rendering without requiring any extra code.

Why not canvas? Three reasons:

1. SVG is interactive. This makes it easy for us to add features like the dynamic tooltips (and even more interactivity to come)
2. SVG/VML is more broadly supported. Unlike canvas, which is an HTML5 feature, SVG/VML help us support a broad range of new and older browsers without resorting to polyfills.
3. SVG is vector based. And charts are relatively simple data visualizations. Using SVG lets charts scale crisply to any display size (big or small), and avoids wasting memory rendering more pixels on larger screens.

Getting Started with Kendo UI Charts

Using Kendo UI charts to do data visualization couldn't be simpler. All you need is some data (JSON, JavaScript array, whatever) and a few lines of JavaScript.

To setup a chart, we need to define where in the HTML we want it rendered using a simple DIV tag, like this:

<div id="chart"></div>

And then we need to initialize the Kendo UI Chart using the simple API. For this basic example, I'll give the chart a title, define 2 series of local data (one defined in the Chart config, one an external JavaScript array), and define my axis.

//External local array
var rtData = [3,15,30,45,92];

$(function(){
  $("#chart").kendoChart({
    title:{ text:"@toddanglin Stats" },
    series:[
      {
        name:"Followers",
        data:[89,212,450,680,1140],
        stack:true
      },
      {
        name:"RTs",
        data: rtData
      }
    ],
    categoryAxis:{
      categories:["February","March","April","May","June"]
    }
  });
});

Which produces the following data visualization:

This isn't an image. (Well, this is, in the blog post, but you know what I mean.) This is SVG drawn directly in the browser with JavaScript. This works in modern browsers. This works in older versions of IE (thanks to Kendo UI Chart's auto-VML). This works on phones, tablets, and devices.In fact, you can give this chart a spin with this live JSBin.

With the rendering happening the browser, this opens the door to:

• Visualizing rapidly updating data
• Animating the chart
• Creating interactive charts
• Hiding/Showing series without extra calls to the server

As the Kendo UI Chart evolves in the current beta, it will add many of these features, like interactive charts, giving you even more power through a simple API.

Chart Types

In today's beta, Kendo UI Chart support three chart types: Line, Bar, and Column. Going forward, Kendo UI Chart will add support for many additional chart types, including Pie, Scatter, and more. As more chart types are added, the simple API will make it easy to switch chart types, so you just keep getting more power.

In fact, even in the current beta, you can mix chart types. For example, I can edit the previous example to make one series a column chart (vertical bars), and the other series a line chart:

series:[
  {
    name:"Followers",
    data:[89,212,450,680,1140],
    stack:true
  },
  {
    name:"RTs",
    data: rtData,
    type:"line"
  }
]

Producing this mixed chart:

Rapidly Changing Data

To wrap-up this brief introduction to the Kendo UI Chart, let's take advantage of our new found ability to draw charts in the browser and configure Kendo UI Chart to redraw with new data 10 times a second. Unfortunately, the current Kendo UI Chart beta doesn't yet have an API that let's us do a 1-step animated refresh of the chart, but we can easily handle this scenario by simply recreating the chart each time our data changes.

You can see the live effect by visiting this updated JSBin example, but here is the relevant snippet of JavaScript:

createChart: function(){
  this.updateCount += 1;
  
  //Recreate the chart with each update
  this.chartElement.kendoChart({
    title:{ text:"CPU Stats" },
    dataSource:{
      data: this.getRandomSeriesData() //Random chart data
    },
    series:[
      {
        name:"Stats",
        field:"value"
      }
    ],
    categoryAxis:{
      field:"type"
    }
  });  
  
  //Redraw the chart 50 times in 100ms intervals
  if(this.updateCount < 50){
    setTimeout(function(){app.createChart();},100);
  }else{
    alert("Done updating."); 
  }
}

This code clearly has a few external dependencies (which you'll find in the complete JSBin example), but the concept is simple. Using a JavaScript timeout executing in 100ms cycles, recreate the chart with new random data. Each time this happens, the chart SVG (or VML) will rapidly redraw in the browser.

In a real-world implementation, you'd more likely redraw the chart as the result of getting new data from the server or changing user input. But this example serves to illustrate that with Kendo UI Charts drawing in the browser, you can do some cool things with data visualization that don't require the help of a server or browser plug-in.

Enjoy! And stay tuned for even more info on things you can do with HTML5, JavaScript, and Kendo UI.

Download the Kendo UI Beta today!