• 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.       type: 'bar',
    36.       title: {
    37.         text: 'Click And Drag To Zoom'
    38.       },
    39.       subtitle: {
    40.         text: 'Reset button will appear on zoom and disappear when no zoom'
    41.       },
    42.       series: [{
    43.         values: [10, 23, 45, 63, 23, 90, 86, 52, 19]
    44.       }],
    45.       scaleX: {
    46.         zooming: true
    47.       },
    48.       labels: [{
    49.         id: 'zoom-out-to-start',
    50.         text: 'Reset Zoom',
    51.         backgroundColor: '#c3c3c3',
    52.         x: '100%',
    53.         y: 5,
    54.         offsetX: -120,
    55.         padding: 10,
    56.         cursor: 'pointer',
    57.         visible: false, // hide label by default
    58.         flat: false, // makes label clickable
    59.         borderRadius: 5,
    60.         hoverState: {
    61.           fontColor: '#424242',
    62.           border: '1px solid black'
    63.         }
    64.       }]
    65.     };
    66.  
    67.     zingchart.bind('myChart', 'label_click', function(e) {
    68.       if (e.labelid === 'zoom-out-to-start') {
    69.         zingchart.exec('myChart', 'viewall');
    70.       }
    71.     });
    72.  
    73.     zingchart.bind('myChart', 'zoom', function(e) {
    74.       console.log(e)
    75.       // hide zoom button
    76.       if (e.action && e.action === 'viewall' || (!e.xzoomed && !e.yzoomed)) {
    77.         zingchart.exec('myChart', 'updateobject', {
    78.           type: 'label',
    79.           data: {
    80.             id: 'zoom-out-to-start',
    81.             visible: false
    82.           }
    83.         });
    84.       } else {
    85.         zingchart.exec('myChart', 'updateobject', {
    86.           type: 'label',
    87.           data: {
    88.             id: 'zoom-out-to-start',
    89.             visible: true
    90.           }
    91.         });
    92.       }
    93.     });
    94.  
    95.     zingchart.render({
    96.       id: 'myChart',
    97.       data: myConfig,
    98.       height: '100%',
    99.       width: '100%'
    100.     });
    101.   </script>
    102. </body>
    103.  
    104. </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.   type: 'bar',
    3.   title: {
    4.     text: 'Click And Drag To Zoom'
    5.   },
    6.   subtitle: {
    7.     text: 'Reset button will appear on zoom and disappear when no zoom'
    8.   },
    9.   series: [{
    10.     values: [10, 23, 45, 63, 23, 90, 86, 52, 19]
    11.   }],
    12.   scaleX: {
    13.     zooming: true
    14.   },
    15.   labels: [{
    16.     id: 'zoom-out-to-start',
    17.     text: 'Reset Zoom',
    18.     backgroundColor: '#c3c3c3',
    19.     x: '100%',
    20.     y: 5,
    21.     offsetX: -120,
    22.     padding: 10,
    23.     cursor: 'pointer',
    24.     visible: false, // hide label by default
    25.     flat: false, // makes label clickable
    26.     borderRadius: 5,
    27.     hoverState: {
    28.       fontColor: '#424242',
    29.       border: '1px solid black'
    30.     }
    31.   }]
    32. };
    33.  
    34. zingchart.bind('myChart', 'label_click', function(e) {
    35.   if (e.labelid === 'zoom-out-to-start') {
    36.     zingchart.exec('myChart', 'viewall');
    37.   }
    38. });
    39.  
    40. zingchart.bind('myChart', 'zoom', function(e) {
    41.   console.log(e)
    42.   // hide zoom button
    43.   if (e.action && e.action === 'viewall' || (!e.xzoomed && !e.yzoomed)) {
    44.     zingchart.exec('myChart', 'updateobject', {
    45.       type: 'label',
    46.       data: {
    47.         id: 'zoom-out-to-start',
    48.         visible: false
    49.       }
    50.     });
    51.   } else {
    52.     zingchart.exec('myChart', 'updateobject', {
    53.       type: 'label',
    54.       data: {
    55.         id: 'zoom-out-to-start',
    56.         visible: true
    57.       }
    58.     });
    59.   }
    60. });
    61.  
    62. zingchart.render({
    63.   id: 'myChart',
    64.   data: myConfig,
    65.   height: '100%',
    66.   width: '100%'
    67. });