Develop Reference

D3 - Removing elements (div) on update

I currently have a chart with 2 viewing options (regular data and percentages).
I also have a tooltip that shows the results for each line that I'm showing
When I switch options I want my tooltip to keep showing the info (the lines are getting drawn correctly) but instead what I'm seeing is that I'm creating several tooltip boxes for each time I switch options.
My tooltip is an append('g') to my main chart and I'm appending my tooltip box to this tooltip which is appended to my chart which is chartContent
Here's the tooltip box
const tooltipContainer = d3.select(".stackedChart").append("div")
.attr("class", css.divBox)
.style("opacity", 0);
tooltip.append("tooltipContainer")
On update (aka when switching options) I'm already doing this
chartContent.remove()
chartContent = chart.append('g') (to get the new info)
Now for my .divBox I was trying d3.selectAll(".divBox").remove(); but I can't seem to get it to work.
Every time I switch options I get one more .divBoxand I can see the bottom one updating with the info but the one following the tooltip is the top one (I think, I might be wrong).
What are my steps from here? I'm extremely confused

Is there a way to make the correct toggled legends appear when downloading?

I am using a c3 chart. I have a button to download it using canvg. I also have it toggle bars when legends are clicked. The download works and so do the toggles.
The only issue in the downloads is that I can either always show the legends (even if the bars they correspond to aren't being shown) or as soon as I toggle a legend the legend never appears again in the downloads (although it does on the chart itself).
What I would like is for the legends to only appear if their corresponding bars are actually being shown. I also don't want the legends to be hidden if their bar is being shown. (Legend Shown <=> Bar Shown kind of relationship)
I had issues with IE in the past so following https://github.com/c3js/c3/issues/2528 the display is 'Block'.
var string = ".c3-legend-item-hidden";//hides legends that are unselected in the download. Will KEEP them hidden even if retoggled :(
d3.selectAll(string).each(function() {
var element = this;
var computedStyle = getComputedStyle(element, null);
for (var i = 0; i < computedStyle.length; i++) {
var property = computedStyle.item(i);
element.style[property] = computedStyle.getPropertyValue(property);
}
});
//removing this section makes all legends appear permanently regardless of whether the bar does
Expected: a graph that has the correct bars and legends shown in the downloads
Actual:
(with code segment) hidden legends that do not reappear when needed
(without code segment) legends that are never hidden
Update: Just to clarify, this works when converting the graph to a downloaded svg file (adding xmlns etc.), just not when using canvg and downloading to a png file (which is what I need it to do).

Instead of using the computed style, manually set the styles you need.
This solution worked for me ('hidden' legends are slightly visible but it is now identical to my actual chart which is all I personally needed):
var string = ".c3-legend-item-hidden";
d3.selectAll(string).each(function() {
//this.style['visibility']='hidden'; // uncomment this out and it will completely hide the legend if that is what you want
this.style['opacity']= 0.15;
// set opacity as 0 to make the legend transparent to the point you can't see it (if that is what you want)
// or 0.15 to make it like the chart (as done here and in c3.css)
});
The computed styles give a lot more styles than you need and can override the styles you want.

Clicking on graph created in Canvas (AngularJS)

Bar Graph is generated on Web Page (developed using AngularJS) using data from database. Graph is created using CANVAS.
Once graph is completed loaded, if you click on Red part, it will open one pop-up which will have table containing the values - Total and Missed. Same for Green - Total & Hit.
Graph will always have two colors - RED & GREEN.
I am trying to test this Graph using Robot Framework.
I am able to Click on graph and then read the value from popup table.
Only issue is I am clicking randomly. I want to identify the RED and GREEN and then Click it.
After inspecting above element in IE, below information I am getting for above Graph.
<div class = 'ChartWrapperArea'>
<canvas width='2000' height='600'
class = 'chart-bar ng-isolate-scope'
id = 'pwFeedChart' style='display;block;'
chart-colors='colors' chart-options='barOptions'
chart-labels='barLabels' chart-data='barData'
chart='pwFeedChart'>
</canvas>
</div>
Please let me know the way how to identify the element in graph.
Preferable option is Robot Framework but ready for any other solution also.

You can get the coordinates of canvas using offsetLeft, offsetTop, width of the canvas. Ex.
var test = document.getElementsByTagName('canvas')[0];
var left = test.offsetLeft;
var top = test.offsetTop;
var width = test.width;
// get the coordinates X and Y using above.
After that you can use jquery to click in that area below is the sample link for it.
How to simulate a click by using x,y coordinates in JavaScript?.
Hope it helps.

Add text element to Google Chart

I'm using Google Charts (Javascript) to render some charts on my web application. Now I simply want to add a text label on a specific position on the chart (bottom right). For whatever reason there is nothing to be found on the internet about the subject.
An HTML overlay isn't gonna work as I also want the text to appear if I get the chart as an image with the following code:
google.visualization.events.addListener(chart, 'ready', function () {
var imgUri = chart.getImageURI();
$('#chart_img').attr('src', imgUri);
});

jqPlot replot only shows legend, no data

I am attempting to replot a chart when the user selects the tab to display the chart(initially it is set to visibility:hidden). Once it plots the graphs again, I don't see any of the lines or bars in the graphs, I only see the legend. I want to see all of the data again. When I don't hide the element and just plot it, it works fine, but I need to hide the element so that data can be grouped together in a logical order.
Here is the code I use to plot the charts while it's hidden, jqPlots is an array which contains the variables used for plotting.
var plot = $.jqplot (DATA GOES IN HERE)
jqPlots.push(plot)
Then within the handler for displaying the div I have
for(var i = 0; i<jqPlots.length; i++)
{
jqPlots[i].replot();
}