Multiple sources in one graph

Dashticz, alternative dashboard based on HTML, CSS, jQuery

Moderators: leecollings, htilburgs, robgeerts

User avatar
clinkadink
Posts: 417
Joined: Tuesday 31 December 2019 1:15
Target OS: Linux
Domoticz version: 2020.2
Location: Swindon, UK
Contact:

Re: Multiple sources in one graph

Post by clinkadink »

Sjonnie2017 wrote: Thursday 27 February 2020 18:57 OK, and do you think that can be solved? Would it be possible in the future to add a popup graph to an arbitrary block?
Just to be sure I understand. You have a P1 Energy Meter, idx 199. When you add it as a block, I guess it appears as 3 blocks on the page (as my energy meter does). Are you saying you only want the popup to work on the first block, i.e. 199_1?
"UI is the saddle, the stirrups, & the reins. UX is the feeling you get being able to ride the horse."
User avatar
Sjonnie2017
Posts: 361
Joined: Wednesday 02 August 2017 19:43
Target OS: Linux
Domoticz version: Latest ß
Location: The Netherlands
Contact:

Re: Multiple sources in one graph

Post by Sjonnie2017 »

I hope I can explain.

My energymeter produces 6 blocks (Now, Today, Total, Total Day/Night, Total Day, Total Night). I have created three blocks for the values I would like to see. In my case Now (199_1), Today (199_2) and Total (199_3). I would like to be able to apply the same popup graph to all three blocks.

Hope this makes sense.

Greetz,

Sjonnie
ConBee II - TRÅDFRI lights + switches, loads of ChingLing dimmers and switches, Heiman and Xiaomi sensors
SolarEdge SE4000H (with active modbus_tcp)
YouLess Energy meter
Shelly 2.5 in roller shutter mode
User avatar
clinkadink
Posts: 417
Joined: Tuesday 31 December 2019 1:15
Target OS: Linux
Domoticz version: 2020.2
Location: Swindon, UK
Contact:

Re: Multiple sources in one graph

Post by clinkadink »

flemm wrote: Thursday 27 February 2020 10:30 Since the update i git-pulled this morning, my custom axis label colours and gridline options stopped working. Has something changed in how to define 'options' variables?
Yes, last night it was updated to a fix graph refresh issue with custom data. The options seem to be affected. Am looking at this now.
"UI is the saddle, the stirrups, & the reins. UX is the feeling you get being able to ride the horse."
User avatar
clinkadink
Posts: 417
Joined: Tuesday 31 December 2019 1:15
Target OS: Linux
Domoticz version: 2020.2
Location: Swindon, UK
Contact:

Re: Multiple sources in one graph

Post by clinkadink »

Sjonnie2017 wrote: Thursday 27 February 2020 19:44 My energymeter produces 6 blocks (Now, Today, Total, Total Day/Night, Total Day, Total Night). I have created three blocks for the values I would like to see. In my case Now (199_1), Today (199_2) and Total (199_3). I would like to be able to apply the same popup graph to all three blocks.
I get it. Hmmm. A rather unique use case I certainly have not contimplated ;) Let me think about it. In the meantime, you could try a css based alternative. I haven't tested this, so it may or may not work ...

Instead of defining the blocks for the subdevices you want to see, e.g. 199_1, 199_2, etc. Why don't you just define one, i.e. block[199]. This should create 6 subdevice blocks, but use the following to hide the ones you don't want. This way, the existing popup feature should work.
Spoiler: show

Code: Select all

.block_199_4,
.block_199_5,
.block_199_6 {
   display: none;
}
"UI is the saddle, the stirrups, & the reins. UX is the feeling you get being able to ride the horse."
User avatar
Sjonnie2017
Posts: 361
Joined: Wednesday 02 August 2017 19:43
Target OS: Linux
Domoticz version: Latest ß
Location: The Netherlands
Contact:

Re: Multiple sources in one graph

Post by Sjonnie2017 »

clinkadink wrote: Thursday 27 February 2020 19:54 I get it. Hmmm. A rather unique use case I certainly have not contimplated ;) Let me think about it. In the meantime, you could try a css based alternative. I haven't tested this, so it may or may not work ...

Instead of defining the blocks for the subdevices you want to see, e.g. 199_1, 199_2, etc. Why don't you just define one, i.e. block[199]. This should create 6 subdevice blocks, but use the following to hide the ones you don't want. This way, the existing popup feature should work.
Spoiler: show

Code: Select all

.block_199_4,
.block_199_5,
.block_199_6 {
   display: none;
}
I was thinking I might try to suppress showing the blocks I don't want by using the custom.css. Your code saved me time finding out how to do that. Thank you.

