[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.

[web_raParticipant]

Hi Mallikarjun,

I am facing the same issue. Did you find out a way to embed charts into 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.

[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");
});

[Author]

Posts