HTML5 Charts and Graphs with CanvasJS

The Web has come a long way since its inception, and it’s been fascinating to watch the evolution of different tools and mechanisms over the years. For years I have used a graphics tool called JPGraph to output various data charts and graphs. It handles every conceivable variation of data plotting, including a few that I’m not sure what they’re supposed to show. It’s limitation, if anything, is the size of the graphic that I’m required to render for data across a long period of time.

Recently I began a campaign for a client that required tracking various bits of data. And, since visual representations are so much easier to digest, I set about looking for a solution to produce a series of charts to reflect the trends in the data. I wanted something that was lightweight, robust, easily changed as needed, and would lighten the server load. And I wanted something that would give me everything I’m used to having from the previous tools.

Then I found Now I have a fun new toy to play with.

We consume enormous amounts of data every day. One estimate was that we digest over 3GB of data every day between email, social media, and web pages. Having that data in a format that we can analyze and process quickly is an absolute necessity. Charts and graphs give us comparative data in a format that we’re taught to understand from a very early age.

CanvasJS features over eighteen different chart and graphs for displaying a variety of data relationships. It uses familiar JSON formatted data so it’s easy for me as a developer to work with it, and it has bells and whistles like animations, tool tips and even zooming in on large data sets.

Pulling data from a database is fairly straightforward, but having to sort through it manually can be impossible, even with a small amount of data. For instance, if you had a typical series of biographical data on two hundred participants and wanted to know the age ranges and gender distribution, it would take hours to manually compile that data. With a chart and some math, you can not only have that information effortlessly, but if the database is updating dynamically in realtime, so will your chart.

For fun, I took some keywords that are common on my articles and pasted them into a CanvasJS doughnut chart. As you can see, it renders a vector image quick and clean, with a little animation. Mousing over the segments will show a tool tip. There are plenty of additional customization options available. Now, making a dashboard for your site that shows charts and graphs for frequency distribution, relative proportions, timelines and so on — is quick and easy.

Charts and graphs can make your job of analyzing data easier, whether you’re sorting keyword data or customer data. HTML5 code libraries make the work of creating them simple.

Leave a Reply

Your email address will not be published. Required fields are marked *