forked from community/product-iots
parent
f435d6d1b4
commit
e336c4f9f2
@ -0,0 +1,69 @@
|
|||||||
|
function updateCPUGraph(CPUData) {
|
||||||
|
renderCPUChart(CPUData);
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderCPUChart(chartDataRaw){
|
||||||
|
var chartWrapperElmId = "#canvas-wrapper7";
|
||||||
|
var graphWidth = $(chartWrapperElmId).width() - 50;
|
||||||
|
if (chartDataRaw.length == 0) {
|
||||||
|
$(chartWrapperElmId).html("No data available...");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var chartData = [];
|
||||||
|
for (var i = 0; i < chartDataRaw.length; i++){
|
||||||
|
chartData.push({x:parseInt(chartDataRaw[i].x), y:parseInt(chartDataRaw[i].y)});
|
||||||
|
}
|
||||||
|
|
||||||
|
//var i = parseInt(fromDate);
|
||||||
|
//while (i < parseInt(toDate)){
|
||||||
|
// var rnd = Math.random() * (30 - 20) + 20;
|
||||||
|
// chartData.push({x:i * 1000, y:rnd});
|
||||||
|
// i += 60 * 5;
|
||||||
|
//}
|
||||||
|
|
||||||
|
var chartDiv = "chart7";
|
||||||
|
var sliderDiv = "slider7";
|
||||||
|
var x_axis = "x_axis7";
|
||||||
|
var y_axis = "y_axis7";
|
||||||
|
$(chartWrapperElmId).html("").html('<div id="' + y_axis + '" class="custom_y_axis"></div><div id="' + chartDiv + '" class="custom_rickshaw_graph"></div><div id="' + x_axis + '" class="custom_x_axis"></div><div id="' + sliderDiv + '" class="custom_slider"></div>');
|
||||||
|
|
||||||
|
var graph = new Rickshaw.Graph({
|
||||||
|
element: document.getElementById(chartDiv),
|
||||||
|
width: graphWidth,
|
||||||
|
height: 400,
|
||||||
|
strokeWidth: 1,
|
||||||
|
renderer: 'line',
|
||||||
|
xScale: d3.time.scale(),
|
||||||
|
padding: {top: 0.2, left: 0.02, right: 0.02, bottom: 0},
|
||||||
|
series:[
|
||||||
|
{ color: '#2F0B3A', data: chartData }
|
||||||
|
]
|
||||||
|
});
|
||||||
|
|
||||||
|
graph.render();
|
||||||
|
|
||||||
|
var xAxis = new Rickshaw.Graph.Axis.X({
|
||||||
|
graph: graph,
|
||||||
|
orientation: 'bottom',
|
||||||
|
element: document.getElementById(x_axis),
|
||||||
|
tickFormat: graph.x.tickFormat()
|
||||||
|
});
|
||||||
|
|
||||||
|
xAxis.render();
|
||||||
|
|
||||||
|
var yAxis = new Rickshaw.Graph.Axis.Y({
|
||||||
|
graph: graph,
|
||||||
|
orientation: 'left',
|
||||||
|
element: document.getElementById(y_axis),
|
||||||
|
width: 40,
|
||||||
|
height: 410
|
||||||
|
});
|
||||||
|
|
||||||
|
yAxis.render();
|
||||||
|
|
||||||
|
var slider = new Rickshaw.Graph.RangeSlider.Preview({
|
||||||
|
graph: graph,
|
||||||
|
element: document.getElementById(sliderDiv)
|
||||||
|
});
|
||||||
|
}
|
@ -0,0 +1,69 @@
|
|||||||
|
function updateRAMGraph(RAMData) {
|
||||||
|
renderRAMChart(RAMData);
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderRAMChart(chartDataRaw){
|
||||||
|
var chartWrapperElmId = "#canvas-wrapper8";
|
||||||
|
var graphWidth = $(chartWrapperElmId).width() - 50;
|
||||||
|
if (chartDataRaw.length == 0) {
|
||||||
|
$(chartWrapperElmId).html("No data available...");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var chartData = [];
|
||||||
|
for (var i = 0; i < chartDataRaw.length; i++){
|
||||||
|
chartData.push({x:parseInt(chartDataRaw[i].x), y:parseInt(chartDataRaw[i].y)});
|
||||||
|
}
|
||||||
|
|
||||||
|
//var i = parseInt(fromDate);
|
||||||
|
//while (i < parseInt(toDate)){
|
||||||
|
// var rnd = Math.random() * (30 - 20) + 20;
|
||||||
|
// chartData.push({x:i * 1000, y:rnd});
|
||||||
|
// i += 60 * 5;
|
||||||
|
//}
|
||||||
|
|
||||||
|
var chartDiv = "chart8";
|
||||||
|
var sliderDiv = "slider8";
|
||||||
|
var x_axis = "x_axis8";
|
||||||
|
var y_axis = "y_axis8";
|
||||||
|
$(chartWrapperElmId).html("").html('<div id="' + y_axis + '" class="custom_y_axis"></div><div id="' + chartDiv + '" class="custom_rickshaw_graph"></div><div id="' + x_axis + '" class="custom_x_axis"></div><div id="' + sliderDiv + '" class="custom_slider"></div>');
|
||||||
|
|
||||||
|
var graph = new Rickshaw.Graph({
|
||||||
|
element: document.getElementById(chartDiv),
|
||||||
|
width: graphWidth,
|
||||||
|
height: 400,
|
||||||
|
strokeWidth: 1,
|
||||||
|
renderer: 'line',
|
||||||
|
xScale: d3.time.scale(),
|
||||||
|
padding: {top: 0.2, left: 0.02, right: 0.02, bottom: 0},
|
||||||
|
series:[
|
||||||
|
{ color: '#170B3B', data: chartData }
|
||||||
|
]
|
||||||
|
});
|
||||||
|
|
||||||
|
graph.render();
|
||||||
|
|
||||||
|
var xAxis = new Rickshaw.Graph.Axis.X({
|
||||||
|
graph: graph,
|
||||||
|
orientation: 'bottom',
|
||||||
|
element: document.getElementById(x_axis),
|
||||||
|
tickFormat: graph.x.tickFormat()
|
||||||
|
});
|
||||||
|
|
||||||
|
xAxis.render();
|
||||||
|
|
||||||
|
var yAxis = new Rickshaw.Graph.Axis.Y({
|
||||||
|
graph: graph,
|
||||||
|
orientation: 'left',
|
||||||
|
element: document.getElementById(y_axis),
|
||||||
|
width: 40,
|
||||||
|
height: 410
|
||||||
|
});
|
||||||
|
|
||||||
|
yAxis.render();
|
||||||
|
|
||||||
|
var slider = new Rickshaw.Graph.RangeSlider.Preview({
|
||||||
|
graph: graph,
|
||||||
|
element: document.getElementById(sliderDiv)
|
||||||
|
});
|
||||||
|
}
|
After Width: | Height: | Size: 7.8 KiB |
After Width: | Height: | Size: 7.8 KiB |
@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
|
||||||
|
}
|
Loading…
Reference in new issue