Explanation

Variables

• Data object:
  • displayed - array that contains all the starting data provided by dataValues
  • hidden - keeps track of the legend items that have been hidden with a simple object mapping the column key to the boolean representation of their display
  • map - simply an array where the index of the item is the location on the chart, also used to convert column index to column key
• options.series - an object representation of each of the columns; this is used to modify the legend color when clicked.
• last - this is more-so a product of google charts event handling; essentially, if you click on the same thing twice, the second click will register with no data from getSelection(). This means we have to store all the previous clicks if we want a user-friendly experience. Otherwise, the user would have to click somewhere else on the chart before clicking back on the legend item.

Functions

When the legend item is clicked, there are a few things that happens:

1. showHideSeries() decides whether or not the click was on the legend, and if it was on the legend, act accordingly - regardless of the selection being empty or not;
2. vparse() prepares the new data set based on the base data provided in dataValues
3. vkillLegend() kills the styling on the legend items which are no longer present in the data set, and restores styling for data that was re-added;
4. Finally, we are ready to push all the changes to the chart, and we can do that by using chart.draw()

You can see a working example by clicking the Run code snippet button above.