• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <script nonce="undefined" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
    8.   <script nonce="undefined" src="//cdn.zingchart.com/zingchart.jquery.min.js "></script>
    9.  
    10.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    11.   <style>
    12.     body {
    13.       font-family: Helvetica;
    14.       padding: 20px;
    15.     }
    16.  
    17.     h3 {
    18.       text-align: center;
    19.     }
    20.  
    21.     #myChart {
    22.       width: 100%;
    23.       height: 300px;
    24.     }
    25.  
    26.     #docs {
    27.       display: block;
    28.       margin-top: 20px;
    29.       background-color: #00BAF0;
    30.       color: #FFF;
    31.       padding: 10px 20px;
    32.       text-decoration: none;
    33.       text-align: center;
    34.     }
    35.   </style>
    36. </head>
    37.  
    38. <body>
    39.   <h3>Double click a plot to toggle plots' visibility</h3>
    40.   <div id="myChart"></div>
    41.   <a id="docs" target="_blank" href='https://github.com/zingchart/ZingChart-jQuery'>Check out our documentation on GitHub!</a>
    42.   <script>
    43.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // Data for the chart
    44.     var myData = {
    45.       type: "bar",
    46.       series: [{
    47.           values: [3, 7, 10, 2, 6, 5]
    48.         },
    49.         {
    50.           values: [5, 6, 2, 10, 7, 3]
    51.         },
    52.         {
    53.           values: [10, 3, 8, 4, 2, 7]
    54.         },
    55.         {
    56.           values: [9, 8, 7, 6, 5, 4]
    57.         },
    58.         {
    59.           values: [1, 2, 4, 6, 8, 10]
    60.         }
    61.  
    62.       ]
    63.     };
    64.  
    65.     // Make your chart
    66.     $("#myChart").zingchart({
    67.       data: myData
    68.     });
    69.  
    70.     // Set a flag for toggling clicks
    71.     var hidden = false;
    72.  
    73.     // Bind a double click event
    74.     $("#myChart").plotDoubleClick(function() {
    75.       // If plots are hidden, show all plots.
    76.       if (hidden) {
    77.         $(this).showAllPlots();
    78.       }
    79.       // Otherwise, hide all plots but the one clicked.
    80.       else {
    81.         $(this).hideAllPlotsBut({
    82.           plotindex: this.event.plotindex
    83.         });
    84.       }
    85.       // Invert the hidden flag.
    86.       hidden = !hidden;
    87.     });
    88.   </script>
    89. </body>
    90.  
    91. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
    8.   <script src="//cdn.zingchart.com/zingchart.jquery.min.js "></script>
    9.  
    10.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    11. </head>
    12.  
    13. <body>
    14.   <h3>Double click a plot to toggle plots' visibility</h3>
    15.   <div id="myChart"></div>
    16.   <a id="docs" target="_blank" href='https://github.com/zingchart/ZingChart-jQuery'>Check out our documentation on GitHub!</a>
    17. </body>
    18.  
    19. </html>
    1. body {
    2.   font-family: Helvetica;
    3.   padding: 20px;
    4. }
    5.  
    6. h3 {
    7.   text-align: center;
    8. }
    9.  
    10. #myChart {
    11.   width: 100%;
    12.   height: 300px;
    13. }
    14.  
    15. #docs {
    16.   display: block;
    17.   margin-top: 20px;
    18.   background-color: #00BAF0;
    19.   color: #FFF;
    20.   padding: 10px 20px;
    21.   text-decoration: none;
    22.   text-align: center;
    23. }
    1. // Data for the chart
    2. var myData = {
    3.   type: "bar",
    4.   series: [{
    5.       values: [3, 7, 10, 2, 6, 5]
    6.     },
    7.     {
    8.       values: [5, 6, 2, 10, 7, 3]
    9.     },
    10.     {
    11.       values: [10, 3, 8, 4, 2, 7]
    12.     },
    13.     {
    14.       values: [9, 8, 7, 6, 5, 4]
    15.     },
    16.     {
    17.       values: [1, 2, 4, 6, 8, 10]
    18.     }
    19.  
    20.   ]
    21. };
    22.  
    23. // Make your chart
    24. $("#myChart").zingchart({
    25.   data: myData
    26. });
    27.  
    28. // Set a flag for toggling clicks
    29. var hidden = false;
    30.  
    31. // Bind a double click event
    32. $("#myChart").plotDoubleClick(function() {
    33.   // If plots are hidden, show all plots.
    34.   if (hidden) {
    35.     $(this).showAllPlots();
    36.   }
    37.   // Otherwise, hide all plots but the one clicked.
    38.   else {
    39.     $(this).hideAllPlotsBut({
    40.       plotindex: this.event.plotindex
    41.     });
    42.   }
    43.   // Invert the hidden flag.
    44.   hidden = !hidden;
    45. });