topic Re: Filter Chart using JavaScript API in Developer

Filter Chart using JavaScript API

skancharla — Thu, 24 Nov 2016 09:36:06 GMT

Hi,

I have a created a chart from desktop and integrated to our application .Now I'm trying to filter the chart with JavaScript API filters using this reference.

Downloaded the required power bi models from npm version and included the .js , .ts files. But still seeing error that pbi/models/IBasic filter is not defined.

Tried both the below ways of constructing filters but no luck. I see that for the models ,typescripting is used to which I'm new.

Any Help or direction to resolve this would be appreciated.

Thanks.

const advancedFilter = new pbi.models.AdvancedFilter({

const basicFilter: pbi.models.IBasicFilter = {
  $schema: "http://powerbi.com/product/schema#basic",
  target: {
    table: "Store",
    column: "Count"
  },
  operator: "In",
  values: [1,2,3,4]
}

Re: Filter Chart using JavaScript API

Eric_Zhang — Mon, 28 Nov 2016 09:07:54 GMT

@skancharla

Make sure you've add the script reference in the html page.

 <script src="https://microsoft.github.io/PowerBI-JavaScript/demo/bower_components/powerbi-client/dist/powerbi.js"></script>

Also you can try below sample, which actually works in my test.

 var  Filter = {
   $schema: "http://powerbi.com/product/schema#advanced",
  target: {
    table: "Sales CountryRegionCurrency",
    column: "CountryRegionCode"
  },
  logicalOperator: "OR",
  conditions: [
    {
      operator: "Contains",
      value: "CN"
    },
    {
      operator: "Contains",
      value: "CO"
    }
  ]
}
 

var embedConfiguration = {
    type: 'report',
    accessToken: 'xxxxx',
    id: '94da70b0xxxxxx-86bb8a2b9c18',
    embedUrl: 'https://embedded.powerbi.com/appTokenReportEmbed?reportId=94da70bxxxxxx8a2b9c18',

}; 
 

var $reportContainer = $('#reportContainer');
 
var report = powerbi.embed($reportContainer.get(0), embedConfiguration);

<!--validateReportLoad incorrectly returns schema errors for valid filters #16https://github.com/Microsoft/powerbi-models/issues/16-->

report.on('loaded', event => {
  report.getFilters()
    .then(filters => {
      filters.push(Filter);
      return report.setFilters(filters);
    });
});

Re: Filter Chart using JavaScript API

skancharla — Mon, 05 Dec 2016 08:57:28 GMT

Thanks @Eric_Zhang. I'm able to fix the filter undefined error .But still filter is not getting applied.

Receiving below error in the console when setFilter is called.

Uncaught (in promise) Message:"This feature is not supported for Publish To Web."

Is it anything to do with the way the report is published.

Re: Filter Chart using JavaScript API

Eric_Zhang — Mon, 05 Dec 2016 09:08:06 GMT

@skancharla

I thought you'were embedding the report via Power BI REST API. If via "Publish to web", then it may, as the message indicats, not be supported. Try via Power BI REST API instead.

Re: Filter Chart using JavaScript API

skancharla — Wed, 14 Dec 2016 08:51:13 GMT

Thanks @Eric_Zhang.

I'm able to get it work with PowerBI Embedded.

Re: Filter Chart using JavaScript API

ggww — Thu, 20 Sep 2018 06:21:26 GMT

I used the following code and it is not working, any suggestions?

var report = powerbi.embed(reportContainer, config);

var filter = {
$schema: "http://powerbi.com/product/schema#basic",
target: {
table: "customers",
column: "CustomerID"
},
operator: "Is",
values: "1234" //,
};

//report.removeFilters();
report.setFilters([filter]);

thansk heaps..

Re: Filter Chart using JavaScript API

ggww — Thu, 20 Sep 2018 06:22:38 GMT

I used the following code and it is not working, any suggestions?

var report = powerbi.embed(reportContainer, config);

var filter = {
$schema: "http://powerbi.com/product/schema#basic",
target: {
table: "customers",
column: "CustomerID"
},
operator: "Is",
values: "1234" //,
};

//report.removeFilters();
report.setFilters([filter]);

thansk heaps..