Will post back results of course :)

Greetz,

Sjonnie
ConBee II - TRÅDFRI lights + switches, loads of ChingLing dimmers and switches, Heiman and Xiaomi sensors
SolarEdge SE4000H (with active modbus_tcp)
YouLess Energy meter
Shelly 2.5 in roller shutter mode
User avatar
clinkadink
Posts: 417
Joined: Tuesday 31 December 2019 1:15
Target OS: Linux
Domoticz version: 2020.2
Location: Swindon, UK
Contact:

Re: Multiple sources in one graph

Post by clinkadink »

flemm wrote: Thursday 27 February 2020 10:30 Since the update i git-pulled this morning, my custom axis label colours and gridline options stopped working.
I have updated the beta, please can you try and let me know if this issue is now resolved? Thanks.
"UI is the saddle, the stirrups, & the reins. UX is the feeling you get being able to ride the horse."
User avatar
flemm
Posts: 25
Joined: Thursday 20 February 2020 8:04
Target OS: Raspberry Pi / ODroid
Domoticz version: 4.11780
Location: Netherlands
Contact:

Re: Multiple sources in one graph

Post by flemm »

clinkadink wrote: Friday 28 February 2020 2:41 I have updated the beta, please can you try and let me know if this issue is now resolved? Thanks.
Yes, it is!
You sir, are -again- the hero of the day. Thank you!
Mario ipsum RGB mushroom 1-up.
User avatar
Sjonnie2017
Posts: 361
Joined: Wednesday 02 August 2017 19:43
Target OS: Linux
Domoticz version: Latest ß
Location: The Netherlands
Contact:

Re: Multiple sources in one graph

Post by Sjonnie2017 »

clinkadink wrote: Thursday 27 February 2020 19:54 I get it. Hmmm. A rather unique use case I certainly have not contimplated ;) Let me think about it. In the meantime, you could try a css based alternative. I haven't tested this, so it may or may not work ...

Instead of defining the blocks for the subdevices you want to see, e.g. 199_1, 199_2, etc. Why don't you just define one, i.e. block[199]. This should create 6 subdevice blocks, but use the following to hide the ones you don't want. This way, the existing popup feature should work.
Spoiler: show

Code: Select all

.block_199_4,
.block_199_5,
.block_199_6 {
   display: none;
}
Been playing around with which (sub)blocks to show and which not. This is what I ended up wit:

Image

Happy camper! :mrgreen:

@flemm is right!
You sir, are -again- the hero of the day. Thank you!
Greetz,

Sjonnie
ConBee II - TRÅDFRI lights + switches, loads of ChingLing dimmers and switches, Heiman and Xiaomi sensors
SolarEdge SE4000H (with active modbus_tcp)
YouLess Energy meter
Shelly 2.5 in roller shutter mode
User avatar
Sjonnie2017
Posts: 361
Joined: Wednesday 02 August 2017 19:43
Target OS: Linux
Domoticz version: Latest ß
Location: The Netherlands
Contact:

Re: Multiple sources in one graph

Post by Sjonnie2017 »

Just updated to latest beta and saw that I now have an extra axis in my electricity graph (all other graphs are unchanged). So I thought I'd share the pictures and the debug code with you to see if this can be fixed :mrgreen:

The pictures:

Dashboard:
Image

Popup:
Image

Debug code for dashboard graph:
Spoiler: show

Code: Select all

