• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
    
      <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
      <style></style>
    </head>
    
    <body>
      <div id='myChart'></div>
      <script>
        ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
        zingchart.defineModule('toolbar-zoom', 'plugin', function(chartJson) {
          /* 
           * If the 'labels' array of objects already exists, do nothing.
           * If it does not exist, initialize it as an empty array.
           * We do this to avoid obliteration of any existing labels.
           */
          chartJson.labels = chartJson.labels ? chartJson.labels : [];
    
          /* Push the toolbar label objects */
          chartJson.labels.push({
            "type": "rectangle",
            "id": "zoomin",
            "width": 30,
            "height": 30,
            "background-color": "#ddd",
            "background-image": "https://cdn4.iconfinder.com/data/icons/miu/22/editor_zoom-in_-20.png",
            "background-repeat": "no-repeat",
            "cursor": "hand",
            "margin-top": 10,
            "margin-left": 50,
            "margin-right": "auto",
            "border-width": 1,
            "border-color": "#aaa",
            "border-radius-top-left": 5,
            "border-radius-bottom-left": 5,
            "z-index": 1
          }, {
            "type": "rectangle",
            "id": "zoomout",
            "width": 30,
            "height": 30,
            "background-color": "#ddd",
            "background-image": "https://cdn4.iconfinder.com/data/icons/miu/22/editor_zoom-out_-20.png",
            "background-repeat": "no-repeat",
            "cursor": "hand",
            "margin-top": 10,
            "margin-left": 80,
            "margin-right": "auto",
            "border-width": 1,
            "border-color": "#aaa",
            "z-index": 1
          }, {
            "type": "rectangle",
            "id": "viewall",
            "width": 30,
            "height": 30,
            "background-color": "#ddd",
            "background-image": "https://cdn1.iconfinder.com/data/icons/freeline/32/eye_preview_see_seen_view-20.png",
            "background-repeat": "no-repeat",
            "cursor": "hand",
            "margin-top": 10,
            "margin-left": 110,
            "margin-right": "auto",
            "border-width": 1,
            "border-color": "#aaa",
            "border-radius-top-right": 5,
            "border-radius-bottom-right": 5,
            "z-index": 1
          });
    
          /*
           * Add label_click event listener, use the clicked label's 
           * id in a switch
           */
          zingchart.label_click = function(p) {
            switch (p.labelid) {
              case "zoomin":
                zingchart.exec(p.id, "zoomin");
                break;
              case "zoomout":
                zingchart.exec(p.id, "zoomout");
                break;
              case "viewall":
                zingchart.exec(p.id, "viewall");
                break;
            }
          };
    
          /* Create a reference to the "toolbar-zoom" object */
          var optionsObj = chartJson["toolbar-zoom"];
          /* 
           * If the "background-color" attr exists, loop over each label and 
           * modify the background-color on those with certain "id" values.
           */
          if (optionsObj["background-color"]) {
            for (var n in chartJson["labels"]) {
              var labelObj = chartJson["labels"][n];
              if ((labelObj["id"] == "zoomin") || (labelObj["id"] == "zoomout") || (labelObj["id"] == "viewall")) {
                labelObj["background-color"] = optionsObj["background-color"];
              }
            }
          }
          /* Same thing as above, but for border-color.  */
          if (optionsObj["border-color"]) {
            for (var n in chartJson["labels"]) {
              var labelObj = chartJson["labels"][n];
              if ((labelObj["id"] == "zoomin") || (labelObj["id"] == "zoomout") || (labelObj["id"] == "viewall")) {
                labelObj["border-color"] = optionsObj["border-color"];
              }
            }
          }
          return chartJson;
        });
    
        var myConfig = {
          "type": "bar",
          "title": {
            "text": "Zoom-Module"
          },
          "toolbar-zoom": { // Add the toolbar
            "background-color": "#FFFFFF #D0D7E1",
            "border-color": "#ACAFB6"
          },
          "scale-x": {
            "zooming": true
          },
          "scrollX": {},
          "series": [{
            "values": [35, 42, 67, 89, 25, 34, 67, 85]
          }]
        };
    
        zingchart.render({
          id: 'myChart',
          data: myConfig,
          height: 400,
          width: '100%',
          modules: "toolbar-zoom" // Load the toolbar
        });
      </script>
    </body>
    
    </html>
    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
    
      <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    </head>
    
    <body>
      <div id='myChart'></div>
    </body>
    
    </html>
    
          
    zingchart.defineModule('toolbar-zoom', 'plugin', function(chartJson) {
      /* 
       * If the 'labels' array of objects already exists, do nothing.
       * If it does not exist, initialize it as an empty array.
       * We do this to avoid obliteration of any existing labels.
       */
      chartJson.labels = chartJson.labels ? chartJson.labels : [];
    
      /* Push the toolbar label objects */
      chartJson.labels.push({
        "type": "rectangle",
        "id": "zoomin",
        "width": 30,
        "height": 30,
        "background-color": "#ddd",
        "background-image": "https://cdn4.iconfinder.com/data/icons/miu/22/editor_zoom-in_-20.png",
        "background-repeat": "no-repeat",
        "cursor": "hand",
        "margin-top": 10,
        "margin-left": 50,
        "margin-right": "auto",
        "border-width": 1,
        "border-color": "#aaa",
        "border-radius-top-left": 5,
        "border-radius-bottom-left": 5,
        "z-index": 1
      }, {
        "type": "rectangle",
        "id": "zoomout",
        "width": 30,
        "height": 30,
        "background-color": "#ddd",
        "background-image": "https://cdn4.iconfinder.com/data/icons/miu/22/editor_zoom-out_-20.png",
        "background-repeat": "no-repeat",
        "cursor": "hand",
        "margin-top": 10,
        "margin-left": 80,
        "margin-right": "auto",
        "border-width": 1,
        "border-color": "#aaa",
        "z-index": 1
      }, {
        "type": "rectangle",
        "id": "viewall",
        "width": 30,
        "height": 30,
        "background-color": "#ddd",
        "background-image": "https://cdn1.iconfinder.com/data/icons/freeline/32/eye_preview_see_seen_view-20.png",
        "background-repeat": "no-repeat",
        "cursor": "hand",
        "margin-top": 10,
        "margin-left": 110,
        "margin-right": "auto",
        "border-width": 1,
        "border-color": "#aaa",
        "border-radius-top-right": 5,
        "border-radius-bottom-right": 5,
        "z-index": 1
      });
    
      /*
       * Add label_click event listener, use the clicked label's 
       * id in a switch
       */
      zingchart.label_click = function(p) {
        switch (p.labelid) {
          case "zoomin":
            zingchart.exec(p.id, "zoomin");
            break;
          case "zoomout":
            zingchart.exec(p.id, "zoomout");
            break;
          case "viewall":
            zingchart.exec(p.id, "viewall");
            break;
        }
      };
    
      /* Create a reference to the "toolbar-zoom" object */
      var optionsObj = chartJson["toolbar-zoom"];
      /* 
       * If the "background-color" attr exists, loop over each label and 
       * modify the background-color on those with certain "id" values.
       */
      if (optionsObj["background-color"]) {
        for (var n in chartJson["labels"]) {
          var labelObj = chartJson["labels"][n];
          if ((labelObj["id"] == "zoomin") || (labelObj["id"] == "zoomout") || (labelObj["id"] == "viewall")) {
            labelObj["background-color"] = optionsObj["background-color"];
          }
        }
      }
      /* Same thing as above, but for border-color.  */
      if (optionsObj["border-color"]) {
        for (var n in chartJson["labels"]) {
          var labelObj = chartJson["labels"][n];
          if ((labelObj["id"] == "zoomin") || (labelObj["id"] == "zoomout") || (labelObj["id"] == "viewall")) {
            labelObj["border-color"] = optionsObj["border-color"];
          }
        }
      }
      return chartJson;
    });
    
    var myConfig = {
      "type": "bar",
      "title": {
        "text": "Zoom-Module"
      },
      "toolbar-zoom": { // Add the toolbar
        "background-color": "#FFFFFF #D0D7E1",
        "border-color": "#ACAFB6"
      },
      "scale-x": {
        "zooming": true
      },
      "scrollX": {},
      "series": [{
        "values": [35, 42, 67, 89, 25, 34, 67, 85]
      }]
    };
    
    zingchart.render({
      id: 'myChart',
      data: myConfig,
      height: 400,
      width: '100%',
      modules: "toolbar-zoom" // Load the toolbar
    });