This topic demonstrates how to add zooming ability to a C1PieChart using jQuery.

In this example, 'zoom' css attribute is used. To zoom in and zoom out, two input elements  of type 'Image' are added. Their src attribute is set to ZoomIn and ZoomOut images. The form contains two C1PieChart controls. Go to PieChart for ASP.NET Web Forms Quick Start for more information.

In Source View

Complete the following steps:

1. Add the following markup to render the ASP.NET Web Forms Charts.

   To write code in Source View

   <table>
     <tr>
        <td>
          <div id="c1piechartContainer" style="width: 700px; height: 600px; overflow: auto">
              <cc1:C1PieChart ID="C1PieChart1" runat="server">
                ...           
              </cc1:C1PieChart>
           </div>
        </td>
        <td>
           <div id="c1piechart">
              <cc1:C1PieChart ID="C1PieChart2" runat="server"> 
                ...           
              </cc1:C1PieChart>
           </div>
        </td>
    </tr>
 </table>


   The c1piechartContainer acts as a container div to prevent C1PieChart from spreading on the whole page.

2. Add the following to add the two input elements:

   To write code in Source View

   <input type="image" id="btnZoomIn" style="height: 30px; width: 30px"
    src="http://icons.iconarchive.com/icons/visualpharm/must-have/256/Zoom-In-icon.png" aria-pressed="undefined" />
   <input type="image" id="btnZoomOut" style="height: 30px; width: 30px"
    src="http://icons.iconarchive.com/icons/visualpharm/must-have/256/Zoom-Out-icon.png" />
   

3. Add the following code to enable zooming operations, by changing the zoom attribute and the -moz-transform attribute:
   

   To write code in Source View

    var currZoom = $("#C1PieChart1").css("zoom");
               if (currZoom == 'normal') currZoom = 1;
               $("#btnZoomIn").click(function () {
                   currZoom *= 1.2;
                   $("#C1PieChart2").css({
                       zoom: "currZoom",
                       "-moz-transform": "Scale(" + currZoom + ")",
                       "-moz-transform-origin": "0 0",
                       zoom: currZoom,
                       "-moz-transform": "Scale(" + currZoom + ")",
                       "-moz-transform-origin": "0 0"
                   });
                   return false;
               });
   

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