<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>

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;
  }
}

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);
    }
  });
}