• 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.       text-align: center;
    15.       padding: 20px;
    16.     }
    17.  
    18.     #myChart {
    19.       width: 100%;
    20.       height: 300px;
    21.     }
    22.  
    23.     #docs {
    24.       display: block;
    25.       margin-top: 20px;
    26.       background-color: #00BAF0;
    27.       color: #FFF;
    28.       padding: 10px 20px;
    29.       text-decoration: none;
    30.     }
    31.  
    32.     #myTable {
    33.       margin-top: 20px;
    34.       font-size: 12px;
    35.       text-align: center;
    36.     }
    37.  
    38.     .hover {
    39.       background-color: #FC3;
    40.     }
    41.   </style>
    42. </head>
    43.  
    44. <body>
    45.   <h3>Mouse over a node to see the table update.</h3>
    46.   <div id="myChart"></div>
    47.   <table id="myTable" style="width:100%">
    48.     <tr>
    49.       <th>Node 0</th>
    50.       <th>Node 1</th>
    51.       <th>Node 2</th>
    52.       <th>Node 3</th>
    53.       <th>Node 4</th>
    54.       <th>Node 5</th>
    55.     </tr>
    56.     <tr>
    57.       <td>--</td>
    58.       <td>--</td>
    59.       <td>--</td>
    60.       <td>--</td>
    61.       <td>--</td>
    62.       <td>--</td>
    63.     </tr>
    64.   </table>
    65.  
    66.   <a id="docs" target="_blank" href='https://github.com/zingchart/ZingChart-jQuery'>Check out our documentation on GitHub!</a>
    67.  
    68.   <script>
    69.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // Data for the chart
    70.     var myData = {
    71.       type: "bar",
    72.       series: [{
    73.         values: [3, 7, 10, 2, 6, 5]
    74.       }]
    75.     };
    76.  
    77.     // Make your chart
    78.     $("#myChart").zingchart({
    79.       data: myData
    80.     });
    81.  
    82.     // Bind an event listener to node hover
    83.     $("#myChart").nodeHover(
    84.  
    85.       // plotMouseOver function
    86.       function() {
    87.         // Get all values for the hovered plot
    88.         var plotVals = $(this).getPlotValues({
    89.           plotindex: this.event.plotindex
    90.         });
    91.  
    92.         // Get hover node index
    93.         var idx = this.event.nodeindex;
    94.  
    95.         for (var i = 0; i < plotVals.length; i++) {
    96.           // Set each table elem equal to the cooresponding node
    97.           $("#myTable td").eq(i).text(plotVals[i])
    98.           // Highlight the corresponding hovered node in the table
    99.           $("#myTable td").eq(idx).addClass("hover");
    100.         }
    101.       },
    102.  
    103.       // plotMouseOut function
    104.       function() {
    105.         // Reset the table text
    106.         $("#myTable td").each(function() {
    107.           $(this).text("--").removeClass("hover");
    108.         });
    109.       });
    110.   </script>
    111. </body>
    112.  
    113. </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>Mouse over a node to see the table update.</h3>
    15.   <div id="myChart"></div>
    16.   <table id="myTable" style="width:100%">
    17.     <tr>
    18.       <th>Node 0</th>
    19.       <th>Node 1</th>
    20.       <th>Node 2</th>
    21.       <th>Node 3</th>
    22.       <th>Node 4</th>
    23.       <th>Node 5</th>
    24.     </tr>
    25.     <tr>
    26.       <td>--</td>
    27.       <td>--</td>
    28.       <td>--</td>
    29.       <td>--</td>
    30.       <td>--</td>
    31.       <td>--</td>
    32.     </tr>
    33.   </table>
    34.  
    35.   <a id="docs" target="_blank" href='https://github.com/zingchart/ZingChart-jQuery'>Check out our documentation on GitHub!</a>
    36.  
    37. </body>
    38.  
    39. </html>
    1. body {
    2.   font-family: Helvetica;
    3.   text-align: center;
    4.   padding: 20px;
    5. }
    6.  
    7. #myChart {
    8.   width: 100%;
    9.   height: 300px;
    10. }
    11.  
    12. #docs {
    13.   display: block;
    14.   margin-top: 20px;
    15.   background-color: #00BAF0;
    16.   color: #FFF;
    17.   padding: 10px 20px;
    18.   text-decoration: none;
    19. }
    20.  
    21. #myTable {
    22.   margin-top: 20px;
    23.   font-size: 12px;
    24.   text-align: center;
    25. }
    26.  
    27. .hover {
    28.   background-color: #FC3;
    29. }
    1. // Data for the chart
    2. var myData = {
    3.   type: "bar",
    4.   series: [{
    5.     values: [3, 7, 10, 2, 6, 5]
    6.   }]
    7. };
    8.  
    9. // Make your chart
    10. $("#myChart").zingchart({
    11.   data: myData
    12. });
    13.  
    14. // Bind an event listener to node hover
    15. $("#myChart").nodeHover(
    16.  
    17.   // plotMouseOver function
    18.   function() {
    19.     // Get all values for the hovered plot
    20.     var plotVals = $(this).getPlotValues({
    21.       plotindex: this.event.plotindex
    22.     });
    23.  
    24.     // Get hover node index
    25.     var idx = this.event.nodeindex;
    26.  
    27.     for (var i = 0; i < plotVals.length; i++) {
    28.       // Set each table elem equal to the cooresponding node
    29.       $("#myTable td").eq(i).text(plotVals[i])
    30.       // Highlight the corresponding hovered node in the table
    31.       $("#myTable td").eq(idx).addClass("hover");
    32.     }
    33.   },
    34.  
    35.   // plotMouseOut function
    36.   function() {
    37.     // Reset the table text
    38.     $("#myTable td").each(function() {
    39.       $(this).text("--").removeClass("hover");
    40.     });
    41.   });