Copy to clipboard

[PhilHannent]

Hi,

In your other charting components you have a copy to clipboard feature.  Is that available at all in jChartFX?

Regards

Phil

 

[JuanC]

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.

JuanC

Attachments.zip

[FP2006]

Any update on the Canvas renderer for the upcoming release.  Getting an image to the clipboard (or an export to bitmap format) is a very important feature for us.  

Thanks. 

[JuanC]

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;

           a.click();

    };

 

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.

JuanC