column chart and core chart in one page - google-visualization

I want to use core chart and column chart both. (reason: i want to use 3D chart as well as pie chart with only percentage).
On First Tab click
google.load("visualization", "1", {"callback": chart1,"packages":"columnchart"});
On Second Tab click
google.load("visualization", "1", {"callback": chart2,"packages":"corechart"});
It's working first time.
steps: click first tab then click second tab
When i click again first tab it's loading chart of corechart library
Solution needed
how to load columnchart on first tab click (every time) or how to show only percentage on pie chart(old version).
hoping for solution come out.
fiddle: http://jsfiddle.net/dL9uzzbo/

You can only load google libraries once, here is a pseudo code of how to handle it:
google.load("visualization", "1", {"callback": chartsLoaded,"packages":["columnchart", "corechart"]});
function chartsLoaded(){
tab1.onclick=function(){
drawChart1();
}
tab2.onclick=function(){
drawChart2()
}
}

Related

Oracle Apex - refresh all subregions with one refresh in dynamic action

I am working with APEX 19.2.0.00.18. I have a page with a static region with 4 chart subregions, plus a radio button that allows the user to select which series (total, mean, median) to display in the charts. I have a dynamic action set up to refresh charts when the radio button value is changed. This dynamic action consists of:
execute null PL/SQL code to submit the radio button value
refresh chart subregion 1
refresh chart subregion 2
refresh chart subregion 3
refresh chart subregion 4
Is there any way to simplify this to refresh all 4 chart subregions with a single refresh? I have multiple static regions like this (i.e., containing multiple chart subregions) on this page, so reloading the entire page is not an ideal option.
Scott's answer is pretty much correct, but if you decide to use the newer apex.region JS API, you have to use it with a region static id.
So just give the regions you want to refresh a static id and then use the API like this (e.g. in a Execute JavaScript Dynamic Action):
apex.region('MY_STATIC_ID1').refresh();
apex.region('MY_STATIC_ID2').refresh();
apex.region('MY_STATIC_ID3').refresh();
Answer previously here
https://stackoverflow.com/a/58126513/527513
Can be applied a number of ways, but you're using the JS API refresh any region with a given selector, in this case the refreshme class
$('.refreshme').trigger('apexrefresh');
The API offering has changed over time, apex.region being the newer method.
apex.region( "static_id1" );
apex.region( "static_id2" );
As Daniel noted, these need to be supplied as static IDs, not a given selector. I should have realised this since the example was absent the # of the static ID.

Add click event to elements of a chart in superset

First,I follow official site,use docker and ubuntu 18, install superset,do not know is it the newest version of superset.
then I upload a csv as a table called "sales",csv is:
shop,sales
ibm,200
microsoft,100
sony,50
column shop is string type,"sales" is bigint type.
Then I add a bar chart and a big number chart.
The metric of the big number chart is sum(sales).
I Add these two chart to dashboard,it looks like:
What I need is when I click the bar "ibm",the big number chart(sum int) shows 200,when I click the bar microsoft,it shows 100.
I found a web page ,they say add call addFitler() on slice,but I can not find where is the slice and do not know how to addFilter.
Actually,I have many charts on a dashboard,and it is best if I click one element on any chart,other charts can change corresponding

Chart.js HTML custom legend issues with doughnut chart

I'm working with chart.js and I followed this to create a custom HTML legend.
The thing is, the hide/show functionality is not working. The first legend click hides the whole chart, while the others produce the error:
Uncaught TypeError: Cannot read property '_meta' of undefined
at t.getDatasetMeta (Chart.min.self-b26766dbef822c075056eb7012dc36ae75970dc990497732f927d46ef6070858.js:11)
at HTMLLIElement.legendClickCallback (plot.self-416475a747a420b91c7fab454c07846f1043f55cc28f6d810fafeab61c56cf01.js:317)
so it traces back to t.getDatasetMeta.
I gotta say it's working great with line/bar charts, so its only my doughnut chart which breaks.
Let me know if you need more info.
Oh and thanks :P
EDIT: fiddle
The problem is that you have only one dataset and your code use the index of legend item clicked to hide datasets[index].
On the contrary you need to hide single item data as below:
var meta = chart.getDatasetMeta(0);
var item = meta.data[index];
Check the fiddle updated: https://jsfiddle.net/beaver71/aa2n39s2/

Chartjs: update the min and maximum of the yaxes ticks on a click

I am using chartjs to draw a line chart. I am making these charts dynamically and there can be 2 to 10 charts depending on the different data types. Right now i want to update the chart when i click a button or a text. This update will change the min and max of the y-axes ticks. I have try to do it in the javascript console on one chart by doing this
myChart.options.scales.yAxes[0].ticks.min=some_value;
myChart.update();
but the problem is how would i change it when i click on a text or button. Is i have to make a legend?
this is my jsfiddle for a test run.
Any kind of help would be much appreciated.
You can use jQuery:
Add the jQuery library
Add a button, I added <button id="action">action</button>
Add a jQuery trigger that executes the 2 lines on click:
$('#action').off().on('click', function() {
myLineChart.options.scales.yAxes[0].ticks.min = -50;
myLineChart.update();
})
See: https://jsfiddle.net/gdqkLtc2/3/

How do I remove the legend from a Google geoChart?

How do I remove the legend that appears in the bottom of the Google geoChart? I know that if I don't pass data.setValue to the chart object it wont show, but I need them to populate the map. All I want to do is get rid of the colors. Any ideas?
See : http://code.google.com/apis/chart/interactive/docs/gallery/geochart.html#Configuration_Options
"An object with members to configure various aspects of the legend, or 'none', if no legend should appear."
So basically, when you're passing your configuration options into the API, you want to include the following:
legend: 'none'
A simple example set of chart options would be:
var options = {
displayMode: 'markers',
colorAxis: {colors: ['green', 'blue']},
legend: 'none',
}
The modified version of the marker example provided by google on: http://code.google.com/apis/chart/interactive/docs/gallery/geochart.html#Examples
Set the option legend to none.
legend: 'none'
This hides the legend/colorAxis displayed at the left bottom corner of the chart.
So apparently there isn't a way to do this. If you are using google geoMap wich renders a Flash object then there is a simple property you set to false in the geoMap object to not render the legend on the bottom left. I did how ever using jQuery manage to remove it but that just doesn't flow nicely given that it has to exist in the DOM before you can remove it. If you are seeking to use a world map I strongly recommend jVecotor Map.
It renders exactly the same in old IE browsers and has less vectors in the map so it is faster to load since the DOM is not over saturated.