I am using Amcharts plugins in making a graph. But I am having issues in hiding and showing the graph using legends.
This is my function code:
function handleLegendClick( graph ) {
var chart = graph.chart;
for( var i = 0; i < chart.graphs.length; i++ ) {
if ( graph.id == chart.graphs[i].id )
chart.hideGraph(chart.graphs[i]);
else
chart.showGraph(chart.graphs[i]);
}
if (graph.id == chart.graphs['3'].id)
chart.hideGraph(chart.graphs['4']);
if (graph.id ==chart.graphs['4'].id)
chart.hideGraph(chart.graphs['3']);
chart.validateNow();
// return false so that default action is canceled
return true;
}
This code is working but my problem is, it hides only one graph and show the graph again when the user click another legend. What I need to do is to hide multiple graphs by clicking it's assigned label text and marker, and when the graph is hidden I should click the same legend to show the hidden graph.
Please help me. Thank you.
From your description, the default legend behavior does exactly what you're asking for without needing to add your handleClick code. I'm not sure what's the point of it.
var chart = AmCharts.makeChart("chartdiv", {
// ...
"legend": { }, //default setup
});
Here's an example with multiple graphs.
Related
I'm using Google Charts to display charts on our website.
We want the charts to read properly from right-to-left.
I can find the <svg> elements and add style="direction: rtl;" to them. That will fix the text alignment, but it throws everything else off.
I want the axis labels to be on the right (or at least correctly aligned with the axis on the left).
I want the text to be aligned right-to-left.
Setting {'langugae': 'he'} in the load function has no rtl effect. All it does is change the langugae of the aria attributes.
Properly aligned (ltr) axis
After setting the style attribute of the svg.
EDIT (code):
google.charts.load('current', {'language': 'he'});
google.charts.setOnLoadCallback(() => {
this.drawVisualization();
});
drawVisualization() {
...
this.wrapper = new google.visualization.ChartWrapper(settings);
this.chartData = google.visualization.arrayToDataTable(this.tableData);
google.visualization.events.addOneTimeListener(this.wrapper, 'ready', () => this.chartReady());
}
chartReady(){
...
let svgs = document.getElementsByTagName('svg');
if (svgs && svgs.length > 0){
Array.from(svgs).forEach(element => {
element.setAttribute('style', 'direction: rtl');
});
}
}
there's a built-in property for this,
dataTable.rtlTable(true)
you can find more about it in their docs -
https://developers.google.com/chart/interactive/docs/gallery/table
בהצלחה!
I am using eCharts to create a stacked and grouped bar chart, it is my first time using eCharts. but clicking on axis label tick not working properly , I want when clicking on axis label tick (example: Brand1) it should hide that Brand but is not working, the code looks like:
myChart.on("click", (params) => {
if (params.targetType === "axisLabel") {
params.event.target.invisible = true;
params.event.target.silent = true;
params.event.target.scale[0] = 0;
params.event.target.scale[1] = 0;
// myChart.setOption();
console.log("params ", params, "option ", option);
}
});
you can check the full demo in demo
any help please?
There are 2 charts and 1 common legend in one page. This legend is clickable to show/hide graph line of charts. This is forked this question.
I had tried to update data above code. It's an unrefined way, but i've been able to update the chart. "The legend" text will hide/show a line chart in here.
However after the update data, this toggle function is not work.
Please try here.
Click "The legend", it show and hide graph line --->OK
Click "ChangeData" button, graph line will be changed --->OK
Click "The legend" again, does not disappear graph line -->NG
First, it call the DrawChart function, which draws the data for the argument.
window.onload = function () {
DrawChart(data_A1, data_B1);
clickableCommonLegend();
}
The DrawChart function draw line chart by typical method of ChartJS.
function DrawChart(data_A, data_B) {
var ctxA = document.getElementById("myChartA").getContext("2d");
var ctxB = document.getElementById("myChartB").getContext("2d");
myChartA = new Chart(ctxA, {
type: 'line',
data:{.....
options:{....
});
myChartB = new Chart(ctxB, {
type: 'line',
data:{.....
options:{....
});
The clickableCommonLegend() is forked from this question.
On click button function that calls "changeData()".
This function execute destroy charts and reCall "DrawChart"
function changeData() {
myChartA.destroy();
myChartB.destroy();
DrawChart(data_A2, data_B2);
myChartA.update();
myChartB.update();
clickableCommonLegend();
}
I guess that destroy() delete all context of and re-define context by document.getElementById("myChartA")... in DrawChart().
I think it wii work fine, but result is not.
in clickableCommonLegend,
var legendItems = document.querySelector('.legend').innerHTML = myChartA.generateLegend();
Does legendItems removed from chart.destroy?
But I call it again.
I'm grad if you let me know what is wrong.
Current code is present here.
I've found a solution.
Change changeData() function
function changeData() {
// ---NOT WORK---
// myChartA.destroy();
// myChartB.destroy();
// DrawChart(data_A2, data_B2);
// --- OK ---
myChartA.data.datasets[0].data = data_A2;
myChartB.data.datasets[0].data = data_B2;
myChartA.update();
myChartB.update();
clickableCommonLegend();
}
I have a bar chart I built using the 'amcharts' plugin.
The graph updates its values when the a dropdown menu item is selected,
I am trying to get the graph to animate the transition between the values when it changes, currently it either resets the whole animation and animates from '0', or if animateAgain() is commented out (line 142 in js) it jumps to the new value. This code is called after the values have been updated:
// Animate between values instead of resetting animation?
chart.animateAgain(); // Resets animation
chart.validateData(); // redraws the chart with new data
I've searched the docs and google but can't find anything to help with this, anyone have any ideas or pointers in the right direction? Is it possible? Here's the codepen :
http://codepen.io/bananafarma/pen/yewbJQ
Cheers!!
You can use amCharts' own Animate plugin.
It adds a new method to chart objects animateData().
function updateGraph() {
var newData = chart.dataProvider.slice();
if( document.getElementById('data-set').value == 1 ) {
newData[0].gain= 3.8;
newData[1].gain= 8.5;
newData[2].gain= 3;
newData[3].gain= 1.9;
}
else if ( document.getElementById('data-set').value == 2 ) {
console.log("yo");
newData[0].gain= 2.6;
newData[1].gain= 8.6;
newData[2].gain= 13.8;
newData[3].gain= 4;
}
else if ( document.getElementById('data-set').value == 3 ) {
newData[0].gain= 4.8;
newData[1].gain= 10.6;
newData[2].gain= 15.9;
newData[3].gain= 16;
}
// use Animate plugin
chart.animateData( newData, { duration: 1000 } );
}
Here's your updated working demo.
Can someone please tell me how to change the dimension of a chart through javascript in Birt. I tried the below method but the chart totally disappears after I put the below script in beforegeneration event of chart
function beforeGeneration( chart, icsc )
{
yAxis = chart.getAxes()[0].getAssociatedAxes()[0];
seriesDef = yAxis.getSeriesDefinitions()[0];
for(i=0;i<seriesDef.getSeries().size();i++)
{
if(seriesDef.getSeries()[i].getSeriesIdentifier() == "My Town")
{
ds = seriesDef.getSeries()[i].getDataSet();
}
}
ns = BarSeriesImpl.create();
ns.setDataSet(ds);
ns.setSeriesIdentifier("My Town");
seriesDef.getSeries().add(ns);
seriesDef.getSeries().move(0,ns);
setDimension(TWO_DIMENSIONAL_WITH_DEPTH_LITERAL);
}
The whole function is working. Only problem I am facing is to change the chart type to 2D with Depth. I have problem with below syntax
setDimension(TWO_DIMENSIONAL_WITH_DEPTH_LITERAL);
Any help will be appreciated
Arif
Isn't it the following instead....
chart.setDimension(actuate.report.Chart.CHART_DIMENSION_2D_WITH_DEPTH );