wffweb

How to do data visualization in HTML5?

Even if there are many third party ready-made libraries available for data visualization it will be better to develop one with our own logic. The reason is in almost all cases we have to represent data in some different way which the libraries cannot do. However, if any library can satisfy your exact requirement it is good to go with it.

There are two ways to create data visualization in browser. One is with client side library and another is with HTML5 SVG tag. Google charts js library is an example for client side js library for data visualization. In the modern era, developing with HTML5 SVG tag is the better way. In fact, google charts is internally using HTML5 SVG features.

There are two types of data we want to visualize, one is static data and another is real-time data. Visualizing real-time data is challenging compared to static data.

static data visualization

It is not difficult to visualize static data. The data can be bought from the server in JSON format and with some javascript and HTML5 SVG tag we can do the rest.

real-time data visualization

To do real-time data visualization we need continues transfer of data from server side to client side in the JSON format. To make it more real-time we have to choose websocket for data transfer.

Do Any frameworks help from scratch development of real-time data visualization with HTML5 SVG tag?

Yes, Web Firm Framework will make it more easy because it is a server side framework. It uses websocket for data transfer and we don't have to handle it explicitly. Just keep coding just like a client side program, the framework will handle the rest.

---