Visualising Data with JavaScript: Getting Started

The web is a fantastic place to visualise data because charts can be published and shared easily and the tools for creating charts are powerful, expressive and usually free.

The programming language built into practically all web browsers is JavaScript. This is a relatively easy language to learn and it has a large number of libraries that allow you to visualise data.

This tutorial serves as an introduction to visualising data using JavaScript and is designed to get you up and running with your first chart.

You’ll create a simple chart with one of the most popular JavaScript charting libraries Chart.js. No prior JavaScript experience is required, but previous coding experience will be useful.

You’ll also use CodePen (a simple to use coding platform) to create and edit your code.

Your first chart

Start by navigating to CodePen at https://codepen.io.

Create a new pen. (At the time of writing, you click Start Coding to create a new pen.)

You should see something like:

Click Change View and select the arrangement with the output window on the right:

HTML

Add a <canvas> tag to the HTML contain your chart:

<canvas id="myChart"></canvas>

The <canvas> tag is an HTML element that allows shapes (such as circles, rectangles and lines) to be drawn in a webpage.

JavaScript

Include the Chart.js library in the pen by clicking on the cog to the left of the JS title:

Add https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js to the Add External Scripts/Pens list:

Now add the following JavaScript to CodePen’s JS panel:

new Chart('myChart', {
  type: 'bar',
  data: {
    labels: ['1980', '1990', '2000', '2010', '2020'],
    datasets: [{
      data: [12, 15, 14, 16, 18]
    }]
  },
  options: {}
});

CodePen should refresh the output pane and you should see:

Let’s step through the code for creating the chart:

• new Chart(...) is the code that creates the chart. (Chart() is a constructor function provided by Chart.js that creates the chart.)
• the constructor function Chart() accepts two arguments. The first is the id of the canvas element and the second is an object that configures the chart
• the configuration object usually consists of three properties: type, data and options
• the type property is the chart type e.g. bar, line, bubble etc.
• the data property is an object specifying your data
• the options property is for setting chart options

If you’d like to know more about how Chart.js charts are configured read my Getting Started with Chart.js tutorial.

You might notice the y-axis doesn’t start from zero. This can distort the true difference between the bar heights. To fix this add an option:

new Chart('myChart', {
  ...
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});

Now the y-axis should start from zero.

(The options object can get a bit verbose, but you get used to it with practice.)

Now set the name and colour of the bars by adding label and backgroundColor properties:

new Chart('myChart', {
  ...
  data: {
    ...
    datasets: [{
      label: 'My data',
      backgroundColor: '#af90ca',
      data: [12, 15, 14, 16, 18]
    }]
  },
  ...
});

Your chart should now look like:

There you are! You’ve created a bar chart using JavaScript and Chart.js.

See if you can edit your chart. For example, try changing (or adding) data. Or change the colour of the bars.

Find out more about Chart.js on its website (it has a nice set of examples).

If you’d like to delve deeper into Chart.js I’ve written Getting Started with Chart.js that goes into more detail.

Thanks for reading and happy charting :)