{
  "blockId": "block_33",
  "block": {
    "devices": [
      199
    ],
    "datasetColors": [
      "red",
      "yellow",
      "blue",
      "orange",
      "green",
      "purple"
    ],
    "barWidth": 0.9,
    "beginAtZero": false,
    "borderColors": [
      "red",
      "yellow",
      "blue",
      "orange",
      "green",
      "purple"
    ],
    "borderDash": [],
    "borderWidth": 2,
    "buttonsBorder": "white",
    "buttonsColor": "black",
    "buttonsFill": "white",
    "buttonsIcon": "#686868",
    "buttonsMarginX": 2,
    "buttonsMarginY": 0,
    "buttonsPadX": 6,
    "buttonsPadY": 2,
    "buttonsRadius": 0,
    "buttonsShadow": false,
    "buttonsSize": 14,
    "buttonsText": false,
    "cartesian": "linear",
    "custom": false,
    "debugButton": true,
    "displayFormats": false,
    "drawOrderDay": false,
    "drawOrderLast": false,
    "drawOrderMonth": false,
    "gradients": false,
    "graph": "line",
    "graphTypes": [
      "v",
      "v2"
    ],
    "groupBy": false,
    "height": "400px",
    "iconColour": "grey",
    "interval": 2,
    "legend": {
      "v2_199": "Dag",
      "v_199": "Nacht"
    },
    "lineFill": false,
    "lineTension": 0.1,
    "maxTicksLimit": null,
    "method": 1,
    "pointBorderColor": [
      "grey"
    ],
    "pointBorderWidth": 0,
    "pointFillColor": [
      "red",
      "yellow",
      "blue",
      "orange",
      "green",
      "purple"
    ],
    "pointRadius": 0,
    "pointStyle": false,
    "reverseTime": false,
    "sortDevices": true,
    "spanGaps": false,
    "title": "Elektriciteit",
    "toolTipStyle": true,
    "width": 12,
    "zoom": "x"
  },
  "currentValue": "10.73 kWh",
  "currentValues": [
    "10.73 kWh"
  ],
  "customRange": false,
  "data": {
    "result": [
      {
        "d": "2020-01-31",
        "v_199": "0.471",
        "v2_199": "4.712"
      },
      {
        "d": "2020-02-01",
        "v_199": "15.716",
        "v2_199": "0.000"
      },
      {
        "d": "2020-02-02",
        "v_199": "24.967",
        "v2_199": "0.000"
      },
      {
        "d": "2020-02-03",
        "v_199": "3.971",
        "v2_199": "6.797"
      },
      {
        "d": "2020-02-04",
        "v_199": "5.034",
        "v2_199": "7.798"
      },
      {
        "d": "2020-02-05",
        "v_199": "5.422",
        "v2_199": "9.701"
      },
      {
        "d": "2020-02-06",
        "v_199": "4.014",
        "v2_199": "7.637"
      },
      {
        "d": "2020-02-07",
        "v_199": "4.487",
        "v2_199": "12.889"
      },
      {
        "d": "2020-02-08",
        "v_199": "21.459",
        "v2_199": "0.000"
      },
      {
        "d": "2020-02-09",
        "v_199": "16.470",
        "v2_199": "0.000"
      },
      {
        "d": "2020-02-10",
        "v_199": "4.011",
        "v2_199": "7.366"
      },
      {
        "d": "2020-02-11",
        "v_199": "5.374",
        "v2_199": "8.197"
      },
      {
        "d": "2020-02-12",
        "v_199": "4.282",
        "v2_199": "9.162"
      },
      {
        "d": "2020-02-13",
        "v_199": "4.804",
        "v2_199": "8.922"
      },
      {
        "d": "2020-02-14",
        "v_199": "5.241",
        "v2_199": "10.473"
      },
      {
        "d": "2020-02-15",
        "v_199": "16.892",
        "v2_199": "0.000"
      },
      {
        "d": "2020-02-16",
        "v_199": "14.566",
        "v2_199": "0.000"
      },
      {
        "d": "2020-02-17",
        "v_199": "3.568",
        "v2_199": "7.430"
      },
      {
        "d": "2020-02-18",
        "v_199": "3.438",
        "v2_199": "7.234"
      },
      {
        "d": "2020-02-19",
        "v_199": "3.570",
        "v2_199": "7.623"
      },
      {
        "d": "2020-02-20",
        "v_199": "5.276",
        "v2_199": "6.620"
      },
      {
        "d": "2020-02-21",
        "v_199": "4.648",
        "v2_199": "8.947"
      },
      {
        "d": "2020-02-22",
        "v_199": "17.060",
        "v2_199": "0.000"
      },
      {
        "d": "2020-02-23",
        "v_199": "22.865",
        "v2_199": "0.000"
      },
      {
        "d": "2020-02-24",
        "v_199": "3.542",
        "v2_199": "9.030"
      },
      {
        "d": "2020-02-25",
        "v_199": "4.873",
        "v2_199": "7.236"
      },
      {
        "d": "2020-02-26",
        "v_199": "4.692",
        "v2_199": "9.075"
      },
      {
        "d": "2020-02-27",
        "v_199": "4.708",
        "v2_199": "10.307"
      },
      {
        "d": "2020-02-28",
        "v_199": "4.625",
        "v2_199": "6.080"
      }
    ],
    "status": "OK",
    "title": "Graph day"
  },
  "dataFilterCount": 0,
  "dataFilterUnit": "",
  "decimals": 2,
  "forced": false,
  "graphConfig": null,
  "graphIdx": "block_33199",
  "hasBlock": true,
  "idx": 199,
  "lastRefreshTime": 1582905715,
  "mountPoint": "#block_33",
  "multigraph": false,
  "name": "Elektriciteit",
  "params": [
    "type=graph&sensor=counter&idx=199&range=month"
  ],
  "popup": false,
  "primary": true,
  "primaryIdx": "block_33199",
  "range": "month",
  "realrange": "month",
  "sensor": "counter",
  "subtype": "Energy",
  "title": "Elektriciteit",
  "txtUnit": "kWh",
  "txtUnits": [
    "kWh"
  ],
  "type": "P1 Smart Meter",
  "groupBy": false,
  "keys": [
    "v",
    "v2"
  ],
  "ykeys": [
    "v_199",
    "v2_199"
  ],
  "ylabels": [
    "kWh",
    null
  ]
}
Debug code for popup graph:
Spoiler: show

