Adding Highcharts chart to draw2d canvas - javascript

I was wondering if there is a mean to add a graph made with Highcharts into a draw2d canvas. I tried to use the class made to import external SVG SVGFigure, but it seems like the SVG is too complex to be used with this class according to this and my test.
draw2d.SVGFigure;
Thank you for your suggestions :)

I've figured out a solution, converting the svg to an image and use SetFigure class from draw2d to insert it in the canvas.
draw2d.SetFigure;
You can find an example here of the implementation with canvg or with vanilla js.

Related

How can I create customized shapes in CSS react.js?

I'm building a Landing Page in react.js and I want to create a custom shape similar to this image {see below}. As of now I have created some simple shapes and now I want to achieve new level in css by creating this shape. Please help me.
Here I am also sharing SVG of this image SVG link
here is png format as well.
For doing such complex shapes I would recommend using some drawing tool like Photoshop or Illustrator, then you export as SVG and use it.

How to create stackbar chart in raphael js.

How to create stackbar chart in raphael js. I know it in D3js but could not find any way to create it in raphael js. Can some one share some inputs to get it done.
Either use g.raphael library, or just implement it yourself, all you need is to draw rectangles of different height or width on different positions with labels on them.

Transform image on canvas based on 4 points

I have a small application that uses Paperjs to render an image between four points.
The user should be able to drag these four points freely.
It would be nice if the image inside automatically transforms into this given tetragon, like on the picture below.
Do you know a library that is able to help me with this job?
Of course Paperjs is able to apply a matrix transformation, but is there a “simpler” solution like:
Image.transform(point1, point2, point3, point4);
Just like this ActionScript demo, but in Javascript with canvas:
http://www.rubenswieringa.com/code/as3/flex/DistortImage/
Thank you!
This d3.js codesnippet did the job for me:
http://bl.ocks.org/mbostock/10571478

in browser screenshots of nvd3 (or d3 with css)

i'm running a rails app and trying to get a screenshot of an nvd3 graph in-browser.
from my testing, canvg and html2canvas can't render the css that accompanies nvd3. has anyone been able to create a png from an nvd3 svg?
html2canvas example - try rendering the nvd3 scatter on html2canvas preview. it's not working...
any ideas?
from the html2canvas FAQ we know that it cannot properly deal with svg.
i have very similar requirement and "example of how to export a png directly from an svg" solved my problem (internally it adopted svg-crowbar code). basically, you need to draw the svg to a canvas then export the image to png, and "explicitly set css style" for all svg element is the caveat to make the exported image like original.

d3.js changing style of diagonal line

I am brand new to working with with d3.js
I am trying to change the style of the links in the interactive-tree example that comes packaged with d3.js
https://github.com/mbostock/d3/blob/master/examples/tree/tree-interactive.html
they are currently beziers, and I would like them to be angular, i.e. visio class diagram style connections.
seems that there needs to be some extra definition of the diagonal around lines 42-43, but I can't tell from the documentation what that would be.
any help is most appreciated.
You can't do that with d3.svg.diagonal. Have a look at d3.svg.line and in particular the interpolate function.

Categories