cancel
Showing results for 
Search instead for 
Did you mean: 

Filtered Viz Chart

Former Member
0 Kudos

Hello folks,

based on this code:


var oDataset = new sap.viz.ui5.data.FlattenedDataset({

  // X Axis

  dimensions: [{

  name : "Device",

  value : "{Device}"

  }],

  // Y Axis

  measures : [{

  name : "Equipment",

  value : "{Equipment}"

  }, {

  name : "ID",

  value : "{ID}"

  }],

  // oData

  data: {

  path: "/myentity"

  }

  });

How do you show corresponding bars (lets say from device) based on your filter?

Accepted Solutions (0)

Answers (3)

Answers (3)

Former Member
0 Kudos

I try to more clarify my issue.

Let's say I have these following data coming from my oData:

  1. data : [ 
  2.       { country : 'India', product : 'Car', profit : 30 },
  3.       { country : 'UK', product : 'Car', profit : 43 },
  4.       { country : 'Germany', product : 'Car', profit : 34 },
  5.       { country : 'USA', product : 'Car', profit : 25 },
  6.       { country : 'India', product : 'Truck', profit : 60 },
  7.       { country : 'UK', product : 'Truck', profit : 86 },
  8.       { country : 'Germany', product : 'Truck', profit : 56 },
  9.       { country : 'USA', product : 'Truck', profit : 76 },
  10.       { country : 'India', product : 'Motorcycle', profit : 90 },
  11.       { country : 'UK', product : 'Motorcycle', profit : 86 },
  12.       { country : 'Germany', product : 'Motorcycle', profit : 56 },
  13.       { country : 'USA', product : 'Motorcycle', profit : 76 },
  14.     ]


Now I have my graph which I posted in the beginning of this topic. Actually my chart is showing every country which is ok but I would like to offer the possibilities to filter the chart to show e.g. only India as a bar. The rest should be removed. But how to reach that? Any code example you can kindly share?

vijay_kumar49
Active Contributor
0 Kudos

filtered means depending lo region you need to show the data? is it right?

Former Member
0 Kudos

Yes, but I want explicity show only India. The rest should be removed from my data.

Former Member
0 Kudos

Normally it should work like this, right? :


var oDataset = new sap.viz.ui5.data.FlattenedDataset({

  // X Axis

  dimensions: [{

  name : "Country",

  value : "{country}"

  }],

  // Y Axis

  measures : [{

  name : "whatever",

  value : "{whatever}"

  }, {

  name : "whatever",

  value : "{whatever}"

  }],

  // oData

  data: {

  path: "/myentity",

  filters: [new sap.ui.model.Filter("Country", sap.ui.model.FilterOperator.EQ, "India")] 

  }

  });

But it's not

vijay_kumar49
Active Contributor
0 Kudos

