jquery datatable to highcharts

问题:

"Hi everyone. I was wondering how I could pass, dynamically, jquery datatable values to highcharts from the code below. Variables like xAxis and the 2 yAxis". I do have more than 3 columns I should say, but not included here. mySql feed data to php who returns value as json format for datatable. Surely Highcharts can use this info without calling mysql again.

                <thead>
                  <tr>
                    <th>Date</th>
                    <th>Generated kW</th>
                    <th>Efficiency %</th>
                  </tr>
                </thead>
<script type="text/javascript">
$(document).ready(function() {
    var table = $('#chartdaytable').dataTable({
        "bProcessing": true,
        "sAjaxSource": "../../php/ChartDayTable.php",
        "bPaginate":true,
        "sPaginationType":"full_numbers",
        "iDisplayLength": 25,
        "aaSorting": [[ 0, "desc" ]],
        "aoColumns": [
            { mData: 'date' } ,
            { mData: 'day_energy' },
            { mData: 'efficiency' }
        ]
    });
    $('#chartgen').highcharts({
        data: {
            table: 'chartdaytable',
            endColumn: 2,
        },
        chart: {
            zoomType: 'xy',
        },
        xAxis: [{
            //categories: 'some data',
        }],
        series: [{
            name: 'Generation',
            type: 'column',
            yAxis: 0,
            //data: 'some data',
        }, {
            name: 'Efficiency',
            type: 'spline',
            yAxis: 1,
            //data: 'some data',
        }]
    });
});
</script>

回答1:

This is example with static datatables. This will give some idea to get started. Check comment in snippet, if some doubt please comment

$(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.length; 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
    }]

  });
}

Fiddle Demonstration

Update This is server side sample which populate the chart after loading data in datatables.

JS code

$(document).ready(function() {

  var url = 'http://www.json-generator.com/api/json/get/cbEfqLwFaq?indent=2';

  var table = $('#example').DataTable({
    'processing': true,
    'serverSide': true,
    'ajax': {
      type: 'POST',
      'url': url,
      'data': function(d) {
        console.log(d.order);
        return JSON.stringify(d);
      }
    },
    "initComplete": function(settings, json) {
      data = table.rows().data()

      var categories = []; //creating array for storing browser type in array.
      var series_data = [];
      for (var i = 0; i < data.length; i++) {
        categories.push(data[i][0])
        series_data.push(Number([data[i][5].match(/\d/g).join("")]))
      }

      plotChart(categories, series_data)
    }
  });

  //
  //
  $('#reload').click(function(e) {
    table.ajax.reload();
  });

  //    
});

function plotChart(categories, series_data) {
  Highcharts.chart('container', {
    chart: {
      type: 'column'
    },
    xAxis: {
      categories: categories
    },
    yAxis: {

      title: {
        text: 'Count'
      }
    },
    series: [{
      name: 'person',
      data: series_data
    }]

  });
}

HTML

<button id="reload">reload table</button>
<button class="toggleCols" data-column="0">First Name</button>

<br>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container"></div>
<br>
<table id="example" class="display" width="100%" cellspacing="0">
  <thead>
    <tr>
      <th>First name</th>
      <th>Last name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>First name</th>
      <th>Last name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </tfoot>
</table>

Fiddle Demo