I have json data that is as follows:
[{"Name":["CV","CT","ABM","AB","B","HD","P"],"Data":[944.79,540.93,466.29,360.91,109.93,64.9,25.4],"Baseline":143.41}]
I want to turn this into a HTML table similar to the below
Name Data
CV 944.79
CT 540.93
ABM 466.29
AB 360.91
B 109.93
HD 64.9
P 25.4
Is something like that possible? This data is in that format becasue that is how a Highcharts barchart will read it.
Sure, you can.
var data = [
{
"Name":["CV","CT","ABM","AB","B","HD","P"],
"Data":[944.79,540.93,466.29,360.91,109.93,64.9,25.4],
"Baseline":143.41
}
];
data = data[0];
$(function() {
var table = $('<table class="info">');
var tableHeader = $('<thead><tr><th>Name</th><th>Data</th></tr></thead>');
var tableBody = $('<tbody>');
var name, value, row;
table.append(tableHeader);
table.append(tableBody);
for (var i = 0, len = data.Name.length; i < len; i++) {
name = data.Name[i];
value = data.Data[i];
row = $('<tr><td>' + name + '</td><td>' + value + '</td></tr>');
tableBody.append(row);
}
$('body').append(table);
});table.info {
border: 1px solid gray;
}
table.info thead {
background: silver;
}
table.info tbody tr:nth-child(even) {
background: rgba(0, 0, 0, 0.3);
}
table.info td {
text-align: center;
padding: 5px;
width: 100px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Not sure where exactly is highchart here.Also you wont need jQuery to create a table out of this object.This Object has three keys Name,Data,Baseline
and if you want to structure a table you just need to loop through it and get it's values
HTML
<table border="1">
<thead><tr><td>Name</td><td>Data</td></tr></thead>
<tbody id="tabBody"></tbody>
</table>
JS
var a=[{"Name":["CV","CT","ABM","AB","B","HD","P"],
"Data": [944.79,540.93,466.29,360.91,109.93,64.9,25.4],
"Baseline":143.41}]
var data = a[0]["Data"]; // get data array
var name =a[0]["Name"];// get name Array
var cachDom ="";
for(var x=0;x<data.length;x++){
cachDom+="<tr><td>"+name[x]+"</td><td>"+data[x]+"</td></tr>";
}
document.getElementById("tabBody").innerHTML=cachDom;
You can also use Highcharts API to create table, like in the example here:
Highcharts.drawTable = function() {
// user options
var tableTop = 310,
colWidth = 100,
tableLeft = 20,
rowHeight = 20,
cellPadding = 2.5,
valueDecimals = 1,
valueSuffix = ' °C';
// internal variables
var chart = this,
series = chart.series,
renderer = chart.renderer,
cellLeft = tableLeft;
// draw category labels
$.each(chart.xAxis[0].categories, function(i, name) {
renderer.text(
name,
cellLeft + cellPadding,
tableTop + (i + 2) * rowHeight - cellPadding
)
.css({
fontWeight: 'bold'
})
.add();
});
$.each(series, function(i, serie) {
cellLeft += colWidth;
// Apply the cell text
renderer.text(
serie.name,
cellLeft - cellPadding + colWidth,
tableTop + rowHeight - cellPadding
)
.attr({
align: 'right'
})
.css({
fontWeight: 'bold'
})
.add();
$.each(serie.data, function(row, point) {
// Apply the cell text
renderer.text(
Highcharts.numberFormat(point.y, valueDecimals) + valueSuffix,
cellLeft + colWidth - cellPadding,
tableTop + (row + 2) * rowHeight - cellPadding
)
.attr({
align: 'right'
})
.add();
// horizontal lines
if (row == 0) {
Highcharts.tableLine( // top
renderer,
tableLeft,
tableTop + cellPadding,
cellLeft + colWidth,
tableTop + cellPadding
);
Highcharts.tableLine( // bottom
renderer,
tableLeft,
tableTop + (serie.data.length + 1) * rowHeight + cellPadding,
cellLeft + colWidth,
tableTop + (serie.data.length + 1) * rowHeight + cellPadding
);
}
// horizontal line
Highcharts.tableLine(
renderer,
tableLeft,
tableTop + row * rowHeight + rowHeight + cellPadding,
cellLeft + colWidth,
tableTop + row * rowHeight + rowHeight + cellPadding
);
});
// vertical lines
if (i == 0) { // left table border
Highcharts.tableLine(
renderer,
tableLeft,
tableTop + cellPadding,
tableLeft,
tableTop + (serie.data.length + 1) * rowHeight + cellPadding
);
}
Highcharts.tableLine(
renderer,
cellLeft,
tableTop + cellPadding,
cellLeft,
tableTop + (serie.data.length + 1) * rowHeight + cellPadding
);
if (i == series.length - 1) { // right table border
Highcharts.tableLine(
renderer,
cellLeft + colWidth,
tableTop + cellPadding,
cellLeft + colWidth,
tableTop + (serie.data.length + 1) * rowHeight + cellPadding
);
}
});
};
/**
* Draw a single line in the table
*/
Highcharts.tableLine = function (renderer, x1, y1, x2, y2) {
renderer.path(['M', x1, y1, 'L', x2, y2])
.attr({
'stroke': 'silver',
'stroke-width': 1
})
.add();
}
Chart:
chart: {
renderTo: 'container',
events: {
load: Highcharts.drawTable
},
borderWidth: 2
},
Example:
Docs:
