Datatables with CanvasJS

Question

I'm using datatables to display my query output and I have set search ids to use as ids for buttons to filter in the table:

$('#Scheduled').on('click', function () {
    dataTables.columns(11).search("Scheduled").draw();});

$('#Review').on('click', function () {
dataTables.columns(11).search("In Review").draw();});

$('#Upcoming').on('click', function () {
dataTables.columns(11).search("Up Coming").draw();});


$('#Services').on('click', function () {
dataTables.columns(11).search("Cust Connection").draw();});

With this I'm using a CanvasJS graph:

window.onload = function () {

var chart = new CanvasJS.Chart("chartContainer", {
    animationEnabled: true,
    theme: "dark2", // "light1", "light2", "dark1", "dark2"
    title:{
        text: "Top Oil Reserves"
    },
    axisY: {
        title: "Reserves(MMbbl)"
    },
    data: [{        
        type: "column",  
        showInLegend: true, 
        legendMarkerColor: "grey",
        legendText: "MMbbl = one million barrels",
        dataPoints: [      
            { y: <?echo $Count_Upcoming;?>, label: "Upcoming" },
            { y: <?echo $Count_Planned;?>,  label: "Scheduled" },
            { y: <?echo $Count_Review;?>,  label: "In Review" },
            { y: <?echo $Count_Trouble;?>,  label: "Trouble" },
            { y: <?echo $Count_Maint;?>,  label: "UG Maintenance" },
            { y: <?echo $Count_CUST;?>, label: "Services" }
        ]
    }]
});
chart.render();

}

Is there any way where when I click on the graph bar to filter in the table. My idea is to give the bar and id or an href that will filter the table by clicking on the canvasJS bar as in HTML:

<h3><strong><a id = "Scheduled" href="#"><?echo $Count_Planned;?></a></strong></h3>

Answer 1

CanvasJS has a built in click handler for your data that will be exactly what you need. You can use it like so:

data: [{
  dataPoints: [      
      { y: <?echo $Count_Upcoming;?>, label: "Upcoming" },
      { y: <?echo $Count_Planned;?>,  label: "Scheduled" },
      { y: <?echo $Count_Review;?>,  label: "In Review" },
      { y: <?echo $Count_Trouble;?>,  label: "Trouble" },
      { y: <?echo $Count_Maint;?>,  label: "UG Maintenance" },
      { y: <?echo $Count_CUST;?>, label: "Services" }
  ],
  click: function (e) {
    var label = e.dataPoint.label;
    dataTables.columns(11).search(label).draw();
  }
}]