mirror of
https://github.com/fhem/fhem-mirror.git
synced 2025-01-31 12:49:34 +00:00
added the new style configuration window for charts
git-svn-id: https://svn.fhem.de/fhem/trunk@4499 2b470e98-0d58-463d-a4d8-8e2adae1ed80
This commit is contained in:
johannnes
parent
1b373cefe0
commit
152a2e2247
@ -276,10 +276,10 @@ UPD 2013-12-07_12:24:10 2270 www/frontend/app/app.js
|
||||
UPD 2013-04-28_02:00:20 1205 www/frontend/app/view/ChartGridPanel.js
|
||||
UPD 2013-07-07_12:12:08 16201 www/frontend/app/view/DevicePanel.js
|
||||
UPD 2013-12-26_08:39:37 10257 www/frontend/app/view/TableDataGridPanel.js
|
||||
UPD 2013-12-26_08:39:37 31894 www/frontend/app/view/LineChartPanel.js
|
||||
UPD 2013-12-29_01:56:25 64890 www/frontend/app/view/LineChartPanel.js
|
||||
UPD 2013-12-27_01:39:11 9980 www/frontend/app/view/Viewport.js
|
||||
UPD 2013-12-27_03:20:41 19171 www/frontend/app/controller/MainController.js
|
||||
UPD 2013-12-27_05:40:34 106568 www/frontend/app/controller/ChartController.js
|
||||
UPD 2013-12-29_01:55:25 19171 www/frontend/app/controller/MainController.js
|
||||
UPD 2013-12-29_01:54:25 112255 www/frontend/app/controller/ChartController.js
|
||||
UPD 2013-06-30_11:46:54 5415 www/frontend/app/controller/TableDataController.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
|
||||
|
||||
@ -297,9 +297,7 @@ Ext.define('FHEM.controller.ChartController', {
|
||||
//getting the necessary values
|
||||
var devices = Ext.ComponentQuery.query('combobox[name=devicecombo]'),
|
||||
yaxes = Ext.ComponentQuery.query('combobox[name=yaxiscombo]'),
|
||||
yaxescolorcombos = Ext.ComponentQuery.query('combobox[name=yaxiscolorcombo]'),
|
||||
yaxesfillchecks = Ext.ComponentQuery.query('checkbox[name=yaxisfillcheck]'),
|
||||
yaxesstepcheck = Ext.ComponentQuery.query('checkbox[name=yaxisstepcheck]'),
|
||||
rowFieldSets = Ext.ComponentQuery.query('fieldset[commonName=singlerowfieldset]'),
|
||||
yaxesstatistics = Ext.ComponentQuery.query('combobox[name=yaxisstatisticscombo]'),
|
||||
axissideradio = Ext.ComponentQuery.query('radiogroup[name=axisside]');
|
||||
|
||||
@ -434,9 +432,7 @@ Ext.define('FHEM.controller.ChartController', {
|
||||
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,
|
||||
styleConfig = rowFieldSets[i].styleConfig,
|
||||
yaxisstatistics = yaxesstatistics[i].getValue(),
|
||||
axisside = axissideradio[i].getChecked()[0].getSubmitValue(),
|
||||
logtype = axissideradio[i].up().down("radiogroup[name=datasourceradio]").getChecked()[0].inputValue;
|
||||
@ -444,8 +440,7 @@ Ext.define('FHEM.controller.ChartController', {
|
||||
yaxis = yaxes[i].getRawValue();
|
||||
}
|
||||
|
||||
me.populateAxis(i, yaxes.length, device, yaxis, yaxiscolorcombo, yaxisfillcheck,
|
||||
yaxisstepcheck, axisside, yaxisstatistics, dbstarttime, dbendtime, logtype);
|
||||
me.populateAxis(i, yaxes.length, device, yaxis, styleConfig, axisside, yaxisstatistics, dbstarttime, dbendtime, logtype);
|
||||
i++;
|
||||
});
|
||||
|
||||
@ -814,7 +809,7 @@ Ext.define('FHEM.controller.ChartController', {
|
||||
/**
|
||||
* fill the axes with data
|
||||
*/
|
||||
populateAxis: function(i, axeslength, device, yaxis, yaxiscolorcombo, yaxisfillcheck, yaxisstepcheck, axisside, yaxisstatistics, dbstarttime, dbendtime, logtype) {
|
||||
populateAxis: function(i, axeslength, device, yaxis, styleConfig, axisside, yaxisstatistics, dbstarttime, dbendtime, logtype) {
|
||||
|
||||
var me = this,
|
||||
chart = me.getChart(),
|
||||
@ -825,9 +820,9 @@ Ext.define('FHEM.controller.ChartController', {
|
||||
generalizationfactor = Ext.ComponentQuery.query('combobox[name=genfactor]')[0].getValue();
|
||||
|
||||
if (i > 0) {
|
||||
yseries = me.createSeries('VALUE' + (i + 1), device + " - " + yaxis, yaxisfillcheck, yaxiscolorcombo, axisside);
|
||||
yseries = me.createSeries('VALUE' + (i + 1), device + " - " + yaxis, styleConfig, axisside);
|
||||
} else {
|
||||
yseries = me.createSeries('VALUE', device + " - " + yaxis, yaxisfillcheck, yaxiscolorcombo, axisside);
|
||||
yseries = me.createSeries('VALUE', device + " - " + yaxis, styleConfig, axisside);
|
||||
}
|
||||
|
||||
var url;
|
||||
@ -896,8 +891,6 @@ Ext.define('FHEM.controller.ChartController', {
|
||||
Ext.each(responseArr, function(row) {
|
||||
// the first column is always the timestamp, followed by device and key:value
|
||||
var timestamp = row.split(" ")[0].replace("_", " "),
|
||||
//keyindex = row.split(": ")[0].split(" ").length - 1,
|
||||
//key = row.split(": ")[0].split(" ")[keyindex],
|
||||
val = row.split(" ")[1];
|
||||
|
||||
if (timestamp && val) {
|
||||
@ -1021,7 +1014,7 @@ Ext.define('FHEM.controller.ChartController', {
|
||||
//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
|
||||
if(yaxisstepcheck) {
|
||||
if(styleConfig.yaxisstepcheck === "true" || styleConfig.yaxisstepcheck === true) {
|
||||
if (store.last() && !Ext.isEmpty(store.last().get(valuetext)) && store.last().get(valuetext) !== "") {
|
||||
var lastrec = store.last();
|
||||
var datetomodify = Ext.Date.parse(json.data[j].TIMESTAMP, "Y-m-d H:i:s");
|
||||
@ -1219,7 +1212,7 @@ Ext.define('FHEM.controller.ChartController', {
|
||||
/**
|
||||
* create a single series for the chart
|
||||
*/
|
||||
createSeries: function(yfield, title, fill, color, axisside) {
|
||||
createSeries: function(yfield, title, styleConfig, axisside) {
|
||||
|
||||
//setting axistitle and fontsize
|
||||
var chart = this.getChart(),
|
||||
@ -1265,27 +1258,27 @@ Ext.define('FHEM.controller.ChartController', {
|
||||
xField : 'TIMESTAMP',
|
||||
yField : yfield,
|
||||
title: title,
|
||||
showInLegend: true,
|
||||
smooth: 0,
|
||||
showInLegend: (styleConfig.yaxislegendcheck === "false" || styleConfig.yaxislegendcheck === false) ? false : true,
|
||||
smooth: (styleConfig.yaxisstepcheck === "true" || styleConfig.yaxisstepcheck === true)? 0 : styleConfig.yaxissmoothing,
|
||||
highlight: {
|
||||
size: 5,
|
||||
radius: 5
|
||||
},
|
||||
fill: fill,
|
||||
fill: (styleConfig.yaxisfillcheck === "false" || styleConfig.yaxisfillcheck === false) ? false : true,
|
||||
style: {
|
||||
fill: color,
|
||||
fill: '#' + styleConfig.fillcolorhexcode,
|
||||
// fill: 'url(#gradientId)',
|
||||
opacity: 0.7,
|
||||
stroke: '#808080',
|
||||
'stroke-width': 2
|
||||
opacity: styleConfig.fillopacity,
|
||||
stroke: '#' + styleConfig.linecolorhexcode,
|
||||
'stroke-width': styleConfig.linestrokewidth
|
||||
},
|
||||
markerConfig: {
|
||||
type: 'circle',
|
||||
radius: 2,
|
||||
stroke: color,
|
||||
fill: color
|
||||
type: styleConfig.pointshape,
|
||||
radius: styleConfig.pointradius,
|
||||
stroke: '#' + styleConfig.pointcolorhexcode,
|
||||
fill: '#' + styleConfig.pointcolorhexcode
|
||||
},
|
||||
showMarkers: true,
|
||||
showMarkers: (styleConfig.yaxisshowpoints === "false" || styleConfig.yaxisshowpoints === false) ? false : true,
|
||||
selectionTolerance: 5,
|
||||
tips : {
|
||||
trackMouse : true,
|
||||
@ -1450,21 +1443,19 @@ Ext.define('FHEM.controller.ChartController', {
|
||||
savename = savename.replace(/\+/g, "_");
|
||||
|
||||
//getting the necessary values
|
||||
var logtypes = Ext.ComponentQuery.query('radiogroup[name=datasourceradio]');
|
||||
var devices = Ext.ComponentQuery.query('combobox[name=devicecombo]');
|
||||
var yaxes = Ext.ComponentQuery.query('combobox[name=yaxiscombo]');
|
||||
var yaxescolorcombos = Ext.ComponentQuery.query('combobox[name=yaxiscolorcombo]');
|
||||
var yaxesfillchecks = Ext.ComponentQuery.query('checkbox[name=yaxisfillcheck]');
|
||||
var yaxesstepchecks = Ext.ComponentQuery.query('checkbox[name=yaxisstepcheck]');
|
||||
var axissideradio = Ext.ComponentQuery.query('radiogroup[name=axisside]');
|
||||
var yaxesstatistics = Ext.ComponentQuery.query('combobox[name=yaxisstatisticscombo]');
|
||||
var logtypes = Ext.ComponentQuery.query('radiogroup[name=datasourceradio]'),
|
||||
devices = Ext.ComponentQuery.query('combobox[name=devicecombo]'),
|
||||
yaxes = Ext.ComponentQuery.query('combobox[name=yaxiscombo]'),
|
||||
rowFieldSets = Ext.ComponentQuery.query('fieldset[commonName=singlerowfieldset]'),
|
||||
axissideradio = Ext.ComponentQuery.query('radiogroup[name=axisside]'),
|
||||
yaxesstatistics = Ext.ComponentQuery.query('combobox[name=yaxisstatisticscombo]'),
|
||||
|
||||
var basesstart = Ext.ComponentQuery.query('numberfield[name=basestart]');
|
||||
var basesend = Ext.ComponentQuery.query('numberfield[name=baseend]');
|
||||
var basescolors = Ext.ComponentQuery.query('combobox[name=baselinecolorcombo]');
|
||||
var basesfills = Ext.ComponentQuery.query('checkboxfield[name=baselinefillcheck]');
|
||||
basesstart = Ext.ComponentQuery.query('numberfield[name=basestart]'),
|
||||
basesend = Ext.ComponentQuery.query('numberfield[name=baseend]'),
|
||||
basescolors = Ext.ComponentQuery.query('combobox[name=baselinecolorcombo]'),
|
||||
basesfills = Ext.ComponentQuery.query('checkboxfield[name=baselinefillcheck]'),
|
||||
|
||||
var starttime = me.getStarttimepicker().getValue(),
|
||||
starttime = me.getStarttimepicker().getValue(),
|
||||
dbstarttime = Ext.Date.format(starttime, 'Y-m-d_H:i:s'),
|
||||
endtime = me.getEndtimepicker().getValue(),
|
||||
dbendtime = Ext.Date.format(endtime, 'Y-m-d_H:i:s'),
|
||||
@ -1493,9 +1484,18 @@ Ext.define('FHEM.controller.ChartController', {
|
||||
var logtype = logtypes[i].getChecked()[0].inputValue,
|
||||
device = dev.getValue(),
|
||||
yaxis = yaxes[i].getValue(),
|
||||
yaxiscolorcombo = yaxescolorcombos[i].getDisplayValue(),
|
||||
yaxisfillcheck = yaxesfillchecks[i].checked,
|
||||
yaxisstepcheck = yaxesstepchecks[i].checked,
|
||||
linestrokewidth = rowFieldSets[i].styleConfig.linestrokewidth,
|
||||
linecolorhexcode = rowFieldSets[i].styleConfig.linecolorhexcode.toString(),
|
||||
fillopacity = rowFieldSets[i].styleConfig.fillopacity,
|
||||
fillcolorhexcode = rowFieldSets[i].styleConfig.fillcolorhexcode,
|
||||
yaxisshowpoints = rowFieldSets[i].styleConfig.yaxisshowpoints,
|
||||
pointshape = rowFieldSets[i].styleConfig.pointshape,
|
||||
pointradius = rowFieldSets[i].styleConfig.pointradius,
|
||||
yaxissmoothing = rowFieldSets[i].styleConfig.yaxissmoothing,
|
||||
yaxislegendcheck = rowFieldSets[i].styleConfig.yaxislegendcheck,
|
||||
pointcolorhexcode = rowFieldSets[i].styleConfig.pointcolorhexcode,
|
||||
yaxisfillcheck = rowFieldSets[i].styleConfig.yaxisfillcheck,
|
||||
yaxisstepcheck = rowFieldSets[i].styleConfig.yaxisstepcheck,
|
||||
yaxisstatistics = yaxesstatistics[i].getValue(),
|
||||
axisside = axissideradio[i].getChecked()[0].getSubmitValue(),
|
||||
rightaxistitle = me.getChartformpanel().down('textfield[name=rightaxistitle]').getValue(),
|
||||
@ -1506,11 +1506,20 @@ Ext.define('FHEM.controller.ChartController', {
|
||||
//replacing + in title
|
||||
rightaxistitle = rightaxistitle.replace(/\+/g, "_");
|
||||
leftaxistitle = leftaxistitle.replace(/\+/g, "_");
|
||||
|
||||
if (i === 0) {
|
||||
jsonConfig += '"y":"' + yaxis + '","device":"' + device + '",';
|
||||
jsonConfig += '"logtype":"' + logtype + '",';
|
||||
jsonConfig += '"yaxiscolorcombo":"' + yaxiscolorcombo + '","yaxisfillcheck":"' + yaxisfillcheck + '",';
|
||||
jsonConfig += '"linestrokewidth":"' + linestrokewidth + '",';
|
||||
jsonConfig += '"linecolorhexcode":"' + linecolorhexcode + '",';
|
||||
jsonConfig += '"fillopacity":"' + fillopacity + '",';
|
||||
jsonConfig += '"fillcolorhexcode":"' + fillcolorhexcode + '",';
|
||||
jsonConfig += '"yaxisshowpoints":"' + yaxisshowpoints + '",';
|
||||
jsonConfig += '"pointshape":"' + pointshape + '",';
|
||||
jsonConfig += '"pointradius":"' + pointradius + '",';
|
||||
jsonConfig += '"yaxissmoothing":"' + yaxissmoothing + '",';
|
||||
jsonConfig += '"yaxislegendcheck":"' + yaxislegendcheck + '",';
|
||||
jsonConfig += '"pointcolorhexcode":"' + pointcolorhexcode + '",';
|
||||
jsonConfig += '"yaxisfillcheck":"' + yaxisfillcheck + '",';
|
||||
jsonConfig += '"yaxisstepcheck":"' + yaxisstepcheck + '",';
|
||||
jsonConfig += '"yaxisside":"' + axisside + '",';
|
||||
jsonConfig += '"leftaxistitle":"' + leftaxistitle + '",';
|
||||
@ -1523,16 +1532,26 @@ Ext.define('FHEM.controller.ChartController', {
|
||||
var logtypename = "y" + (i + 1) + "logtype",
|
||||
axisname = "y" + (i + 1) + "axis",
|
||||
devicename = "y" + (i + 1) + "device",
|
||||
colorname = "y" + (i + 1) + "axiscolorcombo",
|
||||
fillname = "y" + (i + 1) + "axisfillcheck",
|
||||
stepname = "y" + (i + 1) + "axisstepcheck",
|
||||
sidename = "y" + (i + 1) + "axisside",
|
||||
statsname = "y" + (i + 1) + "axisstatistics";
|
||||
statsname = "y" + (i + 1) + "axisstatistics",
|
||||
prefix = "y" + (i + 1);
|
||||
|
||||
jsonConfig += '"' + axisname + '":"' + yaxis + '","' + devicename + '":"' + device + '",';
|
||||
jsonConfig += '"' + logtypename + '":"' + logtype + '",';
|
||||
jsonConfig += '"' + colorname + '":"' + yaxiscolorcombo + '","' + fillname + '":"' + yaxisfillcheck + '",';
|
||||
jsonConfig += '"' + stepname + '":"' + yaxisstepcheck + '",';
|
||||
|
||||
jsonConfig += '"' + prefix + 'linestrokewidth' + '":"' + linestrokewidth + '",';
|
||||
jsonConfig += '"' + prefix + 'linecolorhexcode' + '":"' + linecolorhexcode + '",';
|
||||
jsonConfig += '"' + prefix + 'fillopacity' + '":"' + fillopacity + '",';
|
||||
jsonConfig += '"' + prefix + 'fillcolorhexcode' + '":"' + fillcolorhexcode + '",';
|
||||
jsonConfig += '"' + prefix + 'yaxisshowpoints' + '":"' + yaxisshowpoints + '",';
|
||||
jsonConfig += '"' + prefix + 'pointshape' + '":"' + pointshape + '",';
|
||||
jsonConfig += '"' + prefix + 'pointradius' + '":"' + pointradius + '",';
|
||||
jsonConfig += '"' + prefix + 'yaxissmoothing' + '":"' + yaxissmoothing + '",';
|
||||
jsonConfig += '"' + prefix + 'yaxislegendcheck' + '":"' + yaxislegendcheck + '",';
|
||||
jsonConfig += '"' + prefix + 'pointcolorhexcode' + '":"' + pointcolorhexcode + '",';
|
||||
jsonConfig += '"' + prefix + 'axisfillcheck' + '":"' + yaxisfillcheck + '",';
|
||||
jsonConfig += '"' + prefix + 'axisstepcheck' + '":"' + yaxisstepcheck + '",';
|
||||
|
||||
jsonConfig += '"' + sidename + '":"' + axisside + '",';
|
||||
if (yaxisstatistics !== "none") {
|
||||
jsonConfig += '"' + statsname + '":"' + yaxisstatistics + '",';
|
||||
@ -1760,19 +1779,30 @@ Ext.define('FHEM.controller.ChartController', {
|
||||
yaxeslength++;
|
||||
}
|
||||
|
||||
var logtypes = Ext.ComponentQuery.query('radiogroup[name=datasourceradio]');
|
||||
var devices = Ext.ComponentQuery.query('combobox[name=devicecombo]');
|
||||
var yaxes = Ext.ComponentQuery.query('combobox[name=yaxiscombo]');
|
||||
var yaxescolorcombos = Ext.ComponentQuery.query('combobox[name=yaxiscolorcombo]');
|
||||
var yaxesfillchecks = Ext.ComponentQuery.query('checkbox[name=yaxisfillcheck]');
|
||||
var yaxesstepchecks = Ext.ComponentQuery.query('checkbox[name=yaxisstepcheck]');
|
||||
var axissideradio = Ext.ComponentQuery.query('radiogroup[name=axisside]');
|
||||
var yaxesstatistics = Ext.ComponentQuery.query('combobox[name=yaxisstatisticscombo]');
|
||||
var logtypename;
|
||||
var logtypes = Ext.ComponentQuery.query('radiogroup[name=datasourceradio]'),
|
||||
devices = Ext.ComponentQuery.query('combobox[name=devicecombo]'),
|
||||
yaxes = Ext.ComponentQuery.query('combobox[name=yaxiscombo]'),
|
||||
rowFieldSets = Ext.ComponentQuery.query('fieldset[commonName=singlerowfieldset]'),
|
||||
axissideradio = Ext.ComponentQuery.query('radiogroup[name=axisside]'),
|
||||
yaxesstatistics = Ext.ComponentQuery.query('combobox[name=yaxisstatisticscombo]'),
|
||||
oldColorArray = ['Blue', 'Green', 'Orange', 'Yellow', 'Red'],
|
||||
logtypename;
|
||||
|
||||
var i = 0;
|
||||
Ext.each(yaxes, function(yaxis) {
|
||||
|
||||
// cleanup old colorvalues from old chartconfigs
|
||||
if (chartdata.yaxiscolorcombo === "Blue") {
|
||||
chartdata.yaxiscolorcombo = "3366FF";
|
||||
} else if (chartdata.yaxiscolorcombo === "Green") {
|
||||
chartdata.yaxiscolorcombo = "00FF00";
|
||||
} else if (chartdata.yaxiscolorcombo === "Orange") {
|
||||
chartdata.yaxiscolorcombo = "FF6600";
|
||||
} else if (chartdata.yaxiscolorcombo === "Yellow") {
|
||||
chartdata.yaxiscolorcombo = "FFFF00";
|
||||
} else if (chartdata.yaxiscolorcombo === "Red") {
|
||||
chartdata.yaxiscolorcombo = "FF0000";
|
||||
}
|
||||
if (i === 0) {
|
||||
logtypename = logtypes[i].getChecked()[0].name;
|
||||
eval('logtypes[i].setValue({' + logtypename + ': "' + chartdata.logtype + '"})');
|
||||
@ -1780,9 +1810,19 @@ Ext.define('FHEM.controller.ChartController', {
|
||||
yaxes[i].getStore().getProxy().url = url = '../../../fhem?cmd=get+' + FHEM.dblogname + '+-+webchart+""+""+' + chartdata.device + '+getreadings&XHR=1';
|
||||
yaxes[i].setDisabled(false);
|
||||
yaxes[i].setValue(chartdata.y);
|
||||
yaxescolorcombos[i].setValue(chartdata.yaxiscolorcombo);
|
||||
yaxesfillchecks[i].setValue(chartdata.yaxisfillcheck);
|
||||
yaxesstepchecks[i].setValue(chartdata.yaxisstepcheck);
|
||||
rowFieldSets[i].styleConfig.linestrokewidth = chartdata.linestrokewidth || 2;
|
||||
rowFieldSets[i].styleConfig.linecolorhexcode = chartdata.linecolorhexcode || '000000';
|
||||
rowFieldSets[i].styleConfig.fillopacity = chartdata.fillopacity || 0.5;
|
||||
rowFieldSets[i].styleConfig.fillcolorhexcode = chartdata.fillcolorhexcode || chartdata.yaxiscolorcombo || 'FF0000';
|
||||
rowFieldSets[i].styleConfig.yaxisshowpoints = chartdata.yaxisshowpoints || true;
|
||||
rowFieldSets[i].styleConfig.pointshape = chartdata.pointshape || 'circle';
|
||||
rowFieldSets[i].styleConfig.pointradius = chartdata.pointradius || 2;
|
||||
rowFieldSets[i].styleConfig.yaxissmoothing = chartdata.yaxissmoothing || 3;
|
||||
rowFieldSets[i].styleConfig.yaxislegendcheck = chartdata.yaxislegendcheck || true;
|
||||
rowFieldSets[i].styleConfig.pointcolorhexcode = chartdata.pointcolorhexcode || chartdata.yaxiscolorcombo || 'FF0000';
|
||||
rowFieldSets[i].styleConfig.yaxisfillcheck = chartdata.yaxisfillcheck || false;
|
||||
rowFieldSets[i].styleConfig.yaxisstepcheck = chartdata.yaxisstepcheck || false;
|
||||
|
||||
axissideradio[i].items.items[0].setValue(chartdata.yaxisside);
|
||||
|
||||
if (chartdata.yaxisstatistics && chartdata.yaxisstatistics !== "") {
|
||||
@ -1792,23 +1832,44 @@ Ext.define('FHEM.controller.ChartController', {
|
||||
}
|
||||
i++;
|
||||
} else {
|
||||
logtypename = logtypes[i].getChecked()[0].name,
|
||||
logtype = "y" + (i + 1) + "logtype",
|
||||
axisdevice = "y" + (i + 1) + "device",
|
||||
axisname = "y" + (i + 1) + "axis",
|
||||
axiscolorcombo = axisname + "colorcombo",
|
||||
axisfillcheck = axisname + "fillcheck",
|
||||
axisstepcheck = axisname + "stepcheck",
|
||||
axisside = axisname + "side",
|
||||
axisstatistics = axisname + "statistics";
|
||||
logtypename = logtypes[i].getChecked()[0].name,
|
||||
logtype = "y" + (i + 1) + "logtype",
|
||||
axisdevice = "y" + (i + 1) + "device",
|
||||
axisname = "y" + (i + 1) + "axis",
|
||||
axisside = axisname + "side",
|
||||
axisstatistics = axisname + "statistics",
|
||||
prefix = "y" + (i + 1),
|
||||
oldcolorcombo = eval('chartdata.' + prefix + 'axiscolorcombo');
|
||||
|
||||
// cleanup old colorvalues from old chartconfigs
|
||||
if (oldcolorcombo === "Blue") {
|
||||
oldcolorcombo = "3366FF";
|
||||
} else if (oldcolorcombo === "Green") {
|
||||
oldcolorcombo = "00FF00";
|
||||
} else if (oldcolorcombo === "Orange") {
|
||||
oldcolorcombo = "FF6600";
|
||||
} else if (oldcolorcombo === "Yellow") {
|
||||
oldcolorcombo = "FFFF00";
|
||||
} else if (oldcolorcombo === "Red") {
|
||||
oldcolorcombo = "FF0000";
|
||||
}
|
||||
eval('logtypes[i].setValue({' + logtypename + ' : chartdata.' + logtype + '})');
|
||||
eval('devices[i].setValue(chartdata.' + axisdevice + ')');
|
||||
yaxes[i].getStore().getProxy().url = '../../../fhem?cmd=get+' + FHEM.dblogname + '+-+webchart+""+""+' + eval('chartdata.' + axisdevice) + '+getreadings&XHR=1';
|
||||
yaxes[i].setDisabled(false);
|
||||
eval('yaxes[i].setValue(chartdata.' + axisname + ')');
|
||||
eval('yaxescolorcombos[i].setValue(chartdata.' + axiscolorcombo + ')');
|
||||
eval('yaxesfillchecks[i].setValue(chartdata.' + axisfillcheck + ')');
|
||||
eval('yaxesstepchecks[i].setValue(chartdata.' + axisstepcheck + ')');
|
||||
rowFieldSets[i].styleConfig.linestrokewidth = eval('chartdata.' + prefix + 'linestrokewidth') || 2;
|
||||
rowFieldSets[i].styleConfig.linecolorhexcode = eval('chartdata.' + prefix + 'linecolorhexcode') || '000000';
|
||||
rowFieldSets[i].styleConfig.fillopacity = eval('chartdata.' + prefix + 'fillopacity') || 0.5;
|
||||
rowFieldSets[i].styleConfig.fillcolorhexcode = eval('chartdata.' + prefix + 'fillcolorhexcode') || oldcolorcombo || 'FF0000';
|
||||
rowFieldSets[i].styleConfig.yaxisshowpoints = eval('chartdata.' + prefix + 'yaxisshowpoints') || true;
|
||||
rowFieldSets[i].styleConfig.pointshape = eval('chartdata.' + prefix + 'pointshape') || 'circle';
|
||||
rowFieldSets[i].styleConfig.pointradius = eval('chartdata.' + prefix + 'pointradius') || 2;
|
||||
rowFieldSets[i].styleConfig.yaxissmoothing = eval('chartdata.' + prefix + 'yaxissmoothing') || 3;
|
||||
rowFieldSets[i].styleConfig.yaxislegendcheck = eval('chartdata.' + prefix + 'yaxislegendcheck') || true;
|
||||
rowFieldSets[i].styleConfig.pointcolorhexcode = eval('chartdata.' + prefix + 'pointcolorhexcode') || oldcolorcombo || 'FF0000';
|
||||
rowFieldSets[i].styleConfig.yaxisfillcheck = eval('chartdata.' + prefix + 'axisfillcheck') || false;
|
||||
rowFieldSets[i].styleConfig.yaxisstepcheck = eval('chartdata.' + prefix + 'axisstepcheck') || false;
|
||||
eval('axissideradio[i].items.items[0].setValue(chartdata.' + axisside + ')');
|
||||
|
||||
if (eval('chartdata.' + axisstatistics) && eval('chartdata.' + axisstatistics) !== "") {
|
||||
@ -2104,11 +2165,6 @@ Ext.define('FHEM.controller.ChartController', {
|
||||
column = {
|
||||
header: key,
|
||||
dataIndex: key,
|
||||
// xtype: 'numbercolumn',
|
||||
// format:'0.000',
|
||||
// renderer: function(value){
|
||||
// return parseFloat(value, 10);
|
||||
// },
|
||||
width: columnwidth
|
||||
};
|
||||
} else {
|
||||
|
||||
@ -95,7 +95,7 @@ Ext.define('FHEM.controller.MainController', {
|
||||
|
||||
if (Ext.isDefined(FHEM.version)) {
|
||||
var sp = this.getStatustextfield();
|
||||
sp.setText(FHEM.version + "; Frontend Version: 1.0.4 - 2013-12-27");
|
||||
sp.setText(FHEM.version + "; Frontend Version: 1.0.5 - 2013-12-29");
|
||||
}
|
||||
|
||||
this.setupTree(false);
|
||||
|
||||
@ -449,11 +449,13 @@ Ext.define('FHEM.view.LineChartPanel', {
|
||||
var me = this;
|
||||
|
||||
me.setAxiscounter(me.getAxiscounter() + 1);
|
||||
var countForThisRow = me.getAxiscounter();
|
||||
|
||||
var components =
|
||||
{
|
||||
xtype: 'fieldset',
|
||||
name: 'singlerowfieldset',
|
||||
name: 'singlerowfieldset' + countForThisRow,
|
||||
commonName: 'singlerowfieldset',
|
||||
layout: 'hbox',
|
||||
autoScroll: true,
|
||||
defaults: {
|
||||
@ -464,7 +466,7 @@ Ext.define('FHEM.view.LineChartPanel', {
|
||||
{
|
||||
xtype: 'radiogroup',
|
||||
name: 'datasourceradio',
|
||||
rowCount: me.getAxiscounter(),
|
||||
rowCount: countForThisRow,
|
||||
allowBlank: false,
|
||||
defaults: {
|
||||
labelWidth: 40,
|
||||
@ -473,14 +475,14 @@ Ext.define('FHEM.view.LineChartPanel', {
|
||||
items: [
|
||||
{
|
||||
fieldLabel: 'DbLog',
|
||||
name: 'logtype' + me.getAxiscounter(),
|
||||
name: 'logtype' + countForThisRow,
|
||||
inputValue: 'dblog',
|
||||
checked: true,
|
||||
disabled: !FHEM.dblogname
|
||||
},
|
||||
{
|
||||
fieldLabel: 'FileLog',
|
||||
name: 'logtype' + me.getAxiscounter(),
|
||||
name: 'logtype' + countForThisRow,
|
||||
inputValue: 'filelog',
|
||||
checked: false,
|
||||
disabled: !FHEM.filelogs
|
||||
@ -538,36 +540,352 @@ Ext.define('FHEM.view.LineChartPanel', {
|
||||
displayField: 'READING',
|
||||
valueField: 'READING'
|
||||
},
|
||||
{
|
||||
xtype: 'combobox',
|
||||
name: 'yaxiscolorcombo',
|
||||
fieldLabel: 'Y-Color',
|
||||
labelWidth: 50,
|
||||
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: '#2F40FA'
|
||||
},
|
||||
{
|
||||
xtype: 'checkboxfield',
|
||||
name: 'yaxisfillcheck',
|
||||
boxLabel: 'Fill'
|
||||
},
|
||||
{
|
||||
xtype: 'checkboxfield',
|
||||
name: 'yaxisstepcheck',
|
||||
boxLabel: 'Steps',
|
||||
tooltip: 'Check, if the chart should be shown with steps instead of a linear Line'
|
||||
{
|
||||
xtype: 'button',
|
||||
text: 'Styling...',
|
||||
handler: function() {
|
||||
Ext.create('Ext.window.Window', {
|
||||
width: 470,
|
||||
height: 600,
|
||||
name: 'stylerwindow',
|
||||
title: 'Set the Style for this Axis',
|
||||
modal: true,
|
||||
constrainHeader: true,
|
||||
items: [
|
||||
{
|
||||
xtype: 'panel',
|
||||
title: 'Preview',
|
||||
height: 200,
|
||||
items: [
|
||||
me.createPreviewChart(countForThisRow)
|
||||
]
|
||||
},
|
||||
{
|
||||
xtype: 'panel',
|
||||
title: 'Configuration',
|
||||
autoScroll: true,
|
||||
height: 335,
|
||||
defaults: {
|
||||
padding: '5px 5px 5px 5px'
|
||||
},
|
||||
items: [
|
||||
{
|
||||
xtype: 'fieldset',
|
||||
layout: 'vbox',
|
||||
title: 'Line Settings',
|
||||
items: [
|
||||
{
|
||||
xtype: 'numberfield',
|
||||
name: 'linestrokewidth',
|
||||
fieldLabel: 'Line Stroke Width',
|
||||
editable: false,
|
||||
labelWidth: 150,
|
||||
value: me.getStyleConfig(countForThisRow).linestrokewidth,
|
||||
maxValue: 10,
|
||||
minValue: 1,
|
||||
listeners: {
|
||||
change: function(field, val) {
|
||||
me.createPreviewChart(countForThisRow);
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
xtype: 'container',
|
||||
name: 'linecolorcontainer',
|
||||
layout: 'hbox',
|
||||
items: [
|
||||
{
|
||||
xtype: 'displayfield',
|
||||
value: 'Select your Linecolor: ',
|
||||
width: 155
|
||||
},
|
||||
{
|
||||
xtype: 'colorpicker',
|
||||
listeners: {
|
||||
select: function(picker, selColor) {
|
||||
picker.up().down('textfield').setValue(selColor);
|
||||
me.createPreviewChart(countForThisRow);
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
xtype: 'textfield',
|
||||
padding: '0 0 0 5px',
|
||||
labelWidth: 50,
|
||||
width: 120,
|
||||
name: 'linecolorhexcode',
|
||||
fieldLabel: 'Hexcode',
|
||||
value: me.getStyleConfig(countForThisRow).linecolorhexcode.indexOf("#") >= 0 ? me.getStyleConfig(countForThisRow).linecolorhexcode.split("#")[1] : me.getStyleConfig(countForThisRow).linecolorhexcode,
|
||||
listeners: {
|
||||
change: function(field, val) {
|
||||
me.createPreviewChart(countForThisRow);
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
xtype: 'fieldset',
|
||||
layout: 'vbox',
|
||||
title: 'Fill Color',
|
||||
items: [
|
||||
{
|
||||
xtype: 'checkboxfield',
|
||||
name: 'yaxisfillcheck',
|
||||
fieldLabel: 'Use a Fill below the line?',
|
||||
labelWidth: 150,
|
||||
checked: (me.getStyleConfig(countForThisRow).yaxisfillcheck === "false" || !me.getStyleConfig(countForThisRow).yaxisfillcheck) ? false : true,
|
||||
listeners: {
|
||||
change: function(box, state) {
|
||||
if (state === true) {
|
||||
box.up().down('numberfield').show();
|
||||
box.up().down('container[name=fillcolorcontainer]').show();
|
||||
me.createPreviewChart(countForThisRow);
|
||||
} else {
|
||||
box.up().down('numberfield').hide();
|
||||
box.up().down('container[name=fillcolorcontainer]').hide();
|
||||
me.createPreviewChart(countForThisRow);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
xtype: 'numberfield',
|
||||
name: 'fillopacity',
|
||||
fieldLabel: 'Opacity for Fill',
|
||||
editable: false,
|
||||
hidden: (me.getStyleConfig(countForThisRow).yaxisfillcheck === "false" || me.getStyleConfig(countForThisRow).yaxisfillcheck === false) ? true : false,
|
||||
labelWidth: 150,
|
||||
value: me.getStyleConfig(countForThisRow).fillopacity,
|
||||
maxValue: 1.0,
|
||||
minValue: 0.1,
|
||||
step: 0.1,
|
||||
listeners: {
|
||||
change: function(field, val) {
|
||||
me.createPreviewChart(countForThisRow);
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
xtype: 'container',
|
||||
name: 'fillcolorcontainer',
|
||||
layout: 'hbox',
|
||||
hidden: (me.getStyleConfig(countForThisRow).yaxisfillcheck === "false" || me.getStyleConfig(countForThisRow).yaxisfillcheck === false) ? true : false,
|
||||
items: [
|
||||
{
|
||||
xtype: 'displayfield',
|
||||
value: 'Select your Fillcolor: ',
|
||||
width: 155
|
||||
},
|
||||
{
|
||||
xtype: 'colorpicker',
|
||||
listeners: {
|
||||
select: function(picker, selColor) {
|
||||
picker.up().down('textfield').setValue(selColor);
|
||||
me.createPreviewChart(countForThisRow);
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
xtype: 'textfield',
|
||||
padding: '0 0 0 5px',
|
||||
labelWidth: 50,
|
||||
width: 120,
|
||||
name: 'fillcolorhexcode',
|
||||
fieldLabel: 'Hexcode',
|
||||
value: me.getStyleConfig(countForThisRow).fillcolorhexcode.indexOf("#") >= 0 ? me.getStyleConfig(countForThisRow).fillcolorhexcode.split("#")[1] : me.getStyleConfig(countForThisRow).fillcolorhexcode,
|
||||
listeners: {
|
||||
change: function(field, val) {
|
||||
me.createPreviewChart(countForThisRow);
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
xtype: 'fieldset',
|
||||
layout: 'vbox',
|
||||
title: 'Point Settings',
|
||||
items: [
|
||||
{
|
||||
xtype: 'displayfield',
|
||||
value: 'Configure how the Points representing Readings should be displayed.<br>'
|
||||
},
|
||||
{
|
||||
xtype: 'checkboxfield',
|
||||
name: 'yaxisshowpoints',
|
||||
checked: (me.getStyleConfig(countForThisRow).yaxisshowpoints === "false" || me.getStyleConfig(countForThisRow).yaxisshowpoints === false) ? false : true,
|
||||
fieldLabel: 'Show Points? (if not, you will only see the line)',
|
||||
labelWidth: 150,
|
||||
listeners: {
|
||||
change: function(box, state) {
|
||||
if (state === true) {
|
||||
box.up().down('container[name=pointfillcolorcontainer]').show();
|
||||
box.up().down('combo').show();
|
||||
box.up().down('numberfield[name=pointradius]').show();
|
||||
me.createPreviewChart(countForThisRow);
|
||||
} else {
|
||||
box.up().down('container[name=pointfillcolorcontainer]').hide();
|
||||
box.up().down('combo').hide();
|
||||
box.up().down('numberfield[name=pointradius]').hide();
|
||||
me.createPreviewChart(countForThisRow);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
xtype: 'combo',
|
||||
fieldLabel: 'Choose the Shape',
|
||||
name: 'shapecombo',
|
||||
labelWidth: 150,
|
||||
editable: false,
|
||||
allowBlank: false,
|
||||
store: ['circle', 'line', 'triangle', 'diamond', 'cross', 'plus', 'arrow'],
|
||||
queryMode: 'local',
|
||||
value: me.getStyleConfig(countForThisRow).pointshape,
|
||||
listeners: {
|
||||
change: function(combo, val) {
|
||||
me.createPreviewChart(countForThisRow);
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
xtype: 'numberfield',
|
||||
name: 'pointradius',
|
||||
fieldLabel: 'Point Radius',
|
||||
editable: false,
|
||||
labelWidth: 150,
|
||||
value: me.getStyleConfig(countForThisRow).pointradius,
|
||||
maxValue: 10,
|
||||
minValue: 1,
|
||||
listeners: {
|
||||
change: function(field, val) {
|
||||
me.createPreviewChart(countForThisRow);
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
xtype: 'container',
|
||||
name: 'pointfillcolorcontainer',
|
||||
layout: 'hbox',
|
||||
items: [
|
||||
{
|
||||
xtype: 'displayfield',
|
||||
value: 'Select your Point-Fillcolor: ',
|
||||
width: 155
|
||||
},
|
||||
{
|
||||
xtype: 'colorpicker',
|
||||
listeners: {
|
||||
select: function(picker, selColor) {
|
||||
picker.up().down('textfield').setValue(selColor);
|
||||
me.createPreviewChart(countForThisRow);
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
xtype: 'textfield',
|
||||
padding: '0 0 0 5px',
|
||||
labelWidth: 50,
|
||||
width: 120,
|
||||
name: 'pointcolorhexcode',
|
||||
fieldLabel: 'Hexcode',
|
||||
value: me.getStyleConfig(countForThisRow).pointcolorhexcode.indexOf("#") >= 0 ? me.getStyleConfig(countForThisRow).pointcolorhexcode.split("#")[1] : me.getStyleConfig(countForThisRow).pointcolorhexcode,
|
||||
listeners: {
|
||||
change: function(field, val) {
|
||||
me.createPreviewChart(countForThisRow);
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
xtype: 'fieldset',
|
||||
layout: 'vbox',
|
||||
title: 'Advanced Settings',
|
||||
items: [
|
||||
{
|
||||
xtype: 'checkboxfield',
|
||||
name: 'yaxisstepcheck',
|
||||
fieldLabel: 'Show Steps for this Axis?',
|
||||
checked: (me.getStyleConfig(countForThisRow).yaxisstepcheck === "false" || me.getStyleConfig(countForThisRow).yaxisstepcheck === false) ? false : true,
|
||||
labelWidth: 200,
|
||||
listeners: {
|
||||
change: function(box, checked) {
|
||||
if (checked) {
|
||||
box.up().down('numberfield').setDisabled(true);
|
||||
} else {
|
||||
box.up().down('numberfield').setDisabled(false);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
xtype: 'numberfield',
|
||||
name: 'yaxissmoothing',
|
||||
fieldLabel: 'Smoothing for this Axis (0 for off)',
|
||||
editable: false,
|
||||
value: me.getStyleConfig(countForThisRow).yaxissmoothing,
|
||||
maxValue: 10,
|
||||
minValue: 0,
|
||||
labelWidth: 200,
|
||||
listeners: {
|
||||
change: function(field, val) {
|
||||
me.createPreviewChart(countForThisRow);
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
xtype: 'checkboxfield',
|
||||
name: 'yaxislegendcheck',
|
||||
fieldLabel: 'Show this Axis in Legend?',
|
||||
labelWidth: 200,
|
||||
checked: (me.getStyleConfig(countForThisRow).yaxislegendcheck === "false" || me.getStyleConfig(countForThisRow).yaxislegendcheck === false) ? false : true
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
buttons: [
|
||||
{
|
||||
text: "Cancel",
|
||||
handler: function(btn) {
|
||||
btn.up('window').destroy();
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "Save settings",
|
||||
handler: function(btn) {
|
||||
var win = btn.up('window'),
|
||||
styleConfig = me.getStyleConfig(countForThisRow);
|
||||
|
||||
// set all values
|
||||
styleConfig.linestrokewidth = win.down('numberfield[name=linestrokewidth]').getValue();
|
||||
styleConfig.linecolorhexcode = win.down('textfield[name=linecolorhexcode]').getValue();
|
||||
styleConfig.yaxisfillcheck = win.down('checkboxfield[name=yaxisfillcheck]').getValue();
|
||||
styleConfig.fillopacity = win.down('numberfield[name=fillopacity]').getValue();
|
||||
styleConfig.fillcolorhexcode = win.down('textfield[name=fillcolorhexcode]').getValue();
|
||||
styleConfig.yaxisshowpoints = win.down('checkboxfield[name=yaxisshowpoints]').getValue();
|
||||
styleConfig.pointshape = win.down('combo[name=shapecombo]').getValue();
|
||||
styleConfig.pointradius = win.down('numberfield[name=pointradius]').getValue();
|
||||
styleConfig.pointcolorhexcode = win.down('textfield[name=pointcolorhexcode]').getValue();
|
||||
styleConfig.yaxisstepcheck = win.down('checkboxfield[name=yaxisstepcheck]').getValue();
|
||||
styleConfig.yaxissmoothing = win.down('numberfield[name=yaxissmoothing]').getValue();
|
||||
styleConfig.yaxislegendcheck = win.down('checkboxfield[name=yaxislegendcheck]').getValue();
|
||||
|
||||
btn.up('window').destroy();
|
||||
}
|
||||
}
|
||||
]
|
||||
}).show();
|
||||
}
|
||||
},
|
||||
{
|
||||
xtype: 'radiogroup',
|
||||
@ -633,13 +951,124 @@ Ext.define('FHEM.view.LineChartPanel', {
|
||||
me.removeRow(btn);
|
||||
}
|
||||
}
|
||||
]
|
||||
],
|
||||
styleConfig: {
|
||||
linestrokewidth: 2,
|
||||
linecolorhexcode: 'FF0000',
|
||||
yaxisfillcheck: false,
|
||||
fillopacity: 0.5,
|
||||
fillcolorhexcode: 'FF0000',
|
||||
yaxisshowpoints: true,
|
||||
pointshape: 'circle',
|
||||
pointradius: 2,
|
||||
pointcolorhexcode: 'FF0000',
|
||||
yaxisstepcheck: false,
|
||||
yaxissmoothing: 3,
|
||||
yaxislegendcheck: true
|
||||
}
|
||||
};
|
||||
|
||||
Ext.ComponentQuery.query('fieldset[name=axesfieldset]')[0].add(components);
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
createPreviewChart: function(countForThisRow) {
|
||||
var me = this,
|
||||
win = Ext.ComponentQuery.query('window[name=stylerwindow]')[0],
|
||||
styleConfig = me.getStyleConfig(countForThisRow),
|
||||
chart = Ext.create('Ext.chart.Chart', {
|
||||
name: 'previewchart',
|
||||
store: Ext.create('Ext.data.Store', {
|
||||
model: Ext.define('WeatherPoint', {
|
||||
extend: 'Ext.data.Model',
|
||||
fields: ['temperature', 'date']
|
||||
}),
|
||||
data: [
|
||||
{ temperature: 2, date: new Date(2011, 1, 1, 3) },
|
||||
{ temperature: 20, date: new Date(2011, 1, 1, 4) },
|
||||
{ temperature: 6, date: new Date(2011, 1, 1, 5) },
|
||||
{ temperature: 4, date: new Date(2011, 1, 1, 6) },
|
||||
{ temperature: 30, date: new Date(2011, 1, 1, 7) },
|
||||
{ temperature: 58, date: new Date(2011, 1, 1, 8) },
|
||||
{ temperature: 63, date: new Date(2011, 1, 1, 9) },
|
||||
{ temperature: 73, date: new Date(2011, 1, 1, 10) },
|
||||
{ temperature: 78, date: new Date(2011, 1, 1, 11) },
|
||||
{ temperature: 81, date: new Date(2011, 1, 1, 12) },
|
||||
{ temperature: 64, date: new Date(2011, 1, 1, 13) },
|
||||
{ temperature: 53, date: new Date(2011, 1, 1, 14) },
|
||||
{ temperature: 21, date: new Date(2011, 1, 1, 15) },
|
||||
{ temperature: 4, date: new Date(2011, 1, 1, 16) },
|
||||
{ temperature: 6, date: new Date(2011, 1, 1, 17) },
|
||||
{ temperature: 35, date: new Date(2011, 1, 1, 18) },
|
||||
{ temperature: 8, date: new Date(2011, 1, 1, 19) },
|
||||
{ temperature: 24, date: new Date(2011, 1, 1, 20) },
|
||||
{ temperature: 22, date: new Date(2011, 1, 1, 21) },
|
||||
{ temperature: 18, date: new Date(2011, 1, 1, 22) }
|
||||
]
|
||||
}),
|
||||
axes: [
|
||||
{
|
||||
type: 'Numeric',
|
||||
position: 'left',
|
||||
fields: ['temperature'],
|
||||
minimum: 0,
|
||||
maximum: 100
|
||||
},
|
||||
{
|
||||
type: 'Time',
|
||||
position: 'bottom',
|
||||
fields: ['date'],
|
||||
dateFormat: 'ga'
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type: 'line',
|
||||
xField: 'date',
|
||||
yField: 'temperature',
|
||||
smooth: win ? win.down('numberfield[name=yaxissmoothing]').getValue() : styleConfig.yaxissmoothing,
|
||||
fill: win ? win.down('checkboxfield[name=yaxisfillcheck]').getValue() : ((styleConfig.yaxisfillcheck === "false" || !styleConfig.yaxisfillcheck) ? false: true),
|
||||
style: {
|
||||
fill: win ? '#' + win.down('textfield[name=fillcolorhexcode]').getValue() : '#' + styleConfig.fillcolorhexcode,
|
||||
opacity: win ? win.down('numberfield[name=fillopacity]').getValue() : styleConfig.fillopacity,
|
||||
stroke: win ? '#' + win.down('textfield[name=linecolorhexcode]').getValue() : '#' + styleConfig.linecolorhexcode,
|
||||
'stroke-width': win ? win.down('numberfield[name=linestrokewidth]').getValue() : styleConfig.linestrokewidth
|
||||
},
|
||||
markerConfig: {
|
||||
type: win ? win.down('combo[name=shapecombo]').getValue() : styleConfig.pointshape,
|
||||
radius: win ? win.down('numberfield[name=pointradius]').getValue() : styleConfig.pointradius,
|
||||
stroke: win ? '#' + win.down('textfield[name=pointcolorhexcode]').getValue() : '#' + styleConfig.pointcolorhexcode,
|
||||
fill: win ? '#' + win.down('textfield[name=pointcolorhexcode]').getValue() : '#' + styleConfig.pointcolorhexcode
|
||||
},
|
||||
showMarkers: win ? win.down('checkboxfield[name=yaxisshowpoints]').getValue() : ((styleConfig.yaxisshowpoints === "false" || !styleConfig.yaxisshowpoints) ? false: true)
|
||||
}
|
||||
],
|
||||
width: 455,
|
||||
height: 170
|
||||
});
|
||||
|
||||
// find exisitng chart
|
||||
var existingChart = Ext.ComponentQuery.query('chart[name=previewchart]')[0];
|
||||
if (existingChart && existingChart !== chart) {
|
||||
var parent = existingChart.up();
|
||||
existingChart.destroy();
|
||||
parent.add(chart);
|
||||
} else {
|
||||
return chart;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
getStyleConfig: function(axiscount) {
|
||||
var fs = Ext.ComponentQuery.query('fieldset[name=singlerowfieldset' + axiscount + ']')[0];
|
||||
return fs.styleConfig;
|
||||
},
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
|
||||
Loading…
Reference in New Issue
Block a user