Code: Select all

{
  "blockId": "199p",
  "block": {
    "devices": [
      "199"
    ],
    "datasetColors": [
      "red",
      "yellow",
      "blue",
      "red",
      "yellow",
      "aqua",
      "red",
      "yellow"
    ],
    "barWidth": 0.9,
    "beginAtZero": false,
    "borderColors": [
      "red",
      "yellow",
      "blue",
      "red",
      "yellow",
      "aqua",
      "red",
      "yellow"
    ],
    "borderDash": [],
    "borderWidth": 2,
    "buttonsBorder": "white",
    "buttonsColor": "black",
    "buttonsFill": "white",
    "buttonsIcon": "#686868",
    "buttonsMarginX": 2,
    "buttonsMarginY": 0,
    "buttonsPadX": 6,
    "buttonsPadY": 2,
    "buttonsRadius": 0,
    "buttonsShadow": false,
    "buttonsSize": 14,
    "buttonsText": false,
    "cartesian": "linear",
    "custom": false,
    "debugButton": true,
    "displayFormats": false,
    "drawOrderDay": false,
    "drawOrderLast": false,
    "drawOrderMonth": false,
    "gradients": false,
    "graph": "line",
    "graphTypes": false,
    "groupBy": false,
    "height": false,
    "iconColour": "grey",
    "interval": 1,
    "legend": {
      "v2_199": "Dag",
      "v_199": "Nacht",
      "c_199": "Totaal"
    },
    "lineFill": false,
    "lineTension": 0.1,
    "maxTicksLimit": null,
    "method": 1,
    "pointBorderColor": [
      "grey"
    ],
    "pointBorderWidth": 0,
    "pointFillColor": [
      "red",
      "yellow",
      "blue",
      "red",
      "yellow",
      "aqua",
      "red",
      "yellow"
    ],
    "pointRadius": 0,
    "pointStyle": false,
    "reverseTime": false,
    "sortDevices": false,
    "spanGaps": false,
    "title": "Elektriciteit",
    "toolTipStyle": true,
    "width": 12,
    "zoom": "x"
  },
  "currentValue": "10.78 kWh",
  "currentValues": [
    "10.78 kWh"
  ],
  "customRange": false,
  "data": {
    "result": [
      {
        "c1_199": "562.143",
        "c2_199": "0",
        "c3_199": "383.649",
        "c4_199": "0",
        "d": "2020-01-31",
        "r1_199": "0.000",
        "r2_199": "0.000",
        "v_199": "0.471",
        "v2_199": "4.712"
      },
      {
        "c1_199": "562.654",
        "c2_199": "0",
        "c3_199": "388.361",
        "c4_199": "0",
        "d": "2020-02-01",
        "r1_199": "0.000",
        "r2_199": "0.000",
        "v_199": "15.716",
        "v2_199": "0.000"
      },
      {
        "c1_199": "578.418",
        "c2_199": "0",
        "c3_199": "388.361",
        "c4_199": "0",
        "d": "2020-02-02",
        "r1_199": "0.000",
        "r2_199": "0.000",
        "v_199": "24.967",
        "v2_199": "0.000"
      },
      {
        "c1_199": "603.426",
        "c2_199": "0",
        "c3_199": "388.361",
        "c4_199": "0",
        "d": "2020-02-03",
        "r1_199": "0.000",
        "r2_199": "0.000",
        "v_199": "3.971",
        "v2_199": "6.797"
      },
      {
        "c1_199": "607.438",
        "c2_199": "0",
        "c3_199": "395.158",
        "c4_199": "0",
        "d": "2020-02-04",
        "r1_199": "0.000",
        "r2_199": "0.000",
        "v_199": "5.034",
        "v2_199": "7.798"
      },
      {
        "c1_199": "612.672",
        "c2_199": "0",
        "c3_199": "402.956",
        "c4_199": "0",
        "d": "2020-02-05",
        "r1_199": "0.000",
        "r2_199": "0.000",
        "v_199": "5.422",
        "v2_199": "9.701"
      },
      {
        "c1_199": "618.129",
        "c2_199": "0",
        "c3_199": "412.657",
        "c4_199": "0",
        "d": "2020-02-06",
        "r1_199": "0.000",
        "r2_199": "0.000",
        "v_199": "4.014",
        "v2_199": "7.637"
      },
      {
        "c1_199": "622.168",
        "c2_199": "0",
        "c3_199": "420.294",
        "c4_199": "0",
        "d": "2020-02-07",
        "r1_199": "0.000",
        "r2_199": "0.000",
        "v_199": "4.487",
        "v2_199": "12.889"
      },
      {
        "c1_199": "626.727",
        "c2_199": "0",
        "c3_199": "433.183",
        "c4_199": "0",
        "d": "2020-02-08",
        "r1_199": "0.000",
        "r2_199": "0.000",
        "v_199": "21.459",
        "v2_199": "0.000"
      },
      {
        "c1_199": "648.285",
        "c2_199": "0",
        "c3_199": "433.183",
        "c4_199": "0",
        "d": "2020-02-09",
        "r1_199": "0.000",
        "r2_199": "0.000",
        "v_199": "16.470",
        "v2_199": "0.000"
      },
      {
        "c1_199": "664.773",
        "c2_199": "0",
        "c3_199": "433.183",
        "c4_199": "0",
        "d": "2020-02-10",
        "r1_199": "0.000",
        "r2_199": "0.000",
        "v_199": "4.011",
        "v2_199": "7.366"
      },
      {
        "c1_199": "668.815",
        "c2_199": "0",
        "c3_199": "440.549",
        "c4_199": "0",
        "d": "2020-02-11",
        "r1_199": "0.000",
        "r2_199": "0.000",
        "v_199": "5.374",
        "v2_199": "8.197"
      },
      {
        "c1_199": "674.229",
        "c2_199": "0",
        "c3_199": "448.746",
        "c4_199": "0",
        "d": "2020-02-12",
        "r1_199": "0.000",
        "r2_199": "0.000",
        "v_199": "4.282",
        "v2_199": "9.162"
      },
      {
        "c1_199": "678.553",
        "c2_199": "0",
        "c3_199": "457.908",
        "c4_199": "0",
        "d": "2020-02-13",
        "r1_199": "0.000",
        "r2_199": "0.000",
        "v_199": "4.804",
        "v2_199": "8.922"
      },
      {
        "c1_199": "683.424",
        "c2_199": "0",
        "c3_199": "466.830",
        "c4_199": "0",
        "d": "2020-02-14",
        "r1_199": "0.000",
        "r2_199": "0.000",
        "v_199": "5.241",
        "v2_199": "10.473"
      },
      {
        "c1_199": "688.714",
        "c2_199": "0",
        "c3_199": "477.303",
        "c4_199": "0",
        "d": "2020-02-15",
        "r1_199": "0.000",
        "r2_199": "0.000",
        "v_199": "16.892",
        "v2_199": "0.000"
      },
      {
        "c1_199": "705.654",
        "c2_199": "0",
        "c3_199": "477.303",
        "c4_199": "0",
        "d": "2020-02-16",
        "r1_199": "0.000",
        "r2_199": "0.000",
        "v_199": "14.566",
        "v2_199": "0.000"
      },
      {
        "c1_199": "720.260",
        "c2_199": "0",
        "c3_199": "477.303",
        "c4_199": "0",
        "d": "2020-02-17",
        "r1_199": "0.000",
        "r2_199": "0.000",
        "v_199": "3.568",
        "v2_199": "7.430"
      },
      {
        "c1_199": "723.864",
        "c2_199": "0",
        "c3_199": "484.733",
        "c4_199": "0",
        "d": "2020-02-18",
        "r1_199": "0.000",
        "r2_199": "0.000",
        "v_199": "3.438",
        "v2_199": "7.234"
      },
      {
        "c1_199": "727.373",
        "c2_199": "0",
        "c3_199": "491.967",
        "c4_199": "0",
        "d": "2020-02-19",
        "r1_199": "0.000",
        "r2_199": "0.000",
        "v_199": "3.570",
        "v2_199": "7.623"
      },
      {
        "c1_199": "730.962",
        "c2_199": "0",
        "c3_199": "499.590",
        "c4_199": "0",
        "d": "2020-02-20",
        "r1_199": "0.000",
        "r2_199": "0.000",
        "v_199": "5.276",
        "v2_199": "6.620"
      },
      {
        "c1_199": "736.411",
        "c2_199": "0",
        "c3_199": "506.210",
        "c4_199": "0",
        "d": "2020-02-21",
        "r1_199": "0.000",
        "r2_199": "0.000",
        "v_199": "4.648",
        "v2_199": "8.947"
      },
      {
        "c1_199": "741.097",
        "c2_199": "0",
        "c3_199": "515.157",
        "c4_199": "0",
        "d": "2020-02-22",
        "r1_199": "0.000",
        "r2_199": "0.000",
        "v_199": "17.060",
        "v2_199": "0.000"
      },
      {
        "c1_199": "758.190",
        "c2_199": "0",
        "c3_199": "515.157",
        "c4_199": "0",
        "d": "2020-02-23",
        "r1_199": "0.000",
        "r2_199": "0.000",
        "v_199": "22.865",
        "v2_199": "0.000"
      },
      {
        "c1_199": "781.126",
        "c2_199": "0",
        "c3_199": "515.157",
        "c4_199": "0",
        "d": "2020-02-24",
        "r1_199": "0.000",
        "r2_199": "0.000",
        "v_199": "3.542",
        "v2_199": "9.030"
      },
      {
        "c1_199": "784.698",
        "c2_199": "0",
        "c3_199": "524.187",
        "c4_199": "0",
        "d": "2020-02-25",
        "r1_199": "0.000",
        "r2_199": "0.000",
        "v_199": "4.873",
        "v2_199": "7.236"
      },
      {
        "c1_199": "789.794",
        "c2_199": "0",
        "c3_199": "531.423",
        "c4_199": "0",
        "d": "2020-02-26",
        "r1_199": "0.000",
        "r2_199": "0.000",
        "v_199": "4.692",
        "v2_199": "9.075"
      },
      {
        "c1_199": "794.522",
        "c2_199": "0",
        "c3_199": "540.498",
        "c4_199": "0",
        "d": "2020-02-27",
        "r1_199": "0.000",
        "r2_199": "0.000",
        "v_199": "4.708",
        "v2_199": "10.307"
      },
      {
        "d": "2020-02-28",
        "r1_199": "0.000",
        "r2_199": "0.000",
        "v_199": "4.625",
        "v2_199": "6.128",
        "c1_199": null,
        "c2_199": null,
        "c3_199": null,
        "c4_199": null
      }
    ],
    "status": "OK",
    "title": "Graph day"
  },
  "dataFilterCount": 0,
  "dataFilterUnit": "",
  "decimals": 2,
  "forced": false,
  "graphConfig": null,
  "graphIdx": "199p199",
  "hasBlock": true,
  "idx": "199",
  "lastRefreshTime": 1582906074,
  "mountPoint": ".block_graph_199p",
  "multigraph": false,
  "name": "Elektriciteit",
  "params": [
    "type=graph&sensor=counter&idx=199&range=month",
    "type=graph&sensor=counter&idx=199&range=month"
  ],
  "popup": true,
  "primary": true,
  "primaryIdx": "199p199",
  "range": "month",
  "realrange": "month",
  "sensor": "counter",
  "subtype": "Energy",
  "title": "Elektriciteit",
  "txtUnit": "kWh",
  "txtUnits": [
    "kWh"
  ],
  "type": "P1 Smart Meter",
  "groupBy": false,
  "keys": [
    "c1",
    "c2",
    "c3",
    "c4",
    "r1",
    "r2",
    "v",
    "v2"
  ],
  "ykeys": [
    "c1_199",
    "c2_199",
    "c3_199",
    "c4_199",
    "r1_199",
    "r2_199",
    "v_199",
    "v2_199"
  ],
  "ylabels": [
    "kWh",
    null,
    null,
    null,
    null,
    null,
    null,
    null
  ]
}
Greetz,

