Page 1 of 1

Gradients not working

Posted: Friday 26 January 2024 11:19
by Kiekerjan
Hello,
I am trying to get gradients in the graphs but I can't figure out how to do that. I have added gradients: ['blue', 'white'] to the block but that does not do anything. This line is ignored. I searched and found that it would work for multiblocks only but that also gives no result (viewtopic.php?p=234118#p234118). And the link to the git page does not exist anymore (well, actually I am not sure if it ever existed).

This is my code for the graph block (in CONFIG.js):

Code: Select all

blocks['SolarGraphTotal'] = {
    title: 'Opbrengst vandaag',
    devices: [783],
    graph: 'line',
    lineFill: [true],
    lineTension: 0.4,
    custom :{
        "1 maand": {
            range: 'month',
            filter: '1 month',
            data: {
              Opbrengst: 'd.v_783',
            }
        },
        "3 maanden": {
            range: 'year',
            filter: '3 months',
            data: {
              Opbrengst: 'd.v_783',
            }
        },
        "6 maanden": {
            range: 'year',
            filter: '6 months',
            data: {
              Opbrengst: 'd.v_783',
            }
        }
    },
    legend: true,
    //datasetColors:['rgba(0,255,51,0.5'],     
    //gradients: true,
    gradients: ['blue', 'white'],
    gradientHeight: 0.5
}

The debuginfo from the graph correctly seems to mention the gradient but the default datasetColors are used instead. I also tried to change these but that has no effect.

Code: Select all

