I have a table which is filling dynamically via SignalR+knockout.js
<table id="infoTable" border="0" class="table table-striped">
<thead style="cursor:pointer">
<tr data-bind="foreach: headers">
<td data-bind="click: $parent.toggleSort, text: title"></td>
</tr>
</thead>
<tbody>
<!-- ko foreach: machines -->
<tr>
<td data-bind="text: machineName"></td>
<td data-bind="text: cpu"></td>
<td data-bind="text: memUsage"></td>
<td data-bind="text: memTotal"></td>
<td data-bind="text: memPercent"></td>
<td>
<div class="demo-container">
<div id="placeholder1" class="demo-placeholder"></div>
</div>
</td>
</tr>
</tbody>
</table>
I'd like to somehow add a new cell and draw chart (flotchart.org) with MemPercent to this cell.
How to add this?
In a static case the chart can be made this way:
var container1 = $("#placeholder1");
var plot1 = $.plot(container1, dataSeries, {
series: {
shadowSize: 0
},
yaxis: {
min: 0,
max: 100
},
xaxis: {
show: false
}
});
function update() {
plot1.setData(series);
plot1.draw();
setTimeout(update, updateInterval);
}
update();
My questions: 1. how to add cell with chart dynamically? 2. how to access any chart containers during the update?
Thnx.
You can simply add chart to the table row with jQuery
$('tbody').append('<tr><td data-bind="text: machineName"></td><td data-bind="text: cpu"></td><td data-bind="text: memUsage"></td><td data-bind="text: memTotal"></td><td data-bind="text: memPercent"></td><td><div class="demo-container"><div id="placeholder1" class="demo-placeholder"></div></div></td></tr>');
I think you will need to enter this code inside a loop.
To take the data to put in the cell, you can use an Ajax Call
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.