Skip to main content Skip to footer

Zooming in Wijmo Charts

You can easily display data in a graphical form using Wijmo Charts. This blog explains how you can easily add Zooming ability to Wijmo Charts using simple jQuery. To zoom in or zoom out in Wijmo Chart, you can use the 'zoom' css attribute. First of all add the following markup to render the Wijmo Charts.


<table>  
    <tr>  
       <td>  
          <div id="wijbarchartContainer" style="width: 700px; height: 600px; overflow: auto">  
             <div id="wijbarchart">  
            </div>  
          </div>  
       </td>  
       <td>  
          <div id="wijpiechart">  
          </div>  
       </td>  
   </tr>  
</table>  

The wijbarchartcontainer acts as a container div to prevent wijbarchart from spreading on the whole page.

Zooming In and Zooming Out

To zoom in and zoom out we'll add two input elements of type 'Image' and set their src attribute to ZoomIn and ZoomOut images. Now, to enable zooming operations on Wijmo Charts, just change the zoom attribute and the -moz-transform attribute (for Firefox) accordingly.


<input type="image" id="btnZoomIn" onclick="btnZoomIn" style="height: 30px; width: 30px"  
 src="http://icons.iconarchive.com/icons/visualpharm/must-have/256/Zoom-In-icon.png" />  
<input type="image" id="btnZoomOut" onclick="btnZoomIn" style="height: 30px; width: 30px"  
 src="http://icons.iconarchive.com/icons/visualpharm/must-have/256/Zoom-Out-icon.png" />
var currZoom = $("#wijbarchart").css("zoom");  
 if (currZoom == 'normal') currZoom = 1;  

 $("#btnZoomIn").click(function () {  
 currZoom *= 1.2;  
 $("#wijbarchart").css("zoom", currZoom);  
 $("#wijbarchart").css("-moz-transform", "Scale(" + currZoom + ")");  
 $("#wijbarchart").css("-moz-transform-origin", "0 0");  
 $("#wijpiechart").css("zoom", currZoom);  
 $("#wijpiechart").css("-moz-transform", "Scale(" + currZoom + ")");  
 $("#wijpiechart").css("-moz-transform-origin", "0 0");  
 });  

 $("#btnZoomOut").click(function () {  
 if (currZoom > 0.6) {  
 currZoom *= 0.8;  
 $("#wijbarchart").css("zoom", currZoom);  
 $("#wijbarchart").css("-moz-transform", "Scale(" + currZoom + ")");  
 $("#wijbarchart").css("-moz-transform-origin", "0 0");  
 $("#wijpiechart").css("zoom", currZoom);  
 $("#wijpiechart").css("-moz-transform", "Scale(" + currZoom + ")");  
 $("#wijpiechart").css("-moz-transform-origin", "0 0");  
 }  
 });

As simple as that! Please download the attached sample for complete implementation. Download Sample

MESCIUS inc.

comments powered by Disqus