Making an interactive click meter

In this next example, we will focus on one more powerful feature of any client-side programming—the ability to interact with the user and the ability to update data dynamically. To keep it simple, let's revisit an old chart—the bar chart from Chapter 3, Creating Cartesian-based Graphs—and integrate a counter that will count how many times a user clicks on an HTML document in any given second and update the chart accordingly.

How to do it...

Most of the steps are going to be familiar, if you have worked on the bar chart from Chapter 3, Creating Cartesian-based Graphs. So, let's run through them and then focus on the new logic:

1. Let's create some helper variables.

   var currentObject = {label:1,
     value:0,
     style:"rgba(241, 178, 225, .5)"};
     var colorOptions = ["rgba(241, 178, 225, 1)","#B1DDF3","#FFDE89","#E3675C","#C2D985"];
   
     var data = [];
   
   
   var context;
   var wid;
   var hei;

2. Follow this with our init function.

   function init(){
   
     var can = document.getElementById...