Exporting a chart to an image

jpb · May 20, 2013

I found this page http://www.jchartfx.com/api/Chart/Export on how to export a chart out, but the syntax appears to be incorrect? I'm a missing something? I'm trying to give the user the option to save the chart as a file. Any help is appreciated.

Thanks.

JuanC · May 20, 2013

I apologize for the incorrect documentation. At this point it is NOT possible to export the chart in any format.

JuanC

jpb · May 21, 2013

Ok thanks.

Do you know if this is something that is going to be implemented in the future?

JuanC · May 22, 2013

We are considering it, unfortunately when doing charts in HTML5 we chose SVG over Canvas. One of the things that would be very easy to do in Canvas would be to export the chart as an image. It is not as simple (AFAIK) when using SVG so we are trying to figure out how to support this in the future.

JuanC

pperich · July 13, 2013

Hi JuanC. Just in case you are interested. I made a script to export a JchartFX chart object to an image. It is very simple using de canvg library.

Pablo

luisbessa · July 15, 2013

Hello Pablo! I'm interested on that script. Can you share it please?

pperich · July 17, 2013

Hi Luis. after including the canvg library, this is my code:

var svgH = this.jChart.S.parentNode.innerHTML;

svgH = svgH.slice(svgH.indexOf('<svg'));

if ( ( p = svgH.indexOf('<div') ) > 0)

svgH = svgH.slice(0,p);

svgH = svgH.replace(/sfxid=/g, ' sfxid=');

svgH = svgH.replace(/sfxtitle=/g, ' sfxtitle=');

this.canvas = document.createElement('canvas');

canvg(this.canvas, svgH);

var imgData = this.canvas.toDataURL('image/png');

Note that i have a class with a jChart attribute and a canvas attribute.

After that you have in imgData the "data" url with the image. You can set it to an image src o do a window.location.href = imgData. In my case after that i send it to the server an the server is sending me it back to the browser with a filename.

To include the canvg library you need this:

Greetings.

Pablo

pperich · July 17, 2013

The only problem with my code is that the texts appears in a wrong position. Please, can anybody help me with that?

lolomak · July 19, 2013

Hi Pablo,

Could you paste all of your code,

Thanks in advance

Grzesiek

pperich · July 24, 2013

Hi. I'm posting the full code of a working example of converting a chart svg to an image. Note that you have to modify the path to the jChartFX library in order to make it work.

<html>

<head>

window.onload = function () {

onLoadDoc();

}

var chart1;

function chart2Img(chart, img ) {

var svgH = chart.S.parentNode.innerHTML;

svgH = svgH.slice(svgH.indexOf('<svg'));

if ( ( p = svgH.indexOf('<div') ) > 0)

svgH = svgH.slice(0,p);

svgH = svgH.replace(/sfxid=/g, ' sfxid=');

svgH = svgH.replace(/sfxtitle=/g, ' sfxtitle=');

var canvas = document.createElement('canvas');

canvg(canvas, svgH);

var imgData = canvas.toDataURL('image/png');

img.src=imgData;

}

function onLoadDoc() {

chart1 = new cfx.Chart();

var items = [{

"Date": "2012-01-21T23:45:10.280Z",

"Value": 7,

"UpperLimit": 8,

"LowerLimit": 6

}, {

"Date": "2012-01-26T23:45:10.280Z",

"Value": 8,

"UpperLimit": 9,

"LowerLimit": 7

}, {

"Date": "2012-02-10T23:45:10.280Z",

"Value": 9,

"UpperLimit": 10,

"LowerLimit": 7

}, {

"Date": "2012-02-19T23:45:10.280Z",

"Value": 10,

"UpperLimit": 11,

"LowerLimit": 8

}, {

"Date": "2012-03-21T23:45:10.280Z",

"Value": 12,

"UpperLimit": 13,

"LowerLimit": 9

}, {

"Date": "2012-03-29T23:45:10.280Z",

"Value": 13,

"UpperLimit": 14,

"LowerLimit": 10

}, {

"Date": "2012-04-10T23:45:10.280Z",

"Value": 14,

"UpperLimit": 15,

"LowerLimit": 10

}, {

"Date": "2012-04-19T23:45:10.280Z",

"Value": 14,

"UpperLimit": 16,

"LowerLimit": 11

}, {

"Date": "2012-05-10T23:45:10.280Z",

"Value": 15,

"UpperLimit": 17,

"LowerLimit": 12

}, {

"Date": "2012-05-19T23:45:10.280Z",

"Value": 16,

"UpperLimit": 18,

"LowerLimit": 13

}];

var axisY = chart1.getAxisY();

axisY.setMin(4);

axisY.setMax(20);

chart1.setGallery(cfx.Gallery.Area);

chart1.getData().setSeries(2);

var series1 = chart1.getSeries().getItem(0);

var series2 = chart1.getSeries().getItem(1);

series2.setColor("#801702D1");

series2.getBorder().setWidth(4);

series1.setGallery(cfx.Gallery.Lines);

var legBox = chart1.getLegendBox();

legBox.setDock(cfx.DockArea.Bottom);

legBox.setContentLayout(cfx.ContentLayout.Center);

//----Assign data fields--------

var fields = chart1.getDataSourceSettings().getFields();

var field1 = new cfx.FieldMap();

var field2 = new cfx.FieldMap();

var field3 = new cfx.FieldMap();

var field4 = new cfx.FieldMap();

field1.setName("Date");

field1.setUsage(cfx.FieldUsage.XValue);

fields.add(field1);

field2.setName("Value");

field2.setUsage(cfx.FieldUsage.Value);

fields.add(field2);

field4.setName("LowerLimit");

field4.setUsage(cfx.FieldUsage.FromValue);

fields.add(field4);

field3.setName("UpperLimit");

field3.setDisplayName("Acceptable range");

field3.setUsage(cfx.FieldUsage.Value);

fields.add(field3);

//----Set Sample Data------------

chart1.setDataSource(items);

var chartDiv = document.getElementById('ChartDiv1');

chart1.create(chartDiv);

var img = document.getElementById('dstImg');

chart2Img(chart1,img);

}

</script>

</head>

<body>

</body>

</html>

Regards,

Pablo

anurag_it · October 15, 2013

Hi,

Any luck with this stuff? I used this code but it fills img with black color.

Struggling to export Chart in image format. Need it on priority.

Thanks & Regards

Anurag

anurag_it · October 16, 2013

I tried few other things to convert but the issue is with css which is not available while parsing and results into black image

pperich · October 16, 2013

to export the image I have to avoid loading the css file and set the colors and styles thru the API. Is important NOT LOADING the CSS file.

JuanC · October 16, 2013

Please note that you can create charts without using our css, if you want to change colors or other visual attributes you can do so using our API.

JuanC

anurag_it · October 16, 2013

Hi,

Thanks for the support. Able to export charts to image now.

Issue of text positions mentioned by pperich in exported chart still remains.

Regards

Anurag

anurag_it · October 23, 2013

Hi,

Is there any update on chart export feature? or you guys planning to add this feature..? hun?

JuanC · October 23, 2013

We are exploring this but we have not comitted to a release date or timeframe yet.

JuanC

heena · January 2, 2014

hello

Is the chart export feature released yet, plz rply to this.

JuanC · January 2, 2014

Exporting to an image is currently not supported.

JuanC

Exporting a chart to an image

Question

Link to comment

Share on other sites

18 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation