How To filter Data Table on Click on High Charts Graph Data


In my previous post you have seen how to trigger click event on Google charts and HighCharts.In this post i will show you how to filter data in data table base on high chart click event
HighCharts Click Event Code:
 series: {
                cursor: 'pointer',
                point: {
                events: {
                    click: function () {
               alert('Category: ' + this.series.name +', Type: '+this.category+ ', value: ' +this.y);
                       tableFilter(this.series.name,this.category,this.y);
                    }
                }
              }
              }

Function to filter data based on Click event:
function tableFilter(status,category,value){
    alert(status+" "+category+" "+value)
     var oTable = $('#example').DataTable()
     oTable.search( '' ).columns().search( '' ) .draw();
     var cate
         cate = category
        alert(status)
             oTable.columns(0).search(status).draw();//here we have to provide column index and search string   
             oTable.columns(1).search(cate).draw();
            
         }



 You can go through sample code in my JS fiddle:

    


No comments:

Post a Comment