Add graph capability to resize according to window size.

application-manager-new
charithag 10 years ago
parent 9af5baef1b
commit 62467ac564

@ -23,7 +23,7 @@
<h1 class="grey ">Device Statistics</h1>
<hr>
</div>
</div>S
</div>
<div class="row float-right margin-top">
<div class="right margin-right">
<p style="color:#000;float:left;margin-top:25px">Date Range:</p>

@ -141,29 +141,33 @@ function updateGraphs(stats) {
updateFanGraph(convertStateStatsToGraphData(fanData));
var bulbData = stats['bulbData'];
console.log("bulbData...");
console.log(bulbData);
updateBulbGraph(convertStateStatsToGraphData(bulbData));
scaleGraphs();
}
function scaleGraphs() {
var sliders = $('.right_handle');
if (sliders.length == 0){
return;
}
var graphWidth = $('#canvas-wrapper1').width() - 50;
//Scale graphs
var sliderX = 1110 * 60 * 60 / (toDate - fromDate);
if (sliderX < 1110) {
var sliderX = graphWidth * 60 * 60 / (toDate - fromDate);
if (sliderX < graphWidth) {
// fake handle move
if (sliderX < 100) {
sliderX = 100;
}
var edown = document.createEvent("HTMLEvents");
edown.initEvent("mousedown", true, true);
edown.clientX = 1160;
edown.clientX = graphWidth;
var emove = document.createEvent("HTMLEvents");
emove.initEvent("mousemove", true, true);
emove.clientX = sliderX;
var eup = document.createEvent("HTMLEvents");
eup.initEvent("mouseup", true, true);
var sliders = $('.right_handle');
for (var slider in sliders) {
sliders[slider].dispatchEvent(edown);
document.dispatchEvent(emove);

@ -5,6 +5,7 @@ function updateBulbGraph(bulbData) {
function renderBulbChart(chartDataRaw){
var chartWrapperElmId = "#canvas-wrapper6";
var graphWidth = $(chartWrapperElmId).width() - 50;
if (chartDataRaw.length == 0) {
$(chartWrapperElmId).html("No data available...");
return;
@ -12,7 +13,8 @@ function renderBulbChart(chartDataRaw){
var chartData = [[], []];
for (var i = 0; i < chartDataRaw.length; i++){
chartData.push({x:parseInt(chartDataRaw[i].x), y:parseInt(chartDataRaw[i].y)});
chartData[0].push({x:parseInt(chartDataRaw[i].x), y:parseInt(chartDataRaw[i].y)});
chartData[1].push({x:parseInt(chartDataRaw[i].x), y:Math.abs(parseInt(chartDataRaw[i].y) - 1)});
}
//var i = parseInt(fromDate);
@ -31,7 +33,7 @@ function renderBulbChart(chartDataRaw){
var graph = new Rickshaw.Graph({
element: document.getElementById(chartDiv),
width: 1100,
width: graphWidth,
height: 150,
strokeWidth: 0.5,
renderer: 'bar_no_gap',

@ -4,7 +4,7 @@ function updateFanGraph(fanData) {
function renderFanChart(chartDataRaw) {
var chartWrapperElmId = "#canvas-wrapper5";
var graphWidth = $(chartWrapperElmId).width() - 50;
if (chartDataRaw.length == 0) {
$(chartWrapperElmId).html("No data available...");
return;
@ -12,7 +12,8 @@ function renderFanChart(chartDataRaw) {
var chartData = [[], []];
for (var i = 0; i < chartDataRaw.length; i++){
chartData.push({x:parseInt(chartDataRaw[i].x), y:parseInt(chartDataRaw[i].y)});
chartData[0].push({x:parseInt(chartDataRaw[i].x), y:parseInt(chartDataRaw[i].y)});
chartData[1].push({x:parseInt(chartDataRaw[i].x), y:Math.abs(parseInt(chartDataRaw[i].y) - 1)});
}
//var i = parseInt(fromDate);
@ -31,7 +32,7 @@ function renderFanChart(chartDataRaw) {
var graph = new Rickshaw.Graph({
element: document.getElementById(chartDiv),
width: 1100,
width: graphWidth,
height: 150,
strokeWidth: 0.5,
renderer: 'bar_no_gap',

@ -5,6 +5,7 @@ function updateLightGraph(lightData) {
function renderLightChart(chartDataRaw){
var chartWrapperElmId = "#canvas-wrapper2";
var graphWidth = $(chartWrapperElmId).width() - 50;
if (chartDataRaw.length == 0) {
$(chartWrapperElmId).html("No data available...");
return;
@ -12,7 +13,8 @@ function renderLightChart(chartDataRaw){
var chartData = [[], []];
for (var i = 0; i < chartDataRaw.length; i++){
chartData.push({x:parseInt(chartDataRaw[i].x), y:parseInt(chartDataRaw[i].y)});
chartData[0].push({x:parseInt(chartDataRaw[i].x), y:parseInt(chartDataRaw[i].y)});
chartData[1].push({x:parseInt(chartDataRaw[i].x), y:Math.abs(parseInt(chartDataRaw[i].y) - 1)});
}
//var i = parseInt(fromDate);
@ -31,7 +33,7 @@ function renderLightChart(chartDataRaw){
var graph = new Rickshaw.Graph({
element: document.getElementById(chartDiv),
width: 1100,
width: graphWidth,
height: 150,
strokeWidth: 0.5,
renderer: 'bar_no_gap',

@ -5,7 +5,7 @@ function updateMotionGraph(motionData) {
function renderMotionChart(chartDataRaw){
var chartWrapperElmId = "#canvas-wrapper3";
var graphWidth = $(chartWrapperElmId).width() - 50;
if (chartDataRaw.length == 0) {
$(chartWrapperElmId).html("No data available...");
return;
@ -31,7 +31,7 @@ function renderMotionChart(chartDataRaw){
var graph = new Rickshaw.Graph({
element: document.getElementById(chartDiv),
width: 1110,
width: graphWidth,
height: 400,
strokeWidth: 0.5,
renderer: 'line',

@ -4,7 +4,7 @@ function updateSonarGraph(sonarData) {
function renderSonarChart(chartDataRaw){
var chartWrapperElmId = "#canvas-wrapper4";
var graphWidth = $(chartWrapperElmId).width() - 50;
if (chartDataRaw.length == 0) {
$(chartWrapperElmId).html("No data available...");
return;
@ -30,7 +30,7 @@ function renderSonarChart(chartDataRaw){
var graph = new Rickshaw.Graph({
element: document.getElementById(chartDiv),
width: 1110,
width: graphWidth,
height: 400,
strokeWidth: 1,
renderer: 'line',

@ -5,7 +5,7 @@ function updateTemperatureGraph(temperatureData) {
function renderTemperatureChart(chartDataRaw){
var chartWrapperElmId = "#canvas-wrapper1";
var graphWidth = $(chartWrapperElmId).width() - 50;
if (chartDataRaw.length == 0) {
$(chartWrapperElmId).html("No data available...");
return;
@ -31,7 +31,7 @@ function renderTemperatureChart(chartDataRaw){
var graph = new Rickshaw.Graph({
element: document.getElementById(chartDiv),
width: 1110,
width: graphWidth,
height: 400,
strokeWidth: 1,
renderer: 'line',

Loading…
Cancel
Save