We Keep Coding

Google Charts right-to-left

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
בהצלחה!

Chartjs: common clickable legend does not work after update data

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();
}

Javascript - AmCharts hide and show graph using legends

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.

Animate transition between values on amcharts svg bar graph

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.

how to thoroughly remove JQPlot Chart

Do you know how to thoroughly remove/clean JQPlot chart. Here is my code to clean it:
$j("#reset").click(function() {
$j("#chart").empty();
if (plot1) {
plot1 = null;
}
});
when I click reset button, the chart can be removed from my page, but when I choose new conditions from drop down lists to generate new chart, the old chart will overlap with the new chart, like this image showed
Do you know how to truly clean the old chart? Thanks!

Maybe you want to use redraw method.
http://www.jqplot.com/docs/files/jqplot-core-js.html#jqPlot.redraw

You can redraw it with empty values using :
$.("#reset").click(function(){
if(plot1){
plot1 = $.jqplot('chart', [[[]]], {});
plot1.redraw();
}
});
Please see working example here

My method is "expensive" but works for me. Use .remove():
if ($("#chart").length) {
$("#chart1").remove();
} else {
$(parent).append("<div id=\"chart1\"></div>");
}
// put $.jqplot below here

You can use the destroy method.
e.g.
if (C.chart != null) {
C.chart.destroy();
C.chart = null;
}
C.chart = $.jqplot("chart", chartData, {