• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.  
    8.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    9.   <style></style>
    10. </head>
    11.  
    12. <body>
    13.   <div id='myChart'></div>
    14.   <script>
    15.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    16.     zingchart.defineModule('toolbar-zoom', 'plugin', function(chartJson) {
    17.       /* 
    18.        * If the 'labels' array of objects already exists, do nothing.
    19.        * If it does not exist, initialize it as an empty array.
    20.        * We do this to avoid obliteration of any existing labels.
    21.        */
    22.       chartJson.labels = chartJson.labels ? chartJson.labels : [];
    23.  
    24.       /* Push the toolbar label objects */
    25.       chartJson.labels.push({
    26.         "type": "rectangle",
    27.         "id": "zoomin",
    28.         "width": 30,
    29.         "height": 30,
    30.         "background-color": "#ddd",
    31.         "background-image": "https://cdn4.iconfinder.com/data/icons/miu/22/editor_zoom-in_-20.png",
    32.         "background-repeat": "no-repeat",
    33.         "cursor": "hand",
    34.         "margin-top": 10,
    35.         "margin-left": 50,
    36.         "margin-right": "auto",
    37.         "border-width": 1,
    38.         "border-color": "#aaa",
    39.         "border-radius-top-left": 5,
    40.         "border-radius-bottom-left": 5,
    41.         "z-index": 1
    42.       }, {
    43.         "type": "rectangle",
    44.         "id": "zoomout",
    45.         "width": 30,
    46.         "height": 30,
    47.         "background-color": "#ddd",
    48.         "background-image": "https://cdn4.iconfinder.com/data/icons/miu/22/editor_zoom-out_-20.png",
    49.         "background-repeat": "no-repeat",
    50.         "cursor": "hand",
    51.         "margin-top": 10,
    52.         "margin-left": 80,
    53.         "margin-right": "auto",
    54.         "border-width": 1,
    55.         "border-color": "#aaa",
    56.         "z-index": 1
    57.       }, {
    58.         "type": "rectangle",
    59.         "id": "viewall",
    60.         "width": 30,
    61.         "height": 30,
    62.         "background-color": "#ddd",
    63.         "background-image": "https://cdn1.iconfinder.com/data/icons/freeline/32/eye_preview_see_seen_view-20.png",
    64.         "background-repeat": "no-repeat",
    65.         "cursor": "hand",
    66.         "margin-top": 10,
    67.         "margin-left": 110,
    68.         "margin-right": "auto",
    69.         "border-width": 1,
    70.         "border-color": "#aaa",
    71.         "border-radius-top-right": 5,
    72.         "border-radius-bottom-right": 5,
    73.         "z-index": 1
    74.       });
    75.  
    76.       /*
    77.        * Add label_click event listener, use the clicked label's 
    78.        * id in a switch
    79.        */
    80.       zingchart.label_click = function(p) {
    81.         switch (p.labelid) {
    82.           case "zoomin":
    83.             zingchart.exec(p.id, "zoomin");
    84.             break;
    85.           case "zoomout":
    86.             zingchart.exec(p.id, "zoomout");
    87.             break;
    88.           case "viewall":
    89.             zingchart.exec(p.id, "viewall");
    90.             break;
    91.         }
    92.       };
    93.  
    94.       /* Create a reference to the "toolbar-zoom" object */
    95.       var optionsObj = chartJson["toolbar-zoom"];
    96.       /* 
    97.        * If the "background-color" attr exists, loop over each label and 
    98.        * modify the background-color on those with certain "id" values.
    99.        */
    100.       if (optionsObj["background-color"]) {
    101.         for (var n in chartJson["labels"]) {
    102.           var labelObj = chartJson["labels"][n];
    103.           if ((labelObj["id"] == "zoomin") || (labelObj["id"] == "zoomout") || (labelObj["id"] == "viewall")) {
    104.             labelObj["background-color"] = optionsObj["background-color"];
    105.           }
    106.         }
    107.       }
    108.       /* Same thing as above, but for border-color.  */
    109.       if (optionsObj["border-color"]) {
    110.         for (var n in chartJson["labels"]) {
    111.           var labelObj = chartJson["labels"][n];
    112.           if ((labelObj["id"] == "zoomin") || (labelObj["id"] == "zoomout") || (labelObj["id"] == "viewall")) {
    113.             labelObj["border-color"] = optionsObj["border-color"];
    114.           }
    115.         }
    116.       }
    117.       return chartJson;
    118.     });
    119.  
    120.     var myConfig = {
    121.       "type": "bar",
    122.       "title": {
    123.         "text": "Zoom-Module"
    124.       },
    125.       "toolbar-zoom": { // Add the toolbar
    126.         "background-color": "#FFFFFF #D0D7E1",
    127.         "border-color": "#ACAFB6"
    128.       },
    129.       "scale-x": {
    130.         "zooming": true
    131.       },
    132.       "scrollX": {},
    133.       "series": [{
    134.         "values": [35, 42, 67, 89, 25, 34, 67, 85]
    135.       }]
    136.     };
    137.  
    138.     zingchart.render({
    139.       id: 'myChart',
    140.       data: myConfig,
    141.       height: 400,
    142.       width: '100%',
    143.       modules: "toolbar-zoom" // Load the toolbar
    144.     });
    145.   </script>
    146. </body>
    147.  
    148. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.  
    8.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    9. </head>
    10.  
    11. <body>
    12.   <div id='myChart'></div>
    13. </body>
    14.  
    15. </html>
    1.  
    1. zingchart.defineModule('toolbar-zoom', 'plugin', function(chartJson) {
    2.   /* 
    3.    * If the 'labels' array of objects already exists, do nothing.
    4.    * If it does not exist, initialize it as an empty array.
    5.    * We do this to avoid obliteration of any existing labels.
    6.    */
    7.   chartJson.labels = chartJson.labels ? chartJson.labels : [];
    8.  
    9.   /* Push the toolbar label objects */
    10.   chartJson.labels.push({
    11.     "type": "rectangle",
    12.     "id": "zoomin",
    13.     "width": 30,
    14.     "height": 30,
    15.     "background-color": "#ddd",
    16.     "background-image": "https://cdn4.iconfinder.com/data/icons/miu/22/editor_zoom-in_-20.png",
    17.     "background-repeat": "no-repeat",
    18.     "cursor": "hand",
    19.     "margin-top": 10,
    20.     "margin-left": 50,
    21.     "margin-right": "auto",
    22.     "border-width": 1,
    23.     "border-color": "#aaa",
    24.     "border-radius-top-left": 5,
    25.     "border-radius-bottom-left": 5,
    26.     "z-index": 1
    27.   }, {
    28.     "type": "rectangle",
    29.     "id": "zoomout",
    30.     "width": 30,
    31.     "height": 30,
    32.     "background-color": "#ddd",
    33.     "background-image": "https://cdn4.iconfinder.com/data/icons/miu/22/editor_zoom-out_-20.png",
    34.     "background-repeat": "no-repeat",
    35.     "cursor": "hand",
    36.     "margin-top": 10,
    37.     "margin-left": 80,
    38.     "margin-right": "auto",
    39.     "border-width": 1,
    40.     "border-color": "#aaa",
    41.     "z-index": 1
    42.   }, {
    43.     "type": "rectangle",
    44.     "id": "viewall",
    45.     "width": 30,
    46.     "height": 30,
    47.     "background-color": "#ddd",
    48.     "background-image": "https://cdn1.iconfinder.com/data/icons/freeline/32/eye_preview_see_seen_view-20.png",
    49.     "background-repeat": "no-repeat",
    50.     "cursor": "hand",
    51.     "margin-top": 10,
    52.     "margin-left": 110,
    53.     "margin-right": "auto",
    54.     "border-width": 1,
    55.     "border-color": "#aaa",
    56.     "border-radius-top-right": 5,
    57.     "border-radius-bottom-right": 5,
    58.     "z-index": 1
    59.   });
    60.  
    61.   /*
    62.    * Add label_click event listener, use the clicked label's 
    63.    * id in a switch
    64.    */
    65.   zingchart.label_click = function(p) {
    66.     switch (p.labelid) {
    67.       case "zoomin":
    68.         zingchart.exec(p.id, "zoomin");
    69.         break;
    70.       case "zoomout":
    71.         zingchart.exec(p.id, "zoomout");
    72.         break;
    73.       case "viewall":
    74.         zingchart.exec(p.id, "viewall");
    75.         break;
    76.     }
    77.   };
    78.  
    79.   /* Create a reference to the "toolbar-zoom" object */
    80.   var optionsObj = chartJson["toolbar-zoom"];
    81.   /* 
    82.    * If the "background-color" attr exists, loop over each label and 
    83.    * modify the background-color on those with certain "id" values.
    84.    */
    85.   if (optionsObj["background-color"]) {
    86.     for (var n in chartJson["labels"]) {
    87.       var labelObj = chartJson["labels"][n];
    88.       if ((labelObj["id"] == "zoomin") || (labelObj["id"] == "zoomout") || (labelObj["id"] == "viewall")) {
    89.         labelObj["background-color"] = optionsObj["background-color"];
    90.       }
    91.     }
    92.   }
    93.   /* Same thing as above, but for border-color.  */
    94.   if (optionsObj["border-color"]) {
    95.     for (var n in chartJson["labels"]) {
    96.       var labelObj = chartJson["labels"][n];
    97.       if ((labelObj["id"] == "zoomin") || (labelObj["id"] == "zoomout") || (labelObj["id"] == "viewall")) {
    98.         labelObj["border-color"] = optionsObj["border-color"];
    99.       }
    100.     }
    101.   }
    102.   return chartJson;
    103. });
    104.  
    105. var myConfig = {
    106.   "type": "bar",
    107.   "title": {
    108.     "text": "Zoom-Module"
    109.   },
    110.   "toolbar-zoom": { // Add the toolbar
    111.     "background-color": "#FFFFFF #D0D7E1",
    112.     "border-color": "#ACAFB6"
    113.   },
    114.   "scale-x": {
    115.     "zooming": true
    116.   },
    117.   "scrollX": {},
    118.   "series": [{
    119.     "values": [35, 42, 67, 89, 25, 34, 67, 85]
    120.   }]
    121. };
    122.  
    123. zingchart.render({
    124.   id: 'myChart',
    125.   data: myConfig,
    126.   height: 400,
    127.   width: '100%',
    128.   modules: "toolbar-zoom" // Load the toolbar
    129. });