Dashticz Graphs - Features, Fixes & Updates

[Boattailman]

Spoiler: show

Code: Select all

{
	"ActTime" : 1585559024,
	"AstrTwilightEnd" : "22:12",
	"AstrTwilightStart" : "05:20",
	"CivTwilightEnd" : "20:47",
	"CivTwilightStart" : "06:46",
	"DayLength" : "12:53",
	"NautTwilightEnd" : "21:28",
	"NautTwilightStart" : "06:04",
	"ServerTime" : "2020-03-30 11:03:44",
	"SunAtSouth" : "13:46",
	"Sunrise" : "07:20",
	"Sunset" : "20:13",
	"app_version" : "2020.1",
	"result" : 
	[
		{
			"AddjMulti" : 1.0,
			"AddjMulti2" : 1.0,
			"AddjValue" : 0.0,
			"AddjValue2" : 0.0,
			"BatteryLevel" : 255,
			"Counter" : "14260.272",
			"CounterDeliv" : "3768.435",
			"CounterDelivToday" : "0.241 kWh",
			"CounterToday" : "3.470 kWh",
			"CustomImage" : 0,
			"Data" : "7129707;7130565;1139873;2628562;0;297",
			"Description" : "",
			"Favorite" : 1,
			"HardwareID" : 3,
			"HardwareName" : "Slimme Meter",
			"HardwareType" : "P1 Smart Meter USB",
			"HardwareTypeVal" : 4,
			"HaveTimeout" : false,
			"ID" : "0001",
			"LastUpdate" : "2020-03-30 11:03:42",
			"Name" : "Energie",
			"Notifications" : "false",
			"PlanID" : "2",
			"PlanIDs" : 
			[
				2
			],
			"Protected" : false,
			"ShowNotifications" : true,
			"SignalLevel" : "-",
			"SubType" : "Energy",
			"SwitchTypeVal" : 0,
			"Timers" : "false",
			"Type" : "P1 Smart Meter",
			"TypeImg" : "counter",
			"Unit" : 1,
			"Usage" : "0 Watt",
			"UsageDeliv" : "297 Watt",
			"Used" : 1,
			"XOffset" : "0",
			"YOffset" : "0",
			"idx" : "2"
		}
	],
	"status" : "OK",
	"title" : "Devices"
}

The code I posted was just a part of the graph, that's why there were missing quotes and stuff.

[clinkadink]

Sorry, that's the Domoticz device data. I meant the debug JSON from the graph. See here.
https://www.domoticz.com/forum/viewtopi ... 60#p237106

[Boattailman]

Sorry, next try:

Spoiler: show

Code: Select all

