- enhanced performance for charts

- better axis title handling

git-svn-id: https://svn.fhem.de/fhem/trunk@3126 2b470e98-0d58-463d-a4d8-8e2adae1ed80

fhem/www/frontend/CHANGED

@@ -1,3 +1,7 @@
+Update vom 27.4.2013
+  * Performance Verbesserungen der Charts
+  * Achsenkonfiguration aufgeräumt
+  * Achsenbeschriftung verbessert / erweitert
 Update vom 26.4.2013
   * Testintegration von Highcharts
   * Neue abhängige Bibliotheken Highcharts und JQuery hinzugefügt

fhem/www/frontend/controls_frontend.txt

@@ -49,15 +49,15 @@ UPD 2013-04-03_07:27:17 345 www/frontend/app/resources/icons/arrow_left.png
 UPD 2013-04-03_07:27:17 733 www/frontend/app/resources/icons/add.png
 UPD 2013-04-03_07:27:17 389 www/frontend/app/resources/icons/resultset_previous.png
 UPD 2013-04-26_05:05:23 2238 www/frontend/app/app.js
-UPD 2013-04-20_04:52:50 20318 www/frontend/app/view/LineChartPanel.js
+UPD 2013-04-27_06:11:24 22156 www/frontend/app/view/LineChartPanel.js
 UPD 2013-04-26_05:05:57 22790 www/frontend/app/view/HighChartsPanel.js
 UPD 2013-04-20_04:52:50 1202 www/frontend/app/view/ChartGridPanel.js
 UPD 2013-04-03_07:26:40 15793 www/frontend/app/view/DevicePanel.js
 UPD 2013-04-26_05:05:57 8922 www/frontend/app/view/Viewport.js
 UPD 2013-04-01_07:05:14 2476 www/frontend/app/view/TableDataGridPanel.js
-UPD 2013-04-20_04:52:30 62546 www/frontend/app/controller/ChartController.js
+UPD 2013-04-27_06:11:02 64176 www/frontend/app/controller/ChartController.js
 UPD 2013-04-26_05:05:41 12806 www/frontend/app/controller/HighChartController.js
-UPD 2013-04-26_05:05:41 13891 www/frontend/app/controller/MainController.js
+UPD 2013-04-27_06:15:02 13892 www/frontend/app/controller/MainController.js
 UPD 2013-04-01_07:04:35 202 www/frontend/app/model/ReadingsModel.js
 UPD 2013-04-01_07:04:36 338 www/frontend/app/model/SavedChartsModel.js
 UPD 2013-04-01_07:04:34 11535 www/frontend/app/model/ChartModel.js
@@ -67,7 +67,7 @@ UPD 2013-04-01_07:04:54 432 www/frontend/app/store/ChartStore.js
 UPD 2013-04-01_07:04:54 451 www/frontend/app/store/SavedChartsStore.js
 UPD 2013-04-01_07:04:54 426 www/frontend/app/store/ReadingsStore.js
 UPD 2013-04-01_07:04:54 1048 www/frontend/app/store/TableDataStore.js
-UPD 2013-04-01_07:04:53 414 www/frontend/app/store/DeviceStore.js
+UPD 2013-04-27_06:11:13 439 www/frontend/app/store/DeviceStore.js
 UPD 2013-04-01_07:03:30 260475 www/frontend/lib/ext-4.2.0.663/ext-theme-gray-all.css
 UPD 2013-04-01_07:03:30 1434875 www/frontend/lib/ext-4.2.0.663/ext-all.js
 UPD 2013-04-01_07:03:33 1981 www/frontend/lib/ext-4.2.0.663/images/tools/tools-sprites-trans.gif

fhem/www/frontend/www/frontend/app/controller/ChartController.js

