Creating HTML Table with JSON Data dynamically in Helical Insight

Posted on by By admin, in Business Intelligence, Open Source Business Intelligence | 0

This blog will teach you how to create HTML Table with JSON Data dynamically in HDI(HelicalDashboard Insights) :

To create html table with json data dynamically in hdi , we need two files

  1. Demo.EFW
  2. template.html

In “Demo.EFW” file , we have to call template.html file


<?xml version=”1.0″ encoding=”UTF-8″ ?>


<title>HDI Demo</title>


<description>Demo Dashboard</description>






In “template.html” file ,

  1. we have to declare in which portion of the dashboard we want table to be shown
  2. JSON data
  3. Script that will automatically add the json data to table


Template.html : –

<div id = “myTable”></div>

<style type=”text/css”>

td, th {

padding: 1px 4px;




var data = [{“id”:”1″,”Name”:”Rupam”,”address”:”Hyderabad”}];

var peopleTable = tabulate(data, [“id”, “Name”,”address”]);

function tabulate(data, columns) {

var table =“#myTable”).append(“table”)

.attr(“style”, “margin-left: 250px”),

thead = table.append(“thead”),

tbody = table.append(“tbody”);


// append the header row






.text(function(column) { return column; });


// create a row for each object in the data

var rows = tbody.selectAll(“tr”)





// create a cell in each row for each column

var cells = rows.selectAll(“td”)

.data(function(row) {

return {

return {column: column, value: row[column]};





.attr(“style”, “font-family: Courier”)

.html(function(d) { return d.value; });

return table;




Rupam Bhardwaj

Helical IT Solutions


Best Open Source Business Intelligence Software Helical Insight is Here


A Business Intelligence Framework

0 0 votes
Article Rating
Notify of
Inline Feedbacks
View all comments