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 class="container">
<table id="example1" class="display nowrap" 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>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 class="container">
<table id="example1" class="display nowrap" 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>