Browse files

added week view for line and month view for bar charts

cleaned up and restructured javascript files
  • Loading branch information...
1 parent 47620f9 commit c540bf526763d6392d6bc7bb052e93277d1567d1 @berwinter committed Feb 26, 2013
Showing with 560 additions and 402 deletions.
  1. +1 −1 analogChart.php
  2. +18 −0 css/format.css
  3. +1 −1 energyChart.php
  4. +10 −0 index.html
  5. +162 −0 js/charts.js
  6. +214 −379 js/main.js
  7. +98 −0 js/toolbar.js
  8. +43 −20 lib/backend/database.inc.php
  9. +12 −0 lib/commonChart.inc.php
  10. +1 −1 powerChart.php
View
2 analogChart.php
@@ -1,6 +1,6 @@
<?php
include_once 'lib/commonChart.inc.php';
-echo preg_replace('/"(-?\d+\.?\d*)"/', '$1', json_encode($database->queryAnalog($date,$chartId)));
+echo preg_replace('/"(-?\d+\.?\d*)"/', '$1', json_encode($database->queryAnalog($date,$chartId,$period)));
View
18 css/format.css
@@ -164,6 +164,24 @@ div.hover > div.icon, div.active > div.icon {
position:absolute;
}
+#period {
+ right: 150px;
+ position:absolute;
+}
+
+#grouping {
+ right: 150px;
+ position:absolute;
+}
+
+#period > label{
+ margin-top:2px;
+}
+
+#grouping > label{
+ margin-top:2px;
+}
+
#overlay {
width: 100%;
height: 100%;
View
2 energyChart.php
@@ -1,6 +1,6 @@
<?php
include_once 'lib/commonChart.inc.php';
-echo preg_replace('/"(-?\d+\.?\d*)"/', '$1', json_encode($database->queryEnergy($date,$chartId)));
+echo preg_replace('/"(-?\d+\.?\d*)"/', '$1', json_encode($database->queryEnergy($date,$chartId,$grouping)));
View
10 index.html
@@ -8,6 +8,8 @@
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/datepicker.de.js"></script>
+ <script type="text/javascript" src="js/charts.js"></script>
+ <script type="text/javascript" src="js/toolbar.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<link rel="stylesheet" type="text/css" href="css/format.css">
<link rel="stylesheet" type="text/css" href="css/smoothness/jquery-ui-1.9.2.custom.min.css">
@@ -20,6 +22,14 @@
<div id="toolbar">
<button id="home">Hauptmenü</button>
<input id="datepicker"/>
+ <div id="period">
+ <input type="radio" id="week1" name="week" value="day" checked="checked"/><label for="week1">Tag</label>
+ <input type="radio" id="week2" name="week" value="week" /><label for="week2">Woche</label>
+ </div>
+ <div id="grouping">
+ <input type="radio" id="month1" name="month" value="days" checked="checked"/><label for="month1">Tage</label>
+ <input type="radio" id="month2" name="month" value="months" /><label for="month2">Monate</label>
+ </div>
<div id="buttonset" >
<button id="back">Zurück</button>
<button id="date">Heute</button>
View
162 js/charts.js
@@ -0,0 +1,162 @@
+var lineChart = {
+ options: {
+ height: 500,
+ vAxis: {minValue: 0},
+ hAxis: {},
+ animation: {
+ duration: 1000,
+ easing: 'out'
+ },
+ chartArea: {width: '80%', height: '80%'},
+ legend: {position: 'bottom'}
+ },
+ zoomed: false,
+ init: function()
+ {
+ this.chart = new google.visualization.LineChart(document.getElementById('line_chart'));
+ google.visualization.events.addListener(this.chart, 'click', this.clickHandler);
+ google.visualization.events.addListener(this.chart, 'select', this.selectHandler);
+ },
+ fetch: function()
+ {
+ var chartId = menu.selectedItem.id;
+ $.ajax({
+ url: menu.selectedItem["page"],
+ data: {
+ date: (toolbar.date.getFullYear() + "-" + (toolbar.date.getMonth() + 1) + "-" + toolbar.date.getDate()),
+ id: chartId,
+ period: toolbar.getPeriod()
+ },
+ dataType:"json",
+ timeout: 120000,
+ success: function(jsonData) {
+ if($("#content").is(":animated")) {
+ $("#content").one('complete', function() {
+ lineChart.json = jsonData;
+ lineChart.draw(jsonData);
+ });
+ }
+ else {
+ lineChart.json = jsonData;
+ lineChart.draw();
+ }
+ },
+ complete: function(xhr,status) {
+ $("#overlay").hide();
+ },
+ beforeSend: function(xhr,settings) {
+ $("#overlay").show();
+ }
+ });
+ },
+ draw: function()
+ {
+ this.data = new google.visualization.DataTable();
+ // add columns
+ this.data.addColumn('datetime', 'Time');
+ var cols = menu.selectedItem["columns"];
+ for (var i in cols) {
+ this.data.addColumn('number', cols[i]);
+ }
+ // format date
+ for ( var i = 0; i < this.json.length; i++ ) {
+ this.json[i][0] = new Date(this.json[i][0]*1000);
+ }
+ // add data
+ this.data.addRows(this.json);
+ // set unit
+ this.options.vAxis.format = menu.selectedItem["unit"];
+
+ this.options.hAxis.format = toolbar.getPeriod() == "day" ? "hh:mm": "dd.MM";
+ // check if there is data
+ if(this.json[0]){
+ // set viewbox
+ this.options.hAxis.viewWindow = {min:this.json[0][0], max:this.json[this.json.length-1][0]};
+ }
+ this.zoomed = false;
+ this.chart.draw(this.data, this.options);
+ },
+ selectHandler: function() {
+ if(lineChart.chart.getSelection().length && lineChart.chart.getSelection()[0].row) {
+ var row = lineChart.chart.getSelection()[0].row;
+ var offset = toolbar.getPeriod() == "day" ? 1800000: 43200000;
+ lineChart.options.hAxis.format = toolbar.getPeriod() == "day" ? "hh:mm": "dd.MM hh:mm";
+ lineChart.options.hAxis.viewWindow.min = new Date(lineChart.json[row][0].getTime()-offset);
+ lineChart.options.hAxis.viewWindow.max = new Date(lineChart.json[row][0].getTime()+offset);
+ lineChart.zoomed = true;
+ lineChart.chart.draw(lineChart.data, lineChart.options);
+ }
+ },
+ clickHandler: function(e) {
+ if(e.targetID == "chartarea" && lineChart.zoomed) {
+ lineChart.options.hAxis.format = toolbar.getPeriod() == "day" ? "hh:mm": "dd.MM";
+ lineChart.options.hAxis.viewWindow.min = lineChart.json[0][0];
+ lineChart.options.hAxis.viewWindow.max = lineChart.json[lineChart.json.length-1][0];
+ lineChart.zoomed = false;
+ lineChart.chart.draw(lineChart.data, lineChart.options);
+ }
+ }
+}
+
+var barChart = {
+ options: {
+ height: 500,
+ vAxis: {format: '#.## kWh', minValue: 0},
+ animation: {
+ duration: 1000,
+ easing: 'out'
+ },
+ chartArea: {width: '80%', height: '80%'},
+ legend: {position: 'bottom'}
+ },
+ init: function()
+ {
+ this.chart = new google.visualization.ColumnChart(document.getElementById('bar_chart'));
+ },
+ fetch: function()
+ {
+ var chartId = menu.selectedItem["id"];
+ $.ajax({
+ url: "energyChart.php",
+ data: {
+ date: (toolbar.date.getFullYear() + "-" + (toolbar.date.getMonth() + 1) + "-" + toolbar.date.getDate()),
+ grouping: toolbar.getGrouping(),
+ id: chartId
+ },
+ dataType:"json",
+ success: function(jsonData) {
+ if($("#content").is(":animated")) {
+ $("#content").one('complete', function(){
+ barChart.json = jsonData;
+ barChart.draw();
+ });
+ }
+ else {
+ barChart.json = jsonData;
+ barChart.draw();
+ }
+ },
+ complete: function(xhr,status) {
+ $("#overlay").hide();
+ },
+ beforeSend: function(xhr,settings) {
+ $("#overlay").show();
+ }
+ });
+ },
+ draw: function()
+ {
+ var data = new google.visualization.DataTable();
+ data.addColumn('string', 'Date');
+
+ var cols = menu.selectedItem["columns"];
+
+ for (var i in cols)
+ {
+ data.addColumn('number', cols[i]);
+ }
+
+ data.addRows(this.json);
+ this.chart.draw(data, this.options);
+ }
+}
View
593 js/main.js
@@ -1,408 +1,243 @@
-var currentTime = new Date();
-var selectedItem = null;
-
-google.load('visualization', '1', {'packages':['corechart']});
-
-
-function checkBrowser()
-{
- if(($.browser.chrome && $.browser.version.slice(0,2)>6) ||
- ($.browser.webkit && $.browser.version.slice(0,3)>533) ||
- ($.browser.mozilla && $.browser.version.slice(0,3)>=2.0) ||
- ($.browser.msie && $.browser.version.slice(0,2)>7) ||
- ($.browser.opera && $.browser.version.slice(0,4)>11.5) )
+var menu = {
+ selectedItem: null,
+ items: [],
+ init: function()
{
- $(document).ready(loadMenu);
- }
- else
- {
- $(document).ready(function() {
- $("#browser a").click(function() {
- loadMenu();
- });
+ $.ajax({
+ url: "menu.php",
+ dataType:"json",
+ success: function(jsonData){
+ actualValues.values = jsonData.values;
+ menu.items = jsonData.menu;
+ var $menu = $("<div></div>");
+ var $pages = $("<div><div id=\"chart_container\"><div id=\"line_chart\"></div></div><div id=\"energy_container\"><div id=\"bar_chart\"></div></div></div>");
+
+ for (var i in menu.items)
+ {
+ var item = menu.items[i];
+ var $item = $('<div class="item"><div class="icon"></div><div>'+item.name+'</div></div>');
+ item["item"] = $item;
+ item["index"] = i;
+ switch(item.type)
+ {
+ case 'schema':
+ $item.find("div.icon").addClass("home");
+ var $container = $('<div class="schema"></div>').load("images/"+item.schema);
+ $pages.append($container);
+ item["container"] = $container;
+ break;
+ case 'energy':
+ $item.find("div.icon").addClass("chart");
+ item["container"] = $pages.find("#energy_container");
+ item["load"] = barChart.fetch;
+ break;
+ case 'line':
+ $item.find("div.icon").addClass("chart");
+ item["container"] = $pages.find("#chart_container");
+ item["load"] = lineChart.fetch;
+ item["page"] = "analogChart.php"
+ break;
+ case 'power':
+ $item.find("div.icon").addClass("chart");
+ item["container"] = $pages.find("#chart_container");
+ item["load"] = lineChart.fetch;
+ item["page"] = "powerChart.php"
+ break;
+ }
+ $item.data(item);
+ $menu.append($item);
+ }
+
+ $menu.find("div.item").hover(function() {
+ $(this).addClass("hover");
+ },
+ function() {
+ $(this).removeClass("hover");
+ });
+
+ $menu.find("div.item").click(function() {
+ location.hash = $(this).data("index");
+ });
+
+ $(document).ready(function() {
+ $("#menu").append($menu.children());
+ $("#pages").append($pages.children());
+ lineChart.init();
+ barChart.init();
+ menu.handle();
+ });
+ }
});
- }
-}
-checkBrowser();
-
-function loadMenu()
-{
- $("#browser").hide();
- if(!$("div.item").is(":visible"))
+ },
+ checkBrowser: function()
{
- $("div.item").fadeIn('slow');
- }
-}
-
-$.ajax({
- url: "menu.php",
- dataType:"json",
- success: function(jsonData){
- values = jsonData.values;
- menu = jsonData.menu;
- var $menu = $("<div></div>");
- var $pages = $("<div><div id=\"chart_container\"><div id=\"line_chart\"></div></div><div id=\"energy_container\"><div id=\"bar_chart\"></div></div></div>");
-
- for (var i in menu)
+ if(($.browser.chrome && $.browser.version.slice(0,2)>6) ||
+ ($.browser.webkit && $.browser.version.slice(0,3)>533) ||
+ ($.browser.mozilla && $.browser.version.slice(0,3)>=2.0) ||
+ ($.browser.msie && $.browser.version.slice(0,2)>7) ||
+ ($.browser.opera && $.browser.version.slice(0,4)>11.5) )
{
- var item = menu[i];
- var $item = $('<div class="item"><div class="icon"></div><div>'+item.name+'</div></div>');
- item["item"] = $item;
- item["index"] = i;
- switch(item.type)
- {
- case 'schema':
- $item.find("div.icon").addClass("home");
- var $container = $('<div class="schema"></div>').load("images/"+item.schema);
- $pages.append($container);
- item["container"] = $container;
- break;
- case 'energy':
- $item.find("div.icon").addClass("chart");
- item["container"] = $pages.find("#energy_container");
- item["load"] = fetchBarChartData;
- break;
- case 'line':
- $item.find("div.icon").addClass("chart");
- item["container"] = $pages.find("#chart_container");
- item["load"] = fetchLineChartData;
- item["page"] = "analogChart.php"
- break;
- case 'power':
- $item.find("div.icon").addClass("chart");
- item["container"] = $pages.find("#chart_container");
- item["load"] = fetchLineChartData;
- item["page"] = "powerChart.php"
- break;
- }
- $item.data(item);
- $menu.append($item);
+ $(document).ready(menu.display);
}
-
- $menu.find("div.item").hover(function() {
- $(this).addClass("hover");
- },
- function() {
- $(this).removeClass("hover");
- });
-
- $menu.find("div.item").click(function() {
- location.hash = $(this).data("index");
- });
-
- $(document).ready(function() {
- $("#menu").append($menu.children());
- $("#pages").append($pages.children());
- lineChart = new google.visualization.LineChart(document.getElementById('line_chart'));
- barChart = new google.visualization.ColumnChart(document.getElementById('bar_chart'));
- handleMenu();
- });
- }
-});
-
-$(document).ready(function() {
- actualValues();
- initToolbar();
-
- $(window).on("hashchange", handleMenu);
-});
-
-function handleMenu() {
- var id = location.hash.substr(1);
-
- if(id == "home" || menu[id]==null)
+ else
+ {
+ $(document).ready(function() {
+ $("#browser a").click(function() {
+ menu.display();
+ });
+ });
+ }
+ },
+ display: function()
{
- $("#logo").animate({'top':'50%','left':'50%'});
- $("#menu").fadeIn();
- $("body").animate({'background-color':'#EEE'});
- $("#content").animate({'top':'100%'},function(){
- $("#content").hide();
- });
- selectedItem = null;
- }
- else if(menu[id] != selectedItem)
+ $("#browser").hide();
+ if(!$("div.item").is(":visible")) {
+ $("div.item").fadeIn('slow');
+ }
+ },
+ handle: function()
{
- selectedItem = menu[id];
- if($("#menu").is(':visible'))
- {
- var newItem = menu[id].item;
- $("div.active").removeClass("active");
- newItem.addClass("active");
- var indicator = $("#indicator");
- var top = newItem.position().top + 14;
- var left = newItem.position().left -1;
- if(!indicator.is(':visible'))
- {
- indicator.css({'top': top , 'left': left});
- indicator.fadeIn();
+ var id = location.hash.substr(1);
+ if(id == "home" || menu.items[id]==null){
+ $("#logo").animate({'top':'50%','left':'50%'});
+ $("#menu").fadeIn();
+ $("body").animate({'background-color':'#EEE'});
+ $("#content").animate({'top':'100%'},function(){
+ $("#content").hide();
+ });
+ menu.selectedItem = null;
+ }
+ else if(menu.items[id] != menu.selectedItem){
+ menu.selectedItem = menu.items[id];
+ if($("#menu").is(':visible')){
+ var newItem = menu.items[id].item;
+ $("div.active").removeClass("active");
+ newItem.addClass("active");
+ var indicator = $("#indicator");
+ var top = newItem.position().top + 14;
+ var left = newItem.position().left -1;
+ if(!indicator.is(':visible'))
+ {
+ indicator.css({'top': top , 'left': left});
+ indicator.fadeIn();
+ }
+ if(indicator.position().top != top)
+ {
+ indicator.animate({'top':top});
+ }
+ indicator.animate({'left':left}, function() {
+ $("#logo").animate({'top':230,'left':230});
+ $("#menu").fadeOut();
+ $("body").animate({'background-color':'#FFF'});
+ $("#content").show().animate({'top':90}, function() {
+ $("#content").trigger('complete');
+ });
+
+ menu.showContent();
+ });
}
- if(indicator.position().top != top)
+ else
{
- indicator.animate({'top':top});
+ menu.showContent();
}
- indicator.animate({'left':left}, function() {
- $("#logo").animate({'top':230,'left':230});
- $("#menu").fadeOut();
- $("body").animate({'background-color':'#FFF'});
- $("#content").show().animate({'top':90}, function() {
- $("#content").trigger('complete');
- });
-
- showContent();
- });
}
- else
- {
- showContent();
- }
- }
-}
-
-function showContent()
-{
- $("#pages").children().hide();
- $("#datepicker").hide();
- $("#buttonset").hide();
- selectedItem["container"].show();
- if(selectedItem["type"] != "schema")
+ },
+ showContent: function()
{
- $("#datepicker").show();
- $("#buttonset").show();
- selectedItem.load();
- }
-}
-
-function initToolbar()
-{
- $("#home").button({
- icons: {
- primary: "ui-icon-home"
- }
- }).click(function (){
- location.hash = "home";
- });
-
- $("#back").button({
- icons: {
- primary: "ui-icon-carat-1-w"
- },
- text: false
- }).click(function (){
- currentTime.setTime(currentTime.getTime() - 86400000);
- $("#datepicker").datepicker("setDate", currentTime);
- selectedItem.load();
- });
-
- $("#date").button().click(function (){
- currentTime = new Date();
- $("#datepicker").datepicker("setDate", currentTime);
- selectedItem.load();
- });
-
- $("#forward").button({
- icons: {
- primary: "ui-icon-carat-1-e"
- },
- text: false
- }).click(function (){
- currentTime.setTime(currentTime.getTime() + 86400000);
- $("#datepicker").datepicker("setDate", currentTime);
- selectedItem.load();
- });
-
- $("#datepicker").addClass("ui-widget ui-widget-content ui-corner-all").datepicker({
- "onSelect": function(date) {
- currentTime = $.datepicker.parseDate("dd.mm.yy",date);
- selectedItem.load();
+ $("#pages").children().hide();
+ menu.selectedItem["container"].show();
+
+ switch(menu.selectedItem["type"]) {
+ case "schema":
+ toolbar.hideDateNavigation();
+ actualValues.fetchData();
+ break;
+ case "energy":
+ toolbar.showDateNavigation();
+ toolbar.showGrouping();
+ menu.selectedItem.load();
+ break;
+ default:
+ toolbar.showDateNavigation();
+ toolbar.showPeriod();
+ menu.selectedItem.load();
+ break;
}
- });
-
- $("#datepicker").datepicker("setDate", currentTime);
-
- $("#buttonset").buttonset();
+ }
}
-function fetchLineChartData() {
- var chartId = selectedItem["id"];
-
-
- $.ajax({
- url: selectedItem["page"],
- data: {
- date: (currentTime.getFullYear() + "-" + (currentTime.getMonth() + 1) + "-" + currentTime.getDate()),
- id: chartId
- },
- dataType:"json",
- timeout: 120000,
- success: function(jsonData) {
- if($("#content").is(":animated"))
- {
- $("#content").one('complete', jsonData, drawLineChart);
- }
- else
- {
- drawLineChart({data:jsonData});
- }
- },
- complete: function(xhr,status) {
- $("#overlay").hide();
- },
- beforeSend: function(xhr,settings) {
- $("#overlay").show();
- }
- });
-}
-function drawLineChart(object)
+var actualValues =
{
- var data = new google.visualization.DataTable();
- data.addColumn('datetime', 'Time');
-
- var cols = selectedItem["columns"];
-
- for (var i in cols)
+ init: function()
{
- data.addColumn('number', cols[i]);
- }
-
- for ( var i = 0; i < object.data.length; i++ ) {
- object.data[i][0] = new Date(object.data[i][0]*1000);
- }
-
- data.addRows(object.data);
- google.visualization.events.addListener(lineChart, 'click', clickHandler);
- google.visualization.events.addListener(lineChart, 'select', selectHandler);
-
- unit = selectedItem["unit"];
-
- lineChartOptions = {
- height: 500,
- hAxis: {format: 'H:mm'},
- vAxis: {format: unit, minValue: 0},
- animation: {
- duration: 1000,
- easing: 'out'
- },
- chartArea: {width: '80%', height: '80%'},
- legend: {position: 'bottom'}
- };
-
- if(object.data[0]){
- lineChartOptions.hAxis.viewWindow = {min:object.data[0][0], max:object.data[object.data.length-1][0]};
- }
-
- function selectHandler(e) {
- if(lineChart.getSelection().length && lineChart.getSelection()[0].row) {
- var row = lineChart.getSelection()[0].row;
- lineChartOptions.hAxis.viewWindow.min = new Date(object.data[row][0].getTime()-1800000);
- lineChartOptions.hAxis.viewWindow.max = new Date(object.data[row][0].getTime()+1800000);
- lineChart.draw(data, lineChartOptions);
+ this.fetchData();
+ setTimeout(this.timer, 30000);
+ },
+ fetchData: function()
+ {
+ $.ajax({
+ url: "latest.php",
+ dataType:"json",
+ success: this.display
+ });
+ },
+ timer: function()
+ {
+ if(menu.selectedItem && menu.selectedItem["type"] == "schema")
+ {
+ actualValues.fetchData();
}
- }
- function clickHandler(e) {
- if(e.targetID == "chartarea") {
- lineChartOptions.hAxis.viewWindow.min = object.data[0][0];
- lineChartOptions.hAxis.viewWindow.max = object.data[object.data.length-1][0];
- lineChart.draw(data, lineChartOptions);
+ setTimeout(actualValues.timer, 30000);
+ },
+ display: function(data)
+ {
+ for(var i in actualValues.values) {
+ var value = actualValues.values[i];
+ $(value.path).text(value.format.replace(/((DIGITAL|MWH|KWH)\()?#\.?(#*)\)?/g, function(number,tmp,modifier,fractions) {
+ switch(modifier) {
+ case "DIGITAL":
+ return converter.digital(data[value.frame][value.type]);
+ case "MWH":
+ return converter.mwh(data[value.frame][value.type]).toFixed(fractions.length);
+ case "KWH":
+ return converter.kwh(data[value.frame][value.type]).toFixed(fractions.length);
+ default:
+ return data[value.frame][value.type].toFixed(fractions.length);
+ }
+
+ }));
}
}
-
- lineChart.draw(data, lineChartOptions);
}
-function fetchBarChartData() {
- var chartId = selectedItem["id"];
- $.ajax({
- url: "energyChart.php",
- data: {
- date: (currentTime.getFullYear() + "-" + (currentTime.getMonth() + 1) + "-" + currentTime.getDate()),
- id: chartId
- },
- dataType:"json",
- success: function(jsonData) {
- if($("#content").is(":animated"))
- {
- $("#content").one('complete', jsonData, drawBarChart);
- }
- else
- {
- drawBarChart({data:jsonData});
- }
- },
- complete: function(xhr,status) {
- $("#overlay").hide();
- },
- beforeSend: function(xhr,settings) {
- $("#overlay").show();
- }
- });
-}
-
-function drawBarChart(object)
-{
- var data = new google.visualization.DataTable();
- data.addColumn('string', 'Date');
-
- var cols = selectedItem["columns"];
-
- for (var i in cols)
+var converter = {
+ digital: function(value)
{
- data.addColumn('number', cols[i]);
- }
-
- data.addRows(object.data);
-
- barChart.draw(data,
+ if(value == 1) {
+ return 'EIN';
+ }
+ else {
+ return 'AUS';
+ }
+ },
+ mwh: function(value)
{
- height: 500,
- vAxis: {format: '#.## kWh', minValue: 0},
- animation: {
- duration: 1000,
- easing: 'out'
- },
- chartArea: {width: '80%', height: '80%'},
- legend: {position: 'bottom'}
- });
-}
-
-function actualValues()
-{
- $.ajax({
- url: "latest.php",
- dataType:"json",
- success: function(jsonData) {
- printValues(jsonData);
- }
- });
- setTimeout(actualValues, 60000);
-}
-
-function printValues(jsonData)
-{
- for(var i in values)
+ return value/1000;
+ },
+ kwh: function(value)
{
- var value = values[i];
- $(value.path).text(value.format.replace(/((DIGITAL)\()?#\.?(#*)\)?/, function(number,tmp,modifier,fractions) {
- switch(modifier)
- {
- case "DIGITAL":
- return digitalValue(jsonData[value.frame][value.type]);
- default:
- return jsonData[value.frame][value.type].toFixed(fractions.length);
- }
-
- }));
+ return value%1000;
}
}
-function digitalValue(value)
-{
- if(value == 1)
- {
- return 'EIN';
- }
- else
- {
- return 'AUS';
- }
-}
+google.load('visualization', '1', {'packages':['corechart']});
+menu.checkBrowser();
+menu.init();
+
+$(document).ready(function() {
+ actualValues.init();
+ toolbar.init();
+
+ $(window).on("hashchange", menu.handle);
+});
View
98 js/toolbar.js
@@ -0,0 +1,98 @@
+var toolbar = {
+ date: new Date(),
+ init: function()
+ {
+ this.home = $("#home");
+ this.back = $("#back");
+ this.today = $("#date");
+ this.forward = $("#forward");
+ this.datepicker = $("#datepicker");
+ this.buttonset = $("#buttonset");
+ this.period = $("#period");
+ this.grouping = $("#grouping");
+
+ // home button
+ this.home.button({
+ icons: {
+ primary: "ui-icon-home"
+ }
+ }).click(function (){
+ location.hash = "home";
+ });
+
+ // back button
+ this.back.button({
+ icons: {
+ primary: "ui-icon-carat-1-w"
+ },
+ text: false
+ }).click(function (){
+ toolbar.setDate(new Date(toolbar.date.getTime() - 86400000));
+ });
+
+ // forward button
+ this.forward.button({
+ icons: {
+ primary: "ui-icon-carat-1-e"
+ },
+ text: false
+ }).click(function (){
+ toolbar.setDate(new Date(toolbar.date.getTime() + 86400000));
+ });
+
+ // today button
+ this.today.button().click(function (){
+ toolbar.setDate(new Date());
+ });
+
+ // init datepicker
+ this.datepicker.addClass("ui-widget ui-widget-content ui-corner-all").datepicker({
+ "onSelect": function(selectedDate){
+ toolbar.setDate($.datepicker.parseDate("dd.mm.yy",selectedDate));
+ }
+ });
+ this.datepicker.datepicker("setDate", this.date);
+
+ // init buttonsets
+ this.buttonset.buttonset();
+ this.period.buttonset().change(function(){menu.selectedItem.load()});
+ this.grouping.buttonset().change(function(){menu.selectedItem.load()});
+ },
+ setDate: function(newDate)
+ {
+ this.date = newDate;
+ this.datepicker.datepicker("setDate", this.date);
+ menu.selectedItem.load();
+ },
+ hideDateNavigation: function()
+ {
+ this.datepicker.hide();
+ this.buttonset.hide();
+ this.period.hide();
+ this.grouping.hide();
+ },
+ showDateNavigation: function()
+ {
+ this.datepicker.show();
+ this.buttonset.show();
+ },
+ showPeriod: function()
+ {
+ this.grouping.hide();
+ this.period.show();
+ },
+ showGrouping: function()
+ {
+ this.period.hide();
+ this.grouping.show();
+ },
+ getPeriod: function()
+ {
+ return $("#period input[type='radio']:checked").val();
+ },
+ getGrouping: function()
+ {
+ return $("#grouping input[type='radio']:checked").val();
+ }
+}
+
View
63 lib/backend/database.inc.php
@@ -217,9 +217,10 @@ private function insertPower($value, $id, $name, $frame)
* Query the analog chart with given id and date
* @param Date $date
* @param int $chartId
+ * @param int $period
* @return Array
*/
- public function queryAnalog($date, $chartId)
+ public function queryAnalog($date, $chartId, $period)
{
// get the columns of a chart
$statement = $this->mysqli->prepare("SELECT frame, type FROM t_names ".
@@ -233,9 +234,11 @@ public function queryAnalog($date, $chartId)
$columns = array();
$joins = array();
+ $columnNames = array();
$i = 1;
// build chart query
while($statement->fetch()) {
+ $columnNames[] = sprintf("c%d",$i);
$columns[] = sprintf("FORMAT(d%02d.value,1) AS c%d",$i,$i);
$joins[] = sprintf("INNER JOIN t_analogs AS d%02d ".
"ON (t_datasets.id = d%02d.dataset ".
@@ -244,13 +247,16 @@ public function queryAnalog($date, $chartId)
$i++;
}
- $sql = "SELECT UNIX_TIMESTAMP(t_datasets.date) AS date, ";
+ $sql = "SELECT date, ";
+ $sql .= join(", ",$columnNames);
+ $sql .= " FROM (SELECT @row := @row+1 AS rownum, UNIX_TIMESTAMP(t_datasets.date) AS date, ";
$sql .= join(", ", $columns);
- $sql .= " FROM t_datasets ";
+ $sql .= " FROM (SELECT @row :=0) r, t_datasets ";
$sql .= join(" ", $joins);
- $sql .= sprintf(" WHERE t_datasets.date > \"%s\" ".
- "AND t_datasets.date < DATE_ADD(\"%s\", INTERVAL 1 DAY);",
- $date, $date);
+ $sql .= sprintf(" WHERE t_datasets.date > DATE_SUB(\"%s\", INTERVAL %d DAY) ".
+ "AND t_datasets.date < DATE_ADD(\"%s\", INTERVAL 1 DAY))".
+ "ranked WHERE rownum %%%d =1;",
+ $date, $period, $date, ($period+1)*2);
$statement->close();
@@ -267,9 +273,10 @@ public function queryAnalog($date, $chartId)
* Query the power chart with given id and date
* @param Date $date
* @param int $chartId
+ * @param int $period
* @return Array
*/
- public function queryPower($date, $chartId)
+ public function queryPower($date, $chartId, $period)
{
// get the columns of a chart
$statement = $this->mysqli->prepare("SELECT frame, type FROM t_names ".
@@ -281,10 +288,12 @@ public function queryPower($date, $chartId)
$statement->bind_result($frame, $name);
$columns = array();
- $joins = array();
+ $joins = array();
+ $columnNames = array();
$i = 1;
// build chart query
- while($statement->fetch()) {
+ while($statement->fetch()) {
+ $columnNames[] = sprintf("c%d",$i);
$columns[] = sprintf("FORMAT(d%02d.value,3) AS c%d",$i,$i);
$joins[] = sprintf("INNER JOIN t_powers AS d%02d ".
"ON (t_datasets.id = d%02d.dataset ".
@@ -293,14 +302,16 @@ public function queryPower($date, $chartId)
$i++;
}
- $sql = "SELECT UNIX_TIMESTAMP(t_datasets.date) AS date, ";
+ $sql = "SELECT date, ";
+ $sql .= join(", ",$columnNames);
+ $sql .= " FROM (SELECT @row := @row+1 AS rownum, UNIX_TIMESTAMP(t_datasets.date) AS date, ";
$sql .= join(", ", $columns);
- $sql .= " FROM t_datasets ";
+ $sql .= " FROM (SELECT @row :=0) r, t_datasets ";
$sql .= join(" ", $joins);
- $sql .= sprintf(" WHERE t_datasets.date > \"%s\" ".
- "AND t_datasets.date < DATE_ADD(\"%s\", INTERVAL 1 DAY);",
- $date, $date);
-
+ $sql .= sprintf(" WHERE t_datasets.date > DATE_SUB(\"%s\", INTERVAL %d DAY) ".
+ "AND t_datasets.date < DATE_ADD(\"%s\", INTERVAL 1 DAY))".
+ "ranked WHERE rownum %%%d =1;",
+ $date, $period, $date, ($period+1)*2);
$statement->close();
// fetch chart data
@@ -316,9 +327,10 @@ public function queryPower($date, $chartId)
* Query the energy chart with given id and date
* @param Date $date
* @param int $chartId
+ * @param string $grouping
* @return Array
*/
- public function queryEnergy($date, $chartId)
+ public function queryEnergy($date, $chartId, $grouping)
{
// get the columns of a chart
$statement = $this->mysqli->prepare("SELECT frame, type FROM t_names ".
@@ -344,15 +356,26 @@ public function queryEnergy($date, $chartId)
"AND d%02dmax.type = \"%s\")", $i, $i, $i, $frame, $i, $name);
$i++;
}
-
- $sql = "SELECT DATE_FORMAT(tmp.date, '%d-%m') AS date, ";
+
+ if($grouping=="months") {
+ $format = "%b 20%y";
+ $interval = "1 YEAR";
+ $groupby = "MONTH(date),YEAR(date)";
+ }
+ else {
+ $format = "%d. %b";
+ $interval = "10 DAY";
+ $groupby = "DATE(date)";
+ }
+ $sql = "SELECT DATE_FORMAT(tmp.date, '".$format."') AS date, ";
$sql .= join(", ", $columns);
$sql .= sprintf(" FROM (SELECT t_datasets.date AS date,".
"MIN(t_datasets.id) AS minId, MAX(t_datasets.id) AS maxId ".
"FROM t_datasets ".
"WHERE t_datasets.date < DATE_ADD(\"%s\",INTERVAL 1 DAY) ".
- "AND t_datasets.date > DATE_SUB(\"%s\", INTERVAL 10 DAY) ".
- "GROUP BY DATE(date)) AS tmp ", $date, $date);
+ "AND t_datasets.date > DATE_SUB(\"%s\", INTERVAL %s) ".
+ "GROUP BY %s) AS tmp ", $date, $date,
+ $interval, $groupby);
$sql .= join(" ", $joins);
$statement->close();
View
12 lib/commonChart.inc.php
@@ -23,6 +23,18 @@
$chartId = 1;
if(isset($_GET["id"])) {
$chartId = $_GET["id"];
+}
+
+// get period
+$period = 0;
+if(isset($_GET["period"]) && $_GET["period"] == "week") {
+ $period = 6;
+}
+
+// get grouping
+$grouping = "days";
+if(isset($_GET["grouping"])) {
+ $grouping = $_GET["grouping"];
}
// connect to database
View
2 powerChart.php
@@ -1,6 +1,6 @@
<?php
include_once 'lib/commonChart.inc.php';
-echo preg_replace('/"(-?\d+\.?\d*)"/', '$1', json_encode($database->queryPower($date,$chartId)));
+echo preg_replace('/"(-?\d+\.?\d*)"/', '$1', json_encode($database->queryPower($date,$chartId, $period)));

0 comments on commit c540bf5

Please sign in to comment.