July 1, 2013 7 minute read

SAPUI5 VIZ Charts event handling

This blog post is at the request of Abesh Bhattacharjee – blame him 😉

The SAPUI5 library includes chart controls based upon the VIZ charting library. You can see some samples of them in action at https://sapui5.hana.ondemand.com/sdk/test-resources/sap/viz/Charting.html

Once you start building charts you pretty soon want to implement some event handling when a user clicks on a chart element. For example the usual way of implementing drill-down is by having the user click on a chart element and then using that element as the context for subsequent processing – perhaps rendering another chart that shows a more granular representation of just the element selected.

The SAPUI5 eventing framework allows us to attach an handler to the selectData event to be called when a user clicks on a chart element. The framework passes a sap.ui.base.Event object to the handler that contains the details of the specific action and target that triggered the event. In a perfect world we would be able to extract from this object the context of the element we clicked on so we could use that for subsequent actions.

In simple charts that only have a single dimension and a single measure this is achievable – albeit not terribly easily. There is an example of how to do it Re: Need dimensions value on in VIZ bar Chart dataselect event.

But when you are charting multiple measurements and/or multiple dimensions things become much more difficult. Take for example this stacked column chart.

If you want to follow along my example yourself here is the HTML/Javascript that created it.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test Chart</title>
<script id="sap-ui-bootstrap" type="text/javascript"
  src="resources/sap-ui-core.js"
  data-sap-ui-libs="sap.ui.commons, sap.viz">
</script>
<script>
  var oModel = new sap.ui.model.json.JSONModel({
    data : [
      { country : 'China', product : 'Car', profit : 32 },
      { country : 'France', product : 'Car', profit : 43 },
      { country : 'Germany', product : 'Car', profit : 34 },
      { country : 'USA', product : 'Car', profit : 25 },
      { country : 'China', product : 'Truck', profit : 78 },
      { country : 'France', product : 'Truck', profit : 86 },
      { country : 'Germany', product : 'Truck', profit : 56 },
      { country : 'USA', product : 'Truck', profit : 76 },
      { country : 'China', product : 'Motorcycle', profit : 78 },
      { country : 'France', product : 'Motorcycle', profit : 86 },
      { country : 'Germany', product : 'Motorcycle', profit : 56 },
      { country : 'USA', product : 'Motorcycle', profit : 76 },
      { country : 'China', product : 'Bicycle', profit : 78 },
      { country : 'France', product : 'Bicycle', profit : 86 },
      { country : 'Germany', product : 'Bicycle', profit : 56 },
      { country : 'USA', product : 'Bicycle', profit : 76 }
    ]
  });
  sap.ui.getCore().setModel(oModel);
  var dataset = new sap.viz.ui5.data.FlattenedDataset({
    dimensions : [
      { axis : 1, name : 'Country', value : "{country}" },
      { axis : 2, name : 'Product', value : "{product}" }
    ],
    measures : [
      { name : 'Profit', value : '{profit}' }
    ],
    data : { path : "/data" }
  });
  new sap.viz.ui5.StackedColumn("oChart",{
    width : "100%",
    height : "200px",
    title : { visible : true, text : 'Test Stacked Column Chart' },
    dataset : dataset
  }).placeAt("content");
</script>
</head>
<body class="sapUiBody">
  <div id="content"></div>
</body>
</html>

Notice that we have two dimensions – Country and Product. We can select an individual element by clicking on it, we can select an entire column by clicking on the X-axis label, and we can select many elements together.

Each time we click a chart element we fire the selectData event which passes details of the element we clicked on to any event handlers. The challenge is to determine the context of this element for subsequent processing. What follows is one way you could do this by adding a few lines of javascript to the HTML page.

Step 1. Turn off all the user interaction that the chart library delivered with the exception of tooltips.

  sap.ui.getCore().byId("oChart").setInteraction(
    new sap.viz.ui5.types.controller.Interaction({
      selectability: new sap.viz.ui5.types.controller.Interaction_selectability({
        mode: sap.viz.ui5.types.controller.Interaction_selectability_mode.none
      })
    })
  );

