Create a D3 Chart

This page explains how to incorporate a D3.js chart in a Dashboard. For information about the InetSoft plugin, see the d3-inetsoft project page.

There are two steps to incorporating a D3.js chart in a Dashboard.

Step 1: Create HTML page with D3.js chart

Create an HTML page with the D3.js chart and place it into the web-assets folder in internal storage. Create the folder if it does not yet exist. (See Manage Stored Assets for information about uploading assets to server storage.) The HTML should be similar to that below:

<html lang="en">
<head>
  <meta charset="utf-8">
    <title>D3 Example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <script src="https://d3js.org/d3.v7.min.js"></script>
  <script src="js/d3-inetsoft.js"></script> (1)
</head>
<body>
  <div id="#chart"></div>
  <script>
    function loadData(table) { (2)
    // D3 code goes here, consuming
    // table data from the dashboard
  }
  // D3DataTable is the identifier of the table in the dashboard
  d3.inetsoft('D3DataTable', loadData); (3)
  </script>
</body>
</html>
1 The d3-inetsoft.js plugin should be included as an external script.
2 Your D3.js code should be inserted in the loadData() function.
3 The first parameter of d3.inetsoft() function is the ‘Name’ of the data table in the Dashboard. See Step 2 below for more information about the data table.

Step 2: Create Dashboard with Data Table and Embedded HTML

Follow the steps below to create the Dashboard that will host the D3.js chart:

  1. Create a new dashboard. (See Create a New Dashboard for more details.)

  2. Add a Text component into the Dashboard. Set the content of the Text component to the URL of the HTML file from Step 1 above (e.g., /d3.html). (See Add Text or HTML for more information about using a Text component.)

  3. Resize the Text component to be able to display the D3.js chart.

  4. Add a Table or Chart component that contains the data to be used by the D3.js chart. (See Create a Table or Create a Crosstab for more details.)

  5. Optional: Set the table or chart to be hidden if you do not want users to see it. (See General Tab for information on how to hide a component.)

  6. Set the ‘Name’ of the Table or Chart to the ID used as the first parameter to the d3.inetsoft() function. (This is “D3DataTable“ in the HTML example above. See General Tab for more information about the ‘Name’ property.)