The best way to make sense of lots of data is through visualizations. Want to know how the stock price of Facebook has changed over the past 1 year? Why spend time looking at the numbers when there’s a line chart to look at!A variety of chart types exist to satisfy any data visualization needs you might have. As a web developer, you’re sure to have come across a requirement to show a chart on a web-page that represents dynamic data.
Now, you can try to render a chart from some dynamic data all by yourself. But why reinvent the wheel when lots of people have already worked hard to do it for you!
There’s a plethora of chart libraries you can use. Some are paid. Some are open source. Some are highly powerful. Some are minimal but also easy to use. Which one should you use?
But first, let’s understand how a chart can be rendered on a web page?
Server-side rendered charts
Although rarely used, we sometimes may need to generate our charts on the server and then deliver them to the user.
There are limited libraries available for server-side chart generation. Different libraries are available for most server-side languages. Separate services like image charts and quickchart.io also exist, which give you a REST API to use.
If you can’t find a server-side library that fits your needs, as a workaround, you can write a script on your server that uses one of the client-side libraries to create the chart in HTML. Then you can convert the html to PDF or an image file on the server.
Client-side rendered charts
This is the most common use-case. Before learning about libraries that do this, let us first look at how you would implement it yourself.
There are two ways you can render a chart in modern web applications: SVGs and HTML 5 Canvas. Some libraries out there offer both canvas and SVG renders. Others tend to stick with just one of the two options.
SVG shines when you want a high quality graphic that is resolution-independent. It does not loose its quality on large resolutions.
While having every element available in the DOM is beneficial, for large data-points, the performance of the SVG-rendered chart falls short. Performance degrades logarithmically as the number of elements increase.
Canvas uses a “fire and forget” model, there is no DOM that can be referenced once an element has been drawn.
Canvas is quite fast in rendering large number of data points. In fact, people use have built games with lots of graphics and animations using Canvas. Although as the size of the screen increases, the performance may degrade as more pixels need to be drawn. Which makes its performance resolution-dependant.
When to use which: SVG v/s Canvas
- Highly customizable elements for limited data: SVG
- Zoomable graphics without loosing quality: SVG
- Visualizations for large amount of data: Canvas
- When large real-time data processing is required: Canvas
Here’s an in-depth discussion on the pros and cons of both: SVG vs canvas: how to choose. You don’t need to know this to use any of the libraries, but it’s always good to know how it works underneath in an abstract way.
Thanks for reading! Find me at virajc.tech.