Skip to Content
avatar image
Former Member

Filtering Data Feed for Viz Bar Chart

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!

bargraph.png (13.3 kB)
Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

2 Answers

  • Dec 29, 2015 at 10:34 AM

    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

    Add comment
    10|10000 characters needed characters exceeded

  • Jan 20, 2016 at 04:17 PM

    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

    Add comment
    10|10000 characters needed characters exceeded

    • 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.