How to display chart as a static image (png, jpg)

[davidr]

Hi,

I’d like to display the chart as a static image (png, jpg, gif, etc) instead of an interactive chart. I don’t mean just turning off interactive but actually displaying it as an image, so I can use the chart on a page like as a background image or something.

How can the chart be output on the page as an image?

I searched around and couldn’t find anything. There was something here about having it fallback as a static image, but wasn’t sure what this was https://canvasjs.com/forums/topic/static-image-fallback-for-ie8-and-below/

I did find this when searching the web https://davidwalsh.name/convert-canvas-image

It says you can turn a canvas to an image but I couldn’t figure out how to do it within canvasjs.

Thanks for your help!

[Vishwas R]

@davidr.

You can get base64 image data of a canvas by using toDataURL. As CanvasJS charts are rendered on canvas, you can use toDataURL on chart to get base64 image data of the chart. Passing base64 data as source of image should work fine in your case. Please find the code-snippet below

var base64Image = chart.canvas.toDataURL();
document.getElementById('chartContainer').style.display = 'none';
document.getElementById('chartImage').src = base64Image;

Please check this JSFiddle for an example on the same.

—
Vishwas R
Team CanvasJS

[davidr]

Thanks, I got that to work but I can’t seem to get the base64 data uri image on page1 to show on page2 (to carry it over as an image). Do you think you could output it as a .png instead so I could just use some code like <img src="/file.png" /> on page2 to display it?

• This reply was modified 7 years, 2 months ago by davidr. Reason: fixed showing code

[Vishwas R]

@davidr,

JavaScript does not have access to the computer’s file system, please refer this stackoverflow thread for more information on the same. Either you can render chart as-such without interactivity or store base64 image globally and replace chart with image with stored base64 image data as source to show static image in a webpage.

—
Vishwas R
Team CanvasJS

[Joshua]

Hi !
First, thanks for this interesting tool. It seems to do exactly what i need.
However, i got an issue i can’t fix by myself.
I use a pie chart. Once it’s displayes, i neet it to be duplicate as an image i will display in the same page.

As i saw in diferent topic,

var image = new Image();
image.src = chart.canvas.toDataURL(“image/png”);
alert( image.src );

should solve the issue.
But the url inside the alert box is an empty image with the mention “Trial version”
Is that normal ? and is it the good way for my need ?

Please could you gie me a hand ?
Thanks :)

[Vishwas R]

@joshua,

Can you kindly create JSFiddle reproducing the issue you are facing and share it with us so that we can look into the code, run it at our end to understand it better and help you resolve?

From what we have observed, sometimes things get delayed mostly when we are not able to reproduce your use-case or not able to understand the exact requirements. Having a JSFiddle helps us in understanding your case better and many a times we can just edit your code on JSFiddle to fix the issue right-away. I request you to brief more along with JSFiddle with your use-case if you have further queries or facing any issue.

—
Vishwas R
Team CanvasJS

[Joshua]

Hi @Vishwas R
Just did this,
https://jsfiddle.net/besayfall/8v0xtnah/14/

It works a bit differently than on my website, maybe i did something wrong, but as you can see, the donut is not displayed…
Any ideas ?

[Vishwas R]

@joshua,

You are getting blank image instead of pie chart in the image as you are exporting chart before animation completes. Exporting chart as image after completion of animation by adding a delay should work fine in your case. Below is the code snippet for the same.

setTimeout(function(){ 
	var base64Image = chart.canvas.toDataURL();
	document.getElementById('monImage').src = base64Image;
}, chart.get("animationDuration") + 500); //500ms extra

Please take a look at this updated JSFiddle for complete code.

—
Vishwas R
Team CanvasJS

[Joshua]

@Vishwas R Works like a charm !
Awesome ! Thank you for your help !