Data Structures

In Chart js data structures is very powerful. This is one of my personal favourites as this can simplify your data in the long run. As it keeps the data nicely paired.

What is a data structure in Chart js?

In essence it is a custom javascript object that can be read by Chart.js to draw the data (points) and labels. Showing is better than telling. Watch the video and afterwards you can read below more.

Below you can see two options. First a sample of standard data. The second is the data structure.

Sample of standard data in Chart js

// dataset 1
labels: ['Red', 'Blue', 'Green'],
data: [10, 1, 6]

This is a standard data object looks all simple and fine. However if you want to delete or in javascript array term we would say pop, slice or shift an item you will need to do it twice. One for the label and the data.

Sample of Data Structure in Chart js

data: [
  {team: 'Red', salesQuantity: 10, salesDollars: 100},
  {team: 'Blue', salesQuantity: 1, salesDollars: 10},
  {team: 'Green', salesQuantity: 6, salesDollars: 60},
]

With the data structure the removing from one data structure item will result in removing all matching items. This is truly great because it will avoid mistakes and double work. As the labels are basically now incorporated into the data.

Secondly we can quickly switch regarding to the datasets. If you are familiar with data objects you can see here similarities and allows selection of showing the data.salesQuantity or data.salesDollars namespace.

For example you would desire to change the chart data from sales quantity to sales dollars it can be done quickly without adding additional datasets.

How to convert arrays in to data structures in Chart js

Another topic related to data structures is how to convert them into a nice data structure that we can use. For this we need to create objects which can be done easily with a loop in Javascript.

This video will show you nicely how to convert multiple arrays into data structures that you can use at once for Chart js.

Once you are able to create data structures you are ready for the more advanced features. Data structures are powerful, but you have to know how to use them or even segments of the data structures. As you are not required to use only for a single dataset. It can be done with multiple. As shown in this video.

How to use data structures for multiple dataset in Chart js

Select segment of Data Structures to draw lines in Chart js

Finally the data structures in Chart js can be use in segments. We can just get the part that we want and make that show. This means if you have a large data structure with that data structure we can work a specific dataset. This is the more unknown but very useful features. Watch this video to understand that.