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.
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!
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.
So basically I have use SVG/javascript/PHP so that when a user clicks on a PNG image it takes the coordinates and uses these to plot a small black square on the PNG image, it's really very simple.
However, I was wondering if it's possible if you have the PNG in tags within the SVG element, and the filled square on top of the PNG image (made using SVG 'rect'), to save this as 1 single PNG?
You should probably go through a simple canvas tutorial. I suggest checking the Mozilla (mdn) tutorials. Canvas isn't very hard to work with. For a quick idea of what you will need, check out this tutorial about drawing a rectange and to save the image you can access the canvasElement.toDataURL() method to get a base64 encoded string of the image on the canvas. To save to user you can location.href=dataURL; or post it to a sever using ajax.
Here's my situation. I have to make a report with graphs. I have already successfully created graphs (bar, pie, and line) using ChartJS and displayed them in my page. However, I want to put a "print" button which, when clicked, will generate a pdf containing all of the graphs created.
For my other pages (which are only forms), I have used TCPDF and it's working well. However, I can't use it again for the graphs because what I produced are widgets placed in div elements.
My plan is to convert the contents of these div elements (the graphs) into an image so I can insert it in TCPDF.
Is there a way for me to convert the contents of the div into an image?
I can't use canvas.toDataURL() like in this link because ChartJS puts their graphs in a DIV element and NOT canvas. I also found out I can't put div inside a canvas (see link).
Please help me (T^T)
I have an image on my canvas . the canvas is annotated with text on top of the image. I wrote the text using canvas.fillText(). How do i save this text to the google chrome cache. I can use HTML5 or js.
You have to save the text in variables as you write it on to the canvas. The canvas element does not retain the internal structure of what you've written on to it, once something is drawn it's just pixels, the only way to get it back would be to implement some sort of OCR in JavaScript.
If you want to retain the structure of the elements you're adding to a dynamic picture then use SVG instead.