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
I am working on data visualization and want to show average wage and Estimated population on EVERY state of US. Now I am using google geochart for this part and I almost get the work done.
But I found out google geo chart doesn't support data which contains more than 3 columns.
Below is my work and how it looks when I run it.
function drawNewChart(){
google.charts.load('current', {
'packages':['geochart'],
// Note: you will need to get a mapsApiKey for your project.
// See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
'mapsApiKey': 'my key'
});
google.charts.setOnLoadCallback(function(){
let map_data = [['State', 'Count', 'AvgWages']]
Object.getOwnPropertyNames(stateData).forEach(function(item, index){
map_data.push(['US-' + item, stateData[item].count, stateData[item].AvgWages / stateData[item].count])
})
console.log('full data', map_data)
var data = google.visualization.arrayToDataTable(map_data);
var options = {
region: "US",
resolution: "provinces"
};
var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
chart.draw(data, options);
});
}
With 3 columns it works fine and it shows this.
However I want to add 1 more column to it. (EstimatedPopulation). When I add this then it shows this error message:
Incompatible data table: Error: Table contains more columns than expected (Expecting 3 columns)
How can I solve this problem ?
Here are few solutions for your query
https://codesandbox.io/s/xjqrk659zw?file=/src/index.js:847-892
You need to define
tooltip: { isHtml: true, trigger: "visible" }
in the options
And then
{ role: "tooltip", type: "string", p: { html: true } }
in your data parameter.
Hope it will help
I am looking to make changes in the sampleBarChart visual to create a custom visual table.
I have come across this post and looked at several repos in Github to find how this can be done. I am able to bring the data in the dataView but could not figure out how to build visual out of it. Here is the capabilities.json:
{
"dataRoles": [{
"displayName": "Values",
"name": "Values",
"kind": "Grouping"
}],
"dataViewMappings": [{
"table": {
"rows": {
"select": [{"for": {"in": "Values"}}]
}
}
}]
}
The data is there but how to create a table visual in visual.ts?
Once the table is created and data is rendered in columns and rows, my objective would be to transpose it and create individual rows for each column.
to
I am having a problem , that dataView object having the unique values or rows in the table .
i have tried, giving the dataRoles of kind: powerbi.VisualDataRoleKind to Grouping,Measure and GroupingorMeasure. I have even tried out giving the dataViewMappings to categorical(dataReductionAlgorithm: { top: {} }) as well as values(select: [{ bind: { to: 'Y' } }]).I have tried by giving Do not summarize option,keep duplicates option, changed the type of the table to whole number ,text,decimal,etc .,but nothing worked for me. what iam missing and what i have to do to bind the entire table as it is in powerbi dev tool.
Below my code,
public static capabilities: VisualCapabilities = {
// This is what will appear in the 'Field Wells' in reports
dataRoles: [
{
displayName: 'Category',
name: 'Category',
kind: powerbi.VisualDataRoleKind.Grouping,
},
{
displayName: 'Y Axis',
name: 'Y',
kind: powerbi.VisualDataRoleKind.Measure,
},
],
// This tells power bi how to map your roles above into the dataview you will receive
dataViewMappings: [{
categorical: {
categories: {
for: { in: 'Category' },
dataReductionAlgorithm: { top: {} }
},
values: {
select: [{ bind: { to: 'Y' } }]
},
}
}],
// Objects light up the formatting pane
objects: {
general: {
displayName: data.createDisplayNameGetter('Visual_General'),
properties: {
formatString: {
type: { formatting: { formatString: true } },
},
},
},
}
};
Thanks in advance.
Power BI pretty much will always summarize in a categorical data view. You can try to work around it by asking for categorical values you think will be unique. but it's subject to your user's judgement.
Switching to a Table data view might be an option, I think you'll see do not summarize take effect there. It has it's own challenges, like identifying which field goes where, and the need to do the math yourself for aggregates.
You might submit an idea at https://ideas.powerbi.com with your desired scenario.
I know this post is old, but it took me forever to find the answer for this same problem. So I did end up using the table format, but it is still a little quirky. Let me give you my example and explain a little:
{
"dataRoles": [
{
"displayName": "Legend",
"name": "legend",
"kind": "GroupingOrMeasure"
},
{
"displayName": "Priority",
"name": "priority",
"kind": "GroupingOrMeasure"
},
{
"displayName": "SubPriority",
"name": "subpriority",
"kind": "GroupingOrMeasure"
}
],
"dataViewMappings": [
{
"table": {
"rows": {
"select": [{
"for": {
"in": "legend"
}
},
{
"for": {
"in": "priority"
}
},
{
"for": {
"in": "subpriority"
}
}
]
}
}
}
]
}
So I want my dataRoles to be GroupingOrMeasures, but I don't believe that is necessary here.
OK, so in the dataViewMappings, I have it marked as "I want my data in a table, in rows constisting of legend values, priority values, and subpriority values."
There are two quirky parts to this. First, your data will be sorted by default in the order in which you declare these things. So if you bring in your legend values first, that is how this table is sorted (by the matching order in which your first columns's values are). And second, it will only save unique rows to the table.
So if I had two rows of:
Legend Priority Subpriority
Canada Recyclables Plastic
Canada Recyclables Plastic
Then there would appear only one value in the table. Also, this means that if you were trying to get all rows of Legend, but only have the legend value selected for the table, you will be getting only one value of each, because repeated values will not make a unique row.
So if you have two rows of:
Canada
Canada
You would get only one row value with the entry of Canada.
And I would also caution you against incomplete data, namely null values. In my above example of Legend Priority Subpriority, if there are repeated values of "blank", only one row will show if all other fields match as well.
The only way to totally guarantee you will get back each individual row, no matter what, is to ensure that each row is unique. In my own work, I was going to just add a unique key column (primary key - indexing the rows - 1, 2, 3, etc.), but I found that priority and subpriority act as a combined unique key. If there are shared priorities, subpriorities are guaranteed to be different.
After knowing this and including these, I can add anything else I want and know that I will get all values back for each individual row.
To see the hierarchy of how to access the data from this point, after you drag in the appropriate values, just use the "Show DataView" tool under or above your visual (it is next to the reload / toggle autoreload icons).
This information was enough for my final solution, so I hope this answer helps others as well.
I am new to google charts. I am using ChartWrapper to draw my chart and I am passing a chart wrapper arguments to the constructor when creating a chart like this:
var chartWrapperArgs = {
chartType: "LineChart",
dataTable: dataTable,
options: { // <<<< where to find a documentations about this property ?
"width": 900,
"height": 800,
"is3D": true,
"title": "Явление на числата ",
"isStacked": "false",
// "fill": 20,
"displayExactValues": false,
"vAxis": {
"title": "явление"
},
"hAxis": {
"title": "число"
}
},
containerId: containerId
};
var chartWrapper = new google.visualization.ChartWrapper(chartWrapperArgs);
My question is where to get a documentations about the "options" parameter ? what option can I pass to "options" ?
I checked out Google documentation here
but they only describe what option, give simple example and thats all. However I found that in some of there, and others, code example other parameters are used !
The options that are appropriate depend on the chartType, and the documentation for the options is together with the other documentation about the chartType. See the list at https://developers.google.com/chart/interactive/docs/gallery
For the LineChart, the options are documented here: https://developers.google.com/chart/interactive/docs/gallery/linechart#Configuration_Options