ZingChart jQuery Event Demo

A quick demonstration of how events work with the ZingChart jQuery wrapper.

by ZingChart Library

HTML

<script src="https://rawgit.com/PINT/ZingChart-jQuery/master/zingchart.jquery.js"></script>
<script src="http://cdn.zingchart.com/zingchart.min.js"></script>
<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='http://www.github.com/PINT/ZingChart-jQuery'>Check out our documentation on GitHub!</a>

CSS

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;
}

JavaScript

// 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");
    });
});