Exporting chart to image and get the src of image

[web_raParticipant]

I am trying to embed jqxChart into a pdf generated by jspdf.
jsPDF accepts images as input. The ‘saveaspng’ option in jqWidgets export functionality
downloads the image from the server. But is there any option to get the dataURI of the image
or src tag for the chart image.

I first tried something like this, adding HTML directly to jsPDF but it does not work:

doc.fromHTML($('#jqxChart').get(0), 15, 75, {
           'elementHandlers': specialElementHandlers
          });

This method does work for normal text elements in HTML but when used with jqxChart it just dumps
the text as list instead of adding the diagram.

[StanislavParticipant]

Hello web_ra,

I would suggest taking a second look at our ‘export’ demo: https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxchart/javascript_chart_export_jpeg.htm?light.
Also, take a look at these posts:
https://stackoverflow.com/questions/19065562/add-image-in-pdf-using-jspdf
https://stackoverflow.com/questions/24912021/convert-a-image-url-to-pdf-using-jspdf

Best Regards,
Stanislav

jQWidgets Team
http://www.jqwidgets.com/

[web_raParticipant]

Hi Stanilav,

Thanks for the response. Actually, the export example downloads the PNG image to the browser.Now, my chart is dynamic and will change whenever user changes data. Hence, I think downloading image and hard coding file path to reference it in PDF doesn’t seem right.

Is there any way to programmatically convert chart to canvas element or a data-url? This is one such example from Chart.js to illustrate what I would require. JSFiddle link is given.

http://jsfiddle.net/canvasjs/cm1qyk2L/

var chart = new CanvasJS.Chart("chartContainer",
{
		title: {
			text: "Exporting chart using jsPDF & toDataurl"
		},
		data: [
		{
			type: "spline",
			dataPoints: [ 
				{ x: 10, y: 4 }, 
				{ x: 20, y: 7 },
				{ x: 30, y: 2 },
				{ x: 40, y: 3 },
				{ x: 50, y: 5 }
			]
		}
		]
});
chart.render();

var canvas = $("#chartContainer .canvasjs-chart-canvas").get(0);
var dataURL = canvas.toDataURL();
//console.log(dataURL);

$("#exportButton").click(function(){
    var pdf = new jsPDF();
    pdf.addImage(dataURL, 'JPEG', 0, 0);
    pdf.save("download.pdf");
});

[web_raParticipant]

One of your stack overflow links is about converting an image-url to pdf. This one would work. But how do I get a url to the image.? I can only download it to local client.

[Peter StoevKeymaster]

Look at: https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxchart/javascript_chart_export_jpeg.htm?light. That is the functionality which we have for getting the chart as image or pdf.

[web_raParticipant]

Hey @Peter. I have thoroughly read the example and read the source code through inspect element. This does not satisfy my use case as I do not want to download the image to my browser (like this example does), Rather I want to convert that chart to image data / URL accessible within the javascript program and use that image to put it in PDF or any other purpose.
Is there no solution currently for this one.

[Author]

Posts