• 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>
    10.     html,
    11.     body {
    12.       height: 100%;
    13.       width: 100%;
    14.       margin: 0;
    15.       padding: 0;
    16.     }
    17.  
    18.     #myChart {
    19.       height: 100%;
    20.       width: 100%;
    21.       min-height: 150px;
    22.     }
    23.  
    24.     .zc-ref {
    25.       display: none;
    26.     }
    27.   </style>
    28. </head>
    29.  
    30. <body>
    31.   <div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
    32.   <script>
    33.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    34.     var myConfig = {
    35.       "graphset": [{
    36.         "background-color": "#ffffff",
    37.         "type": "bar",
    38.         "title": {
    39.           "text": "Multiple Selections"
    40.         },
    41.         "subtitle": {
    42.           "text": ". Click To Clear Selection"
    43.         },
    44.         "legend": {
    45.           "toggle-action": "remove",
    46.           "align": "center",
    47.           "adjust-layout": false,
    48.           "borderWidth": 0,
    49.           "verticalAlign": "bottom",
    50.           "fontColor": "#7d7d7d",
    51.           "font-size": 10,
    52.           "marginRight": 20,
    53.           "marginBottom": 0,
    54.           "marginTop": 0,
    55.           "marker": {
    56.             "type": "square"
    57.           },
    58.         },
    59.         "preview": {
    60.           "background-color": "#F5F7F3",
    61.           "border-width": 0,
    62.           "height": 29,
    63.           "preserve-zoom": false,
    64.           "mask": {
    65.             "backgroundColor": "white",
    66.             "alpha": 0.8
    67.           },
    68.           "handle": {
    69.             "border-width": 1
    70.           },
    71.           "y": "85%"
    72.         },
    73.         "scale-x": {
    74.           "zooming": true,
    75.           "zoom-to": [0, 30],
    76.           "item": {
    77.             "font-size": 10,
    78.             "font-color": "#7d7d7d"
    79.           },
    80.           "tick": {
    81.             "visible": false
    82.           },
    83.           "title": {
    84.             "text": "You can Make Multiple Selections And Click To Clear selection"
    85.           },
    86.           "minValue": 1484782109655,
    87.           "step": "day",
    88.           "transform": {
    89.             "type": "date"
    90.           }
    91.         },
    92.         "scale-y": {
    93.           "zooming": false,
    94.           "values": "0:2.503:0.5006",
    95.           "guide": {
    96.             "line-style": "dotted"
    97.           },
    98.           "item": {
    99.             "font-size": 10,
    100.             "font-color": "#7d7d7d"
    101.           },
    102.           "tick": {
    103.             "visible": false
    104.           },
    105.           "format": "%v%",
    106.           "decimals": 1
    107.         },
    108.         "zoom": {
    109.           "active": false,
    110.           "preserve-zoom": true
    111.         },
    112.         "plotarea": {
    113.           "margin-top": "20",
    114.           "margin-left": "20",
    115.           "margin": "dynamic 50 105 dynamic"
    116.         },
    117.         "plot": {
    118.           "data-append-selection": true,
    119.           "mode": "normal",
    120.           "line-width": 1,
    121.           "line-color": "#4d9900",
    122.           "background-color": "#1e88e5",
    123.           "marker": {
    124.             "size": 3,
    125.             "background-color": "#ccccff #6666ff",
    126.             "border-width": 1,
    127.             "border-color": "#4d9900"
    128.           },
    129.           "tooltip": {
    130.             "visible": true,
    131.             "text": "%kv<br>%vv"
    132.           },
    133.           "selection-mode": "multiple",
    134.           "selected-state": {
    135.             "background-color": "#ffa726",
    136.             "border-width": 0
    137.           }
    138.         },
    139.         "series": [{
    140.           "values": [0.8840000000000001, 1.9060000000000001, 1.35, 1.189, 0.984, 0.619, 0.468, 0.28700000000000003, 2.503, 1.139, 2.011, 1.7389999999999999, 0.5559999999999999, 0.22899999999999998, 0.218, 0.761, 0.58, 1.171, 0.8240000000000001, 0.721, 0.542, 0.954, 0.683, 0.976, 1.0290000000000001, 0.28800000000000003, 0.362, 0.388, 1.057, 0.886, 0.196, 0.333, 1.013, 0.541, 0.127, 0.726, 0.649, 1.031, 0.606, 1.232, 0.5459999999999999, 0.8340000000000001, 1.9869999999999999, 0.257, 0.62, 0.571, 0.194, 0.315, 0.45799999999999996, 0.14300000000000002, 0.126, 0.252, 0.588, 1.419, 0.259, 0.724, 0.295, 0.344, 0.455, 0.27699999999999997, 0.604, 0.471, 0.8200000000000001, 0.504, 0.209, 0.33999999999999997, 0.404, 0.127, 0.293, 0.326, 0.428, 0.38999999999999996, 0.562, 0.14300000000000002, 0.258, 0.414, 0.42100000000000004, 0.6669999999999999, 0.8290000000000001, 1.369, 0.261, 1.15, 0.644, 0.519, 0.44400000000000006, 0.627, 0.411, 0.447, 0.173, 0.763, 0.581, 1.2710000000000001, 0.9129999999999999, 0.988, 0.51, 0.664, 0.348, 0.5559999999999999, 0.28600000000000003, 0.424, 0.676, 0.367, 0.634, 0.47600000000000003, 0.512, 0.33999999999999997, 0.076, 0.27799999999999997, 0.291, 0.402, 0.199, 0.21, 0.261, 0.178, 0.315, 0.6459999999999999, 0.482, 0.08499999999999999, 0.068, 0.40099999999999997, 0.135, 0.679, 0.769, 1.113, 0.315, 0.37, 0.267, 0.145, 1.2309999999999999, 0.126, 0.217, 1.0670000000000002, 2.213, 0.687, 0.63, 0.498, 0.428, 0.154, 0.27299999999999996, 0.161, 0.28900000000000003, 0.8130000000000001, 0.406, 0.553, 0.584, 0.73, 0.347, 0.194, 0.439, 0.28800000000000003, 0.561, 0.22499999999999998, 1.2550000000000001, 0.771, 0.13, 0.644, 0.078, 0.27899999999999997, 0.35100000000000003, 0.525, 0.735, 0.893, 0.719, 1.375, 0.42500000000000004, 0.27999999999999997, 0.255, 0.109, 0.411, 0.11, 0.172, 0.698],
    141.           "text": "Percentage Of Sales"
    142.         }]
    143.       }]
    144.     };
    145.  
    146.     zingchart.bind('myChart', 'click', function(e) {
    147.       if (e.target === "none") {
    148.         zingchart.exec('myChart', 'clearselection');
    149.       }
    150.     });
    151.  
    152.  
    153.     // Load the selection-tool and render the chart once its loaded
    154.     zingchart.loadModules('selection-tool', function() {
    155.       zingchart.render({
    156.         id: 'myChart',
    157.         data: myConfig,
    158.         height: '100%',
    159.         width: '100%',
    160.         modules: 'selection-tool'
    161.       });
    162.     });
    163.   </script>
    164. </body>
    165.  
    166. </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"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
    13. </body>
    14.  
    15. </html>
    1. html,
    2. body {
    3.   height: 100%;
    4.   width: 100%;
    5.   margin: 0;
    6.   padding: 0;
    7. }
    8.  
    9. #myChart {
    10.   height: 100%;
    11.   width: 100%;
    12.   min-height: 150px;
    13. }
    14.  
    15. .zc-ref {
    16.   display: none;
    17. }
    1. var myConfig = {
    2.   "graphset": [{
    3.     "background-color": "#ffffff",
    4.     "type": "bar",
    5.     "title": {
    6.       "text": "Multiple Selections"
    7.     },
    8.     "subtitle": {
    9.       "text": ". Click To Clear Selection"
    10.     },
    11.     "legend": {
    12.       "toggle-action": "remove",
    13.       "align": "center",
    14.       "adjust-layout": false,
    15.       "borderWidth": 0,
    16.       "verticalAlign": "bottom",
    17.       "fontColor": "#7d7d7d",
    18.       "font-size": 10,
    19.       "marginRight": 20,
    20.       "marginBottom": 0,
    21.       "marginTop": 0,
    22.       "marker": {
    23.         "type": "square"
    24.       },
    25.     },
    26.     "preview": {
    27.       "background-color": "#F5F7F3",
    28.       "border-width": 0,
    29.       "height": 29,
    30.       "preserve-zoom": false,
    31.       "mask": {
    32.         "backgroundColor": "white",
    33.         "alpha": 0.8
    34.       },
    35.       "handle": {
    36.         "border-width": 1
    37.       },
    38.       "y": "85%"
    39.     },
    40.     "scale-x": {
    41.       "zooming": true,
    42.       "zoom-to": [0, 30],
    43.       "item": {
    44.         "font-size": 10,
    45.         "font-color": "#7d7d7d"
    46.       },
    47.       "tick": {
    48.         "visible": false
    49.       },
    50.       "title": {
    51.         "text": "You can Make Multiple Selections And Click To Clear selection"
    52.       },
    53.       "minValue": 1484782109655,
    54.       "step": "day",
    55.       "transform": {
    56.         "type": "date"
    57.       }
    58.     },
    59.     "scale-y": {
    60.       "zooming": false,
    61.       "values": "0:2.503:0.5006",
    62.       "guide": {
    63.         "line-style": "dotted"
    64.       },
    65.       "item": {
    66.         "font-size": 10,
    67.         "font-color": "#7d7d7d"
    68.       },
    69.       "tick": {
    70.         "visible": false
    71.       },
    72.       "format": "%v%",
    73.       "decimals": 1
    74.     },
    75.     "zoom": {
    76.       "active": false,
    77.       "preserve-zoom": true
    78.     },
    79.     "plotarea": {
    80.       "margin-top": "20",
    81.       "margin-left": "20",
    82.       "margin": "dynamic 50 105 dynamic"
    83.     },
    84.     "plot": {
    85.       "data-append-selection": true,
    86.       "mode": "normal",
    87.       "line-width": 1,
    88.       "line-color": "#4d9900",
    89.       "background-color": "#1e88e5",
    90.       "marker": {
    91.         "size": 3,
    92.         "background-color": "#ccccff #6666ff",
    93.         "border-width": 1,
    94.         "border-color": "#4d9900"
    95.       },
    96.       "tooltip": {
    97.         "visible": true,
    98.         "text": "%kv<br>%vv"
    99.       },
    100.       "selection-mode": "multiple",
    101.       "selected-state": {
    102.         "background-color": "#ffa726",
    103.         "border-width": 0
    104.       }
    105.     },
    106.     "series": [{
    107.       "values": [0.8840000000000001, 1.9060000000000001, 1.35, 1.189, 0.984, 0.619, 0.468, 0.28700000000000003, 2.503, 1.139, 2.011, 1.7389999999999999, 0.5559999999999999, 0.22899999999999998, 0.218, 0.761, 0.58, 1.171, 0.8240000000000001, 0.721, 0.542, 0.954, 0.683, 0.976, 1.0290000000000001, 0.28800000000000003, 0.362, 0.388, 1.057, 0.886, 0.196, 0.333, 1.013, 0.541, 0.127, 0.726, 0.649, 1.031, 0.606, 1.232, 0.5459999999999999, 0.8340000000000001, 1.9869999999999999, 0.257, 0.62, 0.571, 0.194, 0.315, 0.45799999999999996, 0.14300000000000002, 0.126, 0.252, 0.588, 1.419, 0.259, 0.724, 0.295, 0.344, 0.455, 0.27699999999999997, 0.604, 0.471, 0.8200000000000001, 0.504, 0.209, 0.33999999999999997, 0.404, 0.127, 0.293, 0.326, 0.428, 0.38999999999999996, 0.562, 0.14300000000000002, 0.258, 0.414, 0.42100000000000004, 0.6669999999999999, 0.8290000000000001, 1.369, 0.261, 1.15, 0.644, 0.519, 0.44400000000000006, 0.627, 0.411, 0.447, 0.173, 0.763, 0.581, 1.2710000000000001, 0.9129999999999999, 0.988, 0.51, 0.664, 0.348, 0.5559999999999999, 0.28600000000000003, 0.424, 0.676, 0.367, 0.634, 0.47600000000000003, 0.512, 0.33999999999999997, 0.076, 0.27799999999999997, 0.291, 0.402, 0.199, 0.21, 0.261, 0.178, 0.315, 0.6459999999999999, 0.482, 0.08499999999999999, 0.068, 0.40099999999999997, 0.135, 0.679, 0.769, 1.113, 0.315, 0.37, 0.267, 0.145, 1.2309999999999999, 0.126, 0.217, 1.0670000000000002, 2.213, 0.687, 0.63, 0.498, 0.428, 0.154, 0.27299999999999996, 0.161, 0.28900000000000003, 0.8130000000000001, 0.406, 0.553, 0.584, 0.73, 0.347, 0.194, 0.439, 0.28800000000000003, 0.561, 0.22499999999999998, 1.2550000000000001, 0.771, 0.13, 0.644, 0.078, 0.27899999999999997, 0.35100000000000003, 0.525, 0.735, 0.893, 0.719, 1.375, 0.42500000000000004, 0.27999999999999997, 0.255, 0.109, 0.411, 0.11, 0.172, 0.698],
    108.       "text": "Percentage Of Sales"
    109.     }]
    110.   }]
    111. };
    112.  
    113. zingchart.bind('myChart', 'click', function(e) {
    114.   if (e.target === "none") {
    115.     zingchart.exec('myChart', 'clearselection');
    116.   }
    117. });
    118.  
    119.  
    120. // Load the selection-tool and render the chart once its loaded
    121. zingchart.loadModules('selection-tool', function() {
    122.   zingchart.render({
    123.     id: 'myChart',
    124.     data: myConfig,
    125.     height: '100%',
    126.     width: '100%',
    127.     modules: 'selection-tool'
    128.   });
    129. });