• 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>
            zing-grid[loading] {
                height: 400px;
            }
        </style>
    </head>
    
    <body>
        <div id='myChart'></div>
        <script>
            ZC.LICENSE = ["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
    });