Integrating CanvasJS and DataTables with Dynamic Data Updates

2 min readJan 13, 2025

CanvasJS and DataTables are JavaScript libraries for visualizing data in web-applications. When combined, they allow you to display tabular data and visual charts that synchronize dynamically. This article demonstrates how to integrate these tools to create a seamless, interactive experience where updates in the table instantly reflect in the chart.

Set Up the HTML

Create a basic layout with a table for DataTables and chart-container for CanvasJS.

<link rel="stylesheet" href="https://cdn.datatables.net/2.2.1/css/dataTables.dataTables.css"/>
<link rel="stylesheet" href="https://cdn.datatables.net/select/3.0.0/css/select.dataTables.css"/>

<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script src="https://cdn.datatables.net/2.2.1/js/dataTables.js"></script>
<script src="https://cdn.datatables.net/select/3.0.0/js/dataTables.select.js"></script>
<script src="https://cdn.datatables.net/select/3.0.0/js/select.dataTables.js"></script>
<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>

<div id="chartContainer" style="margin-bottom: 1em; height: 360px" class="chart-display"></div>
<table id="example" class="display" style="width: 100%">
...
</table>

Initialize DataTables

Use the DataTables library to add interactivity to the table.

$(document).ready(function () {
   var table = new DataTable("#example")
});

Create & Render CanvasJS Chart

Create a chart using CanvasJS, using the table data as input & render the chart.

var chart = new CanvasJS.Chart("chartContainer", {
  animationEnabled: true,
  theme: "light2",
  title: {
    text: "Data Overview"
  },
  data: [
    {
      type: "column",
      dataPoints: []
    }
  ]
});
chart.render();

Synchronize Chart with DataTables

Create a function to extract data from the DataTable and update the CanvasJS chart dynamically.

function chartData(table) {
  var counts = {}

  table
    .column(1, { search: "applied" })
    .data()
    .each(function (val) {
    if (counts[val]) {
      counts[val] += 1
    } else {
      counts[val] = 1
    }
  })

  return Object.entries(counts).map((e) => ({
    label: e[0],
    y: e[1],
  }))
}

JSFiddle: https://jsfiddle.net/vishwas_r/w8f25L67/

Key Benefits

Real-Time Insights: Charts update instantly when data is modified, ensuring the information remains relevant.
Flexibility: The integration can handle different data types and chart styles, making it suitable for diverse use cases.
Scalability: Extend the setup to include multiple tables, charts, or data sources for complex dashboards.

Use Cases

Business Dashboards: Track sales, expenses, or key performance indicators.
Data Analysis: Combine detailed tables with visual summaries for reports.
Education: Visualize survey results or performance metrics interactively.

The integration of CanvasJS and DataTables provides a robust framework for building interactive dashboards. Whether you’re a developer creating analytical tools or a business professional seeking better data insights, this combination offers the perfect balance of detail and visualization.