Filtering Data Feed for Viz Bar Chart

[Former Member]

Hello Everyone,

I am having trouble getting data to display in a bar chart so that it can be filtered by country.  If I could figure out how to get the bar chart to show the data for one country at a time I should be able to create a way for users to select which country they want to see.

Here is a screen shot of how the bar chart looks now. Notice how there are 4 bars overlapping for each year. Is it possible to filter the data into the chart without changing the data format (json)?

Here is the json data

{
  "Annual_Growth_Rates" : [

   {"country" : "Europe", "year" : 2012, "percent" : 4.31},
   {"country" : "Europe", "year" : 2013, "percent" : 3.99},
   {"country" : "Europe", "year" : 2014, "percent" : 4.16},
   {"country" : "Europe", "year" : 2015, "percent" : 4.02},
   {"country" : "Europe", "year" : 2016, "percent" : 3.98},

   {"country" : "China", "year" : 2012, "percent" : 11.33},
   {"country" : "China", "year" : 2013, "percent" : 3.74},
   {"country" : "China", "year" : 2014, "percent" : 3.48},
   {"country" : "China", "year" : 2015, "percent" : 1.9},
   {"country" : "China", "year" : 2016, "percent" : 2.44},

   {"country" : "US", "year" : 2012, "percent" : 28.07},
   {"country" : "US", "year" : 2013, "percent" : 15.48},
   {"country" : "US", "year" : 2014, "percent" : 15.83},
   {"country" : "US", "year" : 2015, "percent" : 16.11},
   {"country" : "US", "year" : 2016, "percent" : 17.14},

   {"country" : "Other", "year" : 2012, "percent" : 12.42},
   {"country" : "Other", "year" : 2013, "percent" : 6.94},
   {"country" : "Other", "year" : 2014, "percent" : 6.95},
   {"country" : "Other", "year" : 2015, "percent" : 7.31},
   {"country" : "Other", "year" : 2016, "percent" : 7.24}

  ]
}

And here is my viz chart code.

vizFrame = this.getView().byId("vizFrame");

growthRatesDataSet = new sap.viz.ui5.data.FlattenedDataset({
  dimensions: [
     {name: 'year', value: "{year}"}
  ],
  measures: [
     {name: "percent", value: "{percent}"}
  ],
  data: {path: "/Annual_Growth_Rates"}
  });

growthRateFeedPrimary = new sap.viz.ui5.controls.common.feeds.FeedItem({
  'uid' : "primaryValues",
  'type' : "Measure",
  'values' : ["percent"]
  });
  growthRateFeedAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({
  'uid' : "axisLabels",
  'type' : "Dimension",
  'values' : ["year"]
  });


//set vizFrame properties
  vizFrame.setVizProperties({
       plotArea : {
            dataLabel : {visible : true},
            isFixedDataPointSize : true
       },
       legend : {
            title: {visible : false}
       },
       title: {
            visible: true,
            text: 'Growth Rates'
       }
  });

vizFrame.setDataset(growthRatesDataSet);
vizFrame.setModel(growthRatesModel);
vizFrame.addFeed(growthRatesFeedPrimary);
vizFrame.addFeed(growthRatesFeedAxis);

Thanks in advance for any solutions proposed!

[former_member213564]

I found out about a better way than assigning new dataset to a chart as I wrote in my previous comment..here is the code example

// create new filter  
var aFilters = [];
var oFilterChina =new sap.ui.model.Filter("country",sap.ui.model.FilterOperator.EQ,"China");   
aFilters.push(oFilterChina);

// apply filter
var vizFrame = this.getView().byId("vizFrame");  
vizFrame.getDataset().getBinding("data").filter(aFilters);

Regards,

Filip

[Former Member]

Hi Filip,

also want to filter my model for showing different charts. Your last idea looks really helpful but it doesn't work for me:

Uncaught TypeError: Cannot read property 'filter' of undefined

Here my code:

var oVizFrame = this.getView().byId("idChartView");
...
var oFilters = [];
var oFilter = new sap.ui.model.Filter("ID", sap.ui.model.FilterOperator.EQ, "1100" );
oFilters.push(oFilter);
...
oVizFrame.getDataset().getBinding("data").filter(oFilters);

Edit: i solved my problem. I wrote this line (07.) in the onInit function. Using this in a separate function works fine.

[former_member213564]

Hi James,

you can set filter in your FlattenedDataset as data's attribute. For example filtering by US

var oFilter=new sap.ui.model.Filter("country",sap.ui.model.FilterOperator.EQ,"US"); 

vizFrame = this.getView().byId("vizFrame"); 
growthRatesDataSet = new sap.viz.ui5.data.FlattenedDataset({ 
   dimensions: [{
    name: 'year',
   value: "{year}"} 
   ], 
   measures: [
  name: "percent",
  value: "{percent}"} 
   ], 
   data: {
  path: "/Annual_Growth_Rates",
  filters: [oFilter]
   } 
  });

However I'm still trying to figure out how to parametrize the filter value.

EDIT:
What I'm doing is assigning a new dataset when I have to change the filter value. New dataset is the same as the previous one except filters value.

// create new filter
var oFilterChina =new sap.ui.model.Filter("country",sap.ui.model.FilterOperator.EQ,"China"); 

// create the same dataset as before except for new filters value
growthRatesDataSet = new sap.viz.ui5.data.FlattenedDataset({ 
   dimensions: [{
    name: 'year',
   value: "{year}"} 
   ], 
   measures: [
  name: "percent",
  value: "{percent}"} 
   ], 
   data: {
  path: "/Annual_Growth_Rates",
  filters: [oFilterChina] //Only difference
   } 
  });


//assign "new" dataset 
vizFrame = this.getView().byId("vizFrame"); 
vizFrame.setDataset(growthRatesDataSet);  

and when you want to remove filters, just assign dataset you did at the beginning, i.e. the one without filters.

I'm aware this solution isn't nice because there is a lot of duplicate code, but it works.

Kind regards,

Filip