• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
      <script src="//cdn.zingchart.com/zingchart.jquery.min.js "></script>
    
      <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
      <style>
        body {
          font-family: Helvetica;
          text-align: center;
          padding: 20px;
        }
    
        #myChart {
          width: 100%;
          height: 300px;
        }
    
        #docs {
          display: block;
          margin-top: 20px;
          background-color: #00BAF0;
          color: #FFF;
          padding: 10px 20px;
          text-decoration: none;
        }
    
        #myTable {
          margin-top: 20px;
          font-size: 12px;
          text-align: center;
        }
    
        .hover {
          background-color: #FC3;
        }
      </style>
    </head>
    
    <body>
      <h3>Mouse over a node to see the table update.</h3>
      <div id="myChart"></div>
      <table id="myTable" style="width:100%">
        <tr>
          <th>Node 0</th>
          <th>Node 1</th>
          <th>Node 2</th>
          <th>Node 3</th>
          <th>Node 4</th>
          <th>Node 5</th>
        </tr>
        <tr>
          <td>--</td>
          <td>--</td>
          <td>--</td>
          <td>--</td>
          <td>--</td>
          <td>--</td>
        </tr>
      </table>
    
      <a id="docs" target="_blank" href='https://github.com/zingchart/ZingChart-jQuery'>Check out our documentation on GitHub!</a>
    
      <script>
        ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // Data for the chart
        var myData = {
          type: "bar",
          series: [{
            values: [3, 7, 10, 2, 6, 5]
          }]
        };
    
        // Make your chart
        $("#myChart").zingchart({
          data: myData
        });
    
        // Bind an event listener to node hover
        $("#myChart").nodeHover(
    
          // plotMouseOver function
          function() {
            // Get all values for the hovered plot
            var plotVals = $(this).getPlotValues({
              plotindex: this.event.plotindex
            });
    
            // Get hover node index
            var idx = this.event.nodeindex;
    
            for (var i = 0; i < plotVals.length; i++) {
              // Set each table elem equal to the cooresponding node
              $("#myTable td").eq(i).text(plotVals[i])
              // Highlight the corresponding hovered node in the table
              $("#myTable td").eq(idx).addClass("hover");
            }
          },
    
          // plotMouseOut function
          function() {
            // Reset the table text
            $("#myTable td").each(function() {
              $(this).text("--").removeClass("hover");
            });
          });
      </script>
    </body>
    
    </html>
    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
      <script src="//cdn.zingchart.com/zingchart.jquery.min.js "></script>
    
      <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    </head>
    
    <body>
      <h3>Mouse over a node to see the table update.</h3>
      <div id="myChart"></div>
      <table id="myTable" style="width:100%">
        <tr>
          <th>Node 0</th>
          <th>Node 1</th>
          <th>Node 2</th>
          <th>Node 3</th>
          <th>Node 4</th>
          <th>Node 5</th>
        </tr>
        <tr>
          <td>--</td>
          <td>--</td>
          <td>--</td>
          <td>--</td>
          <td>--</td>
          <td>--</td>
        </tr>
      </table>
    
      <a id="docs" target="_blank" href='https://github.com/zingchart/ZingChart-jQuery'>Check out our documentation on GitHub!</a>
    
    </body>
    
    </html>
    body {
      font-family: Helvetica;
      text-align: center;
      padding: 20px;
    }
    
    #myChart {
      width: 100%;
      height: 300px;
    }
    
    #docs {
      display: block;
      margin-top: 20px;
      background-color: #00BAF0;
      color: #FFF;
      padding: 10px 20px;
      text-decoration: none;
    }
    
    #myTable {
      margin-top: 20px;
      font-size: 12px;
      text-align: center;
    }
    
    .hover {
      background-color: #FC3;
    }
    // Data for the chart
    var myData = {
      type: "bar",
      series: [{
        values: [3, 7, 10, 2, 6, 5]
      }]
    };
    
    // Make your chart
    $("#myChart").zingchart({
      data: myData
    });
    
    // Bind an event listener to node hover
    $("#myChart").nodeHover(
    
      // plotMouseOver function
      function() {
        // Get all values for the hovered plot
        var plotVals = $(this).getPlotValues({
          plotindex: this.event.plotindex
        });
    
        // Get hover node index
        var idx = this.event.nodeindex;
    
        for (var i = 0; i < plotVals.length; i++) {
          // Set each table elem equal to the cooresponding node
          $("#myTable td").eq(i).text(plotVals[i])
          // Highlight the corresponding hovered node in the table
          $("#myTable td").eq(idx).addClass("hover");
        }
      },
    
      // plotMouseOut function
      function() {
        // Reset the table text
        $("#myTable td").each(function() {
          $(this).text("--").removeClass("hover");
        });
      });