From 62467ac56470384ecf73559db78db203b8ab61b0 Mon Sep 17 00:00:00 2001 From: charithag Date: Fri, 3 Jul 2015 18:02:35 +0530 Subject: [PATCH] Add graph capability to resize according to window size. --- .../jaggeryapps/iot/units/mydevice/mydevice.hbs | 2 +- .../iot/units/mydevice/public/js/graph_util.js | 16 ++++++++++------ .../mydevice/public/js/graphs/bulb_graph.js | 6 ++++-- .../units/mydevice/public/js/graphs/fan_graph.js | 7 ++++--- .../mydevice/public/js/graphs/light_graph.js | 6 ++++-- .../mydevice/public/js/graphs/motion_graph.js | 4 ++-- .../mydevice/public/js/graphs/sonar_graph.js | 4 ++-- .../public/js/graphs/temperature_graph.js | 4 ++-- 8 files changed, 29 insertions(+), 20 deletions(-) diff --git a/modules/distribution/src/repository/jaggeryapps/iot/units/mydevice/mydevice.hbs b/modules/distribution/src/repository/jaggeryapps/iot/units/mydevice/mydevice.hbs index b6551694..5653f13c 100644 --- a/modules/distribution/src/repository/jaggeryapps/iot/units/mydevice/mydevice.hbs +++ b/modules/distribution/src/repository/jaggeryapps/iot/units/mydevice/mydevice.hbs @@ -23,7 +23,7 @@

Device Statistics

- S +

Date Range:

diff --git a/modules/distribution/src/repository/jaggeryapps/iot/units/mydevice/public/js/graph_util.js b/modules/distribution/src/repository/jaggeryapps/iot/units/mydevice/public/js/graph_util.js index 972c9781..a4038182 100644 --- a/modules/distribution/src/repository/jaggeryapps/iot/units/mydevice/public/js/graph_util.js +++ b/modules/distribution/src/repository/jaggeryapps/iot/units/mydevice/public/js/graph_util.js @@ -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); diff --git a/modules/distribution/src/repository/jaggeryapps/iot/units/mydevice/public/js/graphs/bulb_graph.js b/modules/distribution/src/repository/jaggeryapps/iot/units/mydevice/public/js/graphs/bulb_graph.js index 3999baec..f4a1c5a4 100644 --- a/modules/distribution/src/repository/jaggeryapps/iot/units/mydevice/public/js/graphs/bulb_graph.js +++ b/modules/distribution/src/repository/jaggeryapps/iot/units/mydevice/public/js/graphs/bulb_graph.js @@ -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', diff --git a/modules/distribution/src/repository/jaggeryapps/iot/units/mydevice/public/js/graphs/fan_graph.js b/modules/distribution/src/repository/jaggeryapps/iot/units/mydevice/public/js/graphs/fan_graph.js index 19d477a3..991a14d6 100644 --- a/modules/distribution/src/repository/jaggeryapps/iot/units/mydevice/public/js/graphs/fan_graph.js +++ b/modules/distribution/src/repository/jaggeryapps/iot/units/mydevice/public/js/graphs/fan_graph.js @@ -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', diff --git a/modules/distribution/src/repository/jaggeryapps/iot/units/mydevice/public/js/graphs/light_graph.js b/modules/distribution/src/repository/jaggeryapps/iot/units/mydevice/public/js/graphs/light_graph.js index d4dc4913..1e91a758 100644 --- a/modules/distribution/src/repository/jaggeryapps/iot/units/mydevice/public/js/graphs/light_graph.js +++ b/modules/distribution/src/repository/jaggeryapps/iot/units/mydevice/public/js/graphs/light_graph.js @@ -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', diff --git a/modules/distribution/src/repository/jaggeryapps/iot/units/mydevice/public/js/graphs/motion_graph.js b/modules/distribution/src/repository/jaggeryapps/iot/units/mydevice/public/js/graphs/motion_graph.js index 91b627a2..04fe84d6 100644 --- a/modules/distribution/src/repository/jaggeryapps/iot/units/mydevice/public/js/graphs/motion_graph.js +++ b/modules/distribution/src/repository/jaggeryapps/iot/units/mydevice/public/js/graphs/motion_graph.js @@ -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', diff --git a/modules/distribution/src/repository/jaggeryapps/iot/units/mydevice/public/js/graphs/sonar_graph.js b/modules/distribution/src/repository/jaggeryapps/iot/units/mydevice/public/js/graphs/sonar_graph.js index a79e5a4f..c7bdf5c5 100644 --- a/modules/distribution/src/repository/jaggeryapps/iot/units/mydevice/public/js/graphs/sonar_graph.js +++ b/modules/distribution/src/repository/jaggeryapps/iot/units/mydevice/public/js/graphs/sonar_graph.js @@ -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', diff --git a/modules/distribution/src/repository/jaggeryapps/iot/units/mydevice/public/js/graphs/temperature_graph.js b/modules/distribution/src/repository/jaggeryapps/iot/units/mydevice/public/js/graphs/temperature_graph.js index 2dcdbc5c..3fed9611 100644 --- a/modules/distribution/src/repository/jaggeryapps/iot/units/mydevice/public/js/graphs/temperature_graph.js +++ b/modules/distribution/src/repository/jaggeryapps/iot/units/mydevice/public/js/graphs/temperature_graph.js @@ -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',