Build a Chart.js bar chart from a CSV file

Introduction

In this tutorial, you’ll learn how to create a chart from a CSV file using Chart.js.

Specifically, you’ll learn how to:

  • Create a chart using Chart.js
  • Pull data from a CSV file on the web
  • Convert the CSV data to JSON
  • Render the data in the chart

When you’re done, you’ll have a chart similar to this demo and source.

Setup

To complete this tutorial, you’ll need the following:

  • A Flex.io API key
  • A basic understanding of Charts.js
  • A basic understanding of Lodash

To get a Flex.io API key, sign up for Flex.io, or if you already have an account, sign in. When you sign in, you’ll see your API listed in the “API Keys” section on the dashboard where you’re directed after you sign in.

Create a chart using Chart.js

First, get a basic chart up-and-running. To do this, create an index.html file with a single canvas element:

Next, add a script tag for including the Chart.js library and code to display a vertical bar chart using some inline data:

Pull data from a CSV file on the web

Now, create a data feed to pull data from a CSV file on the web.

First, include the Flex.io Javascript SDK library in the code by adding the following script tag right after the html body and before the link for Chart.js:

Next, move the logic that creates a chart to a separate render function:

Next, add code to pull the data from the CSV inside the (function(window, document, undefined) body. To do this, add a Flexio parameter to the function, and then create a pipe inside the function that requests the CSV file:

To see the output of the CSV, grab your API key and replace YOUR_API_KEY in the code above with your API key. Then refresh the page, and you should see an alert message box showing the contents of the CSV.

Convert the CSV data to JSON

The CSV data should look something like:

OS,2009,2010,2011,2012,2013,2014,2015,2016,2017
Android,1.6,9.6,36.4,56.9,74.4,80.8,78.8,84.1,86.1
iOS,10.5,15.4,16.9,22.5,18.2,15.3,17.9,14.8,13.7
Microsoft,10.2,6.8,2.6,1.9,2.9,2.7,2.5,0.7,0.1
RIM,20.6,19.7,13,6.8,3,0.6,0.4,0.2,0
Symbian,48.8,44.2,27.7,8.5,0.6,0.2,0.1,0,0

For the chart, this data needs to be formatted as follows:

{
"labels": ["2009","2010","2011","2012","2013","2014","2015","2016","2017"],
"datasets": [
{
"label": "Android",
"data": [1.6,9.6,36.4,56.9,74.4,80.8,78.8,84.1,86.1],
"backgroundColor": "#A9F7DF"
},
{
"label": "iOS",
"data": [10.5,15.4,16.9,22.5,18.2,15.3,17.9,14.8,13.7],
"backgroundColor": "#E3402C"
},
{
"label": "Microsoft",
"data": [10.2,6.8,2.6,1.9,2.9,2.7,2.5,0.7,0.1],
"backgroundColor": "#437E7B"
},
{
"label": "RIM",
"data": [20.6,19.7,13,6.8,3,0.6,0.4,0.2,0],
"backgroundColor": "#A5C5B1"
},
{
"label": "Symbian",
"data": [48.8,44.2,27.7,8.5,0.6,0.2,0.1,0,0],
"backgroundColor": "#BD198F"
}
]
}

To convert the data from CSV to JSON, add two pieces of logic: 1) a step to the pipe that converts the CSV to JSON, and 2) a formatting function that uses Lodash to format the JSON into the object format used by Chart.js.

First, add a step to the pipe that converts the CSV to JSON and modify the callback function that executes when the pipe is run to handle the response text as JSON:

Next, add a function that formats the JSON object into the form needed by the chart. To do this, define another function formatDataForChart(content) along with a helper function getRandomColor() for generating random colors as follows:

This function takes a JSON array as input, uses the first element of the array (except “os”) to set the chart labels. Then, it uses the other values for the chart data and assigns random colors to the vertical bars of the chart.

Render the data in the chart

Finally, hook the chart up to the data feed: 1) modify the render() function so that data can be passed in as a parameter, 2) use the formatting function to convert the data from a straight JSON array into the chart format:

Finally, to render the chart with the CSV data, call the render() function inside the run() callback function:

Once you’ve finish the above steps, you should have a chart that looks something like this:

Chart.js Result Chart

Going further

Different chart formats

Different types of charts in Chart.js have different formats. Depending on the format, you’ll need to modify the formatDataForChart() function with the appropriate parameter. However, the basic implementation should be similar to this example.

Rendering large CSVs

If you’re rendering a large CSV, you’ll need add additional logic to filter the CSV so that your chart renders more efficiently. To do this, you can add a “filter” step in the pipe. Alternatively, if you want to use more sophisticated methods for sampling the data, such as data decimation, you can add a custom ‘python’ step, then use the “scipy.signal.decimate” function to cut down the CSV in the Flex.io “python” step.