I want to generate a PNG image from a Gantt Google Chart.
I've tried the getImageURI() method, but it only works for core charts.
I've also tried getting the svg element and converting it to PNG but it doesn't look the same as the one displayed in the browser.
Also I've tried html2canvas but without success.
Any ideas on how to achieve this?
update
from google dev print png tried
jsfiddle
getting the svg element fiddle, then created a svg file from it, and converted it to png with an online converter, but it doesn't look the same.
Related
I am working on a data visualization project and I have used the Chart.js library for drawing and now I need to export the charts in pdf and png format, what is the best way for me to do it correctly? Thanks for helping my friends ...
If you want to create a feature to allow a user to download the created charts into a image, you can use the 'toDataURL()' function, and specify the canvas of each chart.
To download a canvas as a pdf you can use the jsPDF library, using the above function to retrieve the canvas and then specifying the dimensions.
I may be wrong but I believe you need to create the charts and display on a web page before converting them to an image/pdf. Hope this helps!
How do you export multiple d3 charts to powerpoint? I have created a d3 radar, indicator and bar chart and now I want to have a download button that will allow me to download them as a powerpoint.
I've done this two ways.
The first is to use SVG Crowbar: https://nytimes.github.io/svg-crowbar/
Save it as an SVG and then place the SVG file in your powerpoint like any other image.
The second, kind of janky, way to do it is: Print -> Save as PDF -> convert pdf to svg or jpeg.
How can I save a Chart Wrapper to an image (png, jpg, bmp ... i don't care) at a click of a button.
A normal google chart is not a problem, you just need to right click on it and save as image.
But how would you save an image of a chart in a Google Chart Wrapper???
I think the relevant documentation you're looking for is on the Charts API Website. This method will display the chart as a PNG formatted image instead of SVG. You will lose your interactive features like tooltips and selections.
If you still want those features you could write a link that pops the static chart image into a new window to be saved.
Since you're using a ChartWrapper you will need to use something like:
var imageUri = chartWrapper.getChart().getImageURI();
The Uri it returns is a base64-encoded PNG image, which most modern browsers will render as an image if used as the src attribute for an img tag, or just entered directly into the address bar.
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.
Following to this nvd3-js-rendering-solution-for-internet-explorer
any examples on how to use nvd3.js charts with RaphaelJS for internet explorer which does not support SVG
Or any links to use PhantomJS with NVD3. simmilar to HighChartJS
I am working on to use Phantom.js to conver nvd3 graphs, but wondering if anyone here has already invented this wheel..
this is my jsbin link for Piechart
Update
Ok using Phantom rasterize.js i am able to convert my html page into png.
Example
phantomjs rasterize.js http://ariya.github.com/svg/tiger.svg tiger.png
> What i am looking for is just to pass a specific SVG Id to this js > script. i.e if I have 2 SVG charts i want to pass them individually > and create 2 PNG files and render them on Screen