For up-to-date Handsontable documentation, see handsontable.com/docs.

Introduction

Chart.js is one of those libraries that are truly transparent, and it allows you to build your first functioning chart without first having to spend hours reading through the detailed documentation on the Chart.js website.

We have previously written about Chart.js in our summary of the best chart libraries. This time, I have decided to show you how to integrate Handsontable with Chart.js, and how to keep the chart updated while modifying data in the spreadsheet.

How to Bind Data

The data that creates bar charts is passed via the datasets attribute, where we can specify label, data, and a few other additional properties like border width or background color. I have created three objects for the datasets property that correspond to the three data sources.

    data: {
        labels: headers,
        datasets: [
            {
            label: colheaders[0],
            data: myData[0],
            borderWidth: 1,
            backgroundColor: 'rgb(255, 236, 217)'
            }, {
            label: colheaders[1],
            data: myData[1],
            borderWidth: 1,
            backgroundColor: 'rgb(235, 224, 255)'
            }, {
            label: colheaders[2],
            data: myData[2],
            borderWidth: 1,
            backgroundColor: 'rgb(219, 242, 242)'
            }
        ]
    }

where myData is an array used by Handsontable as a data source.

You can test the result in the demo below. Please keep in mind that the spreadsheet in this example is read-only.

As you can see, each object represents one row of data from the myData array.

How to Update Data

Allowing the chart to track modifications made in Handsontable is as simple as adding a few lines of code.

Data can be tracked using the afterChange hook. Each change in Handsontable triggers the method that updates the chart. See how it works in the following example:

Here I have added the afterChange callback inside the updateSettings method to call the update method from the Chart.js API.

Creating Sparklines in a cell

Sparklines are those tiny charts that give you a notion of the trend in series of values. It can be very useful in day-to-day operations if you put it near the actual data.

In this example I will show you how to put a sparkline inside Handsontable’s cell.

As Handsontable doesn’t handle charts inside cells out-of-the-box, we need to create a custom renderer which serves as a container for our Chart.js instance. All renderers in Handsontable are updated after each change in the dataset, so we don’t have to worry about updating our charts when we enter a new value. It automatically reflects all the changes made to a dataset.

More Charts

Chart.js allows us to use more chart types that just the bar chart shown in the first example. It offers a wide range of various types of charts, including line charts, pie charts, radar, and many more.

Conclusion

A visual representation of data lies at the root of almost all business applications, across various industries and scientific disciplines. Each CRM, CMS, ERP etc. I have used in the past included at least one view with the data and charts combined. Integrating a versatile charting library – such as Chart.js – with a spreadsheet module, can add great value to your web-based products.