Please check this code. it may be useful.

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"
  6. <title>Test Chart</title> 
  7. <script id="sap-ui-bootstrap" type="text/javascript" 
  8.   src="resources/sap-ui-core.js" 
  9.   data-sap-ui-libs="sap.ui.commons, sap.viz"
  10. </script> 
  11. <script> 
  12.   var oModel = new sap.ui.model.json.JSONModel({ 
  13.     data : [  
  14.       { country : 'India', product : 'Car', profit : 30 }, 
  15.       { country : 'UK', product : 'Car', profit : 43 }, 
  16.       { country : 'Germany', product : 'Car', profit : 34 }, 
  17.       { country : 'USA', product : 'Car', profit : 25 }, 
  18.       { country : 'India', product : 'Truck', profit : 60 }, 
  19.       { country : 'UK', product : 'Truck', profit : 86 }, 
  20.       { country : 'Germany', product : 'Truck', profit : 56 }, 
  21.       { country : 'USA', product : 'Truck', profit : 76 }, 
  22.       { country : 'India', product : 'Motorcycle', profit : 90 }, 
  23.       { country : 'UK', product : 'Motorcycle', profit : 86 }, 
  24.       { country : 'Germany', product : 'Motorcycle', profit : 56 }, 
  25.       { country : 'USA', product : 'Motorcycle', profit : 76 }, 
  26.     ] 
  27.   }); 
  28.   sap.ui.getCore().setModel(oModel); 
  29.   var dataset = new sap.viz.ui5.data.FlattenedDataset({ 
  30.     dimensions : [ 
  31.       { axis : 1, name : 'Country', value : "{country}" }, 
  32.       { axis : 2, name : 'Product', value : "{product}"
  33.     ], 
  34.     measures : [ 
  35.       { name : 'Profit', value : '{profit}'
  36.     ], 
  37.     data : { path : "/data"
  38.   }); 
  39.   new sap.viz.ui5.StackedColumn("oChart",{ 
  40.     width : "100%"
  41.     height : "200px"
  42.     title : { visible : true, text : 'Test Stacked Column Chart' }, 
  43.     dataset : dataset 
  44.   }).placeAt("content"); 
  45. </script> 
  46. </head> 
  47. <body class="sapUiBody"
  48.   <div id="content"></div> 
  49. </body> 
  50. </html> 

Kindly let me know if you need any more information.

Former Member
0 Kudos

Hello Vijay,

so based on your example your chart is only showing country and product as possible bars.Profit is filtered out.

But what I want to try is: Just showing India. Everything else is filtered out. How does this look like for my graph?

Ankit_Maskara
Employee
Employee
0 Kudos

Hello Karen,

You can try as below. Here I have passed filters to the OData Call and copied the resultant data to the JSON Model and then bound to chart.

oModel.read("/<EntitySet/Collection>",{filters:ofilters,success:function(oData,oResponse){                  

                  var oJsonModel = new sap.ui.model.json.JSONModel();

                  oJsonModel.setData({modelData : oData.results});

                  // Dual Chart Binding

                  var oDualComb = this_root.getView().byId("<Chart_id>");

                  // Combination Graph dataset

                  var oDataset = new sap.viz.ui5.data.FlattenedDataset({

                        dimensions: [{

                              axis:1,

                              name: "<Name of first Dimension>",

                              value: {

                                    path : '<DimensionField1>',

                              }

                        },

                        {

                              axis:2,

                              name: " ",

                              value: " "

                        }],

                        measures: [

                                   {

                                       group :1,

                                       name: '',

                                       value: '{<MeasureField1>}'

                                   }, {

                                       group:2,

                                       name: '',

                                       value: '{<MeasureField2}'

                                   }, {

                                       group:2,

                                       name: '',

                                       value: '{<MeasureField3}'

                                   }

                                   ]

                  });

                  oDataset.setModel(oJsonModel);

                  oDataset.bindData("/modelData",null,null,null);

                  oDualComb.setDataset(oDataset);

                  oDataset.getMeasures()[0].setName("<Measure1 text>");

                  oDataset.getMeasures()[1].setName("<Measure2 text>");

                  oDataset.getMeasures()[2].setName("<Measure3 text>");

                  oDualComb.getXAxis().getTitle().setText("<Dimension1 text>");

                  oDualComb.getXAxis().getTitle().setVisible(true);                

                  oDualComb.getLegendGroup().getLayout().setPosition("bottom");

                  oDualComb.getYAxis().getTitle().setText("");

                  oDualComb.getYAxis().getTitle().setVisible(true);

                  oDualComb.getYAxis2().getTitle().setText("");

                  oDualComb.getYAxis2().getTitle().setVisible(true);

                  oDualComb.getXAxis().setMaxSizeRatio(1);

BR.

Former Member
0 Kudos

Hello Ankit,

I tried your solution but get an error that the property 'read' of undefined cannot be read.

Ankit_Maskara
Employee
Employee
0 Kudos

Can you please paste a console screenshot and also debug the same.

BR.