Home forums Using CanvasJS How to display chart as a static image (png, jpg)

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #15993

    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!

    #15997

    @davidr.

    You can get base64 image of chart using toDataURL. And passing this image as image source will work in your case. Please check this jsfiddle.


    Vishwas R
    Team CanvasJS

    #16004

    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 2 years, 5 months ago by davidr. Reason: fixed showing code
    #16009

    @davidr,

    JavaScript does not have access to the computer’s file system, please refer this link for more info. Either you can render chart as-such without interactivity or store base64 image globally and use it as image source.


    Vishwas R
    Team CanvasJS

    #27626

    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 :)

    #27628

    @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

    #27664

    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 ?

    #27667

    @joshua,

    You are getting blank image instead of pie chart in the image as you are exporting chart before animation could complete. Exporting chart as image soon after animation should work fine in your case. Please take a look at this updated JSFiddle.


    Vishwas R
    Team CanvasJS

    #27672

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

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.