{
  "blockId": "block_15",
  "block": {
    "devices": [
      2
    ],
    "datasetColors": [
      "purple",
      "yellow"
    ],
    "barWidth": 0.9,
    "beginAtZero": false,
    "borderColors": [
      "purple",
      "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": {
      "Week": {
        "range": "month",
        "filter": "7 days",
        "data": {
          "Verbruik": "d.v_2+d.v2_2",
          "Opbrengst": "-d.r1_2-d.r2_2"
        }
      },
      "24 uur": {
        "range": "day",
        "filter": "24 hours",
        "data": {
          "Verbruik": "d.v_2+d.v2_2",
          "Opbrengst": "-d.r1_2-d.r2_2"
        },
        "graph": [
          "bar",
          "bar"
        ]
      },
      "Maand": {
        "range": "year",
        "filter": "1 months",
        "data": {
          "Verbruik": "d.v_2+d.v2_2",
          "Opbrengst": "-d.r1_2-d.r2_2"
        }
      },
      "Jaar": {
        "range": "year",
        "filter": "12 months",
        "data": {
          "Verbruik": "d.v_2+d.v2_2",
          "Opbrengst": "-d.r1_2-d.r2_2"
        }
      }
    },
    "debugButton": true,
    "displayFormats": false,
    "drawOrderDay": false,
    "drawOrderLast": false,
    "drawOrderMonth": false,
    "gradients": false,
    "graph": [
      "bar",
      "bar"
    ],
    "graphTypes": false,
    "groupBy": false,
    "groupByDevice": false,
    "height": false,
    "iconColour": "grey",
    "interval": 1,
    "legend": true,
    "lineFill": false,
    "lineTension": 0.1,
    "maxTicksLimit": null,
    "method": 1,
    "pointBorderColor": [
      "grey"
    ],
    "pointBorderWidth": 0,
    "pointFillColor": [
      "purple",
      "yellow"
    ],
    "pointRadius": 0,
    "pointStyle": false,
    "reverseTime": false,
    "sortDevices": false,
    "spanGaps": false,
    "title": "Energie",
    "toolTipStyle": false,
    "width": 12,
    "zoom": false
  },
  "currentValue": "3.47 kWh",
  "currentValues": [
    "3.47 kWh"
  ],
  "customRange": true,
  "data": {
    "result": [
      {
        "c1_2": "7102.402",
        "c2_2": "1106.836",
        "c3_2": "7117.161",
        "c4_2": "2575.560",
        "d": "2020-03-25",
        "r1_2": "0.000",
        "r2_2": "17.600",
        "v_2": "0.519",
        "v2_2": "4.099"
      },
      {
        "c1_2": "7102.921",
        "c2_2": "1106.836",
        "c3_2": "7121.260",
        "c4_2": "2593.160",
        "d": "2020-03-26",
        "r1_2": "0.000",
        "r2_2": "18.763",
        "v_2": "3.368",
        "v2_2": "4.002"
      },
      {
        "c1_2": "7106.289",
        "c2_2": "1106.836",
        "c3_2": "7125.262",
        "c4_2": "2611.923",
        "d": "2020-03-27",
        "r1_2": "0.000",
        "r2_2": "16.398",
        "v_2": "3.285",
        "v2_2": "4.487"
      },
      {
        "c1_2": "7109.628",
        "c2_2": "1106.836",
        "c3_2": "7129.749",
        "c4_2": "2628.321",
        "d": "2020-03-28",
        "r1_2": "17.409",
        "r2_2": "0.000",
        "v_2": "8.465",
        "v2_2": "0.000"
      },
      {
        "c1_2": "7118.124",
        "c2_2": "1124.245",
        "c3_2": "7129.749",
        "c4_2": "2628.321",
        "d": "2020-03-29",
        "r1_2": "15.628",
        "r2_2": "0.000",
        "v_2": "8.929",
        "v2_2": "0.000"
      },
      {
        "c1_2": "7127.053",
        "c2_2": "1139.873",
        "c3_2": "7129.749",
        "c4_2": "2628.321",
        "d": "2020-03-30",
        "r1_2": "0.000",
        "r2_2": "0.234",
        "v_2": "2.654",
        "v2_2": "0.815"
      }
    ],
    "status": "OK",
    "title": "Graph day",
    "Verbruik": "d.v_2+d.v2_2",
    "Opbrengst": "-d.r1_2-d.r2_2"
  },
  "dataFilterCount": 7,
  "dataFilterUnit": "days",
  "decimals": 2,
  "forced": false,
  "graphConfig": {
    "range": "month",
    "filter": "7 days",
    "data": {
      "Verbruik": "d.v_2+d.v2_2",
      "Opbrengst": "-d.r1_2-d.r2_2"
    }
  },
  "graphIdx": "block_152",
  "hasBlock": true,
  "idx": 2,
  "lastRefreshTime": 1585558957,
  "mountPoint": "#block_15",
  "multigraph": false,
  "name": "Energie",
  "params": [
    "type=graph&sensor=counter&idx=2&range=month"
  ],
  "popup": false,
  "primary": true,
  "primaryIdx": "block_152",
  "range": "month",
  "realrange": "month",
  "sensor": "counter",
  "subtype": "Energy",
  "title": "Energie",
  "txtUnit": "kWh",
  "txtUnits": [
    "kWh"
  ],
  "type": "P1 Smart Meter",
  "groupBy": false,
  "customRangeName": "Week",
  "keys": [
    "v",
    "r1"
  ],
  "ykeys": [
    "Verbruik",
    "Opbrengst"
  ],
  "ylabels": [
    "kWh",
    "kWh"
  ],
  "filter": "7 days"
}

[clinkadink]

Sorry, next try:

Spoiler: show

Code: Select all

{
  "blockId": "block_15",
  "block": {
    "devices": [
      2
    ],
    "datasetColors": [
      "purple",
      "yellow"
    ],
    "barWidth": 0.9,
    "beginAtZero": false,
    "borderColors": [
      "purple",
      "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": {
      "Week": {
        "range": "month",
        "filter": "7 days",
        "data": {
          "Verbruik": "d.v_2+d.v2_2",
          "Opbrengst": "-d.r1_2-d.r2_2"
        }
      },
      "24 uur": {
        "range": "day",
        "filter": "24 hours",
        "data": {
          "Verbruik": "d.v_2+d.v2_2",
          "Opbrengst": "-d.r1_2-d.r2_2"
        },
        "graph": [
          "bar",
          "bar"
        ]
      },
      "Maand": {
        "range": "year",
        "filter": "1 months",
        "data": {
          "Verbruik": "d.v_2+d.v2_2",
          "Opbrengst": "-d.r1_2-d.r2_2"
        }
      },
      "Jaar": {
        "range": "year",
        "filter": "12 months",
        "data": {
          "Verbruik": "d.v_2+d.v2_2",
          "Opbrengst": "-d.r1_2-d.r2_2"
        }
      }
    },
    "debugButton": true,
    "displayFormats": false,
    "drawOrderDay": false,
    "drawOrderLast": false,
    "drawOrderMonth": false,
    "gradients": false,
    "graph": [
      "bar",
      "bar"
    ],
    "graphTypes": false,
    "groupBy": false,
    "groupByDevice": false,
    "height": false,
    "iconColour": "grey",
    "interval": 1,
    "legend": true,
    "lineFill": false,
    "lineTension": 0.1,
    "maxTicksLimit": null,
    "method": 1,
    "pointBorderColor": [
      "grey"
    ],
    "pointBorderWidth": 0,
    "pointFillColor": [
      "purple",
      "yellow"
    ],
    "pointRadius": 0,
    "pointStyle": false,
    "reverseTime": false,
    "sortDevices": false,
    "spanGaps": false,
    "title": "Energie",
    "toolTipStyle": false,
    "width": 12,
    "zoom": false
  },
  "currentValue": "3.47 kWh",
  "currentValues": [
    "3.47 kWh"
  ],
  "customRange": true,
  "data": {
    "result": [
      {
        "c1_2": "7102.402",
        "c2_2": "1106.836",
        "c3_2": "7117.161",
        "c4_2": "2575.560",
        "d": "2020-03-25",
        "r1_2": "0.000",
        "r2_2": "17.600",
        "v_2": "0.519",
        "v2_2": "4.099"
      },
      {
        "c1_2": "7102.921",
        "c2_2": "1106.836",
        "c3_2": "7121.260",
        "c4_2": "2593.160",
        "d": "2020-03-26",
        "r1_2": "0.000",
        "r2_2": "18.763",
        "v_2": "3.368",
        "v2_2": "4.002"
      },
      {
        "c1_2": "7106.289",
        "c2_2": "1106.836",
        "c3_2": "7125.262",
        "c4_2": "2611.923",
        "d": "2020-03-27",
        "r1_2": "0.000",
        "r2_2": "16.398",
        "v_2": "3.285",
        "v2_2": "4.487"
      },
      {
        "c1_2": "7109.628",
        "c2_2": "1106.836",
        "c3_2": "7129.749",
        "c4_2": "2628.321",
        "d": "2020-03-28",
        "r1_2": "17.409",
        "r2_2": "0.000",
        "v_2": "8.465",
        "v2_2": "0.000"
      },
      {
        "c1_2": "7118.124",
        "c2_2": "1124.245",
        "c3_2": "7129.749",
        "c4_2": "2628.321",
        "d": "2020-03-29",
        "r1_2": "15.628",
        "r2_2": "0.000",
        "v_2": "8.929",
        "v2_2": "0.000"
      },
      {
        "c1_2": "7127.053",
        "c2_2": "1139.873",
        "c3_2": "7129.749",
        "c4_2": "2628.321",
        "d": "2020-03-30",
        "r1_2": "0.000",
        "r2_2": "0.234",
        "v_2": "2.654",
        "v2_2": "0.815"
      }
    ],
    "status": "OK",
    "title": "Graph day",
    "Verbruik": "d.v_2+d.v2_2",
    "Opbrengst": "-d.r1_2-d.r2_2"
  },
  "dataFilterCount": 7,
  "dataFilterUnit": "days",
  "decimals": 2,
  "forced": false,
  "graphConfig": {
    "range": "month",
    "filter": "7 days",
    "data": {
      "Verbruik": "d.v_2+d.v2_2",
      "Opbrengst": "-d.r1_2-d.r2_2"
    }
  },
  "graphIdx": "block_152",
  "hasBlock": true,
  "idx": 2,
  "lastRefreshTime": 1585558957,
  "mountPoint": "#block_15",
  "multigraph": false,
  "name": "Energie",
  "params": [
    "type=graph&sensor=counter&idx=2&range=month"
  ],
  "popup": false,
  "primary": true,
  "primaryIdx": "block_152",
  "range": "month",
  "realrange": "month",
  "sensor": "counter",
  "subtype": "Energy",
  "title": "Energie",
  "txtUnit": "kWh",
  "txtUnits": [
    "kWh"
  ],
  "type": "P1 Smart Meter",
  "groupBy": false,
  "customRangeName": "Week",
  "keys": [
    "v",
    "r1"
  ],
  "ykeys": [
    "Verbruik",
    "Opbrengst"
  ],
  "ylabels": [
    "kWh",
    "kWh"
  ],
  "filter": "7 days"
}

Thanks. I notice you have:

Code: Select all

graph: ["bar", "bar"]

specified in your block config twice; once at the top above "stacked: true", and again in your "24 uur" section of your custom data, in the block config. Please can you remove the latter and try again?

Code: Select all

"24 uur": {
  "range": "day",
  "filter": "24 hours",
  "data": {
    "Verbruik": "d.v_2+d.v2_2",
    "Opbrengst": "-d.r1_2-d.r2_2"
  },
  "graph": ["bar", "bar"]  <---- should not be here
},

[Boattailman]

Done, the double bar was a result of some testing, but after the removal its still not working

[houtumj]

How can I change the popup graph from line to bar 3.4.1
I tried:

blocks['graph_2447'] = {
devices: [2447],
title: 'Zonnestroom',
graph: ["bar"],
datasetColors: ['yellow'],
legend: {
'v': 'Zonnestroom',
}
}

Please help.
What am I doing wrong?

[clinkadink]

How can I change the popup graph from line to bar 3.4.1
I tried:

blocks['graph_2447'] = {
devices: [2447],
title: 'Zonnestroom',
graph: ["bar"],
datasetColors: ['yellow'],
legend: {
'v': 'Zonnestroom',
}
}

Please help.
What am I doing wrong?

Please see corrected block config below.

Code: Select all

blocks["zonnestroom_graph"] = {
  devices: [2447],
  title: "Zonnestroom",
  graph: "bar",
  datasetColors: "yellow",
  legend: {
     "v_2447": "Zonnestroom"		
  }
};

https://dashticz.readthedocs.io/en/beta ... raphs.html

[houtumj]

Dear clinkadink,
I did a copy and paste, But no bar only a line graph.
So I think it has to be something else
Thanks anyway.

[clinkadink]

Dear clinkadink,
I did a copy and paste, But no bar only a line graph.
So I think it has to be something else
Thanks anyway.

Hmmm, odd. Try adding this to your graph's block config ...

Code: Select all

graphTypes: ['v'],

[clinkadink]

Done, the double bar was a result of some testing, but after the removal its still not working

OK, found the issue and will be submitting a fix shortly.

[Boattailman]

Done, the double bar was a result of some testing, but after the removal its still not working

OK, found the issue and will be submitting a fix shortly.

Thx for the effort so far!

[clinkadink]

Done, the double bar was a result of some testing, but after the removal its still not working

OK, found the issue and will be submitting a fix shortly.

Thx for the effort so far!

The stacked issue has now been resolved in the latest beta update, 3.4.1. Please apply and let me know if this has worked. Thanks

[Boattailman]

Perfect!!

[clinkadink]

Perfect!!

Cheers!

[HansieNL]

Stacked graph works great!!

[clinkadink]

Great news, glad you like it

I have just now updated the latest beta's tooltip for any graph that is "stacked". It will now automatically display a "Total" figure in the tooltip, i.e. the sum of all stacked values.

[clinkadink]

The latest beta (today) includes some updates to graphs.

• Graph header current values are now updated as soon as new data is received

• The graph block now accepts the 'flash' property, which will make the graph header data flash when new data is received (like with blocks)

• There is a new graph block property (object) that allows users to customise their graph header values, called customHeader.

Example of graph showing long data values in header:



We can now update the block with the customHeader object as shown below:

Code: Select all

blocks['bathroom_wetroom'] = {  
    title: 'Bathroom vs Wetroom',
    devices: [12, 13],
    customHeader: {
        12: 'data.split(",").slice(0,2)',                     <---- update/format the data for idx 12
        13: 'data.split(",").slice(0,2)',                     <---- update/format the data for idx 13
        x:  '(data.12-data.13).toFixed(2) + " C"',            <---- append custom data based on idx 12 and idx 13
    },
    toolTipStyle: true,
    graph: "line",
    legend: true
}

The object accepts key value pairs. Standard Javascript or Jquery code can be used, where 'data' is the data you want to change.

• To format/update the data being displayed by a device, use the idx (number) as the key.

• To add a new 'custom value' that is a calculation of existing device data, use any letter as the key.

Using the updated block (above), the graph now displays like this (below). The unwanted data has been removed, and a new value (the delta between the 2 devices), "1.0 C", has been added:

[Minglarn]

Great work with graphs...

Can put away my PHP generated scripts now....
However, there is one thing that bother me...

When choosing "month" view, it says "Njuk" instead of Mars .. What am I missing?
Using SE in config..

Code: Select all

config['language'] = 'sv_SE'; //or: en_US, de_DE, fr_FR, hu_HU, it_IT, pt_PT, sv_SE

[clinkadink]

Thanks, its still work in progress, so I am very grateful for any feedback to help make it better

I have just looked at the graph code, please can you try adding this to your config.js?

Code: Select all

config["calendarlanguage"] = 'sv_SE';

I am not sure why it is using the 'calendar language', and not the 'language'. I can correct that, but for now, if you can test the above line, that would be great.

[Minglarn]

Unfortunately its the same..
No change, did try Chrome in incognito mode and it's same...