Multiple sources in one graph

[clinkadink]

Cool, I will update

[renerene]

Are thermostat setpoints also supported? Graph dissapears when I add that device IDX.

[HansieNL]

If shown last hours or today the lines are red and green, but when showing last month both lines are green.
Do I have to add some extra code?

Code: Select all

blocks['multigraph_354'] = {
	title: 'Buiten- vs Binnentemperatuur',
        devices: [ 354, 437],
        datasetColors: ['red','green'],
        multigraphTypes: ['te'],
        graph: 'line',
        legend: {
                'te1': 'Buiten',
                'te2': 'Binnen',
        }
}

Thanks for your explanation. Working ok now.

[clinkadink]

Just tried my thermostat and didn't work. I use Honeywell Evohome. It has a "Type" of 'Heating', and "SubType" of 'Zone'. What's your output for your device?

http://127.0.0.1:8080/json.htm?type=devices&rid=[device id]

I specifically need to know the Type and SubType.

[clinkadink]

Thanks for your explanation. Working ok now.

Excellent, great to hear

[clinkadink]

Graph zoom control?

https://youtu.be/me93A5KXtKY

Works with both the standard graph and multigraphs.

[clinkadink]

The latest update is now available from the muligraph branch.

https://github.com/Dashticz/dashticz/tree/multigraph

Updates:
- Multigraphs now allow for NaN data, using spanGaps block setting (true/false) in config.js
- Includes graph/multigraph zoom, enabled using the setting below in config.js. Check video in comment above for demo.

Code: Select all

config['graph_zoom'] = 1; 

Fixes:
- Updated to allow for Type: 'Heating', as these thermostat devices could not be reported on using graphs/multigraphs.

Please let me know of any feedback, cheers

[ykuijs]

I see something strange with the order of the graphs and the current values in the header.

My config is:

Code: Select all

blocks['multigraph_20'] = {
	title: 'Temperaturen',
	devices: [20,25,26],
	datasetColors: ['lightblue','lightgreen','orange'],
	legend: true,
	graph: 'line',
	legend: {
      'te1'		: 'Woonkamer',
	  'te2'		: 'Buiten',
	  'te3'     : 'Overloop'
     }
}

Device 20=Overloop (Hallway)
Device 25=Woonkamer (Livingroom)
Device 26=Buiten (Outside)

In the Legend, I already noticed that the order of the devices (te1, te2 and te3) weren't the same order as the devices.

When looking at the graph I see that the current values in the header match the order of the devices, but the order of the legend doesn't correspond to these values:


And do you also have some config examples of your graphs? They look really cool and clean. Not sure how I can replicate these

[clinkadink]

Because the multigraph has multiple datasets, it initially check each one and makes sure they have the same time data. If not, it takes the dataset with the largest time data - it could be this that is changing the order. You can check the output of each device in Domoticz or via the json url, and check this way.

Another thing you can try is the the drawOrder settings (also in the example below). Most of the settings are in this post:
https://www.domoticz.com/forum/viewtopi ... 98#p233460

I will see if I can replicate this in the meantime.

I have copied my solar/grid block below. But I am guessing its because of the screen resolution, as I use a 4K tv

You can also maximise your graph on smaller displays by making the buttons smaller, including shortening or removing the text. Also, by using maxTicksLimit to limit your x axis labels (not the data), so they lay horizontal, not diagonal. I will try and consider smaller screens more in future.

Code: Select all

