Data Visualization With DataTables.js and Highcharts.js

dataTables_and_highcharts.html

<!-- Write to the head of your html file. -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.3/css/responsive.dataTables.min.css">

<!-- Write it in the body of your html file. -->

<!-- Table -->
<table width="100%" class="display nowrap" id="dt-table">
  <thead>
    <tr>
      <th>Date</th>
      <th>RBC level (10⁶/㎕)</th>
      <th>Hgb level (g/dL)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Day 1</td>
      <td>5.1</td>
      <td>7.8</td>
    </tr>
    <tr>
      <td>Day 2</td>
      <td>4.9</td>
      <td>7.4</td>
    </tr>
    <tr>
      <td>Day 3</td>
      <td>4.76</td>
      <td>7.2</td>
    </tr>
    <tr>
      <td>Day 4</td>
      <td>4.49</td>
      <td>6.7</td>
    </tr>
    <tr>
      <td>Day 5</td>
      <td>4.51</td>
      <td>6.7</td>
    </tr>
    <tr>
      <td>Day 6</td>
      <td>3.82</td>
      <td>5.4</td>
    </tr>
    <tr>
      <td>Day 7</td>
      <td>3.50</td>
      <td>5.1</td>
    </tr>
  </tbody>
</table>

<!-- Charts -->
<div id="chart_t"></div>

<!-- Write in the footer of your html file. -->
<!-- remember to include jQuery as well -->
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.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>

<script>
let draw = false;
init();

function init() {
  const table = $("#dt-table").DataTable({
    responsive: true
  });
  const tableData = getTableData(table);
  createHighcharts(tableData);
  setTableEvents(table);
}

function getTableData(table) {
  const dataArray = [],
    countryArray = [],
    populationArray = [],
    densityArray = [];
  table.rows({
    search: "applied"
  }).every(function () {
    const data = this.data();
    countryArray.push(data[0]);
    populationArray.push(Number(data[1]));
    densityArray.push(Number(data[2]));
  });
  dataArray.push(countryArray, populationArray, densityArray);
  return dataArray;
}

function createHighcharts(data) {
  Highcharts.setOptions({
    lang: {
      thousandsSep: ","
    }
  });
  Highcharts.chart("chart_t", {
    title: {
      text: "Luna's Kidney Function Chart"
    },
    subtitle: {
      text: "Data from blood test report"
    },
    xAxis: [{
      categories: data[0],
      labels: {
        rotation: -45
      }
    }],
    yAxis: [{
      // first yaxis
      title: {
        text: "RBC level (10⁶/㎕)"
      },
      plotLines: [{
        color: 'red',
        dashStyle: 'dot',
        width: 2,
        value: 5.5,
        label: {
          align: 'right',
          style: {
            color: "red",
            fontStyle: 'italic'
          },
          text: 'RBC Low (5.5 10⁶/㎕)',
          x: -10
        },
        zIndex: 3
      }],
    }, {
      // secondary yaxis
      title: {
        text: "Hgb level (g/dL)"
      },
      min: 0,
      opposite: true
    }],
    series: [{
      name: "Red blood cell level",
      color: "#eba5f0",
      type: "column",
      data: data[1],
      tooltip: {
        valueSuffix: " 10⁶/㎕"
      }
    }, {
      name: "Hemoglobin level",
      color: "#7986f7",
      type: "spline",
      data: data[2],
      yAxis: 1
    }],
    tooltip: {
      valueSuffix: " g/dL",
      shared: true
    },
    legend: {
      backgroundColor: "#ececec",
      shadow: true
    },
    credits: {
      enabled: false
    },
    noData: {
      style: {
        fontSize: "16px"
      }
    }
  });
}

function setTableEvents(table) {
  table.on("page", () => {
    draw = true;
  });
  table.on("draw", () => {
    if (draw) {
      draw = false;
    } else {
      const tableData = getTableData(table);
      createHighcharts(tableData);
    }
  });
}
</script>