Google Charts API get graph object from div - object

I have drawn several graphs on my webpage using the Google Charts API. If i want to clear them, i can use the chart's clearChart() method. But lets say i have a div with id="mydiv" which has a line chart drawn in it. To clear it, i would have to first get the chart objectcand then call clearChart(). But how do i get the chart object ?

If you used JavaScript to render charts you should had saved a reference to chart objects to clear them after.
If you do not have those references but have the div behaving as a container them you can remove or clear the div element from browser tree nodes.
document.getElementById( 'mydiv' ).innerHTML = '';
Please add additional notes for clarification.

Related

How to draw custom shapes with draw2d?

I am using draw2d javascript library for drawing predefined shapes and custom shapes in it's canvas.
As I don't have any example made yet, I am trying to copy from it's documentation but doesn't seem to find a good way to research it as it contains a whole lot of it.
Here is the circle example.
http://www.draw2d.org/draw2d_touch/jsdoc_6/#!/api/draw2d.shape.basic.Circle
and here are some more documentation with examples.
http://www.draw2d.org/draw2d_touch/jsdoc_6/
I have premade shapes with html and css and I am trying to drag and drop and render them on canvas like these in this image. Also when dropped, they should have input and output ports too.
Is it possible to convert this html/css to draw2d shapes?
So here this is made possible via extending draw2d's SVGFigure and thus we have ability to provide custom svg to render it as a custom shape.
Below links were useful in this context.
http://www.draw2d.org/draw2d_touch/jsdoc/#!/guide/extending_svg_figure-section-live-example
https://github.com/freegroup/draw2d/tree/master/examples/shape_custom_svg
http://www.draw2d.org/draw2d_touch/jsdoc_6/#!/api/draw2d.SetFigure
https://github.com/freegroup/draw2d/tree/master/examples/shape_labeld
https://github.com/freegroup/draw2d/tree/master/examples/shape_custom_markdown

How to find xpath of js rendered element for puppeteer

Im trying to interact with a js rendered page. Essentially this is a free widget from tradingview; however, the color of the lines is not something I can change. (yes there is an override, however, it only affects 1 line) I need to be able to change 2 lines.
Trading View Advanced Chart Widget Constructor
Can anyone tell me if this is possible with a puppeteer? How can I get XPath for an element which is generated by JS? View source and developer tools do not provide any xpaths to the elements.

fabricJS - SVG parameters with toSVG

According to this link, it is possible to modify a SVG, depending on the parameters included in the URL used to access this SVG.
Is it possible to do so using the toSVG() method ?
Let's say I create a basic canvas with a few elements. Once I'm done, I export and save the result of my canvas.toSVG() on AWS.
I get this image
Is it possible to modify the way toSVG() behaves, so that adding ?color=red at the end of the URL would make my tshirt red ?
I tried using the example from the documentation, using replace() on my canvas objects, but this generates empty SVGs.

Graphael pie chart legend overlap

I've been using gRaphaël charts for a few weeks now, and every now and then I get some weird issues. A recurring theme is that the pie chart legend labels all get squish together in the wrong places. Picture > words:
The chart is created as you would expect, in this case:
var r = Raphael(domNode, 300, 120);
this.chart = r.piechart(55, 55, 50, [75, 25],
{
colors: [
"000-#d00-#900",
"000-#3a3-#070"
],
legend: ["Building", "Tertiary Education"],
legendpos: "east"
});
I then do some more basic styling, but turning that off doesn't help. The problem is clearly visible in the <svg> node (the text and circle nodes share overlapping positions), but I don't know where it comes from or why, and it only happens sometimes; other charts work just fine. There's nothing on the forums or issue tracker either, though I just realised I should probably ask there instead/as well.
Using Raphaël 2.1.0 and g.Raphael 0.51.
I have found the following blog post which deals with this exact problem. If the pie chart is rendered in an initially hidden element, gRaphael has problems to compute the positions properly resulting in this stacked legend:
So the solution is to render the facebox partial first, after the
facebox is shown, then you execute the Raphael Javascript. In other
word, make sure you generate the chart when the chart container is
there and not hidden!
I have solved this by moving the create pie chart function from the jQuery document ready directive to the on click event that will make the hidden elements visible.
Try to define your legend as following
{ legend: ["Building", "Tertiary Education"] , legendpos: "east"}
Its the only difference taht I could find between your and my working jsfiddle

Tracks don't show in Spotify-Playlist-View

I'm using the default playlist object from the JS-Spotify library and constructing a playlist.
Then I use this Code:
var playlistList = new views.List(pl);
playlistList.node.classList.add('sp-light');
$(".favAlbums").append(playlistList.node);
But for the first time when I load the page with this view the tracks don't show in the playlist DIV. The playlist DIV itself does. What could cause that? (I'm using exactly the same code at a different place where it works just perfectly)
Update:/
It seems to be a rendering issue because when I resize the Spotify application the track entries appear. But before resizing the DIV is empty in the inspector.

Resources