Highcharts with datatables to only display chart details on the current page selected

salamsd

Description of problem: Let's say i have a table with 10 pages, i need to create a chart that only populates the values in the current selected page dynamically, how can that be done?

colin

You can use the selector-modifier {page: 'current'} when you call rows(),

Colin

sandy

Hi @salamsd,

We actually have a blog post that is pending release that shows how to integrate DataTables with HighCharts. We hope to release it on monday so keep an eye out for that.

In the mean time, take a look at this example. It should show what you are looking for.

Thanks,
Sandy

salamsd

<script>
$(document).ready(function() {
var table = $('#example').DataTable();
var data = table.rows().data();

var categories=[]; //creating array for storing browser type in array.
    for(var i=0;i<data.page.len();i++){
    categories.push(data[i][0]);
    }
var  count = {}; //creating object for getting categories with count
categories.forEach(function(i) {
    count[i] = (count[i]||0)+1;  
});

//console.log(count)
var series_data=[]; //creating empty array for highcharts series data
var categores=[];//creating empty array for highcharts categories
Object.keys(count).map(function(item, key) {
  series_data.push(count[item]);
  categores.push(item);
});
//console.log(series_data)
plotChart(series_data,categores)
} );

function plotChart(series_data,categores){
Highcharts.chart('container', {
        chart:{
    type:'column'
    },
    xAxis: {
        categories: categores
    },
     yAxis: {
       
        title: {
            text: 'Count'
        }
    },
    series:[{
    name:'Browser',
    data:series_data
    }]

});
}
</script>

Thanks for the reply, i'm using this code. I checked the example provided it's not really what i'm looking for. What i need is let's say we have 1- rows per page in the datatable, once i change to page 2 i need the chart to populate the new values in the next 10 rows and show the chart accordingly.

sandy

Hi @salamsd ,

In that case all you have to do is add a listener for the page event. Take a look at this example.

Thanks,
Sandy

salamsd

Thanks again, got it to work with your example