The world’s leading publication for data science, AI, and ML professionals.

Do This to Make Your Website Interactive in Minutes

Leveraging the power of data visualization to elevate your projects

Image by Myriam on Unsplash
Image by Myriam on Unsplash

Data tells meaningful stories, and with visualizations to complement it, we can glean valuable insights to find, support, and share an idea effectively. But static images often don’t enable the full capacity of data visualization.

What could we unlock if we added user interactivity with data to a website?

Whether on a project, personal website, or blog post, allowing a user to customize and explore hands-on allows for a more useful and memorable experience.

With Chart.js, you can insert stunning tables and graphs quite easily and become a more impactful storyteller. This post will guide you through the tool, including setup and creating several types of figures on a page.

So, what exactly is Chart.js?

Chart.js is a free, open-source library used to animate graphs within JavaScript files and HTML canvas elements. It includes eight different types of graphs: line, bar, donut, pie, scatter, bubble, radar, and polar area, but it’s also possible to mix-and-match multiple figures on the same page.

What are we planning to do in this guide?

We’ll go through how to set up Chart.js, create initial graphs regarding world demographics, and style them.

Data Sources

Here are links to all the data sources used in this Tutorial.

Step 1: Including the library

I’ve put together a GitHub repository of everything we’ll cover in this tutorial. If you open the index.html file, you should see a page of graphs and tables pop up in your browser.

Now, open up index.html in a text editor for code. To easily import the latest version of Chart.js, we’ll use use this CDN link (ending in "Chart.min.js"). Then, place the link in a script tag as shown above.

To format our charts, include CDN links to Bootstrap CSS and Bootstrap JS. If you think more information on Bootstrap would be helpful, check it out here.

Step 2: Preparing the HTML

One main thing we need to prepare before we can start visualizing our data is to define an area in our HTML where we want to draw the graph. We must add canvas elements for each graph we want on our webpage. Here’s how this works.

In our code snippet above, we give our graph (in this case, a line graph) an id , which is line, to the canvas element that we can later use to reference our designated graph element in JavaScript. You can name this element anything you want; the only thing that matters is that you use the same id when referring to the graph within all your files. Keep in mind that every id must be unique.

Step 3: Creating an outline in JavaScript

To keep my data easily organized, I choose to place each graph’s code in a separate JavaScript file. Feel free to follow a different format, but it is what I find works best.

Create a JavaScript file (and place it into a new folder called .js if you prefer).

Let’s break down what’s happening in line.js. First, we locate the canvas element added earlier to our index.html file (notice the id line. Then, using that canvas element, we create a line chart (type: 'line'), and pass in our data.

Step 4: Inserting data

Compile all the data you need for the graphs. For this sample line graph, we’ll use The World Bank’s population growth statistics. Download the data (or enter it in manually if you wish).

Then, copy-and-paste the data into an array format as shown below. This is an integral part of the overall structure of the JavaScript files.

We can give the dataset a label as well. If you save and refresh the HTML page, you’ll see a new line graph. However, we can take steps to customize the visuals, including axis tick marks and labels, chart titles, point and line colors, hover effects, and much more!

Step 5: Formatting and styling

We can also add multiple datasets to one graph, which helps depict more trends. This is currently commented out in the code below.

For every line that we want to create, we add another object to the datasets array. Each object can have a range of adjustments; we can not only pass new data to draw the line, but we can change the name, behavior, and looks of the line. These features can be edited as depicted in the finished line.js file. Read more detailed descriptions about all the customizations you can choose from in the Chart.js documentation!

Finished line graph

Left: one dataset, right: two datasets
Left: one dataset, right: two datasets

So far, we’ve walked through how to create, personalize, and view a line graph on a webpage. Let’s look at some other visualizations offered by Chart.js. These are all included in the repository linked at the beginning of this tutorial.

Other types of visualizations

Chart.js offers several other types of charts such as tables, bar charts, pie charts, scatter charts, and more. Here is the JavaScript code for more samples.

Bar chart

Left: three datasets, right: two datasets
Left: three datasets, right: two datasets

Pie chart

Left: pie chart, right: donut chart
Left: pie chart, right: donut chart

Scatter chart

Table

This code is included in index.html, rather than JavaScript.

Key things to remember

Keep these tips in mind as you review your code.

  • Ensure that each chart’s canvas id is consistent throughout your HTML and JavaScript files.
  • Remember to link your JavaScript files in your HTML with script tags.
  • Make sure to place a comma every time you add a new feature or dataset. Otherwise, the graph won’t render correctly (or at all).
  • Refresh the HTML page after making significant changes to keep tabs on your progress.
  • Have fun! Share any thoughts or questions in the comments.

Related Articles