How to export multiple gauge in single image file?Problem:The requirement here is to export multiple gauges into a single page. Solution: Usually, when multiple gauges are rendered together in a single page, you can not directly export all the gauges altogether as a single image file. It can be performed by exporting each gauge as a separate image file by using export action. To export multiple gauges together into a single image file, retrieve all the gauge elements and add those elements into a new canvas element and then export that canvas element by using the following method. [JavaScript]
function buttonclickevent() {
//To get all the canvas elements
var canvas1 = $('canvas');
var b_canvas = new Array();
for (var l = 0; canvas1[l] != null; l++) {
b_canvas[l] = canvas1[l];
}
//To get only selected canvas elements instead of all canvas element.
//b_canvas[0] = canvas1[0];
//b_canvas[1] = canvas1[1];
//create a temporary canvas to store the combined canvas element.
var buffer = document.createElement("canvas");
buffer.width = 0;
buffer.height = 0;
//set the total width and height for Resultant canvas
for (var i = 0; i < b_canvas.length; i++) {
buffer.width += b_canvas[i].width;
buffer.height += b_canvas[i].height;
}
var yPosition = 0;
var buffer_context = buffer.getContext("2d");
//Draw the canvas
for (var j = 0; j < b_canvas.length; j++) {
buffer_context.drawImage(b_canvas[j], 0, yPosition, b_canvas[j].width, b_canvas[j].height);
yPosition += b_canvas[j].height;
}
//method to export all gauges in single file
exportImage(buffer, "myImage", "png");
}
function exportImage(buffer, fileName, fileType) {
var lnk = document.createElement('a'), e;
lnk.download = fileName + "." + fileType;
lnk.href = buffer.toDataURL("image/" + fileType).replace("image/" + fileType, "image/octet-stream");
if (document.createEvent) {
e = document.createEvent("MouseEvents");
e.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
lnk.dispatchEvent(e);
} else if (lnk.fireEvent) {
lnk.fireEvent("onclick");
}
}
Executing the above example, exports the multiple Circular Gauges altogether as a single image file, while clicking on the export gauge button.
Figure 1: Multiple Circular gauges exported as a single image Sample link: |
2X faster development
The ultimate ASP.NET MVC UI toolkit to boost your development speed.
This page will automatically be redirected to the sign-in page in 10 seconds.
You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.
