Highcharts Integration
Recently, we've had some feedback asking about displaying information from a DataTable in a graphical format. This is quite possible to do using our API and a charting library. There are many available, but in this blog post we will use the ever popular Highcharts showing how it might be integrated into your DataTables projects.
Here is an example of the type of integration we will create there. Note that as we the filter the table, the chart is redrawn to reflect the filtered data:
Name | Position | Office | Salary |
---|---|---|---|
Tiger Nixon | System Architect | Edinburgh | $320,800 |
Garrett Winters | Accountant | Tokyo | $170,750 |
Ashton Cox | Junior Technical Author | San Francisco | $86,000 |
Cedric Kelly | Senior Javascript Developer | Edinburgh | $433,060 |
Airi Satou | Accountant | Tokyo | $162,700 |
Brielle Williamson | Integration Specialist | New York | $372,000 |
Herrod Chandler | Sales Assistant | San Francisco | $137,500 |
Rhona Davidson | Integration Specialist | Tokyo | $327,900 |
Colleen Hurst | Javascript Developer | San Francisco | $205,500 |
Sonya Frost | Software Engineer | Edinburgh | $103,600 |
Jena Gaines | Office Manager | London | $90,560 |
Quinn Flynn | Support Lead | Edinburgh | $342,000 |
Charde Marshall | Regional Director | San Francisco | $470,600 |
Haley Kennedy | Senior Marketing Designer | London | $313,500 |
Tatyana Fitzpatrick | Regional Director | London | $385,750 |
Michael Silva | Marketing Designer | London | $198,500 |
Paul Byrd | Chief Financial Officer (CFO) | New York | $725,000 |
Gloria Little | Systems Administrator | New York | $237,500 |
Bradley Greer | Software Engineer | London | $132,000 |
Dai Rios | Personnel Lead | Edinburgh | $217,500 |
Jenette Caldwell | Development Lead | New York | $345,000 |
Yuri Berry | Chief Marketing Officer (CMO) | New York | $675,000 |
Caesar Vance | Pre-Sales Support | New York | $106,450 |
Doris Wilder | Sales Assistant | Sydney | $85,600 |
Angelica Ramos | Chief Executive Officer (CEO) | London | $1,200,000 |
Gavin Joyce | Developer | Edinburgh | $92,575 |
Jennifer Chang | Regional Director | Singapore | $357,650 |
Brenden Wagner | Software Engineer | San Francisco | $206,850 |
Fiona Green | Chief Operating Officer (COO) | San Francisco | $850,000 |
Shou Itou | Regional Marketing | Tokyo | $163,000 |
Michelle House | Integration Specialist | Sydney | $95,400 |
Suki Burks | Developer | London | $114,500 |
Prescott Bartlett | Technical Author | London | $145,000 |
Gavin Cortez | Team Leader | San Francisco | $235,500 |
Martena Mccray | Post-Sales support | Edinburgh | $324,050 |
Unity Butler | Marketing Designer | San Francisco | $85,675 |
Howard Hatfield | Office Manager | San Francisco | $164,500 |
Hope Fuentes | Secretary | San Francisco | $109,850 |
Vivian Harrell | Financial Controller | San Francisco | $452,500 |
Timothy Mooney | Office Manager | London | $136,200 |
Jackson Bradshaw | Director | New York | $645,750 |
Olivia Liang | Support Engineer | Singapore | $234,500 |
Bruno Nash | Software Engineer | London | $163,500 |
Sakura Yamamoto | Support Engineer | Tokyo | $139,575 |
Thor Walton | Developer | New York | $98,540 |
Finn Camacho | Support Engineer | San Francisco | $87,500 |
Serge Baldwin | Data Coordinator | Singapore | $138,575 |
Zenaida Frank | Software Engineer | New York | $125,250 |
Zorita Serrano | Software Engineer | San Francisco | $115,000 |
Jennifer Acosta | Junior Javascript Developer | Edinburgh | $75,650 |
Cara Stevens | Sales Assistant | New York | $145,600 |
Hermione Butler | Regional Director | London | $356,250 |
Lael Greer | Systems Administrator | London | $103,500 |
Jonas Alexander | Developer | San Francisco | $86,500 |
Shad Decker | Regional Director | Edinburgh | $183,000 |
Michael Bruce | Javascript Developer | Singapore | $183,000 |
Donna Snider | Customer Support | New York | $112,000 |
In this post I'm going to walkthrough the process of linking up DataTables with Highcharts. I'll cover:
- Static charting
- Asynchronous charting
- Charting with data processing
Static Charting
Highcharts offers a wide range of different graphs and charts that are supported. I'm going to use pie charts and column graphs in this post.
A very basic pie chart initialisation is shown below:
var myChart = Highcharts.chart('container', {
chart: {
type: 'pie',
},
title: {
text: 'Staff Count Per Office',
},
series: [
{
data: countMap,
},
],
});
The config is fairly self explanatory. We are setting the chart.type
to be pie
, for a pie chart and the title.text
to Staff Count Per Office
. The series
array is being set to contain one object that contains the data required for the series.
Now all that is left to do is to collect the data from the DataTable. To do this we simply iterate through the values of the desired column, retrieved by the column().data()
method, incrementing the values as we go. The resulting binned data is then converted to a array of objects for Highcharts to use.
var table = $('#example').DataTable();
var counts = {};
// Count the number of entries for each office
table
.column(2, { search: 'applied' })
.data()
.each(function (val) {
if (counts[val]) {
counts[val] += 1;
} else {
counts[val] = 1;
}
});
// And map it to the format highcharts uses
var countMap = $.map(counts, function (val, key) {
return {
name: key,
y: val,
};
});
An example of the table and chart generated by this code is shown below. There is also a live version available so that you can modify and experiment with it.
Name | Position | Office | Salary |
---|---|---|---|
Tiger Nixon | System Architect | Edinburgh | $320,800 |
Garrett Winters | Accountant | Tokyo | $170,750 |
Ashton Cox | Junior Technical Author | San Francisco | $86,000 |
Cedric Kelly | Senior Javascript Developer | Edinburgh | $433,060 |
Airi Satou | Accountant | Tokyo | $162,700 |
Brielle Williamson | Integration Specialist | New York | $372,000 |
Herrod Chandler | Sales Assistant | San Francisco | $137,500 |
Rhona Davidson | Integration Specialist | Tokyo | $327,900 |
Colleen Hurst | Javascript Developer | San Francisco | $205,500 |
Sonya Frost | Software Engineer | Edinburgh | $103,600 |
Jena Gaines | Office Manager | London | $90,560 |
Quinn Flynn | Support Lead | Edinburgh | $342,000 |
Charde Marshall | Regional Director | San Francisco | $470,600 |
Haley Kennedy | Senior Marketing Designer | London | $313,500 |
Tatyana Fitzpatrick | Regional Director | London | $385,750 |
Michael Silva | Marketing Designer | London | $198,500 |
Paul Byrd | Chief Financial Officer (CFO) | New York | $725,000 |
Gloria Little | Systems Administrator | New York | $237,500 |
Bradley Greer | Software Engineer | London | $132,000 |
Dai Rios | Personnel Lead | Edinburgh | $217,500 |
Jenette Caldwell | Development Lead | New York | $345,000 |
Yuri Berry | Chief Marketing Officer (CMO) | New York | $675,000 |
Caesar Vance | Pre-Sales Support | New York | $106,450 |
Doris Wilder | Sales Assistant | Sydney | $85,600 |
Angelica Ramos | Chief Executive Officer (CEO) | London | $1,200,000 |
Gavin Joyce | Developer | Edinburgh | $92,575 |
Jennifer Chang | Regional Director | Singapore | $357,650 |
Brenden Wagner | Software Engineer | San Francisco | $206,850 |
Fiona Green | Chief Operating Officer (COO) | San Francisco | $850,000 |
Shou Itou | Regional Marketing | Tokyo | $163,000 |
Michelle House | Integration Specialist | Sydney | $95,400 |
Suki Burks | Developer | London | $114,500 |
Prescott Bartlett | Technical Author | London | $145,000 |
Gavin Cortez | Team Leader | San Francisco | $235,500 |
Martena Mccray | Post-Sales support | Edinburgh | $324,050 |
Unity Butler | Marketing Designer | San Francisco | $85,675 |
Howard Hatfield | Office Manager | San Francisco | $164,500 |
Hope Fuentes | Secretary | San Francisco | $109,850 |
Vivian Harrell | Financial Controller | San Francisco | $452,500 |
Timothy Mooney | Office Manager | London | $136,200 |
Jackson Bradshaw | Director | New York | $645,750 |
Olivia Liang | Support Engineer | Singapore | $234,500 |
Bruno Nash | Software Engineer | London | $163,500 |
Sakura Yamamoto | Support Engineer | Tokyo | $139,575 |
Thor Walton | Developer | New York | $98,540 |
Finn Camacho | Support Engineer | San Francisco | $87,500 |
Serge Baldwin | Data Coordinator | Singapore | $138,575 |
Zenaida Frank | Software Engineer | New York | $125,250 |
Zorita Serrano | Software Engineer | San Francisco | $115,000 |
Jennifer Acosta | Junior Javascript Developer | Edinburgh | $75,650 |
Cara Stevens | Sales Assistant | New York | $145,600 |
Hermione Butler | Regional Director | London | $356,250 |
Lael Greer | Systems Administrator | London | $103,500 |
Jonas Alexander | Developer | San Francisco | $86,500 |
Shad Decker | Regional Director | Edinburgh | $183,000 |
Michael Bruce | Javascript Developer | Singapore | $183,000 |
Donna Snider | Customer Support | New York | $112,000 |
Now that is pretty cool, but wouldn't it be better if the graph could reflect any filtering that is applied to it? Keep reading...
Asynchronous Charting
To achieve this we are going to have to make a couple of changes to the code above. We are going to take the office counting out of the $(document).ready(...)
listener and put it in its own function, replacing it with a call to our new function. The function should look something like this:
function chartData(table) {
var counts = {};
// Count the number of entries for each office
table
.column(2, { search: 'applied' })
.data()
.each(function (val) {
if (counts[val]) {
counts[val] += 1;
} else {
counts[val] = 1;
}
});
// And map it to the format highcharts uses
return $.map(counts, function (val, key) {
return {
name: key,
y: val,
};
});
}
Using this approach means that positions fall off of the chart as filtering takes place, leading to a neater charting experience.
Now all that is left is to add a listener for when the filtering occurs to tell the chart to update with new data - for this we use draw
.
table.on('draw', function () {
// Set the data for the first series to be the map returned from the chartData function
myChart.series[0].setData(chartData(table));
});
An example of this code is given below, and as before a live version showing the full, running code is available.
Name | Position | Office | Salary |
---|---|---|---|
Tiger Nixon | System Architect | Edinburgh | $320,800 |
Garrett Winters | Accountant | Tokyo | $170,750 |
Ashton Cox | Junior Technical Author | San Francisco | $86,000 |
Cedric Kelly | Senior Javascript Developer | Edinburgh | $433,060 |
Airi Satou | Accountant | Tokyo | $162,700 |
Brielle Williamson | Integration Specialist | New York | $372,000 |
Herrod Chandler | Sales Assistant | San Francisco | $137,500 |
Rhona Davidson | Integration Specialist | Tokyo | $327,900 |
Colleen Hurst | Javascript Developer | San Francisco | $205,500 |
Sonya Frost | Software Engineer | Edinburgh | $103,600 |
Jena Gaines | Office Manager | London | $90,560 |
Quinn Flynn | Support Lead | Edinburgh | $342,000 |
Charde Marshall | Regional Director | San Francisco | $470,600 |
Haley Kennedy | Senior Marketing Designer | London | $313,500 |
Tatyana Fitzpatrick | Regional Director | London | $385,750 |
Michael Silva | Marketing Designer | London | $198,500 |
Paul Byrd | Chief Financial Officer (CFO) | New York | $725,000 |
Gloria Little | Systems Administrator | New York | $237,500 |
Bradley Greer | Software Engineer | London | $132,000 |
Dai Rios | Personnel Lead | Edinburgh | $217,500 |
Jenette Caldwell | Development Lead | New York | $345,000 |
Yuri Berry | Chief Marketing Officer (CMO) | New York | $675,000 |
Caesar Vance | Pre-Sales Support | New York | $106,450 |
Doris Wilder | Sales Assistant | Sydney | $85,600 |
Angelica Ramos | Chief Executive Officer (CEO) | London | $1,200,000 |
Gavin Joyce | Developer | Edinburgh | $92,575 |
Jennifer Chang | Regional Director | Singapore | $357,650 |
Brenden Wagner | Software Engineer | San Francisco | $206,850 |
Fiona Green | Chief Operating Officer (COO) | San Francisco | $850,000 |
Shou Itou | Regional Marketing | Tokyo | $163,000 |
Michelle House | Integration Specialist | Sydney | $95,400 |
Suki Burks | Developer | London | $114,500 |
Prescott Bartlett | Technical Author | London | $145,000 |
Gavin Cortez | Team Leader | San Francisco | $235,500 |
Martena Mccray | Post-Sales support | Edinburgh | $324,050 |
Unity Butler | Marketing Designer | San Francisco | $85,675 |
Howard Hatfield | Office Manager | San Francisco | $164,500 |
Hope Fuentes | Secretary | San Francisco | $109,850 |
Vivian Harrell | Financial Controller | San Francisco | $452,500 |
Timothy Mooney | Office Manager | London | $136,200 |
Jackson Bradshaw | Director | New York | $645,750 |
Olivia Liang | Support Engineer | Singapore | $234,500 |
Bruno Nash | Software Engineer | London | $163,500 |
Sakura Yamamoto | Support Engineer | Tokyo | $139,575 |
Thor Walton | Developer | New York | $98,540 |
Finn Camacho | Support Engineer | San Francisco | $87,500 |
Serge Baldwin | Data Coordinator | Singapore | $138,575 |
Zenaida Frank | Software Engineer | New York | $125,250 |
Zorita Serrano | Software Engineer | San Francisco | $115,000 |
Jennifer Acosta | Junior Javascript Developer | Edinburgh | $75,650 |
Cara Stevens | Sales Assistant | New York | $145,600 |
Hermione Butler | Regional Director | London | $356,250 |
Lael Greer | Systems Administrator | London | $103,500 |
Jonas Alexander | Developer | San Francisco | $86,500 |
Shad Decker | Regional Director | Edinburgh | $183,000 |
Michael Bruce | Javascript Developer | Singapore | $183,000 |
Donna Snider | Customer Support | New York | $112,000 |
This not only works with DataTables' global filter input, but also with extensions such as SearchPanes, which you can see in the following example. A slight difference here is that we are charting the Position column. Again, I've linked a live version.
Name | Position | Office | Salary |
---|---|---|---|
Tiger Nixon | System Architect | Edinburgh | $320,800 |
Garrett Winters | Accountant | Tokyo | $170,750 |
Ashton Cox | Junior Technical Author | San Francisco | $86,000 |
Cedric Kelly | Senior Javascript Developer | Edinburgh | $433,060 |
Airi Satou | Accountant | Tokyo | $162,700 |
Brielle Williamson | Integration Specialist | New York | $372,000 |
Herrod Chandler | Sales Assistant | San Francisco | $137,500 |
Rhona Davidson | Integration Specialist | Tokyo | $327,900 |
Colleen Hurst | Javascript Developer | San Francisco | $205,500 |
Sonya Frost | Software Engineer | Edinburgh | $103,600 |
Jena Gaines | Office Manager | London | $90,560 |
Quinn Flynn | Support Lead | Edinburgh | $342,000 |
Charde Marshall | Regional Director | San Francisco | $470,600 |
Haley Kennedy | Senior Marketing Designer | London | $313,500 |
Tatyana Fitzpatrick | Regional Director | London | $385,750 |
Michael Silva | Marketing Designer | London | $198,500 |
Paul Byrd | Chief Financial Officer (CFO) | New York | $725,000 |
Gloria Little | Systems Administrator | New York | $237,500 |
Bradley Greer | Software Engineer | London | $132,000 |
Dai Rios | Personnel Lead | Edinburgh | $217,500 |
Jenette Caldwell | Development Lead | New York | $345,000 |
Yuri Berry | Chief Marketing Officer (CMO) | New York | $675,000 |
Caesar Vance | Pre-Sales Support | New York | $106,450 |
Doris Wilder | Sales Assistant | Sydney | $85,600 |
Angelica Ramos | Chief Executive Officer (CEO) | London | $1,200,000 |
Gavin Joyce | Developer | Edinburgh | $92,575 |
Jennifer Chang | Regional Director | Singapore | $357,650 |
Brenden Wagner | Software Engineer | San Francisco | $206,850 |
Fiona Green | Chief Operating Officer (COO) | San Francisco | $850,000 |
Shou Itou | Regional Marketing | Tokyo | $163,000 |
Michelle House | Integration Specialist | Sydney | $95,400 |
Suki Burks | Developer | London | $114,500 |
Prescott Bartlett | Technical Author | London | $145,000 |
Gavin Cortez | Team Leader | San Francisco | $235,500 |
Martena Mccray | Post-Sales support | Edinburgh | $324,050 |
Unity Butler | Marketing Designer | San Francisco | $85,675 |
Howard Hatfield | Office Manager | San Francisco | $164,500 |
Hope Fuentes | Secretary | San Francisco | $109,850 |
Vivian Harrell | Financial Controller | San Francisco | $452,500 |
Timothy Mooney | Office Manager | London | $136,200 |
Jackson Bradshaw | Director | New York | $645,750 |
Olivia Liang | Support Engineer | Singapore | $234,500 |
Bruno Nash | Software Engineer | London | $163,500 |
Sakura Yamamoto | Support Engineer | Tokyo | $139,575 |
Thor Walton | Developer | New York | $98,540 |
Finn Camacho | Support Engineer | San Francisco | $87,500 |
Serge Baldwin | Data Coordinator | Singapore | $138,575 |
Zenaida Frank | Software Engineer | New York | $125,250 |
Zorita Serrano | Software Engineer | San Francisco | $115,000 |
Jennifer Acosta | Junior Javascript Developer | Edinburgh | $75,650 |
Cara Stevens | Sales Assistant | New York | $145,600 |
Hermione Butler | Regional Director | London | $356,250 |
Lael Greer | Systems Administrator | London | $103,500 |
Jonas Alexander | Developer | San Francisco | $86,500 |
Shad Decker | Regional Director | Edinburgh | $183,000 |
Michael Bruce | Javascript Developer | Singapore | $183,000 |
Donna Snider | Customer Support | New York | $112,000 |
Charting with Data Processing
Of course it is also possible to do some more processing with the data from the DataTable. The example below is creating a column graph, showing the average salaries of the employees in the example table, by office. And of course, here is a link to a live version.
Name | Position | Office | Salary |
---|---|---|---|
Tiger Nixon | System Architect | Edinburgh | $320,800 |
Garrett Winters | Accountant | Tokyo | $170,750 |
Ashton Cox | Junior Technical Author | San Francisco | $86,000 |
Cedric Kelly | Senior Javascript Developer | Edinburgh | $433,060 |
Airi Satou | Accountant | Tokyo | $162,700 |
Brielle Williamson | Integration Specialist | New York | $372,000 |
Herrod Chandler | Sales Assistant | San Francisco | $137,500 |
Rhona Davidson | Integration Specialist | Tokyo | $327,900 |
Colleen Hurst | Javascript Developer | San Francisco | $205,500 |
Sonya Frost | Software Engineer | Edinburgh | $103,600 |
Jena Gaines | Office Manager | London | $90,560 |
Quinn Flynn | Support Lead | Edinburgh | $342,000 |
Charde Marshall | Regional Director | San Francisco | $470,600 |
Haley Kennedy | Senior Marketing Designer | London | $313,500 |
Tatyana Fitzpatrick | Regional Director | London | $385,750 |
Michael Silva | Marketing Designer | London | $198,500 |
Paul Byrd | Chief Financial Officer (CFO) | New York | $725,000 |
Gloria Little | Systems Administrator | New York | $237,500 |
Bradley Greer | Software Engineer | London | $132,000 |
Dai Rios | Personnel Lead | Edinburgh | $217,500 |
Jenette Caldwell | Development Lead | New York | $345,000 |
Yuri Berry | Chief Marketing Officer (CMO) | New York | $675,000 |
Caesar Vance | Pre-Sales Support | New York | $106,450 |
Doris Wilder | Sales Assistant | Sydney | $85,600 |
Angelica Ramos | Chief Executive Officer (CEO) | London | $1,200,000 |
Gavin Joyce | Developer | Edinburgh | $92,575 |
Jennifer Chang | Regional Director | Singapore | $357,650 |
Brenden Wagner | Software Engineer | San Francisco | $206,850 |
Fiona Green | Chief Operating Officer (COO) | San Francisco | $850,000 |
Shou Itou | Regional Marketing | Tokyo | $163,000 |
Michelle House | Integration Specialist | Sydney | $95,400 |
Suki Burks | Developer | London | $114,500 |
Prescott Bartlett | Technical Author | London | $145,000 |
Gavin Cortez | Team Leader | San Francisco | $235,500 |
Martena Mccray | Post-Sales support | Edinburgh | $324,050 |
Unity Butler | Marketing Designer | San Francisco | $85,675 |
Howard Hatfield | Office Manager | San Francisco | $164,500 |
Hope Fuentes | Secretary | San Francisco | $109,850 |
Vivian Harrell | Financial Controller | San Francisco | $452,500 |
Timothy Mooney | Office Manager | London | $136,200 |
Jackson Bradshaw | Director | New York | $645,750 |
Olivia Liang | Support Engineer | Singapore | $234,500 |
Bruno Nash | Software Engineer | London | $163,500 |
Sakura Yamamoto | Support Engineer | Tokyo | $139,575 |
Thor Walton | Developer | New York | $98,540 |
Finn Camacho | Support Engineer | San Francisco | $87,500 |
Serge Baldwin | Data Coordinator | Singapore | $138,575 |
Zenaida Frank | Software Engineer | New York | $125,250 |
Zorita Serrano | Software Engineer | San Francisco | $115,000 |
Jennifer Acosta | Junior Javascript Developer | Edinburgh | $75,650 |
Cara Stevens | Sales Assistant | New York | $145,600 |
Hermione Butler | Regional Director | London | $356,250 |
Lael Greer | Systems Administrator | London | $103,500 |
Jonas Alexander | Developer | San Francisco | $86,500 |
Shad Decker | Regional Director | Edinburgh | $183,000 |
Michael Bruce | Javascript Developer | Singapore | $183,000 |
Donna Snider | Customer Support | New York | $112,000 |
The code for this example is very similar to the previous examples, with a couple of tweaks to the extra function that we created.
function getSalaries(table) {
var salaryCounts = {};
var salary = {};
// Get the row indexes for the rows displayed under the current search
var indexes = table.rows({ search: 'applied' }).indexes().toArray();
// For each row, extract the office and add the salary to the array
for (var i = 0; i < indexes.length; i++) {
var office = table.cell(indexes[i], 2).data();
if (salaryCounts[office] === undefined) {
salaryCounts[office] = [
+table
.cell(indexes[i], 3)
.data()
.replace(/[^0-9.]/g, ''),
];
} else {
salaryCounts[office].push(
+table
.cell(indexes[i], 3)
.data()
.replace(/[^0-9.]/g, '')
);
}
}
// Extract the office names that are present in the table
var keys = Object.keys(salaryCounts);
// For each office work out the average salary
for (var i = 0; i < keys.length; i++) {
var length = salaryCounts[keys[i]].length;
var total = salaryCounts[keys[i]].reduce((a, b) => a + b, 0);
salary[keys[i]] = total / length;
}
return salary;
}
Here we have 2 objects, the first salary
object is going to hold the final data that we need for a column graph, while salaryCounts
is a temporary object that will allow us to perform some extra processing.
We also have to make a change to our series
variable, the data is now the values of the salary
array. We also need to declare an x and y axis. Putting all of this together gives us the following scipt, which is used for the example above.
$(document).ready(function () {
var table = $('#example').DataTable();
var salary = getSalaries(table);
// Declare axis for the column graph
var axis = {
id: 'salary',
min: 0,
title: {
text: 'Average Salary',
},
};
// Declare inital series with the values from the getSalaries function
var series = {
name: 'Overall',
data: Object.values(salary),
};
var myChart = Highcharts.chart('container', {
chart: {
type: 'column',
},
title: {
text: 'Average Salary',
},
xAxis: {
categories: Object.keys(salary),
},
yAxis: axis,
series: [series],
});
// On draw, get updated salaries and refresh axis and series
table.on('draw', function () {
salary = getSalaries(table);
myChart.axes[0].categories = Object.keys(salary);
myChart.series[0].setData(Object.values(salary));
});
});
function getSalaries(table) {
var salaryCounts = {};
var salary = {};
// Get the row indexes for the rows displayed under the current search
var indexes = table.rows({ search: 'applied' }).indexes().toArray();
// For each row, extract the office and add the salary to the array
for (var i = 0; i < indexes.length; i++) {
var office = table.cell(indexes[i], 2).data();
if (salaryCounts[office] === undefined) {
salaryCounts[office] = [
+table
.cell(indexes[i], 3)
.data()
.replace(/[^0-9.]/g, ''),
];
} else {
salaryCounts[office].push(
+table
.cell(indexes[i], 3)
.data()
.replace(/[^0-9.]/g, '')
);
}
}
// Extract the office names that are present in the table
var keys = Object.keys(salaryCounts);
// For each office work out the average salary
for (var i = 0; i < keys.length; i++) {
var length = salaryCounts[keys[i]].length;
var total = salaryCounts[keys[i]].reduce((a, b) => a + b, 0);
salary[keys[i]] = total / length;
}
return salary;
}
As I've mentioned, Highcharts offers a wide range of different graphs, and by making use of the DataTables API it is easy to create dynamic charts and graphs to run alongside a DataTable.
Hopefully, this will help to add another dimension to your DataTables implementations.