Step 2. Attach an event handler for the browser click event to the chart.

  sap.ui.getCore().byId("oChart").attachBrowserEvent("click",chartClickHandler);

Step 3: Implement the event handler.

We are only interested in clicks on the x-Axis of the chart. The x-Axis markup is wrapped in a SVG tag that looks like <g class=”v-m-xAxis” …>. So firstly we test to see if the area clicked is not a descendant of his tag and return immediately.

if(!$(oEvent.srcElement).closest('.v-m-xAxis').length) return;

The x-Axis labels are rendered like the below sample. The <rect> tag is the source element of the click event.

<rect x=”301″ y=”1″ width=”301″ height=”35″ opacity=”0″ class=”v-labelarea” fill=”#808080″></rect>

<g fill=”#333333″ class=”v-label viz-axis-label” font-size=”12px” font-weight=”normal” font-family=”‘Open Sans’, Arial, Helvetica, sans-serif”>

<text pointer-events=”none” x=”452″ y=”18.2″ dominant-baseline=”middle” text-anchor=”middle”>France</text>

</g>

We can isolate the contents of the <text> tag into a variable called xAxisLabel like this.

    var xAxisLabel=$($(oEvent.srcElement).next('.viz-axis-label').children('text')).text();

If I add a dialog box to confirm the x-Axis label that has been clicked the complete event handler looks like this.

  function chartClickHandler(oEvent) {
    if(!$(oEvent.srcElement).closest('.v-m-xAxis').length) return;
    var xAxisLabel=$($(oEvent.srcElement).next('.viz-axis-label').children('text')).text();
    new sap.ui.commons.Dialog({ title: xAxisLabel+" clicked" }).open();
  }

It’s not a perfect solution but it works for our example. Obviously the more complex the chart the more challenging isolating the context of a user click event will be.

If, like me, you are amazed at what can be done with a few lines of Javascript I encourage you to check out JQuery.

And just for completeness here is the final version.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test Chart</title>
<script id="sap-ui-bootstrap" type="text/javascript"
  src="resources/sap-ui-core.js"
  data-sap-ui-theme="sap_goldreflection"
  data-sap-ui-libs="sap.ui.commons, sap.viz">
</script>
<script>
  var oModel = new sap.ui.model.json.JSONModel({
    data : [
      { country : 'China', product : 'Car', profit : 32 },
      { country : 'France', product : 'Car', profit : 43 },
      { country : 'Germany', product : 'Car', profit : 34 },
      { country : 'USA', product : 'Car', profit : 25 },
      { country : 'China', product : 'Truck', profit : 78 },
      { country : 'France', product : 'Truck', profit : 86 },
      { country : 'Germany', product : 'Truck', profit : 56 },
      { country : 'USA', product : 'Truck', profit : 76 },
      { country : 'China', product : 'Motorcycle', profit : 78 },
      { country : 'France', product : 'Motorcycle', profit : 86 },
      { country : 'Germany', product : 'Motorcycle', profit : 56 },
      { country : 'USA', product : 'Motorcycle', profit : 76 },
      { country : 'China', product : 'Bicycle', profit : 78 },
      { country : 'France', product : 'Bicycle', profit : 86 },
      { country : 'Germany', product : 'Bicycle', profit : 56 },
      { country : 'USA', product : 'Bicycle', profit : 76 }
    ]
  });
  sap.ui.getCore().setModel(oModel);
  var dataset = new sap.viz.ui5.data.FlattenedDataset({
    dimensions : [
      { axis : 1, name : 'Country', value : "{country}" },
      { axis : 2, name : 'Product', value : "{product}" }
    ],
    measures : [
      { name : 'Profit', value : '{profit}' }
    ],
    data : { path : "/data" }
  });
  new sap.viz.ui5.StackedColumn("oChart",{
    width : "100%",
    height : "200px",
    title : { visible : true, text : 'Test Stacked Column Chart' },
    dataset : dataset
  }).placeAt("content");
//Step 1. Turn off all the user interaction stuff in the chart apart from tooltips.
  sap.ui.getCore().byId("oChart").setInteraction(
    new sap.viz.ui5.types.controller.Interaction({
      selectability: new sap.viz.ui5.types.controller.Interaction_selectability({
        mode: sap.viz.ui5.types.controller.Interaction_selectability_mode.none
      })
    })
  );
