Mulitple canvas-images (by Chart.js) with toDataURL()

Question

How to handle two or more linked Canvas-Charts with Chart.js? With this script the canvas-image is linked with a bigger version to present the big file in a fancybox or just two download it (right-click -> save). Easy.

<a HREF="#" id="canvas_link_1">
<canvas id="image1"></canvas>
</a>

<a HREF="#" id="canvas_link_2">
<canvas id="image2"></canvas>
</a>

To use toDataURL() with Chart.js it's a bit tricky, cause it will render the whole chart not before the animation has ended. If we do ask for the URL too early, it will present an empty (transparent) image. That's why we need onAnimationComplete in the options:

var options = { 
onAnimationComplete: done
}

Later in the script, it will fire/change the new HREF, when the animation is over.

var ct1 = document.getElementById("image1").getContext("2d");
ct1.canvas.width = document.getElementById("image1").offsetWidth;
ct1.canvas.height = document.getElementById("image1").offsetHeight;
var Chart1  = new Chart(ct1).Line(lineChartData1,options);

function done() {
var url1=document.getElementById("image1").toDataURL();
document.getElementById("canvas_link_1").href=url1;
}

var ct2 = document.getElementById("image2").getContext("2d");
ct2.canvas.width = document.getElementById("image2").offsetWidth;
ct2.canvas.height = document.getElementById("image2").offsetHeight;
var Chart2  = new Chart(ct2).Line(lineChartData2,options);

function done() {
var url2=document.getElementById("image2").toDataURL();
document.getElementById("canvas_link_2").href=url2;
}

That works. But only with one canvas-image. If I delete the 2nd function done() it will work with the 1st canvas, if I delete the 1st function, only the 2nd canvas presents the url.

I think the problem is with "done", it's not a name, just like a situation, or? The "var options" is are general for all canvas-images (for sure I can change to options1 and options2 and also to "Line(lineChartData1,options1)" but without any change)... so "done" will fire all functions and - that's bad - appearently only the last function.

On the other side I cannot rename the entry of onAnimationComplete. It's null or done, nothing else. What is to do?

Answer 1

You can have different callbacks with different names. "done" is just an example name (a better name would probably be "completed").

For example - first create two option objects, one for each chart:

var options1 = { 
    onAnimationComplete: done1
};

var options2 = { 
    onAnimationComplete: done2
};

Then initialize the charts with those:

...
var Chart1  = new Chart(ct1).Line(lineChartData1, options1);

...
var Chart2  = new Chart(ct2).Line(lineChartData2, options2);

And finally define the callbacks:

function done1() {
    var url = document.getElementById("image1").toDataURL();
    document.getElementById("canvas_link_1").href = url;
}

function done2() {
    var url = document.getElementById("image2").toDataURL();
    document.getElementById("canvas_link_2").href = url;
}

Hope this helps (and that I understood the problem correctly) !