Jump to content
JChartFX Community
  • 0

Copy to clipboard



3 answers to this question

Recommended Posts

  • 0

No. We do not support this option at this time.

Copying the data to the clipboard might not be that hard, copying the image is another matter. ChartFX currently uses SVG which AFAIK does not provide a programmatic way to render an SVG element to a bitmap. Canvas does provide an option to generate images but early in the development cycle we decided SVG was a better fit because it allows to integrate with CSS and makes code that detect events/scrolling/etc. much easier.

We left the door open so that in the future we could plug a Canvas renderer but this is not fully implemented at the time.



Link to comment
Share on other sites

  • 0

We understand copying an image to the clipboard is important in some scenarios, and we continue researching on a canvas renderer for future releases, once we decided on using SVG we took advantage of some features (easy CSS support, simplified hittest for click/hover) that makes it difficult to fully switch to a canvas scenario so we are also investigating if we can support a paintToCanvas method while maintaining our renderer as SVG on the screen.

As of now we do not have a firm date for releasing a canvas renderer but I though I would pass along a trick that we are using internally to get screenshots for our documentation

This uses the fact that canvas support an image whose source is an SVG, normally the image src would be a different URL but you can also provide the SVG as base64, the tricky part is actually saving an image to a file, this works in Chrome but not in Safari or Firefox (have not tested IE yet) but maybe your requirements are different or you can provide this functionality to your chrome users.

    var html1 = $("svg.jchartfx").parent().html();

    // Filter the SVG tag only

    var html = html1.substring(html1.indexOf("<svg"));

    // If CSS is used, a reference to the external css must be added to the SVG. This is not needed if CSS is not used

    // html = "<?xml-stylesheet href=\"http://yoursite/include/jchartfx.css\" type=\"text/css\"?>" + html;

    var canvas = document.querySelector("canvas");

    var context = canvas.getContext("2d");

    var imgsrc = 'data:image/svg+xml;base64,' + btoa(html);

    var image = new Image;

    image.src = imgsrc;

    // This function creates the PNG and saves it to disk

    image.onload = function() {

           context.drawImage(image, 0, 0);

           var canvasdata = canvas.toDataURL("image/png");

           var a = document.createElement("a");

           a.download = "sample.png";

           a.href = canvasdata;




As I said in our tests, an image gets saved in Chrome but not in other browsers, maybe you can use the part of the code that generates the image without actually saving it to disk.


Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...