Sjonnie
ConBee II - TRÅDFRI lights + switches, loads of ChingLing dimmers and switches, Heiman and Xiaomi sensors
SolarEdge SE4000H (with active modbus_tcp)
YouLess Energy meter
Shelly 2.5 in roller shutter mode
User avatar
clinkadink
Posts: 417
Joined: Tuesday 31 December 2019 1:15
Target OS: Linux
Domoticz version: 2020.2
Location: Swindon, UK
Contact:

Re: Multiple sources in one graph

Post by clinkadink »

Sjonnie2017 wrote: Friday 28 February 2020 17:13 Just updated to latest beta and saw that I now have an extra axis in my electricity graph (all other graphs are unchanged). So I thought I'd share the pictures and the debug code with you to see if this can be fixed :mrgreen:
Good spot, I have fixed this at my end now. I am working on something else at the moment, but hope to deploy this later ;)
"UI is the saddle, the stirrups, & the reins. UX is the feeling you get being able to ride the horse."
User avatar
Sjonnie2017
Posts: 361
Joined: Wednesday 02 August 2017 19:43
Target OS: Linux
Domoticz version: Latest ß
Location: The Netherlands
Contact:

Re: Multiple sources in one graph

Post by Sjonnie2017 »

clinkadink wrote: Friday 28 February 2020 19:20 Good spot, I have fixed this at my end now. I am working on something else at the moment, but hope to deploy this later ;)
Excellent! Tx! :mrgreen:

Greetz,

Sjonnie
ConBee II - TRÅDFRI lights + switches, loads of ChingLing dimmers and switches, Heiman and Xiaomi sensors
SolarEdge SE4000H (with active modbus_tcp)
YouLess Energy meter
Shelly 2.5 in roller shutter mode
User avatar
clinkadink
Posts: 417
Joined: Tuesday 31 December 2019 1:15
Target OS: Linux
Domoticz version: 2020.2
Location: Swindon, UK
Contact:

Re: Multiple sources in one graph

Post by clinkadink »

Graphs has been updated this evening. Please see here:
https://www.domoticz.com/forum/viewtopi ... 67&t=31534
"UI is the saddle, the stirrups, & the reins. UX is the feeling you get being able to ride the horse."
Kranendijk
Posts: 60
Joined: Wednesday 29 May 2019 14:39
Target OS: Raspberry Pi / ODroid
Domoticz version: 4.10717
Location: Zwolle
Contact:

Re: Multiple sources in one graph

Post by Kranendijk »

Great!!!
User avatar
Sjonnie2017
Posts: 361
Joined: Wednesday 02 August 2017 19:43
Target OS: Linux
Domoticz version: Latest ß
Location: The Netherlands
Contact:

Re: Multiple sources in one graph

Post by Sjonnie2017 »