//Step 2. Attach an event handler for when the user clicks on the chart.
  sap.ui.getCore().byId("oChart").attachBrowserEvent("click",chartClickHandler);
//Step 3. Implementation of the event handler.
  function chartClickHandler(oEvent) {
    if(!$(oEvent.srcElement).closest('.v-m-xAxis').length) return;
    var xAxisLabel=$($(oEvent.srcElement).next('.viz-axis-label').children('text')).text();
    new sap.ui.commons.Dialog({ title: xAxisLabel+" clicked" }).open();
  }
</script>
</head>
<body class="sapUiBody">
  <div id="content"></div>
</body>
</html>

Cheers

Graham Robbo

61 Comments

You must be Logged on to comment or reply to a post.

Abesh Bhattacharjee

July 1, 2013 at 1:12 pm

Robbo, thanks so much for blogging this !

I am sure others will find it as useful as I have, without wasting the numerous hours chasing a solution to a feature missing in action !

YOU ROCK !!!

Graham Robinson

Blog Post Author

July 9, 2013 at 12:18 am

Thanks Abesh

Former Member

July 8, 2013 at 7:45 am

Hi, thank you so much for acknowledging my simple solution into your wonderful blog. You are one of my most admired person and inspired me a lot.

Thanks

Best Regards,

Bibhas Das

Graham Robinson

Blog Post Author

July 9, 2013 at 12:18 am

Thanks Bibhas

Jitendra Kansal

July 22, 2013 at 7:01 am

this is great Graham. would be really helpful. 🙂

Former Member

January 28, 2014 at 10:23 am

Hi Graham,

Thank you for the wonderful Blog.

I am facing a problem while using the same on vbox. Is this not supposed to work if I put my chart inside a vbox and then call setinteraction?

I am getting

"Uncaught TypeError: Cannot call method 'setInteraction' of undefined "

Can you guide me what I might be doing wrong?

Graham Robinson

Blog Post Author

February 1, 2014 at 5:08 am

Hi Atul,

you have a javascript error - it looks like the object you are trying to call the setinteraction method on is not being found.

Jump into a javascript debugger and see what it really happening.

Sreehari V Pillai

March 24, 2014 at 6:48 am

Hay Graham,

Interesting Blog.. can't blame Abesh 🙂

By the way, How I can group the dimensions in X Axis ? You have any examples with you ?

Sree

Former Member

July 25, 2014 at 2:11 pm

Hi Graham,

Thank you for you blog, it is very usefull for me, I'm a beginner in SAPUI5.

When I perform your example I don't have the popup, the condition in the function doesn't pass. So I can't trigger the click in the X-axis label.

Do you have an idea about why ? Am I the only one this that problem ?

Graham Robinson

Blog Post Author

July 27, 2014 at 10:29 am

Hi Flavien,

this solution relies upon the DOM that is created by the VIZ Chart.

It appears this has changed slightly in the later versions of the SAPUI5 library.

I found changing the charClickHandler function, as follows, works with the latest version of the SAPUI5 library.

