I am trying to create an HTML table with information I use to draw a plot. I don't want to query the database twice, and I want to create the chart and a table with the information. This is what I get from the server and that it gets charted:
var data = {
"selector":"#charttotalday",
"jsondata":[
{
"label":"Client1",
"data":[
[1382670000000,110157],
[1382756400000,199055],
[1382842800000,362996],
[1382929200000,302],
[1383015600000,169],
[1383102000000,88],
[1383188400000,49]
],
"points":{
"fillColor":"#88bbc8"
}
},
{
"label":"Client2",
"data":[
[1382670000000,58611],
[1382756400000,112268],
[1382842800000,193060],
[1382929200000,115],
[1383015600000,45],
[1383102000000,65],
[1383188400000,18]
],
"points":{
"fillColor":"#ed7a53"
}
},
{
"label":"Client3",
"data":[
[1382670000000,65534],
[1382756400000,118362],
[1382842800000,200058],
[1382929200000,123],
[1383015600000,65],
[1383102000000,53],
[1383188400000,26]
],
"points":{
"fillColor":"#9FC569"
}
}
]
};
Because of the way the information is organized, I can not use $.each to loop over it and create a table of the format:
Client1 Client2 Client3
1382670000000 | 10157 | 58611 | 65534 |
1382756400000 | 99055 | 12268 | 18362 |
1382842800000 | 62996 | 93060 | 10058 |
1382929200000 | 302 | 115 | 123 |
1383015600000 | 169 | 45 | 65 |
1383102000000 | 88 | 65 | 53 |
1383188400000 | 49 | 18 | 26 |
I am thinking that the best way would be to read the object and create a new one with the structure that I need, that can be used with $.each.
I have tried with this:
$.each(data.jsondata, function(key, value) {
thead += '<th>' + value.label + '</th>';
tableData[value.label] = new Object();
$.each(value.data, function(key1, value1) {
$.each(value1, function(key2, value2) {
if(key2 == 0) {
//here I have the time line, axis Y
index = value2;
}
if(key2 == 1) {
//here I have the values for the table
tableData[value.label][index] = value2;
}
});
});
});
thead += '</tr>';
But this only creates a more simple element with the information that I need, but still cant turn into what I need.
Can someone please point me in the right direction?
I am trying to create an HTML table with information I use to draw a plot. I don't want to query the database twice, and I want to create the chart and a table with the information. This is what I get from the server and that it gets charted:
var data = {
"selector":"#charttotalday",
"jsondata":[
{
"label":"Client1",
"data":[
[1382670000000,110157],
[1382756400000,199055],
[1382842800000,362996],
[1382929200000,302],
[1383015600000,169],
[1383102000000,88],
[1383188400000,49]
],
"points":{
"fillColor":"#88bbc8"
}
},
{
"label":"Client2",
"data":[
[1382670000000,58611],
[1382756400000,112268],
[1382842800000,193060],
[1382929200000,115],
[1383015600000,45],
[1383102000000,65],
[1383188400000,18]
],
"points":{
"fillColor":"#ed7a53"
}
},
{
"label":"Client3",
"data":[
[1382670000000,65534],
[1382756400000,118362],
[1382842800000,200058],
[1382929200000,123],
[1383015600000,65],
[1383102000000,53],
[1383188400000,26]
],
"points":{
"fillColor":"#9FC569"
}
}
]
};
Because of the way the information is organized, I can not use $.each to loop over it and create a table of the format:
Client1 Client2 Client3
1382670000000 | 10157 | 58611 | 65534 |
1382756400000 | 99055 | 12268 | 18362 |
1382842800000 | 62996 | 93060 | 10058 |
1382929200000 | 302 | 115 | 123 |
1383015600000 | 169 | 45 | 65 |
1383102000000 | 88 | 65 | 53 |
1383188400000 | 49 | 18 | 26 |
I am thinking that the best way would be to read the object and create a new one with the structure that I need, that can be used with $.each.
I have tried with this:
$.each(data.jsondata, function(key, value) {
thead += '<th>' + value.label + '</th>';
tableData[value.label] = new Object();
$.each(value.data, function(key1, value1) {
$.each(value1, function(key2, value2) {
if(key2 == 0) {
//here I have the time line, axis Y
index = value2;
}
if(key2 == 1) {
//here I have the values for the table
tableData[value.label][index] = value2;
}
});
});
});
thead += '</tr>';
But this only creates a more simple element with the information that I need, but still cant turn into what I need.
Can someone please point me in the right direction?
Share Improve this question edited Jul 26, 2017 at 19:02 Brian Tompsett - 汤莱恩 5,89372 gold badges61 silver badges133 bronze badges asked Oct 31, 2013 at 23:12 Don VieguesDon Viegues 1271 gold badge5 silver badges13 bronze badges 4- really not clear what you are asking...please be more specific. Also suggest you create a demo in jsfiddle – charlietfl Commented Oct 31, 2013 at 23:26
- Why don't you want to transform data.jsondata into a proper structure array before using $.each – jonasnas Commented Oct 31, 2013 at 23:27
- @charlietfl: I have the data formated the way flot needs it, but is not properly organized to use easily used to create a table. – Don Viegues Commented Nov 1, 2013 at 0:02
- @jonasnas: how should I do that? I want to do it, I dont know how. thanks. – Don Viegues Commented Nov 1, 2013 at 0:02
1 Answer
Reset to default 6This will map your data to table:
var headers=[ ""], rows={}
$.each(data.jsondata,function(clientIdx,item){
headers.push(item.label );
$.each( item.data,function(i,arr){
if( !rows[arr[0]]){
rows[arr[0]]=[];
}
rows[arr[0]][clientIdx]=arr[1];
})
})
var rowHtml='<tr><th>'+headers.join('</th><th>')+'</th></tr>';
$.each(rows,function(key, arr){
rowHtml+='<tr><td>'+key+'</td>';
rowHtml +='<td>'+arr.join('</td><td>')+'</td></tr>';
})
$('#table').html(rowHtml);
DEMO