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 in a URL, using Chart.js and a Flex.io pipe.

Specifically, you’ll learn how to:

  • Read and parse a CSV from a URL on the web
  • Transform the data into the format required to visualize it
  • Create an API endpoint that passes the data to the chart
  • Display the data using Chart.js

When you’re done, you’ll have a chart similar to this demo; the source for the chart is available on GitHub.

Setup

To complete this tutorial, you’ll need:

Read and parse a CSV on the web

To begin, you’ll create a basic pipe that reads, parses and returns data from a CSV located at a URL.

  1. Create a new pipe in Flex.io
  2. By default, you’ll see a sample Execute Task, which will house our function. In the drop-down menu, change the language to “Node.js”. Then, paste the following code into the Execute Task and Save Changes:
  1. After saving your changes, press the “TEST” button in the upper right of the Pipe Builder. You should see the CSV data parsed into a JSON format, similar to the following:
[
{
"2009": "1.6",
"2010": "9.6",
"2011": "36.4",
"2012": "56.9",
"2013": "74.4",
"2014": "80.8",
"2015": "78.8",
"2016": "84.1",
"2017": "86.1",
"OS": "Android"
},
...
]

Transform the data to the form needed to visualize it

Now that you have your CSV data in JSON format, you’ll need to get it into the correct format to visualize it with Chart.js, 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]
},
...
]
}

To transform the data format, do the following:

  1. Add another Execute Task after the previous one by clicking the plus button.
  2. In the drop-down menu, change the language to “Node.js”. Then, paste the following code into the Execute Task and Save Changes:
  1. After saving your changes, press the “TEST” button again. You should now see data transformed ready to be consumed by chart.js

Set up an API endpoint to access the data

Next, you’ll simply need to get an API endpoint to access this data transformation feed you just created, as follows:

  1. First, turn on your pipe to activate it.

  2. Then, scroll down to the Deployment section and check the box next to Run using an API endpoint to see your API endpoint and API key.

  3. Next to the endpoint, which by default uses the unique pipe EID as a reference, click the Edit button to add an alias to your pipe as follows: examples-demo-create-chart-with-chartjs-from-a-csv.

  4. To quickly test the endpoint, copy the HTTPS endpoint and paste it into your browser to see your data; the HTTPS endpoint will look like this (where {token} is your unique API key):

https://api.flex.io/v1/me/pipes/examples-demo-create-chart-with-chartjs-from-a-csv/run?flexio_api_key={token}

Display the data using Chart.js

Finally, now that you have your endpoint and API key, you can create your chart, as follows:

  1. Create an HTML page with the following code; make sure to replace {token} with your own API key):

Once you’ve created your HTML page with the code above, you should see 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 may need to add additional logic to filter the CSV so that your chart renders more efficiently. To do this, you might add filter logic in the first task to limit the results after the CSV is parsed. Alternatively, if you want to use more sophisticated methods for sampling the data, such as data decimation, you might insert an execute task between the two execute tasks to run Python, then use the “scipy.signal.decimate” function to cut down the data.