@@ -127,145 +127,148 @@ Ext.define('FHEM.controller.ChartController', {
         //show loadmask
         me.getLinechartpanel().setLoading(true);
         
-        //collapse chart settings
+        //timeout needed for loadmask to appear
-        me.getChartformpanel().collapse();
+        window.setTimeout(function() {
         
-        //getting the necessary values
+            //suspending complex layouts
-        var devices = Ext.ComponentQuery.query('combobox[name=devicecombo]'),
+            Ext.suspendLayouts();
-            yaxes = Ext.ComponentQuery.query('combobox[name=yaxiscombo]'),
+            
-            yaxescolorcombos = Ext.ComponentQuery.query('combobox[name=yaxiscolorcombo]'),
+            //getting the necessary values
-            yaxesfillchecks = Ext.ComponentQuery.query('checkbox[name=yaxisfillcheck]'),
+            var devices = Ext.ComponentQuery.query('combobox[name=devicecombo]'),
-            yaxesstepcheck = Ext.ComponentQuery.query('checkbox[name=yaxisstepcheck]'),
+                yaxes = Ext.ComponentQuery.query('combobox[name=yaxiscombo]'),
-            yaxesstatistics = Ext.ComponentQuery.query('combobox[name=yaxisstatisticscombo]'),
+                yaxescolorcombos = Ext.ComponentQuery.query('combobox[name=yaxiscolorcombo]'),
-            axissideradio = Ext.ComponentQuery.query('radiogroup[name=axisside]');
+                yaxesfillchecks = Ext.ComponentQuery.query('checkbox[name=yaxisfillcheck]'),
-        
+                yaxesstepcheck = Ext.ComponentQuery.query('checkbox[name=yaxisstepcheck]'),
-        var starttime = me.getStarttimepicker().getValue(),
+                yaxesstatistics = Ext.ComponentQuery.query('combobox[name=yaxisstatisticscombo]'),
-            dbstarttime = Ext.Date.format(starttime, 'Y-m-d_H:i:s'),
+                axissideradio = Ext.ComponentQuery.query('radiogroup[name=axisside]');
-            endtime = me.getEndtimepicker().getValue(),
+            
-            dbendtime = Ext.Date.format(endtime, 'Y-m-d_H:i:s'),
+            var starttime = me.getStarttimepicker().getValue(),
-            dynamicradio = Ext.ComponentQuery.query('radiogroup[name=dynamictime]')[0],
+                dbstarttime = Ext.Date.format(starttime, 'Y-m-d_H:i:s'),
-            chartpanel = me.getLinechartpanel(),
+                endtime = me.getEndtimepicker().getValue(),
-            chart = me.getChart();
+                dbendtime = Ext.Date.format(endtime, 'Y-m-d_H:i:s'),
-        
+                dynamicradio = Ext.ComponentQuery.query('radiogroup[name=dynamictime]')[0],
-        //cleanup chartpanel 
+                chartpanel = me.getLinechartpanel(),
-        var existingchartgrid = Ext.ComponentQuery.query('panel[name=chartgridpanel]')[0];
+                chart = me.getChart();
-        if (!existingchartgrid) {
+            
-            var chartdatagrid = Ext.create('FHEM.view.ChartGridPanel', {
+            //cleanup chartpanel 
-                name: 'chartgridpanel',
+            var existingchartgrid = Ext.ComponentQuery.query('panel[name=chartgridpanel]')[0];
-                height: 200,
+            if (!existingchartgrid) {
-                maxHeight: 200
+                var chartdatagrid = Ext.create('FHEM.view.ChartGridPanel', {
-            });
+                    name: 'chartgridpanel',
-            chartpanel.add(chartdatagrid);
+                    height: 200,
-        } else {
+                    maxHeight: 200
-            existingchartgrid.down('grid').getStore().removeAll();
+                });
-        }
+                chartpanel.add(chartdatagrid);
-        var existingchart = Ext.ComponentQuery.query('panel[name=chartpanel]')[0];
+            } else {
-        if (!existingchart) {
+                existingchartgrid.down('grid').getStore().removeAll();
-            var store = Ext.create('FHEM.store.ChartStore'),
-                proxy = store.getProxy();
-            chart = me.createChart(store);
-            chartpanel.add(chart);
-        } else {
-            chart.getStore().removeAll();
-            chart.getStore().destroy();
-            //removes the store completely from chart
-            chart.bindStore();
-            var chartstore = Ext.create('FHEM.store.ChartStore');
-            chart.bindStore(chartstore);
-            chart.series.removeAll();
-            chart.axes.get(0).setTitle("");
-        }
-        
-        
-        //reset zoomValues
-        chartpanel.setLastYmax(null);
-        chartpanel.setLastYmin(null);
-        chartpanel.setLastXmax(null);
-        chartpanel.setLastXmin(null);
-        
-        me.maxYValue = 0;
-        me.minYValue = 9999999;
-        me.maxY2Value = 0;
-        me.minY2Value = 9999999;
-        
-        //check if timerange or dynamic time should be used
-        dynamicradio.eachBox(function(box, idx){
-            var date = new Date();
-            if (box.checked && stepchangecalled !== true) {
-                if (box.inputValue === "year") {
-                    starttime = Ext.Date.parse(date.getUTCFullYear() + "-01-01", "Y-m-d");
-                    dbstarttime = Ext.Date.format(starttime, 'Y-m-d_H:i:s');
-                    endtime = Ext.Date.parse(date.getUTCFullYear() +  1 + "-01-01", "Y-m-d");
-                    dbendtime = Ext.Date.format(endtime, 'Y-m-d_H:i:s');
-                } else if (box.inputValue === "month") {
-                    starttime = Ext.Date.getFirstDateOfMonth(date);
-                    dbstarttime = Ext.Date.format(starttime, 'Y-m-d_H:i:s');
-                    endtime = Ext.Date.getLastDateOfMonth(date);
-                    dbendtime = Ext.Date.format(endtime, 'Y-m-d_H:i:s');
-                } else if (box.inputValue === "week") {
-                    date.setHours(0);
-                    date.setMinutes(0);
-                    date.setSeconds(0);
-                    //monday starts with 0 till sat with 5, sund with -1
-                    var dayoffset = date.getDay() - 1,
-                        monday,
-                        nextmonday;
-                    if (dayoffset >= 0) {
-                        monday = Ext.Date.add(date, Ext.Date.DAY, -dayoffset);
-                    } else {
-                        //we have a sunday
-                        monday = Ext.Date.add(date, Ext.Date.DAY, -6);
-                    }
-                    nextmonday = Ext.Date.add(monday, Ext.Date.DAY, 7);
-                    
-                    starttime = monday;
-                    dbstarttime = Ext.Date.format(starttime, 'Y-m-d_H:i:s');
-                    endtime = nextmonday;
-                    dbendtime = Ext.Date.format(endtime, 'Y-m-d_H:i:s');
-                    
-                } else if (box.inputValue === "day") {
-                    date.setHours(0);
-                    date.setMinutes(0);
-                    date.setSeconds(0);
-                    
-                    starttime = date;
-                    dbstarttime = Ext.Date.format(starttime, 'Y-m-d_H:i:s');
-                    endtime = Ext.Date.add(date, Ext.Date.DAY, 1);
-                    dbendtime = Ext.Date.format(endtime, 'Y-m-d_H:i:s');
-                    
-                } else if (box.inputValue === "hour") {
-                    date.setMinutes(0);
-                    date.setSeconds(0);
-                    
-                    starttime = date;
-                    dbstarttime = Ext.Date.format(starttime, 'Y-m-d_H:i:s');
-                    endtime = Ext.Date.add(date, Ext.Date.HOUR, 1);
-                    dbendtime = Ext.Date.format(endtime, 'Y-m-d_H:i:s');
-                } else {
-                    Ext.Msg.alert("Error", "Could not setup the dynamic time.");
-                }
-                me.getStarttimepicker().setValue(starttime);
-                me.getEndtimepicker().setValue(endtime);
             }
-        });
+            var existingchart = Ext.ComponentQuery.query('panel[name=chartpanel]')[0];
-        
+            if (!existingchart) {
-        var i = 0;
+                var store = Ext.create('FHEM.store.ChartStore'),
-        Ext.each(yaxes, function(y) {
+                    proxy = store.getProxy();
-            var device = devices[i].getValue(),
+                chart = me.createChart(store);
-                yaxis = yaxes[i].getValue(),
+                chartpanel.add(chart);
-                yaxiscolorcombo = yaxescolorcombos[i].getValue(),
+            } else {
-                yaxisfillcheck = yaxesfillchecks[i].checked,
+                chart.getStore().removeAll();
-                yaxisstepcheck = yaxesstepcheck[i].checked,
+                chart.getStore().destroy();
-                yaxisstatistics = yaxesstatistics[i].getValue(),
+                //removes the store completely from chart
-                axisside = axissideradio[i].getChecked()[0].getSubmitValue();
+                chart.bindStore();
-            if(yaxis === "" || yaxis === null) {
+                var chartstore = Ext.create('FHEM.store.ChartStore');
-                yaxis = yaxes[i].getRawValue();
+                chart.bindStore(chartstore);
+                chart.series.removeAll();
+                chart.axes.get(0).setTitle("");
             }
             
-            me.populateAxis(i, yaxes.length, device, yaxis, yaxiscolorcombo, yaxisfillcheck, yaxisstepcheck, axisside, yaxisstatistics, dbstarttime, dbendtime);
+            //reset zoomValues
-            i++;
+            chartpanel.setLastYmax(null);
-        });
+            chartpanel.setLastYmin(null);
-        
+            chartpanel.setLastXmax(null);
+            chartpanel.setLastXmin(null);
+            
+            me.maxYValue = 0;
+            me.minYValue = 9999999;
+            me.maxY2Value = 0;
+            me.minY2Value = 9999999;
+            
+            //check if timerange or dynamic time should be used
+            dynamicradio.eachBox(function(box, idx){
+                var date = new Date();
+                if (box.checked && stepchangecalled !== true) {
+                    if (box.inputValue === "year") {
+                        starttime = Ext.Date.parse(date.getUTCFullYear() + "-01-01", "Y-m-d");
+                        dbstarttime = Ext.Date.format(starttime, 'Y-m-d_H:i:s');
+                        endtime = Ext.Date.parse(date.getUTCFullYear() +  1 + "-01-01", "Y-m-d");
+                        dbendtime = Ext.Date.format(endtime, 'Y-m-d_H:i:s');
+                    } else if (box.inputValue === "month") {
+                        starttime = Ext.Date.getFirstDateOfMonth(date);
+                        dbstarttime = Ext.Date.format(starttime, 'Y-m-d_H:i:s');
+                        endtime = Ext.Date.getLastDateOfMonth(date);
+                        dbendtime = Ext.Date.format(endtime, 'Y-m-d_H:i:s');
+                    } else if (box.inputValue === "week") {
+                        date.setHours(0);
+                        date.setMinutes(0);
+                        date.setSeconds(0);
+                        //monday starts with 0 till sat with 5, sund with -1
+                        var dayoffset = date.getDay() - 1,
+                            monday,
+                            nextmonday;
+                        if (dayoffset >= 0) {
+                            monday = Ext.Date.add(date, Ext.Date.DAY, -dayoffset);
+                        } else {
+                            //we have a sunday
+                            monday = Ext.Date.add(date, Ext.Date.DAY, -6);
+                        }
+                        nextmonday = Ext.Date.add(monday, Ext.Date.DAY, 7);
+                        
+                        starttime = monday;
+                        dbstarttime = Ext.Date.format(starttime, 'Y-m-d_H:i:s');
+                        endtime = nextmonday;
+                        dbendtime = Ext.Date.format(endtime, 'Y-m-d_H:i:s');
+                        
+                    } else if (box.inputValue === "day") {
+                        date.setHours(0);
+                        date.setMinutes(0);
+                        date.setSeconds(0);
+                        
+                        starttime = date;
+                        dbstarttime = Ext.Date.format(starttime, 'Y-m-d_H:i:s');
+                        endtime = Ext.Date.add(date, Ext.Date.DAY, 1);
+                        dbendtime = Ext.Date.format(endtime, 'Y-m-d_H:i:s');
+                        
+                    } else if (box.inputValue === "hour") {
+                        date.setMinutes(0);
+                        date.setSeconds(0);
+                        
+                        starttime = date;
+                        dbstarttime = Ext.Date.format(starttime, 'Y-m-d_H:i:s');
+                        endtime = Ext.Date.add(date, Ext.Date.HOUR, 1);
+                        dbendtime = Ext.Date.format(endtime, 'Y-m-d_H:i:s');
+                    } else {
+                        Ext.Msg.alert("Error", "Could not setup the dynamic time.");
+                    }
+                    me.getStarttimepicker().setValue(starttime);
+                    me.getEndtimepicker().setValue(endtime);
+                }
+            });
+            
+            var i = 0;
+            Ext.each(yaxes, function(y) {
+                var device = devices[i].getValue(),
+                    yaxis = yaxes[i].getValue(),
+                    yaxiscolorcombo = yaxescolorcombos[i].getValue(),
+                    yaxisfillcheck = yaxesfillchecks[i].checked,
+                    yaxisstepcheck = yaxesstepcheck[i].checked,
+                    yaxisstatistics = yaxesstatistics[i].getValue(),
+                    axisside = axissideradio[i].getChecked()[0].getSubmitValue();
+                if(yaxis === "" || yaxis === null) {
+                    yaxis = yaxes[i].getRawValue();
+                }
+                
+                me.populateAxis(i, yaxes.length, device, yaxis, yaxiscolorcombo, yaxisfillcheck, yaxisstepcheck, axisside, yaxisstatistics, dbstarttime, dbendtime);
+                i++;
+            });
+            
+        }, 300);
     },
     
     /**
@@ -277,13 +280,24 @@ Ext.define('FHEM.controller.ChartController', {
         var cfp = Ext.ComponentQuery.query('form[name=chartformpanel]')[0];
         var cdg = Ext.ComponentQuery.query('panel[name=chartgridpanel]')[0];
         
-        if (lcp && lcv && cfp && cdg) {
+        // disable animation as long as we resize, causes serious performance issues
-            var chartheight = lcp.getHeight() - cfp.getHeight() - cdg.getHeight() - 95;
+        lcv.animate = false;
-            var chartwidth = lcp.getWidth() - 25;
-            lcv.setHeight(chartheight);
-            lcv.setWidth(chartwidth);
-        }
         
+        if (lcp && lcv && cfp && cdg) {
+            var lcph = lcp.getHeight(),
+                lcpw = lcp.getWidth(),
+                cfph = cfp.getHeight(),
+                cdgh = cdg.getHeight();
+            
+            if (lcph && lcpw && cfph && cdgh) {
+                var chartheight = lcph - cfph - cdgh - 95;
+                var chartwidth = lcpw - 25;
+                lcv.setHeight(chartheight);
+                lcv.setWidth(chartwidth);
+            }
+        }
+        lcv.animate = true;
+        lcv.redraw();
     },
     
     /**
@@ -388,7 +402,7 @@ Ext.define('FHEM.controller.ChartController', {
                             title : 'Time'
                         }
                     ],
-                    animate: true,
+                    animate: false,
                     store: store,
                     enableMask: true,
                     mask: true,//'vertical',//true, //'horizontal',
@@ -438,7 +452,6 @@ Ext.define('FHEM.controller.ChartController', {
      * creating baselines
      */
     createBaseLine: function(index, basestart, baseend, basefill, basecolor) {
-        
         var me = this,
             chart = me.getChart(),
             store = chart.getStore(),
@@ -504,9 +517,9 @@ Ext.define('FHEM.controller.ChartController', {
             generalizationfactor = Ext.ComponentQuery.query('combobox[name=genfactor]')[0].getValue();
         
         if (i > 0) {
-            yseries = me.createSeries('VALUE' + (i + 1), yaxis, yaxisfillcheck, yaxiscolorcombo, axisside);
+            yseries = me.createSeries('VALUE' + (i + 1), device + " - " + yaxis, yaxisfillcheck, yaxiscolorcombo, axisside);
         } else {
-            yseries = me.createSeries('VALUE', yaxis, yaxisfillcheck, yaxiscolorcombo, axisside);
+            yseries = me.createSeries('VALUE', device + " - " + yaxis, yaxisfillcheck, yaxiscolorcombo, axisside);
         }
         
         var url;
@@ -613,7 +626,7 @@ Ext.define('FHEM.controller.ChartController', {
                   }
                   
                   //as we have the valuetext, we can fill the grid
-                //fill the grid with the data
+                  //fill the grid with the data
                   me.fillChartGrid(json.data, valuetext);
                   
                   var timestamptext;
@@ -645,7 +658,7 @@ Ext.define('FHEM.controller.ChartController', {
                       //check if we have to ues steps
                       //if yes, create a new record with the same value as the last one
                       //and a timestamp 1 millisecond less than the actual record to add.
-                      // only do this, when last record is from same axis
+                      //only do this, when last record is from same axis
                       if(yaxisstepcheck) {
                           if (store.last() && !Ext.isEmpty(store.last().get(valuetext)) && store.last().get(valuetext) !== "") {
                               var lastrec = store.last();
@@ -727,7 +740,7 @@ Ext.define('FHEM.controller.ChartController', {
                 if (me.minYValue > baseend) {
                     me.minYValue = baseend;
                 }
-                i++;
+                j++;
             });
             me.doFinalChartLayout(chart);
         }
@@ -774,13 +787,17 @@ Ext.define('FHEM.controller.ChartController', {
         
         chart.axes.get(2).fromDate = starttime;
         chart.axes.get(2).toDate = endtime;
-        chart.axes.get(2).processView();
-        chart.redraw();
         
-        me.resizeChart();
+        chart.axes.get(2).processView();
+        
+        //collapse chart settings
+        me.getChartformpanel().collapse();
         
         me.getLinechartpanel().setLoading(false);
         
+        //enable animation
+        chart.animate = true;
+        
     },
     
     /**
@@ -788,6 +805,9 @@ Ext.define('FHEM.controller.ChartController', {
      */
     createSeries: function(yfield, title, fill, color, axisside) {
         
+        //resuming the layout
+        Ext.resumeLayouts(true);
+        
         //setting axistitle and fontsize
         var chart = this.getChart(),
             axis;
@@ -804,7 +824,16 @@ Ext.define('FHEM.controller.ChartController', {
         } else {
             axis.setTitle(axis.title + " / " + title);
         }
-        axis.displaySprite.attr.font = "14px Arial, Helvetica, sans-serif";
+        if (axis.title.length > 80) {
+            axis.displaySprite.attr.font = "10px Arial, Helvetica, sans-serif";
+        } else if (axis.title.length > 50) {
+            axis.displaySprite.attr.font = "12px Arial, Helvetica, sans-serif";
+        } else if (axis.title.length > 40) {
+            axis.displaySprite.attr.font = "13px Arial, Helvetica, sans-serif";
+        }  else  {
+            axis.displaySprite.attr.font = "14px Arial, Helvetica, sans-serif";
+        }
+        
         
         //adding linked yfield to axis fields
         axis.fields.push(yfield);
@@ -1344,7 +1373,7 @@ Ext.define('FHEM.controller.ChartController', {
      */
     fillChartGrid: function(jsondata, valuetext) {
         if (jsondata && jsondata[0]) {
-            this.getChartformpanel().collapse();
+            //this.getChartformpanel().collapse();
             
             var store = this.getChartdatagrid().getStore(),
                 columnwidth = 0,

fhem/www/frontend/www/frontend/app/controller/MainController.js

@@ -97,7 +97,7 @@ Ext.define('FHEM.controller.MainController', {
         
         if (Ext.isDefined(FHEM.version)) {
             var sp = this.getStatustextfield();
-            sp.setText(FHEM.version + "; Frontend Version: 0.6 - 2013-04-20");
+            sp.setText(FHEM.version + "; Frontend Version: 0.61 - 2013-04-27");
         }
         
         //setup west accordion / treepanel

fhem/www/frontend/www/frontend/app/store/DeviceStore.js

@@ -8,6 +8,7 @@ Ext.define('FHEM.store.DeviceStore', {
     proxy: {
         type: 'ajax',
         method: 'POST',
+        noCache : false,
         url: '', //gets set by controller
         reader: {
             type: 'json',

fhem/www/frontend/www/frontend/app/view/LineChartPanel.js

@@ -73,6 +73,21 @@ Ext.define('FHEM.view.LineChartPanel', {
         
         var me = this;
         
+        me.devicestore = Ext.create('FHEM.store.DeviceStore', {
+            proxy: {
+                type: 'ajax',
+                noCache: false,
+                method: 'POST',
+                url: '../../../fhem?cmd=get+' + FHEM.dblogname + '+-+webchart+""+""+""+getdevices&XHR=1',
+                reader: {
+                    type: 'json',
+                    root: 'data',
+                    totalProperty: 'totalCount'
+                }
+            },
+            autoLoad: true
+        });
+        
         var chartSettingPanel = Ext.create('Ext.form.Panel', {
             title: 'Chart Settings - Click me to edit',
             name: 'chartformpanel',
@@ -123,6 +138,7 @@ Ext.define('FHEM.view.LineChartPanel', {
                           name: 'starttimepicker',
                           format: 'Y-m-d H:i:s',
                           fieldLabel: 'Starttime',
+                          allowBlank: false,
                           labelWidth: 70
                         },
                         {
@@ -130,6 +146,7 @@ Ext.define('FHEM.view.LineChartPanel', {
                           name: 'endtimepicker',
                           format: 'Y-m-d H:i:s',
                           fieldLabel: 'Endtime',
+                          allowBlank: false,
                           labelWidth: 70
                         },
                         {
@@ -181,6 +198,24 @@ Ext.define('FHEM.view.LineChartPanel', {
                             name: 'resetchartform',
                             icon: 'app/resources/icons/delete.png'
                         },
+                        {
+                            xtype: 'button',
+                            width: 110,
+                            text: 'Add another Y-Axis',
+                            name: 'addyaxisbtn',
+                            handler: function(btn) {
+                                me.createNewYAxis();
+                            }
+                        },
+                        {
+                            xtype: 'button',
+                            width: 90,
+                            text: 'Add Baseline',
+                            name: 'addbaselinebtn',
+                            handler: function(btn) {
+                                me.createNewBaseLineFields(btn);
+                            }      
+                        },
                         {
                             xtype: 'radio',
                             width: 160,
@@ -269,19 +304,9 @@ Ext.define('FHEM.view.LineChartPanel', {
                           name: 'devicecombo',
                           fieldLabel: 'Select Device',
                           labelWidth: 90,
-                          store: Ext.create('FHEM.store.DeviceStore', {
+                          store: me.devicestore,
-                              proxy: {
+                          allowBlank: false,
-                                  type: 'ajax',
+                          queryMode: 'local',
-                                  method: 'POST',
-                                  url: '../../../fhem?cmd=get+' + FHEM.dblogname + '+-+webchart+""+""+""+getdevices&XHR=1',
-                                  reader: {
-                                      type: 'json',
-                                      root: 'data',
-                                      totalProperty: 'totalCount'
-                                  }
-                              },
-                              autoLoad: true
-                          }),
                           displayField: 'DEVICE',
                           valueField: 'DEVICE',
                           listeners: {
@@ -301,6 +326,7 @@ Ext.define('FHEM.view.LineChartPanel', {
                             xtype: 'combobox', 
                             name: 'yaxiscombo',
                             fieldLabel: 'Select Y-Axis',
+                            allowBlank: false,
                             disabled: true,
                             labelWidth: 90,
                             inputWidth: 110,
@@ -408,20 +434,11 @@ Ext.define('FHEM.view.LineChartPanel', {
                         },
                         {
                             xtype: 'button',
-                            width: 110,
+                            width: 60,
-                            text: 'Add another Y-Axis',
+                            text: 'Remove',
-                            name: 'addyaxisbtn',
+                            name: 'removerowbtn',
                             handler: function(btn) {
-                                me.createNewYAxis();
+                                me.removeRow(btn);
-                            }
-                        },
-                        {
-                            xtype: 'button',
-                            width: 90,
-                            text: 'Add Baseline',
-                            name: 'addbaselinebtn',
-                            handler: function(btn) {
-                                me.createNewBaseLineFields(btn);
                             }      
                         }
                 ]
@@ -435,54 +452,83 @@ Ext.define('FHEM.view.LineChartPanel', {
      * 
      */
     createNewBaseLineFields: function(btn) {
+        var me = this;
+        
         var itemsToAdd = [
             {
-                xtype: 'numberfield',
+                xtype: 'fieldset',
-                fieldLabel: 'Startvalue',
+                name: 'baselineowfieldset',
-                name: 'basestart',
+                layout: 'column',
-                allowBlank: false,
+                defaults: {
-                labelWidth: 60,
+                    margin: '5 5 5 0'
-                width: 120
+                },
-            },
+                items: 
-            {
+                    [
-                xtype: 'numberfield',
+                        {
-                fieldLabel: 'Endvalue',
+                            xtype: 'numberfield',
-                name: 'baseend',
+                            fieldLabel: 'Startvalue',
-                allowBlank: false,
+                            name: 'basestart',
-                labelWidth: 60,
+                            allowBlank: false,
-                width: 120
+                            labelWidth: 60,
-            },
+                            width: 120
-            {  
+                        },
-                xtype: 'combobox', 
+                        {
-                name: 'baselinecolorcombo',
+                            xtype: 'numberfield',
-                fieldLabel: 'Baseline Color',
+                            fieldLabel: 'Endvalue',
-                labelWidth: 100,
+                            name: 'baseend',
-                inputWidth: 70,
+                            allowBlank: false,
-                store: Ext.create('Ext.data.Store', {
+                            labelWidth: 60,
-                    fields: ['name', 'value'],
+                            width: 120
-                    data : [
+                        },
-                        {'name':'Blue','value':'#2F40FA'},
+                        {  
-                        {'name':'Green', 'value':'#46E01B'},
+                            xtype: 'combobox', 
-                        {'name':'Orange','value':'#F0A800'},
+                            name: 'baselinecolorcombo',
-                        {'name':'Red','value':'#E0321B'},
+                            fieldLabel: 'Baseline Color',
-                        {'name':'Yellow','value':'#F5ED16'}
+                            labelWidth: 100,
+                            inputWidth: 70,
+                            store: Ext.create('Ext.data.Store', {
+                                fields: ['name', 'value'],
+                                data : [
+                                    {'name':'Blue','value':'#2F40FA'},
+                                    {'name':'Green', 'value':'#46E01B'},
+                                    {'name':'Orange','value':'#F0A800'},
+                                    {'name':'Red','value':'#E0321B'},
+                                    {'name':'Yellow','value':'#F5ED16'}
+                                ]
+                            }),
+                            displayField: 'name',
+                            valueField: 'value',
+                            value: '#46E01B'
+                        },
+                        {  
+                            xtype: 'checkboxfield', 
+                            name: 'baselinefillcheck',
+                            boxLabel: 'Fill'
+                        },
+                        {
+                            xtype: 'button',
+                            width: 60,
+                            text: 'Remove',
+                            name: 'removebaselinebtn',
+                            handler: function(btn) {
+                                me.removeRow(btn);
+                            }      
+                        }
                     ]
-                }),
-                displayField: 'name',
-                valueField: 'value',
-                value: '#46E01B'
-            },
-            {  
-                xtype: 'checkboxfield', 
-                name: 'baselinefillcheck',
-                boxLabel: 'Fill'
             }
         ];
-        if (Ext.isDefined(btn)) {
+        Ext.ComponentQuery.query('fieldset[name=axesfieldset]')[0].add(itemsToAdd);
-            btn.up().add(itemsToAdd);
-        } else {
-            this.down('fieldset[name=singlerowfieldset]').add(itemsToAdd);
-        }
         
+    },
+    
+    /**
+     * remove the current chart configuration row
+     */
+    removeRow: function(btn) {
+        var me = this;
+        if (btn.name === "removerowbtn") {
+            me.setAxiscounter(me.getAxiscounter() - 1);
+        }
+        btn.up().destroy();
     }
 });