Build a Chart.js bar chart from a CSV file
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
To complete this tutorial, you’ll need the following:
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.
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:
Now, create a data feed to pull data from a CSV file on the web.
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.
The CSV data should look something like:
For the chart, this data needs to be formatted as follows:
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.
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:
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.
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.