I have an embedded report in which I want to set the theme of the visuals according to the even and odd number of visuals.Can anyone suggest how can I apply the theme to the visuals ?
To apply themes to the visuals, please find the below code snippet:
Create customized themes:
// Create a theme.
const theme = {
"name": "Sample Theme",
"dataColors": ["#990011", "#cc1144", "#ee7799", "#eebbcc", "#cc4477", "#cc5555", "#882222", "#A30E33"],
"background": "#FFFFFF",
"foreground": "#007799",
"tableAccent": "#990011"
};
Get the number of visuals:
const visuals = await page.getVisuals();
const num_of_visuals = visuals.length;
Use applyTheme API to apply themes to visuals:
// Apply the custom theme for even number of visuals
if(num_of_visuals % 2 == 0){
report.applyTheme({ themeJson: themes.find(theme => theme.name ==="light")});
}
else { // Apply the custom theme for odd number of visuals
report.applyTheme({ themeJson: themes.find(theme => theme.name === "dark") });
}
References:
https://learn.microsoft.com/javascript/api/overview/powerbi/get-visuals
https://learn.microsoft.com/javascript/api/overview/powerbi/apply-report-themes
Related
I have an embedded report in which I want to set the theme of the visuals according to the even and odd number of visuals. I am able to check the number of visuals by getting count of all the filters. Can anyone suggest how can I apply the theme to the visuals ?
To apply themes to the visuals, please find the below code snippet:
Create customized themes:
var themes = [
{
"name": "light",
"dataColors": ["#93A299","#057BE0","#848058"],
"background": "#FFFFFF",
"foreground": "#CF543F",
"tableAccent": "#93A299"
},
{
"name": "dark",
"dataColors": ["#31B6FD","#4584D3", "#5BD078"],
"background": "#000000",
"foreground": "#4584D3",
"tableAccent": "#31B6FD"
}
]
Get the number of visuals:
const visuals = await page.getVisuals();
const num_of_visuals = visuals.length;
Use applyTheme API to apply themes to visuals:
// Apply the custom theme for even number of visuals
if(num_of_visuals % 2 == 0){
report.applyTheme({ themeJson: themes.find(theme => theme.name ==="light")});
}
else { // Apply the custom theme for odd number of visuals
report.applyTheme({ themeJson: themes.find(theme => theme.name === "dark") });
}
You Can find the reference from the below links
https://learn.microsoft.com/javascript/api/overview/powerbi/get-visuals
https://learn.microsoft.com/javascript/api/overview/powerbi/apply-report-themes
Currently the configuration to embed a specific visual through the JS powerbi-client does not allow passing in filters. See "Embed a report visual" for the configuration supported. Note that you are able to pass in filters at embed time for a report. See "Embed a report". Not being able to filter a visual at embed time results in 2 hops (once to load the visual with default filters, then another to load with expected filters).
Feature Request: I'd love for the feature to be added to filter at embed time for visuals like it exists for reports.
The way I do this now is hide the visual, embed it, set filters when loaded, then show it when rendered.
this.visualReady = false;
let visual = this.powerbi.embed(
embedElement,
visualLoadConfig
) as pbi.Visual;
visual.on('loaded', async () => {
await visual.setFilters([upcFilter, dateFilter]);
});
visual.on('rendered', async () => {
this.visualReady = true;
});
Are there any better ways to do this in the mean time?
Currently, Visual embedding does not support configuration for adding filters at embed time i.e. phased embedding is not possible for visuals.
The approach you are following currently is the best way to update filters for visuals.
One minor correction would be that you don't need to hide the visual because it will be rendered only after filter is updated.
Please refer below snippet for embedding visual with filters:
const visual = powerbi.embed(PowerBIEmbed.visualContainer.get(0), visualConfig);
// Clear any other loaded handler events
visual.off("loaded");
// Triggers when a visual schema is successfully loaded
visual.on("loaded", function () {
console.log("visual load successful");
const basicFilter = {
$schema: "http://powerbi.com/product/schema#basic",
target: {
table: "Dates",
column: "Month"
},
operator: "In",
values: ['Feb'],
filterType: 1,
requireSingleSelection: true
}
visual.setFilters([basicFilter]).then(res => {
visual.getFilters().then(filters => {
console.log(filters);
});
}).catch(error => {
console.error(error);
});
});
// Clear any other rendered handler events
visual.off("rendered");
// Triggers when a visual is successfully embedded in UI
visual.on("rendered", function () {
console.log("visual render successful");
});
Visual embedding with filter applied:
Visual embedding without filter applied:
I have a requirement according to which I need to have custom tooltips on a chart instead of default Series, Group and Value labels. I need to change these with my own custom ones.
Is there any way to have custom tooltips to a line with area chart?
1) Edit the chart region, and in the chart attribute JavaScript Code, enter the following code snippet:
function( options ){
// Add new group and series labels to tooltips
if ( options.valueFormats.group ) {
$.extend( options.valueFormats.group, { tooltipLabel: 'Apple' });
} else {
options.valueFormats.group = { tooltipLabel: 'Apple' };
}
$.extend(options.valueFormats.value, { tooltipLabel: 'Fruits' });
return options;
}
2) Save the changes, and run the page. Note that the 'Group' label will now display 'Apple', and the 'Value' label will now display 'Fruits'.
I have a power bi report with both desktop and mobile views. I'd like the browser to switch between these views as it resizes. The only way I can currently achieve this is to embed two instances of the report into the browser, one mobile the other desktop, and hide and show them depending on the browser size.
The problem with this is that if I set some filter values when in the desktop view then, narrow the browser so that the mobile view is shown, then the filter values are not same, this obviously being because there are in reality two separate reports.
The other downside of this approach is that I am presumably also incurring the performance cost on my database of generating two reports.
What can I do to only embed a single report that can dynamically switch between mobile and desktop views?
UPDATE Following response below, test code to toggle layout between mobile and custom layout
angular.element($window).on('resize', function () {
if (vm.report === null)
return;
var models = window['powerbi-client'].models;
var newLayout = models.LayoutType.Custom;
if (window.innerWidth < 768) {
newLayout = models.LayoutType.MobilePortrait;
}
if (vm.report.config.settings.layoutType !== newLayout) {
const newSettings = { layoutType: newLayout };
vm.report.updateSettings(newSettings);
}}
UPDATE 2, Added code to show how the report is generated
// report config
var models = window['powerbi-client'].models;
var config = {
type: 'report',
tokenType: models.TokenType.Embed,
accessToken: result.accessToken,
embedUrl: result.embedUrl,
id: result.reportId,
permissions: models.Permissions.View,
viewMode: models.ViewMode.Read,
settings: {
filterPaneEnabled: false,
navContentPaneEnabled: false,
background: models.BackgroundType.Transparent,
layoutType: models.LayoutType.Custom,
customLayout: {
displayOption: models.DisplayOption.FitToPage
}
}
};
// get elements and embed them
var desktopReportContainer = $('.reportContainer')[0];
vm.report = powerbi.embed(desktopReportContainer, config);
Instead of embedding two instances of a report you can do:
Change the layout type by updating settings like here: change-layout-example.
The downside of this approach is that your user's cross filters will not be saved when changing layout.
Before changing the layout type, save a bookmark and then after changing the layout type apply the saved bookmark:
function changeLayout(layoutType) {
report.bookmarksManager.capture()
.then(function (capturedBookmark) {
var bookmarkState = capturedBookmark.state;
var config = {
layoutType: layoutType
};
report.updateSettings(config).then(function () {
report.bookmarksManager.applyState(bookmarkState);
})
})
}
Please note that you will have to add error handling code to the sample above.
Use Custom layout instead of mobile layout like here: Dynamic report layout.
The downside of this approach is that you will have to write code that sets the layout dynamically.
Power BI embed Javascript library has direct support for your case.
First you will need to create a report with mobile layout using Power BI desktop. After you created the report you can embed it using JavaScript SDK. In order to decide in which layout to embed, use the layoutType property of settings in embed configuration.
There are two layout types dedicated to mobile devices:
MobilePortrait - Optimized for portrait view (This is the mobile
layout you created on Power BI desktop)
MobileLandscape - Optimized
for landscape view. This layout looks like the regular report layout.
Load a report in mobile layout Example:
// Get models. models contains enums that can be used.
var models = window['powerbi-client'].models;
var embedConfiguration = {
type: 'report',
id: '5dac7a4a-4452-46b3-99f6-a25915e0fe55',
embedUrl: 'https://app.powerbi.com/reportEmbed',
tokenType: models.TokenType.Embed,
accessToken: 'h4...rf',
settings: {
layoutType: models.LayoutType.MobilePortrait
}
};
Here is the detail guide: https://github.com/Microsoft/PowerBI-JavaScript/wiki/Embed-For-Mobile
Is there a way to set the locale on the google visualization widgets in icCube
Looking at google documentation this can be done only when loading the library and not at widget level.
google.charts.load('current', {packages:['corechart'],'language': 'de'});
1) You could configure widget number/date formats in the widget options:
Vertical Axes(or Horizontal Axis) -> Vertical Axis New(0) -> Format
2) Other option is to change the locale for the whole loaded library. To do that you can disable automatic loading in the config JS(admin menu):
function ic3config(options) {
options.libs.GoogleViz = false;
}
and after that load library manually with different arguments
function ic3bootstrapLocal(options) {
$script("https://www.gstatic.com/charts/loader.js", function () {
google.charts.load('current', {packages: ['corechart', 'geochart', 'table', 'sankey', 'calendar'], 'language': 'de'});
google.charts.setOnLoadCallback(function(){
ic3globals.libs.GoogleViz = true;
options.callback && options.callback();
});
})
}