Fixed the undefined value. Tx! :mrgreen:

Image

Now I am going to do some research if it is possible to get 2 Y-axis for my gas graph. Left axis for Total and right axis for consumption (Verbruik). Should be possible. Tried Cartesian parameter but 5e+0 and 5e+1 is not very intuitive :lol:

Greetz,

Sjonnie
ConBee II - TRÅDFRI lights + switches, loads of ChingLing dimmers and switches, Heiman and Xiaomi sensors
SolarEdge SE4000H (with active modbus_tcp)
YouLess Energy meter
Shelly 2.5 in roller shutter mode
User avatar
clinkadink
Posts: 417
Joined: Tuesday 31 December 2019 1:15
Target OS: Linux
Domoticz version: 2020.2
Location: Swindon, UK
Contact:

Re: Multiple sources in one graph

Post by clinkadink »

You should be able to do that with custom data, and adding your own Y labels, e.g.

Code: Select all

ylabels: ['m3','m3 total'],
In the example below, I am specifying what Y labels I want, regardless of what Dashticz detects them as ...
Spoiler: show

Code: Select all

"24 Hours": {
   ylabels: ['W','W','£','£'],
   range: 'day',
   filter: '24 hours',
   data: {
      Solar: 'd.v_1',
      Grid: 'd.v_258',
      Profit:'d.v_1*0.000151',
      Cost:'d.v_258*-0.000112'
   },
},
"UI is the saddle, the stirrups, & the reins. UX is the feeling you get being able to ride the horse."
User avatar
Sjonnie2017
Posts: 361
Joined: Wednesday 02 August 2017 19:43
Target OS: Linux
Domoticz version: Latest ß
Location: The Netherlands
Contact:

Re: Multiple sources in one graph

Post by Sjonnie2017 »

I didn't even get a chance to figure out how to build the graphs I wanted. :lol: You beat me to it (and saved me a lot of reading :mrgreen:)! Thank you very much.

My gas graph now looks absolutely stunning!

The graph in all it's splendor:

Image

The code that makes it happen:

Code: Select all

blocks[grafiek_gas] = {}
blocks[grafiek_gas]['title'] = 'Gas';
blocks[grafiek_gas]['devices'] = [200];
blocks[grafiek_gas]['width'] = 12;
blocks[grafiek_gas]['height'] = '400px';
blocks[grafiek_gas]['interval'] = 2;
blocks[grafiek_gas]['graphTypes'] = ['v', 'c'];
blocks[grafiek_gas]['zoom'] = 'x';
blocks[grafiek_gas]['toolTipStyle'] = true;
blocks[grafiek_gas]['debugButton'] = true;
blocks[grafiek_gas]['datasetColors'] = ['yellow', 'red'];
blocks[grafiek_gas]['legend'] = {'v_200': 'Verbruik', 'c_200': 'Totaal'};
blocks[grafiek_gas]['custom'] = {
        "Laatste uren": {range: 'day',filter: '4 hours',data: {Verbruik: 'd.v_200', Totaal: 'd.c_200'}},
        "Vandaag": {range: 'day',filter: '24 hours',data: {Verbruik: 'd.v_200', Totaal: 'd.c_200'}},
        "Afgelopen maand": {ylabels: ['M³', 'Ʃ M³'],range: 'year',filter: '1 months',data: {Verbruik: 'd.v_200', Totaal: 'd.c_200'}}
         }
