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();
});
})
}
Related
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'm trying to make the labels on a chart tabbable.
In this implementation, I'm using react-chartjs-2.
However, the configuration options object remains standard to chartjs.
Example code:
const options = {
legend: {
onHover: (e) => {
console.log(e.target); // this is the entire legend, not individual labels
},
labels: {
onHover: (e) => {
/* doesn't work; trying to see if have access to e.target even to do DOM manipulation... */
console.log(e.target); // doesn't fire
}
}
}
}
Interestingly, clicking on these labels filters the display of that dataset, I just need a way to make then tabbable with the enter key as well as being clickable.
I have searched the chartjs documentation, but cannot find a way to add hover and focus events, or enable focus-ability of the labels (Fall 2014 to Fall 2018 in screenshot).
I think by specifying just position you will get result.
options: {
legend: {
position: 'top'
},
}
Using ChartJS, I want to be able to change the title on a tooltip depending on the data (mainly as I want the text in a smaller font size than the label). I don't really need a full custom HTML tooltip, just be able to change fontsize and title text.
However just setting this via a "custom" callback means the label for the dataset doesn't have the background correctly displayed
options: {
tooltips: {
custom : t => {
t.title = ['Hello'];
}
}
}
See this JSFiddle: https://jsfiddle.net/MrPurpleStreak/2n8md9Lh/
Hover over a point and see the "hello" on a black background, but the data not.
NOTE: I've found a way to accomplish my initial goal, but this struck me as a bug in chartJS?
There seems to be an issue with the custom property.
I recommend using the callbacks instead :
tooltips: {
displayColors: false,
backgroundColor: 'rgb(0,0,0,1)',
callbacks: {
title: function(tooltipItems, data) {
return 'Hello';
},
}
}
See jsFiddle
I have multiple charts showing different data. however they are all the same object type e.ge [acc1, acc2, acc3]. Therefore I was wondering if it is possible to have one parent legend set on a page somewhere and clicking it will show/hide all the corresponding dataset from all the charts?
I think you can hide all the legends of the charts except for one and implement a custom onClick function to handle clicks on that legend and hide all the corresponding datasets for each chart.
The current onClick implementation looks like this:
onClick: function(e, legendItem) {
var index = legendItem.datasetIndex;
var ci = this.chart;
var meta = ci.getDatasetMeta(index);
// See controller.isDatasetVisible comment
meta.hidden = meta.hidden === null ? !ci.data.datasets[index].hidden : null;
// We hid a dataset ... rerender the chart
ci.update();
}
This function needs to be defined in options.legend.onClick. To make this work you would need to rewrite the above function to implement a loop, selecting all the charts necessary and select the meta, hide it and update the chart.
I have a submit button and upon pressing the button I display a loading image and then draw table and then draw google chart.
code for google chart (this works - verified it standalone):
<script type="text/javascript" src="//www.google.com/jsapi"></script>
<script type='text/javascript'>
google.load('visualization', '1', { packages: ['corechart']});
</script>
<script type='text/javascript'>
function drawVisualization() {
var data = google.visualization.arrayToDataTable([
['Year', 'Austria', 'Belgium', 'Czech Republic', 'Finland', 'France', 'Germany'],
['ENG 2001', 1336060, 3817614, 974066, 1104797, 6651824, 15727003],
['ENGLISH 2002', 1538156, 3968305, 928875, 1151983, 5940129, 17356071],
['ENGLISH2003', 1576579, 4063225, 1063414, 1156441, 5714009, 16716049]
])
new google.visualization.ColumnChart(document.getElementById('visualization')).
draw(data, {title:'Yearly Coffee Consumption by Country',
width:1000, height:600,hAxis: {title: 'Year'}, isStacked:true}
);
}
//google.setOnLoadCallback(drawVisualization);
</script>
code for loading image when pressing a submit button
<script type="text/javascript">
// Get the instance of PageRequestManager.
var prm = Sys.WebForms.PageRequestManager.getInstance();
// Add initializeRequest and endRequest
prm.add_initializeRequest(prm_InitializeRequest);
prm.add_endRequest(prm_EndRequest);
// Called when async postback begins
function prm_InitializeRequest(sender, args) {
//Display the loading image
var panelProg = $get('divImage');
panelProg.style.display = '';
}
// Called when async postback ends
function prm_EndRequest(sender, args) {
//Hide the loading image
var panelProg = $get('divImage');
panelProg.style.display = 'none';
//sort the table once retrieved from datatable from server
$(document).ready(function () {
$("#table").dataTable({
"sScrollY": "400px",
"bPaginate": false
});
//draw google chart (doesnt work)
google.setOnLoadCallback(drawVisualization);
//or even doesnt work (assume comment out for google.setOnLoadCallback(drawVisualization);
drawVisualization();
});
}
</script>
my submit button is under update panel (to make partial-page refresh for loading image to show user that it's fetching data from server). with this code, i am able to show loading image and display table but not google chart. I am not sure how I can call google chart draw function to make google chart appear. I have looked at several posting but couldnt find anything that works for my case. I even tried google.load('visualization', '1', { packages: ['corechart'], "callback":drawVisualization}) but it didnt work. I am so lost at this point. what is the correct way to make google chart work under update panel/PageRequestManager? Thanks!
I don't think you need (or want) to use a document ready handler in your prm_EndRequest function. Try this instead:
function prm_EndRequest(sender, args) {
//Hide the loading image
var panelProg = $get('divImage');
panelProg.style.display = 'none';
//sort the table once retrieved from datatable from server
$("#table").dataTable({
"sScrollY": "400px",
"bPaginate": false
});
drawVisualization();
}
To make sure the Viz API code doesn't try to run before the API is finished loading, you should make sure to wrap whatever code you use to hook up the AJAX call to your button inside a callback from the google loader.