• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
    
      <script 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
    });