Viz Frame Control Charts

[mantrishekar]

Hello All,

I have a requirement to prepare a DashBoard which contains 4 Charts.

Now my requirement is when i click on first chart i nee to display the associated subchilds information of chart 1 in chart 2.

Could any body please let me now the approach tio implement this functionality.

[Former Member · Accepted solution]

Hi Shekar,

If you can explain in detail what type of information you want the child graph and whats your exact requirement?

Viplove

[mantrishekar · Accepted solution]

Hello Viplove,

For my requirement in graph1 on x-axis assumei have values from A-D.

Now for every A_D i have child elements like A1,A2,A3,A4 similarly for B C and D.

Now in the first graph i need to show consolodated information for A B C D which is sum of A1+A2+A3+A4 similarly for BCD.

Now if i click on A column in charrt one again it should show vakues A1 A2 A3 A4 similarly if i click on B C D it should show respective childs.

For better understanding i am attaching Mock Screen

[sebastianraemsch · Accepted solution]

Hi Mantri,

So basically I guess you would like to navigate to a detail chart, right?

I did it by attaching to event SelectData of the chart (I did it in onInit of the Controller):

oChart.attachSelectData(jQuery.proxy(this.onSelection, this));

And then in the event handler you can eveluate which bar was clicked:

onSelection: function(oEvent) {
  var selected = oEvent.getParameter("data");

  var system = selected[0].data.System;
  var month = selected[0].data.Month;
  var year = selected[0].data.Year;
  sap.ui.core.UIComponent.getRouterFor(this.getView()).navTo("details", {
  from: "overview",
  sysId: system,
  month: month,
  year: year
  });
}

This is of course only a simplified example which fits to my needs. You can adapt it for your use case.

Best regards,

Sebastian

[mantrishekar · Accepted solution]

Hi Sebastian,

http://bl.ocks.org/diethardsteiner/3287802

I want to fulfil the requirement which is shown in above link.

Is it possible to do,like this in sapui5

[Former Member · Accepted solution]

Hi Mantri,

Sebastian is correct I will just add few things regarding services(oData)

You can create two services one query service which will get all the info in the first graph (A,B,C,D with the corresponding Y axis values), and other is the read service which you will call when you select the graph points(SelectData method). In Read service you need to pass the parameter(A or B or C or D) to get the corresponding childs(A1,A2,A3,A4 or B1 ... B4 or C1....C4 or D1....D4).

I hope you get it what I am trying to say and to implement Vizframes refer Explored example :SAPUI5 Explored

Final Logic :

Just you need to call the service when you select the data on the graph1 to render graph2 (selectData event of VizFrame you can use as suggested by Sebastian)

Thanks

Viplove

[mantrishekar · Accepted solution]

Hello Viplove,

here in sebestian's code snippet am confused with the following codes of line

1. sap.ui.core.UIComponent.getRouterFor(this.getView()).navTo("details", { 
2.   from: "overview", 
3.   sysId: system, 
4.   month: month, 
5.   year: year 
6.   }); 

Could you please explainf elaboratively.

Now for my case am using JSON Data

[Former Member · Accepted solution]

Hi Mantri,

lets make it simple,

As I mentioned in my previous comment create two services and also just create a simple graph as shown in explored example with you first service and create another graph with the second service.

Just you need to create the second graph when you click on the first graph data .

And also I am just saying that Sebastian event calling is correct, he is having odata navigation property like master detail split app service which he is using to navigate the same graph to the next graph by clicking on the data of first graph. Thats why router comes into picture but your requirement is different and also he is using odata and you are using JSON.

So follow two service approach.

thanks

Viplove

[mantrishekar · Accepted solution]

Yeah but,

If i create two services(JSON Models) then i want to show the data of subchilds of A when i click on one columns and want to see subchilds data on B .

how we can do this part

[Former Member · Accepted solution]

Hi Mantri,

That's why I told you second service will be read with input A,B,C,D so when you click on A it calls service with input A if B than B and accordingly you can refresh the model with new data

I asked you to create two services because its easy to understand, you can even go for navigation property of the oData service. But that's little complex as Sebastian suggested

Thanks

Viplove

[mantrishekar · Accepted solution]

Hi Viplove,

At first am unable to understand this but slowly am getting into track and have done the same as suggested.But with respect to performance issues is it a good practice to generate multiple JSON objects from a single JSON Objects based on filter conditions and binding.

[Former Member · Accepted solution]

Hi Mantri,

Calling two services is not good for performance if you data is too much ... means if you have not a lot records from the backend its fine , it will not impact much. I think  most of the data will be in first service query that you can't stop from executing as it will require to show the graph when you load the app and second request on clicking is child data so I don't think so it will have much data.

But its better to use navigation property in OData - its like joining of two tables through foreign key .. in that you will not have to call the service on clicking the graph1 data points, you just need to attach it ... other things will automatically take care you just need to use routing as Sebastian show you in his comment.

thanks

Viplove

[mantrishekar · Accepted solution]

Viplove,

That sounds good, that means as per my understanding this would make our work much more simpler than what actually am doing right now.

Actually if i connect to DB it has much more records liike count would be greater than crore or more than that.

[Former Member · Accepted solution]

Hi ,

If you have so much data why cant you use SAP HANA DB this will take very less time to load so much data ..

Thanks

Viplove

[mantrishekar · Accepted solution]

Project is still in development stage thats why am using Dummy JSON Data

[mantrishekar]

Anybody have idea about this kind of dash board please guide me to do this dashboard.