blocks['multigraph_1'] = {
	title: 'Grid vs Solar',
	devices: [1, 162],
	interval: 1,
	maxTicksLimit: 12,
        datasetColors: [oRed, oGreen],
	/* gradients: [[oGreenDark, oYellow], [oRed, oWhite]],
	gradientHeight: 2.5, */
	buttonsIcon: sGreen,
	pointRadius: 0,
	borderWidth: 3,	
	/* lineFill: [true, true], */
	lineTension: 0.4,
	graph: 'line',				
	cartesian : 'logarithmic',
	/* cartesian : 'linear', */
	/* maxTicksLimit: 10, */
	reverseTime: false,
	buttonsBorder: 'green',
	buttonsColor: '#green',
	buttonsFill: '#fff',
	buttonsIcon: sGreen,
	buttonsPadX: 10,
	buttonsPadY: 5,
	buttonsMarginX: 25,
	buttonsMarginY: 2,
	buttonsRadius: 10,
	buttonsShadow: oGreen,
	buttonsSize: 12,
	buttonsText: ['NOW', 'TODAY', 'MONTH'],
 	drawOrderLast:  ['v2', 'v1'],
	drawOrderDay:   ['v2', 'v1'],
	drawOrderMonth: ['v1', 'v2', 'c1', 'c2'],
	legend: {
	  'v1'	: 'Grid',	
	  'v2'	: 'Solar', 
	  'c1'	: 'Solar Cumulative',	  
	  'c2'	: 'Solar Cumulative'
    }
} 

Note, I am using color variables in the code above, e.g. oGreenDark. Make sure you replace these with valid color strings, or it won't work.

If anyone wants a list of ready made color variables; solid and opaque ... let me know and i'll post them.

Cheers.

[renerene]

My setpoint is still not shown, whole graphic is gone


1) Here is result of http://192.168.0.xxx:8080/json.htm?type=devices&rid=xxx

Code: Select all

ActTime	1579588279
AstrTwilightEnd	"19:05"
AstrTwilightStart	"06:31"
CivTwilightEnd	"17:45"
CivTwilightStart	"07:51"
DayLength	"08:40"
NautTwilightEnd	"18:26"
NautTwilightStart	"07:10"
ServerTime	"2020-01-21 07:31:19"
SunAtSouth	"12:48"
Sunrise	"08:28"
Sunset	"17:08"
app_version	"4.11062"
result	
0	
AddjMulti	1
AddjMulti2	1
AddjValue	0
AddjValue2	0
BatteryLevel	255
CustomImage	0
Data	"17.0"
Description	""
Favorite	1
HardwareID	23
HardwareName	"SVT-thermostaat"
HardwareType	"Smart Virtual Thermostat"
HardwareTypeVal	94
HaveTimeout	false
ID	"00170004"
LastUpdate	"2020-01-21 06:40:00"
Name	"SVT Setpoint Normal"
Notifications	"false"
PlanID	"0"
PlanIDs	
0	0
Protected	false
SetPoint	"17.0"
ShowNotifications	true
SignalLevel	"-"
SubType	"SetPoint"
Timers	"false"
Type	"Thermostat"
TypeImg	"override_mini"
Unit	4
Used	1
XOffset	"0"
YOffset	"0"
idx	"941"
status	"OK"
title	"Devices"

2) also note that the graph has to 'be blocky' , made out of vertical and horizontal lines, not lines from datapoint to datapoint

[clinkadink]

The multigraph branch was updated last night, unfortunately, I did not get your reply in time. One of the updates included allowing for "Type: Heating". Your device is "Type: Thermostat". Dashticz does not currently cater for this graph type. I.e. I imagine you will have the same issue with a standard graph. I can update the multigraph branch to include this.

I do not understand your second point. Please can you explain?

[renerene]

I do not understand your second point. Please can you explain?

note that the graph has to be blocky' , made out of vertical and horizontal lines, not lines from datapoint to datapoint.
So let's say you change setpoint at 10:00 to 20 deg and change at 11:00 to 17 deg. Then the line between 10:00 and 11:00 should be from 20 tot 20 degrees (horizontal) and vertical down at 11:00 from 20 tot 17 deg. After 11:00 again it should be level at 17 degrees.

Just like the CV ketel Graph dummy variable the complete functionality of the setpoint value can also be done with help from srcipting and an extra dummy device. But offcourse, direct extra functionallity from dashticz multigraph is better.

[clinkadink]

Ok, I understand now, thanks. I think that can achieved. I will post back my results.

[clinkadink]

note that the graph has to be blocky' , made out of vertical and horizontal lines, not lines from datapoint to datapoint.

Below shows three of my thermostat devices (Evohome TRVs), each showing their temperature and setpoint. Is this what you are after?



