There is nothing better than charts and graphs, when it comes to creating an overview of even the most complex data.
When you think of charts and graphs, you often think of Excel, but the trouble here is that if you want to use it on your website, you have to take a screenshot of the chart, save it, and paste it as image.
Should there be changes to the data, you have to go and take a new screenshot and paste and upload it again. This way of inserting and using charts and graphs on your website is very tricky, but fortunately there are free APIs that you can even and freely insert charts on your website with.
Here we give you two of the best known!
Google Charts has been around for a number of years, but it’s only now that people have realized how smart it really is.
The smart thing about doing it this way is that you can update the data behind the chart relatively easily. This also means that you can create dynamic charts where the user on your website can change the data base and thus change the chart live on your website.
In addition, most charts in Google Charts can be animated so that they get an animated view when they appear on your website.
Another delicious feature of Google Charts is that all their charts are interactive. This means that if you f.ex. make a pie chart, then you can click on the individual “pies” and get more information. So your charts are interactive and not just static images.
It’s super easy to get started with Google Charts, as the people behind have done a huge piece of documentation work, so it’s really just a matter of copying and pasting code.
On Forbrugerfinans.dk they have created a comparison page that is built around visualizations with Google Charts. You can f.ex. check out their consumer loans overview page to see what’s actually possible with Google Charts.
And yes, Google Charts is of course 100% free!
Charts.js is an excellent alternative to Google Charts, and it is also free.
Some would actually think that the charts you find at Chart.js is a lot nicer than the ones at Google Charts, but it’s probably just a matter of taste.
Charts.js has a lot of the same functionality as Google Charts and all their charts are animated too. The documentation at Chart.js is not quite as comprehensive as the one you find at Google, but if you are a developer, it is not so difficult to find out anyway.
Nowadays, everything on websites must also be responsive, and that is of course also taken into account at Chart.js, where all charts are responsive out of the box (of course this also applies to Google Charts).
How to visualize data on your website with interactive charts
There is nothing better than charts and graphs, when it comes to creating an overview of even the most complex data. When thinking about charts and graphs, think…
Written d. 10 aug 2018 – No comments