{
  "mountPoint": "#block_34",
  "block": {
    "width": 12,
    "datasetColors": [
      "red",
      "yellow",
      "blue",
      "orange",
      "green",
      "purple",
      "chartreuse",
      "aqua",
      "teal",
      "pink",
      "gray",
      "fuchsia"
    ],
    "axisRight": false,
    "axisAlternate": true,
    "barWidth": 0.9,
    "beginAtZero": false,
    "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": {
      "1 maand": {
        "range": "month",
        "filter": "1 month",
        "data": {
          "Opbrengst": "d.v_783"
        }
      },
      "3 maanden": {
        "range": "year",
        "filter": "3 months",
        "data": {
          "Opbrengst": "d.v_783"
        }
      },
      "6 maanden": {
        "range": "year",
        "filter": "6 months",
        "data": {
          "Opbrengst": "d.v_783"
        }
      }
    },
    "customHeader": false,
    "debugButton": true,
    "displayFormats": false,
    "drawOrderDay": false,
    "drawOrderLast": false,
    "drawOrderMonth": false,
    "flash": false,
    "fontColor": "white",
    "format": true,
    "gradients": [
      "blue",
      "white"
    ],
    "graph": "line",
    "graphTypes": false,
    "groupBy": false,
    "groupByDevice": false,
    "height": false,
    "iconColour": "grey",
    "interval": 1,
    "legend": true,
    "lineFill": [
      true
    ],
    "lineTension": 0.4,
    "maxTicksLimit": null,
    "method": 1,
    "pointBorderColor": [
      "grey"
    ],
    "pointBorderWidth": 0,
    "pointRadius": 0,
    "pointStyle": false,
    "range": "initial",
    "refresh": 300,
    "reverseTime": false,
    "sortDevices": false,
    "spanGaps": false,
    "stacked": false,
    "title": "Opbrengst vandaag",
    "tooltiptotal": false,
    "zoom": false,
    "type": "SolarGraphTotal",
    "devices": [
      783
    ],
    "gradientHeight": 0.5,
    "key": "SolarGraphTotal",
    "isPopup": true
  },
  "key": "SolarGraphTotal",
  "name": "graph",
  "callbacks": {
    "timeoutList": [],
    "intervalList": [
      182
    ],
    "subscriptionList": [
      null,
      null
    ]
  },
  "$mountPoint": {
    "0": {},
    "length": 1
  },
  "graphDevices": [
    {
      "AddjMulti": 1,
      "AddjMulti2": 1,
      "AddjValue": 0,
      "AddjValue2": 0,
      "BatteryLevel": 255,
      "CounterToday": "0.135 kWh",
      "CustomImage": 0,
      "Data": "60.636 kWh",
      "Description": "",
      "EnergyMeterMode": "",
      "Favorite": 1,
      "HardwareDisabled": false,
      "HardwareID": 7,
      "HardwareName": "SolarEdge_modbusTCP",
      "HardwareType": "SolarEdge ModbusTCP",
      "HardwareTypeVal": 94,
      "HaveTimeout": false,
      "ID": "00070012",
      "LastUpdate": "2024-01-26 11:01:24",
      "Name": "SolarEdge_modbusTCP - Total Energy",
      "Notifications": "false",
      "PlanID": "0",
      "PlanIDs": [
        0
      ],
      "Protected": false,
      "ShowNotifications": true,
      "SignalLevel": "-",
      "SubType": "kWh",
      "SwitchTypeVal": 4,
      "Timers": "false",
      "Type": "General",
      "TypeImg": "current",
      "Unit": 18,
      "Usage": "124.45 Watt",
      "Used": 1,
      "XOffset": "0",
      "YOffset": "0",
      "idx": 783,
      "Data0": "60.636 kWh",
      "currentValue": "0,14 kWh",
      "name": "SolarEdge_modbusTCP - Total Energy",
      "sensor": "counter",
      "subtype": "kWh",
      "title": "SolarEdge_modbusTCP - Total Energy",
      "txtUnit": "kWh",
      "txtUnits": [],
      "type": "General",
      "decimals": 2,
      "method": 1
    }
  ],
  "decimals": 2,
  "graphIdx": "block_34",
  "lastRefreshTime": 1706263284,
  "range": "month",
  "title": "Opbrengst vandaag",
  "params": [
    "type=command¶m=graph&sensor=counter&idx=783&range=month&method=1"
  ],
  "subtype": "kWh",
  "txtUnits": [],
  "data": {
    "result": [
      {
        "d": "2024-01-13",
        "Opbrengst": "0.03"
      },
      {
        "d": "2024-01-14",
        "Opbrengst": "0.63"
      },
      {
        "d": "2024-01-15",
        "Opbrengst": "0.66"
      },
      {
        "d": "2024-01-16",
        "Opbrengst": "1.58"
      },
      {
        "d": "2024-01-17",
        "Opbrengst": "0.54"
      },
      {
        "d": "2024-01-18",
        "Opbrengst": "5.55"
      },
      {
        "d": "2024-01-19",
        "Opbrengst": "6.19"
      },
      {
        "d": "2024-01-20",
        "Opbrengst": "4.08"
      },
      {
        "d": "2024-01-21",
        "Opbrengst": "1.89"
      },
      {
        "d": "2024-01-22",
        "Opbrengst": "2.47"
      },
      {
        "d": "2024-01-23",
        "Opbrengst": "4.78"
      },
      {
        "d": "2024-01-24",
        "Opbrengst": "4.36"
      },
      {
        "d": "2024-01-25",
        "Opbrengst": "2.96"
      },
      {
        "d": "2024-01-26",
        "Opbrengst": "0.13"
      }
    ],
    "status": "OK",
    "title": "Graph day",
    "Opbrengst": "d.v_783"
  },
  "realrange": "month",
  "dataFilterCount": 1,
  "dataFilterUnit": "month",
  "groupBy": false,
  "customRange": true,
  "customRangeName": "1 maand",
  "graphConfig": {
    "range": "month",
    "filter": "1 month",
    "data": {
      "Opbrengst": "d.v_783"
    }
  },
  "ylabels": [
    "kWh"
  ],
  "keys": [
    "v"
  ],
  "ykeys": [
    "Opbrengst"
  ],
  "txtUnit": "kWh",
  "filter": "1 month",
  "chartctx": {}
}
The result (I want a gradient to fill the graph):
download2.png
download2.png (23.37 KiB) Viewed 1474 times
Besides the examples in the documnetation I did not find other examples of this. And the documentation only mentiones the image as example, without the code to create it. So, all tips are welcome!

config: Dasticz version 3.11 / Domoticz 2024.1

Re: Gradients not working

Posted: Friday 26 January 2024 20:05
by Lokonli
It's a bug in the current version.

I'm updating the graph module at the moment. I'll fix this as well.

Re: Gradients not working

Posted: Friday 26 January 2024 22:08
by Kiekerjan
Lokonli wrote: Friday 26 January 2024 20:05 It's a bug in the current version.

I'm updating the graph module at the moment. I'll fix this as well.
That's great! Thank you!