There are various scenarios where it makes sense to add a graph or chart to a website. You might want to publish results of a survey for instance, add financial charts or just communicate some data with your visitors in a professional way.
If you want to embed a chart into your website you have the following options
- Learn and use a chart library such as Chart.js
- Use a chart and graphs extension if using a CMS such as WordPress, Joomla etc.
- Use a WYSIWYG chart and graph solution
- Include the chart as image
We will now look at these options in more detail and explain step by step how you can add a chart to a website or blog. We will also cover advantages and disadvantages. There are also some challenges around dynamic charts that should update periodically once new data is available.
Libraries to Embed a Chart into a Website
Since there are plenty of chart libraries you might find it difficult to decide which one to use. The following questions might be a guideline when making a decision:
- Are you willing to pay some money towards a chart solution for better support or would you rather want a free chart solution?
- Which chart types would you like to add to your page? Are those types supported by the library?
- Do you like the default design of the chart library?
- Do you need special functionality for your website charts?
There are a couple of popular chart and graph libraries that are widely used across the web to include graphs and charts in a website.
Google offers its own framework to publish charts on a website. Google's solution is free to use and currently supports around 18 different chart types.
Plugins and Extensions to Create Web Charts
Are you using a content management system such as WordPress or Joomla to power your website? For most of such software solutions there are extensions and plugins available that you can use to add a chart to your website.
The disadvantage of CMS-specific charts and graphs extensions is that you won't be able to migrate to a different CMS unless you also switch the charts extension. This might cause additional work if you decide to switch to a different CMS in the future.
No Coding Graph and Chart Solutions
There are also many solutions that allow you to build a chart in a special editor without any programming knowledge. You just need to copy the code into your website which simplifies the process and typically reduces the time that you need to publish a chart.
PrettyCharts offers a simple to use form to create a web chart and is based on Chart.js. Once you have configured your chart you can simply copy over the code and include it in your website. PrettyCharts also offers the possibility to automatically create a web chart from an image or HTML table.
Adding a Chart as an Image
An easy way to publish a chart on a website is to include an image. You can use any software to create a chart, take a screenshot and embed it in your website. This is very easy from a technical perspective.
However, there are various drawbacks: First of all charts are not responsive. Of course you can make the image responsive so that it adapts to the available space but a responsive web chart would also adapt axis ratio etc to best fit on different screen sizes for maximum of responsiveness. Static images of a chart do not allow any user interaction such as hovering values or zooming. It also not possible to include chart specific animations. Whenever your data changes, you would need to take a new screenshot and upload it to your web server to refresh your chart. Images of a chart are not suitable at all for dynamic and real time charts.
Handling Dynamic Data in Charts
A bigger challenge is a scenario where you would like to include a chart that is updated periodically with new data. Such real time charts are slightly more difficult to realize. Some of the chart extensions include connectors to database tables so that you could automatically pull latest data on every page request.
If you need any assistance with publishing a chart on your website or if you are looking for a specific chart solution - please do not hesitate to contact us.