Trigger an action from a chart

With Canvas you can customize the chart behavior, for example you can trigger an action when clicking on a bar chart.
An example has been setup in the Visualisations sample page showcasing how you can modify the options, and, for this example, be able to grab the data attached to the bar element that was clicked on by the user on the front end.  A table is then displayed corresponding to the month of the bar element:

How does it work?

A new attribute has been added into chart, tm1-options-override (you can see an example in sample-advance-chart.left.html):

Details of the object that was added on the HTML is in the page’s corresponding controller (sample-advance-chart.js):

For our example, this is defined in the JavaScript file attached to the Visualisations sample: js/controllers/samples/componenets/sample-advance-chart.js.
The part of code where you can define which action you want to trigger (once user click on the bar chart) is the section starting with elementClick:function(e){:. Other options that you can configure into this can be found on Angular NVD3 site.


Now, lets first un-comment the code in order to see what is being passed:

When you click on the bar chart, you will see a window pop-up with the details of what is inside the variable e:

Note that opening up the browser Console (usually by pressing F12) will show also the full data stored on variable e due to the action of this line: console.debug(e);

In our example we want to get the month (third element in this list). So in order to get the 3rd element, we conveniently converted the elements String into an Array, and then retrieve the 3rd item on this array. As a shortcut, it was written as e.data.elements.split(',')[2]. This will return what we wanted and we stored the result in a variable called “barMonth”:

$scope.page.barMonth = e.data.elements.split(',')[2];

Now in the HTML page, we will then use the variable and pass it on as one of the parameters on our DBRs there. We can simply use it as {{page.barMonth}} and use as per normal.

<tm1-ui-dbr 
     tm1-instance="dev" 
     tm1-cube="Retail" 
     tm1-elements="{{page.Version}},{{page.Year}},{{page.barMonth}},{{page.Currency}},{{region.key}},Mountain Bikes,Sales Amount" 
     tm1-data-decimal="0">
</tm1-ui-dbr>