Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
        <script src="https://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>
        <script type="text/javascript" charset="utf-8" src="js/testhighcharts.js"></script>
        <script src="https://code.highcharts.com/modules/data.js"></script>
        <script type="text/javascript" charset="utf-8" src="js/select2/editor.select2.js"></script>
        <script type="text/javascript" charset="utf-8" src="js/editor/dataTables.editor.min.js"></script>
  <title>JS Bin</title>
</head>
  <body>
    <div id="container" style="width:100%; height:400px;"></div>
    <table id="example1" class="display nowrap" width="100%">
      <thead>
        <tr>
          <th>Year</th>
          <th>Open</th>
          <th>High</th>
          <th>Low</th>
          <th>Close</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td scope="row" style=" text-align: center;">2015</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;">2016</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;">2017</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;">2018</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;">2019</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>
        <tr>
          <td scope="row" style=" text-align: center;">2020</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>
      </tbody>
    </table>
  </body>
</html>
 
$(document).ready(function() {
    var chart = Highcharts.chart("container", {
        data: {
        },
        chart: {
            type: "line"
        },
        title: {
            text: "Test Data"
        },
        xAxis: {
            type: 'category'
        },
      series: [
        {
          name: 'Open'
        }
      ]
    });
  
  var table = $('#example1').DataTable();
  
  table.on('draw', function () {
    populateChart(table, chart);
  })
  
  populateChart(table, chart);
});
​
function populateChart(table, chart) {
  // Get the data from the table, converting strings to numbers
  var data = table
    .rows({search: 'applied'})
    .data()
    .map(function (d) {
      return [d[0]*1, d[1].replace(',', '')*1]; 
    })
    .toArray();
  
  chart.series[0].setData(data);
}
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers