This topic demonstrates how to add zooming ability to a C1BubbleChart 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 a C1BubbleChart control and a C1PieChart control. Go to BubbleChart for ASP.NET Web Forms Quick Start and 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="c1bubblechartContainer" style="width: 700px; height: 600px; overflow: auto">
              <cc1:C1BubbleChart ID="C1BubbleChart1" runat="server">
                ...           
              </cc1:C1BubbleChart>
           </div>
        </td>
        <td>
           <div id="c1piechart">
              <cc1:C1PieChart ID="C1PieChart1" runat="server"> 
                ...           
              </cc1:C1PieChart>
           </div>
        </td>
    </tr>
 </table>


   The c1bubblechartContainer acts as a container div to prevent C1BubbleChart 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 = $("#C1BubbleChart1").css("zoom");
               if (currZoom == 'normal') currZoom = 1;
   

               $("#btnZoomIn").click(function () {
                   currZoom *= 1.2;
                   $("#C1BubbleChart1").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
                   }
                   $("#C1BubbleChart1").css({
                       zoom: currZoom,
                       "-moz-transform": "Scale(" + currZoom + ")",
                       "-moz-transform-origin": "0 0",
                       zoom: currZoom,
                       "-moz-transform": "Scale(" + currZoom + ")",
                       "-moz-transform-origin": "0 0"
                   });