function chartClickHandler(oEvent) {

if(!$(oEvent.target).closest('.viz-axis-body').length) return;

var xAxisLabel=$($(oEvent.target).next('.viz-axis-label').children('text')).text();

new sap.ui.commons.Dialog({ title: xAxisLabel+" clicked" }).open();

Cheers

Graham Robbo

Former Member

July 28, 2014 at 9:10 am

Thank's a lot, it works well.

Former Member

September 19, 2014 at 3:24 am

Hi: off the topic, does sapui5 viz supports Hebrew language(arabic) right to left?

thanks

srini

Graham Robinson

Blog Post Author

October 30, 2014 at 9:57 am

No idea Srini - you will just have to find out. When you do please post the answer? 😉

Former Member

October 30, 2014 at 9:47 am

Hi Graham,

Wonderful Blog. It helped me a lot to learn to create a column chart as i am new to UI5.

But i have one question that instead of clicking any axis, i want to attach an event with the column of column chart. Could you please help me in achieving it??

Graham Robinson

Blog Post Author

October 30, 2014 at 9:59 am

Hi Deepak,

I see no reason why you couldn't do this. The SAPUI5 library already supports this with simple charts. For more complex I encourage you to have a go and then blog about it to let everyone else know how to do it.

Cheers

Graham Robbo

Former Member

November 13, 2014 at 10:32 am

Can we have source code view for the demos on the UI5 CVOM HTML5 Charts - sap.viz.ui5

Graham Robinson

Blog Post Author

November 13, 2014 at 6:07 pm

All source code is included with the SDK. OpenUI5 is here, but of course it does not include the sap.viz components. 😐

SAPUI5 SDK is a bit harder to grab. I usually get latest from https://tools.hana.ondemand.com using Eclipse update wizard and then manually unpack the archives.

Cheers

Graham Robbo

David Loop

June 14, 2015 at 3:28 pm

Hi Graham,

Do you know the reason why sap.viz, docs and the examples are so hard to find? I'm not exactly sure how to jump through those hoops you mentioned...

David

Graham Robinson

Blog Post Author

June 14, 2015 at 9:30 pm

Hi David,

things have moved around quite a bit since I wrote this blog. You can find some examples in the SDK at https://sapui5.hana.ondemand.com/sdk/#test-resources/sap/viz/demokit/VIZCharts.html and https://sapui5.hana.ondemand.com/sdk/explored.html#/entity/sap.viz.ui5.controls.VizFrame/samples

Cheers

Graham Robbo

David Loop

June 14, 2015 at 9:39 pm

Thanks Graham. I appreciate the pointer to the samples.

David

Karthik Arjun

December 1, 2014 at 8:56 am

Hi,

I am trying to use this control in Mobile/Tablet. But no luck in my effort. can any one give your idea, how to implement this in mobile.

ref post : Problem in sap.viz ( only in Mobile/Tablet )

Thanks,

Karthik A

Graham Robinson

Blog Post Author

December 1, 2014 at 9:50 pm

Hi Karthik,

if you want to use a mobile charting library you could try the one built on the Sybase MAKIT library. https://sapui5.hana.ondemand.com/sdk/test-resources/sap/makit/demokit/index.html

Cheers

Graham Robbo

Karthik Arjun

December 2, 2014 at 10:21 am

Hi Graham Robinson,

Thanks for you reply.

i have some open questions on this sap.viz.

1. SAP.VIZ is it available for mobile run time library?

2. sap.ui.suite.commons.TimeLine also not available in Mobile run time library.

why SAP includes this two components in sap.Explored, i am little bit confused. 😕

If you have any ref link, please guide me on this controls, for mobile/Tablet.

for Desktop: this controls are working fine.

Thanks,

Karthik A

Graham Robinson

Blog Post Author

December 2, 2014 at 10:08 pm

Hi Karthik,

these libraries are constantly being enhanced, updated and modified. You will have to sort out what works best for your particular needs. And remember there is no reason you can't also incorporate other non-SAP libraries and components as well if you want to - or enhance the ones that SAP delivers.

Cheers

Graham Robbo

Karthik Arjun

December 10, 2014 at 5:40 am

Hi Graham Robinson ,

Thanks for your reply man 🙂

Cheers

Karthik A

Amit Singh

December 28, 2014 at 2:07 pm

Hi Graham,

Thanks for a wonderful blog.

I wanted to know if it is possible to create a 3-dimensional graph using SAP Ui5. If yes, Do we have any Demo available illustrating it?

Regards,

Amit

Graham Robinson

Blog Post Author

December 29, 2014 at 2:07 am

Hi Amit,

the answer to your questions is really "yes" and "no". 😏

Firstly it is important to remember that the SAPUI5 framework is designed so that it can properly co-exist with other libraries you may wish to use in your application.

The sap.viz library I used for this example uses the open source D3.js library which can produce amazing data-driven visualisations. The sap.viz library only includes a limited list of 2D charts but there is no reason you couldn't use the D3.js library (or any other library you prefer) to visualise your data any way you like in a SAPUI5 application.

There are also other features of the SAPUI5 library designed to support SAP Visual Business, etc. and SAP deliver controls that provide charts using the MaKit library that have a more 3D look to them and are designed for mobile platforms. Demo here.

Cheers

Graham Robbo

Singanamala Geetha

January 27, 2015 at 9:00 am

Code is not working for me..Can anyone help me with this ??

Graham Robinson

Blog Post Author

January 28, 2015 at 3:40 am

I don't know - can they? 😏

Former Member

February 6, 2015 at 7:55 am

Hi Graham,

Its a great blog with wonderful working sample. I appreciate for the post.

I have an requirement to create a sample dashboard with drill down and filter functionality using sapui5 and html , getting input data from information models created in Hana.

This post helps me to understand the base requirements for drill down feature.

Can you help with a working sample or suggest some blog, for drill down and filter functionalities getting input data from models created in Hana?

Thanks,

Naveen

Graham Robinson

Blog Post Author

February 10, 2015 at 2:37 am

Hi Nav,

everything you are after is documented in the Developers Guide.

Cheers

Graham Robbo

Former Member

March 17, 2015 at 11:50 am

Thanks alot Graham Robinson

It is really nice article ....

Former Member

April 2, 2015 at 7:10 pm

Hi Graham,

currently i am using sap.viz.ui5.TimeBubble, my problem is when user click on one bubble, it is highlighted but if one more click on this bubble nothing happened. what i expect is dismiss highlight. do you know any event about this?

thanks in advance..

Graham Robinson

Blog Post Author

April 3, 2015 at 10:23 pm

Hi Roger,

I haven't looked at this library in a while so I am unable to directly answer your question, but I note in the documentation for the TimeBubble control there are events for both selectData and deselectData.

You may be able to use these events to achieve what you want?

Cheers

Graham Robbo

Former Member

April 6, 2015 at 5:56 pm

it doesn't work, because selectData is just called once when clicks on a chart element. if click again on this chart element, nothing happened. What i wanna do is if second click happens on this chart element, this element change its status from highlight to normal.

i think it is general problem for all the viz chart.

Graham Robinson

Blog Post Author

April 6, 2015 at 9:37 pm

You can try using the same technique I have done in this blog to catch the event. For example on the TimeBubble demo page at https://sapui5.hana.ondemand.com/sdk/test-resources/sap/viz/Charting.html I used the Chrome console to add an event handler like so....

$('.v-datashape').click(function(e){console.log('Bubble clicked')})

Cheers

Graham Robbo

Former Member

April 7, 2015 at 12:22 am

definitely it should work, somehow it is not entire solution. See if one ".v-datashape" is selected, its css changed a little bit as following I marked in bold,

and the other datashapes changed to ,

<g class="v-datashape" transform..........

for dismiss highlight, i don't want to loop all the v-datashapes to change their css. is there any build-in api to do that

Graham Robinson

Blog Post Author

April 7, 2015 at 1:11 am

Why would you loop through all the bubbles - aren't you only interested in the one that was clicked?

Former Member

April 7, 2015 at 6:18 pm

the one that clicked is highlighted, the other ones are gray out... i have to loop through to change the CSS back...that's the reason why i wanna find a elegant way.

Graham Robinson

Blog Post Author

April 8, 2015 at 11:17 pm

😕

Former Member

April 8, 2015 at 8:20 am

Hey,

I'm using xml-Views and try to attach a event to a column click inside a colum-chart.

I tried to use the "handlers"-Attribute, but it always states the given function is undefined.

<vtc:Interaction supportedEventNames="mouseup,mousedown,mousemove,mouseout,mouseover,touchstart" handlers="chartClick">

...

</vtc:Interaction>

Since im using as much in the XML-Views/Fragments as possible, I would like to avoid getting the id an attach browser events.

Is there a way to attach such handlers via xml?

Graham Robinson

Blog Post Author

April 8, 2015 at 9:35 am

Please post questions in the forums or on Stackoverflow.

Cheers

Graham Robbo

Former Member

June 22, 2015 at 2:37 pm

Hi Ruven.

Good Day.

Have you found any solution for it? Let me know the definition structure if you have done so? Share the solution thread if any.

I am trying to use the i5Charts in XML view but couldn't find any code samples on the same. Let me know if you have any clue.

Thanks

Venkatesh 🙂

Vinay Godugu

April 8, 2015 at 10:53 am

Hi Graham,

Thanks for this blog. I have an issue in SAP VIZ Pie Chart, Hope you could help me in this. Can u please have a look at this question. I would appreciated for your time.

http://scn.sap.com/thread/3723915

Thanks, Vinay

Former Member

April 8, 2015 at 1:15 pm

Hey

//Step 1. Turn off all the user interaction stuff in the chart apart from tooltips.

sap.ui.getCore().byId("priceByPaymentType").setInteraction(

new sap.viz.ui5.types.controller.Interaction({

selectability: new sap.viz.ui5.types.controller.Interaction_selectability({

mode: sap.viz.ui5.types.controller.Interaction_selectability_mode.none

})

);

//Step 2. Attach an event handler for when the user clicks on the chart.

sap.ui.getCore().byId("priceByPaymentType").attachBrowserEvent("click",chartClickHandler);

//Step 3. Implementation of the event handler.

function chartClickHandler(oEvent) {

if(!$(oEvent.target).closest('.viz-axis-body').length) return;

var xAxisLabel=$($(oEvent.target).next('.viz-axis-label').children('text')).text();

new sap.ui.commons.Dialog({ title: xAxisLabel+" clicked" }).open();

}

the above code i used for my application. Step1 works fine. but on click event action is not working.

Graham Robinson

Blog Post Author

April 8, 2015 at 11:13 pm

Hi Ranajay,

this code depends on the underlying SAPUI5 libraries which are regularly updated - and each update potentially changes how the chart is rendered. This means you will need to adjust the code to match the rendered HTML. Check earlier comments for an example.

Cheers

Graham Robbo

Former Member

April 9, 2015 at 4:12 am

So where can I check the library to see these changes.

Graham Robinson

Blog Post Author

April 9, 2015 at 5:57 am

Have you looked at the release notes? Or used the browser debugger to check out the DOM?

Joseph BERTHE

October 23, 2015 at 9:19 am

Hello,

thanks for your blog. But after searching a nicer way I found the solution to get data selected :

In selectedData handler :

			var oSelectData = oEvent.getParameter("data");
			var oVizFrame = this.getView().byId("idVizFramePie");
			var oContext = oVizFrame.getDataset().findContext(oSelectData[0].data[0].ctx.path);
			alert("Selection" + oContext.getPath());

This should be more flexible.

Regards

Filip Perisic

December 4, 2015 at 2:25 pm

Hi Joseph,

could you please give a bit more details about your solution?

Given a following example, where to put selectData handler?

sap.ui.define([

...

], function(Controller,..) {

"use strict";

var PieController Controller.extend("my.namespace.PieChart", {

onInit : function(oEvent) {...},

onBeforeRendering : function() {},

onAfterRendering : function() {}

});

return PieController;

});

Kind regards,

Filip

Joseph BERTHE

December 4, 2015 at 4:26 pm

Hello,

In the XML view :

<viz:ui5.controls.VizFrame id="idVizFramePie" selectData=".onSelectedDataPie"

uiConfig="{applicationSet:'fiori'}" vizType="column" width="1000px"></viz:ui5.controls.VizFrame>

In the controller :

	onSelectedDataPie:function(oEvent) {
			// get the event data as provided by the native sap.viz librarycontext_row_number
			var iSelectDataIndex = oEvent.getParameter("data")[0].data._context_row_number;
			var oVizFrame = this.getView().byId("idVizFramePie");
			var oData = oVizFrame.getDataset().getModel().getData().results[iSelectDataIndex];
			this._updateItemListModel(oData);

Hope it will help you.

Regards,

Filip Perisic

December 4, 2015 at 5:10 pm

Yes, it did! Thank you a lot Joseph for taking your time for replying and helping out.

Kind regards,

Filip

Filip Perisic

December 4, 2015 at 4:06 pm

Thanks Graham for this blog post, it explains well how to achieve desired goal.

Following your example, I have wrote the handler that isolates the context of a user click event for PieChart. Maybe someone finds it useful.

var pieChartClickHandler = function(oEvent){

var target = oEvent.srcElement || oEvent.target;

if(!$(target).closest('.v-datapoint').length)

return;

var clickedElementId = target.parentElement.getAttribute("data-datapoint-id");

var clickedElementLabel = $(".v-datalabel[data-datapoint-id='" + clickedElementId +"']").children('text').text();

console.log("Clicked Data: " + clickedElementLabel);

};

Best regards,

Filip

Graham Robinson

Blog Post Author

December 5, 2015 at 3:08 am

Hi Filip,

I think you might have missed an important piece of information contained within the comments for this blog.

Please remember that this blog was written more than 2 years ago when trapping and interpreting events from the Viz charts was very rudimentary. Since then the libraries have been enhanced many times and now there is much better event handling interpretation built into the controls.

Joseph BERTHE has pointed to some of these new event handlers in his comments.

The key thing is that if the SAP delivered controls come with suitable event handling we should use it - and not build our own in the way I did originally with this example. That is because SAP will ensure these event handlers continue to work properly even if they make changes to the DOM representation of the controls.

When the controls change the way they are rendered jQuery-based queries, such as $(target).closest('v-datapoint'), may no longer work or might point to a different result. This is why my solution has required changes several times since it was first published to accommodate the newer SAPUI5 libraries.

I have built a newer example based upon the "selectData" and "deselectData" events of the sap.viz.ui5.controls.Vizframe control. You can see it in action at http://embed.plnkr.co/U9lkJmNetAknLrSI1HFK/

Using the standard event handlers you can see how even selecting and deselecting columns of the chart in groups can be handled smoothly. The same principles can be applied to your pie chart example too - as users are able to select and deselect multiple segments at once.

onSelectData: function(oEvent) {

var aSelections = oEvent.getParameter("data");

var oModel = this.getView().byId('idList').getModel();

for (var i = 0; i < aSelections.length; i++) {

this._selectedData.push(aSelections[i].data);

};

oModel.refresh();

},

onDeselectData: function(oEvent) {

var aSelections = oEvent.getParameter("data");

var oModel = this.getView().byId('idList').getModel();

for (var i = 0; i < aSelections.length; i++) {

for (var j = 0; j < oModel.getData().length; j++) {

if (oModel.getData()[j] === aSelections[i].data) {

oModel.getData().splice(j, 1);

break;

}

};

oModel.refresh();

}

The below image shows it in action

I hope this helps.

Cheers

Graham Robbo

Filip Perisic

December 8, 2015 at 12:03 pm

Hi Graham,

thank you a lot for this nice explanation and code example. It's easy to understand and suitable for UI5 beginners like me..your post made my life easier 🙂 IMHO your example would be perfect for SAPUI5 Explored

Kind regards,

Filip

Graham Robinson

Blog Post Author

December 8, 2015 at 9:59 pm

High praise indeed 🙂 cc DJ Adams

Graham Robinson

Blog Post Author

December 5, 2015 at 11:58 pm

Hi Filip,

I finally found the notice I was looking for to include in my previous comment.

As you can see the the control library I used in the original post 2 years ago has been deprecated and sap recommends using the VizFrame control instead. That is how I built the demo I linked to above.

Cheers

Graham Robbo

karthik Porandla

February 23, 2016 at 6:45 am

Hi Graham,

Wonderful Blog. It helped me a lot to learn to create a column chart as i am new to UI5.

Thanks

Karthik

Graham Robinson

Blog Post Author

February 24, 2016 at 1:23 am

Glad to be of assistance Karthik.

Matheus Oliveira Goulart

November 24, 2016 at 8:02 pm

Hello Graham, great blog!

I have a requirement to develop a gauge chart, and i know that it's possible to do it with external libraries. My problem is that my application has to run on FIORI launchpad, and i do not found any post teaching how to use external libraries inside FIORI Launchpad.

Do you have any idea if is this possible?

Thanks!
Matheus Goulart

Graham Robinson

Blog Post Author

January 5, 2017 at 12:54 am

Hi Matheus,

you can certainly use external libraries in FLP apps. Go for it!

Cheers
Graham Robbo

SAPUI5 VIZ Charts event handling

Assigned Tags