Data Visualization With DataTables.js and Highcharts.js
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" />
body {
font-family: Helvetica, Arial, sans-serif;
padding: 20px;
background: #ececec;
}
.container {
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 0 10px;
}
#dt-table_wrapper {
width: 35%;
margin-right: 2%;
}
#chart {
width: 63%;
}
table {
text-align: left;
}
@media screen and (max-width: 1200px) {
#dt-table_wrapper,
#chart {
width: 100%;
margin: 20px 0;
}
#dt-table_wrapper {
margin-right: 0;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/no-data-to-display.js"></script>
let draw = false;
init();
/**
* FUNCTIONS
*/
function init() {
// initialize DataTables
const table = $("#dt-table").DataTable();
// get table data
const tableData = getTableData(table);
// create Highcharts
createHighcharts(tableData);
// table events
setTableEvents(table);
}
function getTableData(table) {
const dataArray = [],
countryArray = [],
populationArray = [],
densityArray = [];
// loop table rows
table.rows({ search: "applied" }).every(function() {
const data = this.data();
countryArray.push(data[0]);
populationArray.push(parseInt(data[1].replace(/\,/g, "")));
densityArray.push(parseInt(data[2].replace(/\,/g, "")));
});
// store all data in dataArray
dataArray.push(countryArray, populationArray, densityArray);
return dataArray;
}
function createHighcharts(data) {
Highcharts.setOptions({
lang: {
thousandsSep: ","
}
});
Highcharts.chart("chart", {
title: {
text: "DataTables to Highcharts"
},
subtitle: {
text: "Data from worldometers.info"
},
xAxis: [
{
categories: data[0],
labels: {
rotation: -45
}
}
],
yAxis: [
{
// first yaxis
title: {
text: "Population (2017)"
}
},
{
// secondary yaxis
title: {
text: "Density (P/Km²)"
},
min: 0,
opposite: true
}
],
series: [
{
name: "Population (2017)",
color: "#0071A7",
type: "column",
data: data[1],
tooltip: {
valueSuffix: " M"
}
},
{
name: "Density (P/Km²)",
color: "#FF404E",
type: "spline",
data: data[2],
yAxis: 1
}
],
tooltip: {
shared: true
},
legend: {
backgroundColor: "#ececec",
shadow: true
},
credits: {
enabled: false
},
noData: {
style: {
fontSize: "16px"
}
}
});
}
function setTableEvents(table) {
// listen for page clicks
table.on("page", () => {
draw = true;
});
// listen for updates and adjust the chart accordingly
table.on("draw", () => {
if (draw) {
draw = false;
} else {
const tableData = getTableData(table);
createHighcharts(tableData);
}
});
}
<div class="container">
<table id="dt-table">
<thead>
<tr>
<th>Country</th>
<th>Population (2017)</th>
<th>Density (P/Km²)</th>
<th>Med. Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>China</td>
<td>1,409,517,397</td>
<td>150 </td>
<td>37</td>
</tr>
<tr>
<td>India</td>
<td>1,339,180,127</td>
<td>450</td>
<td>27</td>
</tr>
<tr>
<td>U.S.</td>
<td>324,459,463</td>
<td>35</td>
<td>38</td>
</tr>
<tr>
<td>Indonesia</td>
<td>263,991,379</td>
<td>146</td>
<td>28</td>
</tr>
<tr>
<td>Brazil</td>
<td>209,288,278</td>
<td>25</td>
<td>31</td>
</tr>
<tr>
<td>Pakistan</td>
<td>197,015,955</td>
<td>256</td>
<td>22</td>
</tr>
<tr>
<td>Nigeria</td>
<td>190,886,311</td>
<td>210</td>
<td>18</td>
</tr>
<tr>
<td>Bangladesh</td>
<td>164,669,751</td>
<td>1,265</td>
<td>26</td>
</tr>
<tr>
<td>Russia</td>
<td>143,989,754</td>
<td>9</td>
<td>39</td>
</tr>
<tr>
<td>Mexico</td>
<td>129,163,276</td>
<td>66</td>
<td>28</td>
</tr>
<tr>
<td>Japan</td>
<td>127,484,450</td>
<td>350</td>
<td>46</td>
</tr>
<tr>
<td>Ethiopia</td>
<td>104,957,438</td>
<td>105</td>
<td>19</td>
</tr>
<tr>
<td>Philippines</td>
<td>104,918,090</td>
<td>352</td>
<td>24</td>
</tr>
<tr>
<td>Egypt</td>
<td>97,553,151</td>
<td>98</td>
<td>25</td>
</tr>
<tr>
<td>Viet Nam</td>
<td>95,540,800</td>
<td>308</td>
<td>30</td>
</tr>
<tr>
<td>Germany</td>
<td>82,114,224</td>
<td>236</td>
<td>46</td>
</tr>
<tr>
<td>DR Congo</td>
<td>81,339,988</td>
<td>36</td>
<td>17</td>
</tr>
<tr>
<td>Iran</td>
<td>81,162,788</td>
<td>50</td>
<td>30</td>
</tr>
<tr>
<td>Turkey</td>
<td>80,745,020</td>
<td>105</td>
<td>30</td>
</tr>
<tr>
<td>Thailand</td>
<td>69,037,513</td>
<td>135</td>
<td>38</td>
</tr>
<tr>
<td>U.K.</td>
<td>66,181,585</td>
<td>274</td>
<td>40</td>
</tr>
<tr>
<td>France</td>
<td>64,979,548</td>
<td>119</td>
<td>41</td>
</tr>
<tr>
<td>Italy</td>
<td>59,359,900</td>
<td>202</td>
<td>46</td>
</tr>
<tr>
<td>Tanzania</td>
<td>57,310,019</td>
<td>65</td>
<td>17</td>
</tr>
<tr>
<td>South Africa</td>
<td>56,717,156</td>
<td>47</td>
<td>26</td>
</tr>
</tbody>
</table>
<div id="chart"></div>
</div>