My block settings for this graph is shown below. Note that half of the settings are for the button styling. There has been code changes to do this. This is using the current multigraph branch. But it doesn't include "Type: Thermostat", which I will add

Code: Select all

blocks['multigraph_11'] = {
	title: 'Lounge, Kitchen, Hall Thermostats',
	devices: [ 11, 12, 152],
	interval: 2,
	maxTicksLimit: 12,
	datasetColors: [sLightGrey, sRed, sGreen, sGreenDark, sBlue],
	buttonsIcon: sPurple,
	graph: 'line',
	lineTension: 0,
	borderWidth: 2,
	spanGaps: false,
	multigraphTypes: ['te', 'se'], 
	buttonsBorder: '#ccc',
	buttonsColor: '#ccc',
	buttonsFill: 'transparent',
	buttonsIcon: sBlue,
	buttonsPadX: 10,
	buttonsPadY: 5,
	buttonsMarginX: 5,
	buttonsMarginY: 2,
	buttonsRadius: 0,
	buttonsShadow: 'rgba(2, 117, 216, 0.2)',
	buttonsSize: 12,
	buttonsText: ['6H', '24H', '1M'],
	legend: {
          'se1': 'Lounge (SP)',
	  'sm1': 'Lounge (SP Min)',
	  'sx1': 'Lounge (SP Max)',
	  'te1': 'Lounge (TE)',	 
	  'ta1': 'Lounge (TE Avg)',
	  'tm1': 'Lounge (TE Min)',
	  'se2': 'Kitchen (SP)',
	  'sm2': 'Kitchen (SP Min)',
	  'sx2': 'Kitchen (SP Max)',
	  'te2': 'Kitchen (TE)',
	  'ta2': 'Kitchen (TE Avg)',
	  'tm2': 'Kitchen (TE Min)',
	  'se3': 'Hall (SP)',	
	  'sm3': 'Hall (SP Min)',
	  'sx3': 'Hall (SP Max)',
          'te3': 'Hall (TE)',	  
	  'ta3': 'Hall (TE Avg)',
	  'tm3': 'Hall (TE Min)'
	} 
} 

I will update the code to include your thermostat type as well.

[renerene]

Yes, looks good!
The block horizontal/vertical effect is in the 'lineTension' parameter? Does it count for all lines in the graph at once, or can you give it to specific devices?

[clinkadink]

It applies to all lines in the graph.

[clinkadink]

The multigraph branch has been updated last night.

Updates:

1. Until now, the code automatically calculated if any devices' time data was longer than others. It then used that device's time data, then matched all of the devices non-time data to that. This update allows users to choose to enable or disable that feature with a new block setting: sortDevices: true/false. The issue raised on the forum today. Refenced link below:
https://www.domoticz.com/forum/viewtopi ... 60#p234266

2. SubType "Thermostat" has been added.

Sent from my HD1913 using Tapatalk

[clinkadink]

I see something strange with the order

Please try the latest update using the new setting:

Code: Select all

sortDevices: false

[Lokonli]

I've merged the multigraph branch into the beta branch.
Future updates on the muligraph functionality will be merged into the beta branch directly.
I'll remove the multigraph branch from Github.

[renerene]

Code: Select all

blocks['multigraph_1320'] = {
  devices: [941, 1320, 1321, 1391],
   custom : {
    "8 uur binnen": {
            range: 'day',
            filter: '8 hours',
            data: {
                sp: 'd.se1',
                binnen: 'd.te2',
//              buiten: 'd.te2',
                cv: 'd.te3',          
            }
        },
     "24 uur": {
            range: 'day',
            filter: '24 hours',
            data: {
                binnen: 'd.te1',
                buiten: 'd.te2',
                cv: 'd.te3',
                sp: 'd.se4'
            }
        },

Can you explain the data structure of custom?
se is not inthe documentation but I found out it is for 'setpoint'
what are the numbers at the end of d.te1? How do they relate to the 'devices:' declaration?

My problem: only 2 of 3 lines visible in 8 hours, unknow how to show the right device