Took some time to get it in a (for me ;)) readable format but there you have it.
Clinkadink for president!
You'll get my vote!

Greetz,

Sjonnie
ConBee II - TRÅDFRI lights + switches, loads of ChingLing dimmers and switches, Heiman and Xiaomi sensors
SolarEdge SE4000H (with active modbus_tcp)
YouLess Energy meter
Shelly 2.5 in roller shutter mode
User avatar
clinkadink
Posts: 417
Joined: Tuesday 31 December 2019 1:15
Target OS: Linux
Domoticz version: 2020.2
Location: Swindon, UK
Contact:

Re: Multiple sources in one graph

Post by clinkadink »

Looks great, well done! ;)
"UI is the saddle, the stirrups, & the reins. UX is the feeling you get being able to ride the horse."
User avatar
EdwinK
Posts: 1820
Joined: Sunday 22 January 2017 21:46
Target OS: Raspberry Pi / ODroid
Domoticz version: BETA
Location: Rhoon
Contact:

Re: Multiple sources in one graph

Post by EdwinK »

Sjonnie2017 wrote: Sunday 01 March 2020 15:39 I didn't even get a chance to figure out how to build the graphs I wanted. :lol: You beat me to it (and saved me a lot of reading :mrgreen:)! Thank you very much.

My gas graph now looks absolutely stunning!
I agree. Too bad it won't work for me. When ever I try this, dashticz ends up like this:
Image
I've done a git pull to get the latest version.

I changed 'blocks[grafiek_gas]['devices'] = [200];' to 'blocks[grafiek_gas]['devices'] = [2];' as that is the idx of my Gas device
Clinkadink for president!
You'll get my vote!

Greetz,

Sjonnie
Running latest BETA on a Pi-3 | Toon® Thermostat (rooted) | Hue | Tuya | IKEA tradfri | Dashticz V3 on Lenovo Huawei Tablet | Conbee
User avatar
clinkadink
Posts: 417
Joined: Tuesday 31 December 2019 1:15
Target OS: Linux
Domoticz version: 2020.2
Location: Swindon, UK
Contact:

Re: Multiple sources in one graph

Post by clinkadink »

EdwinK wrote: Sunday 01 March 2020 16:39 I agree. Too bad it won't work for me. When ever I try this, dashticz ends up like this:
I've done a git pull to get the latest version.
I changed 'blocks[grafiek_gas]['devices'] = [200];' to 'blocks[grafiek_gas]['devices'] = [2];' as that is the idx of my Gas device
When my dash ends up like that, its normally because of a syntax error or typo in config.js.

I am unsure what this refers to without seeing the full graph block. I am assuming that grafiek_gas is a variable.

Code: Select all

blocks[grafiek_gas]['devices'] = [2];
"UI is the saddle, the stirrups, & the reins. UX is the feeling you get being able to ride the horse."
User avatar
EdwinK
Posts: 1820
Joined: Sunday 22 January 2017 21:46
Target OS: Raspberry Pi / ODroid
Domoticz version: BETA
Location: Rhoon
Contact:

Re: Multiple sources in one graph

Post by EdwinK »

clinkadink wrote: Sunday 01 March 2020 17:49
EdwinK wrote: Sunday 01 March 2020 16:39 I agree. Too bad it won't work for me. When ever I try this, dashticz ends up like this:
I've done a git pull to get the latest version.
I changed 'blocks[grafiek_gas]['devices'] = [200];' to 'blocks[grafiek_gas]['devices'] = [2];' as that is the idx of my Gas device
When my dash ends up like that, its normally because of a syntax error or typo in config.js.

I am unsure what this refers to without seeing the full graph block. I am assuming that grafiek_gas is a variable.

Code: Select all

blocks[grafiek_gas]['devices'] = [2];
I've copy-ed the example from Sjonnie, and changed aboce line. I guess I need to change this in a variable.
Running latest BETA on a Pi-3 | Toon® Thermostat (rooted) | Hue | Tuya | IKEA tradfri | Dashticz V3 on Lenovo Huawei Tablet | Conbee
Post Reply

Who is online

Users browsing this forum: No registered users and 0 guests