2X faster development
The ultimate ASP.NET MVC UI toolkit to boost your development speed.
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.