OFC-2 - On-Click Event Enhancement

The chart below demonstrates using on-click-text property to pass back user defined data to an on-click callback function. Click on the bar stack blocks and an alert will pop up showing the string passed to the callback function.

Here is a link to view the JSON. Here is a quick look at the JSON for the on-click-text property:

    "elements":[
    {
      "type": "bar_stack",
      "on-click": "barClicked", 
      "on-click-text": "#key# = #val#",

      "values" :   [
                    [2.5,{"val":5, "text":"test key"}],
                    [{"val":3},{"val":4},{"val":5}],
                    null,
                    [{"val":5},{"val":5},{"val":2},{"val":2},
                    
                     {"val":2, "colour":"#ff00ff", 
                      "text":"special",      // Note that this is the #key# value
                      "on-click-text":"{\"key\":\"#key#\", \"value\":#val#, \"stackTotal\":#total#}",
                      "on-click":"specialClicked" },
                        
                     {"val":2},{"val":2}]
                   ]
      "keys": [
        {"colour":"#FF0000", "text": "Key 1", "font-size": 10},
        {"colour":"#00FF00", "text": "Key 2", "font-size": 16},
      ],
      "tip":"#key#<br>#val#",

    }
  ],

on-click - Defines the name of the Javascript function to call when an element is clicked. Notice that "on-click" is defined at the series element level so it applies to all of the elements in the "values". There is also one value that overrides the "on-click" definition and defines its own. So all but one of the bar stack elements will call the barClicked function and the special pink/purple one will call the specialClicked function.

on-click-text - Defines the name of the text string to be sent to the on-click callback function. Notice that "on-click-text" is defined at the series element level so it applies to all of the elements in the "values". There is also one value that overrides the "on-click-text" definition and defines its own. Notice the magic values in the string definition and then see how they are replaced with there values in the alert that pops up when you click on a bar.

The special pink/purple bar overrides the higher level "on-click-text" property with its own definition. This definition is actually a JSON description of an object... hopefully we are all becoming JSON experts by now!! All of the internal double quotes have to be escaped with a preceding backslash.

NOTICE that the #key# is enclosed in double quotes while the #val# and #total# are not. This is because #key# is translated to a text string and the other two are numeric values and that is how we want them to be interpreted when we parse the string back into an object for use in the Javascript callback function.

Now let us look at the two Javascript callback functions which are defined in the head section of this page (you can view the page source to see the entire file):

<script type="text/javascript" src="../../js/json/json2.js">
</script><script type="text/javascript">

function barClicked(index, onClickText)
{
   alert(onClickText);
}

function specialClicked(index, onClickText)
{
   alert("before parsing JSON: " + onClickText);
   var obj = JSON.parse(onClickText);
   alert("after parsing JSON: \n" + 
         "obj.key = " + obj.key + "\n" +
         "obj.value = " + obj.value + "\n" +
         "obj.stackTotal = " + obj.stackTotal);
}
</script>

The json2.js file is included so that we can call its JSON.parse function

The barClicked function simply pops an alert to show the data it received in the new second parameter (onClickText) which is the value of the "on-click-text" after all of the magic values have been replaced.

The specialClicked function first pops an alert to show the data it received in the new second parameter (onClickText) which is the value of the "on-click-text" after all of the magic values have been replaced. Next it parses the JSON into a variable that I called "obj" and then it pops an alert showing its individual properties.