Home > Software engineering >  How can I get the HTML table's last row to not display on Highcharts?
How can I get the HTML table's last row to not display on Highcharts?

Time:12-13

I am using the following Highcharts to extract data from a datatable. Highcharts functions okay, but there is a case where I don't want to show the last row from the table because it is the "Total" . Is there a way I can not display last row? This is the code.

http://live.datatables.net/nuyopuxe/5/edit

$(document).ready(function() {

  var allSeriesData = [];
  var categories = [];

  var table = $("#example1").DataTable({
    initComplete: function(settings, json) {
      let api = new $.fn.dataTable.Api(settings);

      // get the x-axis caregories from the table headings:
      var headers = api.columns().header().toArray();
      headers.forEach(function(heading, index) {
        if (index > 0 && index < headers.length ) {
          categories.push($(heading).html());
        }
      });

      // get the seris data as an array of numbers from the table row data:
      let rows = api.rows().data().toArray();
      rows.forEach(function(row) {
        group = {
          name: '',
          data: []
        };
        row.forEach(function(cell, idx) {
          if (idx == 0) {
            group.name = cell;
          } else if (idx < row.length ) {
            group.data.push(parseFloat(cell.replace(/,/g, '')));
          }
        });
        allSeriesData.push(group);
      });  
    }
  });

  var myChart = Highcharts.chart("container", {
    chart: {
      type: "column"
    },
    title: {
      text: "Test Data"
    },
    xAxis: {
      categories: categories
    },
    series: allSeriesData
  });

});
<!DOCTYPE html>
<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

    <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <div id="container" style="width:100%; height:400px;"></div>
    <div >
      <table id="example1"  width="100%">
        <thead>
          <tr>
             <th>Numbers</th>
            <th>Data1</th>
            <th>Data2</th>
            <th>Data3</th>
            <th>Data4</th>
            
          </tr>
        </thead>

        <tfoot>
          <tr>
            <th>Numbers</th>
            <th>Data1</th>
            <th>Data2</th>
            <th>Data3</th>
            <th>Data4</th>
           
          </tr>
        </tfoot>

        <tbody>
          <tr>
<td scope="row" style=" text-align: center;">1900</td>
<td style=" text-align: center;">10,000</td>
<td style=" text-align: center;">19,000</td>
<td style=" text-align: center;">5000</td>
<td style=" text-align: center;">5000</td>
</tr>

<tr>
<td scope="row" style=" text-align: center;">9000</td>
<td style=" text-align: center;">22,142</td>
<td style=" text-align: center;">18,481</td>
<td style=" text-align: center;">877</td>
<td style=" text-align: center;">41,500</td>
</tr>

<tr>
<td scope="row" style=" text-align: center;">8900</td>
<td style=" text-align: center;">20,038</td>
<td style=" text-align: center;">16,700</td>
<td style=" text-align: center;">658</td>
<td style=" text-align: center;">37,396</td>
</tr>

<tr>
<td scope="row" style=" text-align: center;">6600</td>
<td style=" text-align: center;">22,195</td>
<td style=" text-align: center;">16,489</td>
<td style=" text-align: center;">796</td>
<td style=" text-align: center;">39,480</td>
</tr>

<tr>
<td scope="row" style=" text-align: center;">Total</td>
<td style=" text-align: center;">21,836</td>
<td style=" text-align: center;">13,958</td>
<td style=" text-align: center;">1,239</td>
<td style=" text-align: center;">37,033</td>
</tr>
</table>

CodePudding user response:

Just add myChart.series[4].remove();. Other options are using endRow or remove it in the complete callback, but you don't seem to be using the data module.

$(document).ready(function() {

  var allSeriesData = [];
  var categories = [];

  var table = $("#example1").DataTable({
    initComplete: function(settings, json) {
      let api = new $.fn.dataTable.Api(settings);

      // get the x-axis caregories from the table headings:
      var headers = api.columns().header().toArray();
      headers.forEach(function(heading, index) {
        if (index > 0 && index < headers.length ) {
          categories.push($(heading).html());
        }
      });

      // get the seris data as an array of numbers from the table row data:
      let rows = api.rows().data().toArray();
      rows.forEach(function(row) {
        group = {
          name: '',
          data: []
        };
        row.forEach(function(cell, idx) {
          if (idx == 0) {
            group.name = cell;
          } else if (idx < row.length ) {
            group.data.push(parseFloat(cell.replace(/,/g, '')));
          }
        });
        allSeriesData.push(group);
      });  
    }
  });

  var myChart = Highcharts.chart("container", {
    chart: {
      type: "column"
    },
    title: {
      text: "Test Data"
    },
    xAxis: {
      categories: categories
    },
    series: allSeriesData
  });
  
  myChart.series[4].remove();

});
<!DOCTYPE html>
<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

    <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <div id="container" style="width:100%; height:400px;"></div>
    <div >
      <table id="example1"  width="100%">
        <thead>
          <tr>
             <th>Numbers</th>
            <th>Data1</th>
            <th>Data2</th>
            <th>Data3</th>
            <th>Data4</th>
            
          </tr>
        </thead>

        <tfoot>
          <tr>
            <th>Numbers</th>
            <th>Data1</th>
            <th>Data2</th>
            <th>Data3</th>
            <th>Data4</th>
           
          </tr>
        </tfoot>

        <tbody>
          <tr>
<td scope="row" style=" text-align: center;">1900</td>
<td style=" text-align: center;">10,000</td>
<td style=" text-align: center;">19,000</td>
<td style=" text-align: center;">5000</td>
<td style=" text-align: center;">5000</td>
</tr>

<tr>
<td scope="row" style=" text-align: center;">9000</td>
<td style=" text-align: center;">22,142</td>
<td style=" text-align: center;">18,481</td>
<td style=" text-align: center;">877</td>
<td style=" text-align: center;">41,500</td>
</tr>

<tr>
<td scope="row" style=" text-align: center;">8900</td>
<td style=" text-align: center;">20,038</td>
<td style=" text-align: center;">16,700</td>
<td style=" text-align: center;">658</td>
<td style=" text-align: center;">37,396</td>
</tr>

<tr>
<td scope="row" style=" text-align: center;">6600</td>
<td style=" text-align: center;">22,195</td>
<td style=" text-align: center;">16,489</td>
<td style=" text-align: center;">796</td>
<td style=" text-align: center;">39,480</td>
</tr>

<tr>
<td scope="row" style=" text-align: center;">Total</td>
<td style=" text-align: center;">21,836</td>
<td style=" text-align: center;">13,958</td>
<td style=" text-align: center;">1,239</td>
<td style=" text-align: center;">37,033</td>
</tr>
</table>

  • Related