Creating HTML Table with JSON Data dynamically in Helical Insight

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

Demo.EFW:-

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

<efw>

<title>HDI Demo</title>

<author>Rupam</author>

<description>Demo Dashboard</description>

<icon>images/image.ico</icon>

<template>template.html</template>

<visible>true</visible>

<style>clean</style>

</efw>

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;

}

</style>

<script>

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

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

function tabulate(data, columns) {

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

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

thead = table.append(“thead”),

tbody = table.append(“tbody”);

// append the header row

thead.append(“tr”)

.selectAll(“th”)

.data(columns)

.enter()

.append(“th”)

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

// create a row for each object in the data

var rows = tbody.selectAll(“tr”)

.data(data)

.enter()

.append(“tr”);

// create a cell in each row for each column

var cells = rows.selectAll(“td”)

.data(function(row) {

return columns.map(function(column) {

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

});

})

.enter()

.append(“td”)

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

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

return table;

}

</script>

Rupam Bhardwaj

Helical IT Solutions

Best Open Source Business Intelligence Software Helical Insight is Here

A Business Intelligence Framework

Free
Download