Dashticz Graphs - Features, Fixes & Updates

[Chris12]

Hi,

For issue 1:
I reversed both in the data part, but then the solar graph was not showing any more after a refresh.
When changing the device order from [20,288] to [288,20] the solar graph values are showing again, but still the temperature line is behind the solar generated power bars. The draw order options do not change that behavior as well.

For issue 4:
That one is solved! is was the 'u_330' instead of 'v_330'.

[Lokonli]

@Lokonli, maybe you know how to solve some other things noticed in the graphs I have as well.

1. I have a multigraph which shows the solar power generation (bar graph) and the temperature (line graph), how can I make sure the line graph is on top of the bar graph? as it is now sometimes behind the bar graph.

2. In a graph when hovering over the values, I can see a pop up with for example the value of the temperature.
How can I get a unit behind that value? So is shows for example 25 C or 1.789 kWh, instead of just the numbers?

3. How can I make sure my grahps have an overview of 00:00 till 23:59, instead of a 24h overview (which is not handy for solar power generation graphs for example).

4. I also have 2 graphs in dashticz based on a Dummy Device out of domoticz, which show me no values in the graph. Looking in domoticz is shows me values in the graphs. The created block in dashticz shows the latest value. Also this block does not have a popup graph although that is configured.

To address 3) I've made some changes in the latest beta. Now the 'today' button only shows today's data, and adapts the x-axis to the full day.
I made this the default behavior for the 'today' button.

In custom graphs you have to set range to 'today' to get the similar behavior.

Depending on the feedback I may change the default behavior.

[Lokonli]

Hi,

For issue 1:
I reversed both in the data part, but then the solar graph was not showing any more after a refresh.
When changing the device order from [20,288] to [288,20] the solar graph values are showing again, but still the temperature line is behind the solar generated power bars. The draw order options do not change that behavior as well.

For issue 4:
That one is solved! is was the 'u_330' instead of 'v_330'.

I've looked into 1).

For custom graphs the draw order follows the dataset order.
The graph type order should be consistent with the dataset order.

So try the following:

Spoiler: show

Code: Select all

blocks['Zonnepanelen-graph'] = {
	debugButton: true,
	iconColour: ['green'],
    title: ['Zonnepanelen'],
    graph: ['line','bar'],	//changed the order of line and bar
    devices: [20,288],
    height: '200px',
	width: 12,
	aggregate: 'sum',
    custom : {
        "24 uur": {
            range: 'day',
            filter: 'day',
            data: {
		Temperatuur: 'd.te_288',	//Temperature in front (as line graph)
                Opbrengst: 'd.v_20',		//then Opbrengst behind, as bar graph
				}
        },
        "Maand": {
            range: 'month',
            filter: 'month',
            data: {
		Temperatuur: 'd.te_288',	//Temperature in front (as line graph)
                Opbrengst: 'd.v_20',		//then Opbrengst behind, as bar graph
                }
        },
        "Jaar wk": {
            range: 'year',
            filter: 'year',
            groupBy: 'week',
            data: {
		Temperatuur: 'd.te_288',	//Temperature in front (as line graph)
                Opbrengst: 'd.v_20',		//then Opbrengst behind, as bar graph
                }
        },
        "Jaar mnd": {
            range: 'year',
            filter: 'year',
            groupBy: 'month',
            data: {
		Temperatuur: 'd.te_288',	//Temperature in front (as line graph)
                Opbrengst: 'd.v_20',		//then Opbrengst behind, as bar graph
                }
        }
    },
    legend: false,
    beginAtZero: true,
	refresh: 60,
//	drawOrderDay: ['v_20','te_288'],		//n.a. for custom graphs
//	drawOrderLast: ['v_20','te_288'],        //n.a. for custom graphs
//	drawOrderMonth: ['v_20','te_288'],      //n.a. for custom graphs
    datasetColors:['red', 'lightgreen']		//I've changed this as well
}

[Jimster]

@Lokonli, maybe you know how to solve some other things noticed in the graphs I have as well.

1. I have a multigraph which shows the solar power generation (bar graph) and the temperature (line graph), how can I make sure the line graph is on top of the bar graph? as it is now sometimes behind the bar graph.

2. In a graph when hovering over the values, I can see a pop up with for example the value of the temperature.
How can I get a unit behind that value? So is shows for example 25 C or 1.789 kWh, instead of just the numbers?

3. How can I make sure my grahps have an overview of 00:00 till 23:59, instead of a 24h overview (which is not handy for solar power generation graphs for example).

4. I also have 2 graphs in dashticz based on a Dummy Device out of domoticz, which show me no values in the graph. Looking in domoticz is shows me values in the graphs. The created block in dashticz shows the latest value. Also this block does not have a popup graph although that is configured.

To address 3) I've made some changes in the latest beta. Now the 'today' button only shows today's data, and adapts the x-axis to the full day.
I made this the default behavior for the 'today' button.

In custom graphs you have to set range to 'today' to get the similar behavior.

Depending on the feedback I may change the default behavior.

Nice, it works when I change filter to today. Not range.

[magicduck]

Hello,

I currently have an issue with the graph stuff... Maybe I have missed something, but it seem the graph stop to be done between 21:30 to 6:25 in the night. (See caption).

My graph config is :

Code: Select all

// EDF / PV
blocks['multi1'] = {
        title: 'PV | EDF',
        devices: [ 2120, 213],
        datasetColors: [ 'rgba(92,184,92,0.8','rgba(217,83,80,0.8)', 'rgba(217,83,79,0.8)'],
        lineFill: [true,true],
        graph: 'line',
        stacked: 'true',
        buttonsBorder: 'red',
        buttonsColor: '#fff',
        buttonsFill: 'transparent',
        buttonsIcon: 'red',
        buttonsShadow: 'rgba(255,255,255,0.1)',
        height: 120,
        custom: {
                        "12 h": {
                                range: 'day',
                                filter: '12 hours',
                                data: {
                                        'PV': 'd.v_2120',
                                        'HC': 'd.v2_213',
                                        'HP': 'd.v_213',
                                },
                        },
        },
};

Still don't understand why night is missing on my graph ?

[Lokonli]

I expect the x-axis values (time base) are derived from your first device: your solar panels.
Probably your solar panels don't provide updates between 21:30 and 6:25, which seems logical given the amount of sun in that period.

Currently Dashticz only shows x-axis labels for the data it receives, resulting in a compressed x-axis.
(exception is the graph for 'today' )

[magicduck]

Well I have 3 values on my graph (french electricity) :
- Heures Pleine (eg costly electricity : from 6:00 to 22:00) aka v2_213
- Heures Creuse (eg very cheap electricty : from 22:00 to 6:00) aka v_213
- PV (Solar panels) that is in green (well... depending of the sun) aka v_2120

So to have the last 12 hours there is no exception possible ? (I even don't need the button about today / etc..)

[Lokonli]

Everything is possible

I'll add the request to the list.

[Chris12]

Hi,

I noticed a problem in 1 of my combined graphs.
The graph below combines the solar energy generation, and the energy consumption.

When looking at the daily/24h and monthly graph, it shows both nicely.
But the last week graph shows only one of the values (the solar generation)

I cannot figure out what is wrong here?

Spoiler: show

Code: Select all

//Zonnepanelen opbrengst vs dagelijks verbruik
blocks['group_by_solar_vs_grid'] = {
        title: 'Verbruik vs Opbrengst',
        devices: [20,347],
        graph: 'bar',
		height: '300px',
		width: 8,
        stacked: true,
        graphTypes: ['v'],
        tooltiptotal: true,
        debugButton: true,
        custom : {
        "Last Day": {
                        range: 'last',
                        groupBy: 'hour',
                        filter: '24 hours',
							data: {
                                Generation: 'd.v_20',
                                Consumption: 'd.v_347*-1'
        },
                },
                "Last Week": {
                        range: 'month',
                        groupBy: 'day',
                        filter: '7 days',
							data: {
                                Generation: 'd.v_20',
                                Consumption: 'd.347*-1'
        },
        },
        "Last Month": {
                        range: 'month',
                        groupBy: 'week',
							data: {
                                Generation: 'd.v_20',
                                Consumption: 'd.v_347*-1'
        },
        }
        },
        lineTension: 0.5,
        datasetColors: ['lightgreen', 'orange']
}

[Chris12]

Anther question about the graph information show when hovering over, the pop-up shows the values of that moment.
Is it possible to have the value and for example the C/Kwh/etc. behind it ? (example of having the solar generation and temperature in 1 graph combined)

[Chris12]

Hi (Again), another thing spotted.

The icon for a custom graph in front of the 24h/week/month filter are working, but when defining 'year' filter it doesn't show an icon in front of it like with the other ones (24h/week/month).

[Chris12]

@Lokonli, I know your busy. But any time to look at the items mentioned above here?

[Lokonli]

Hi,

I noticed a problem in 1 of my combined graphs.
The graph below combines the solar energy generation, and the energy consumption.

When looking at the daily/24h and monthly graph, it shows both nicely.
But the last week graph shows only one of the values (the solar generation)

I cannot figure out what is wrong here?

Spoiler: show

Code: Select all

//Zonnepanelen opbrengst vs dagelijks verbruik
blocks['group_by_solar_vs_grid'] = {
        title: 'Verbruik vs Opbrengst',
        devices: [20,347],
        graph: 'bar',
		height: '300px',
		width: 8,
        stacked: true,
        graphTypes: ['v'],
        tooltiptotal: true,
        debugButton: true,
        custom : {
        "Last Day": {
                        range: 'last',
                        groupBy: 'hour',
                        filter: '24 hours',
							data: {
                                Generation: 'd.v_20',
                                Consumption: 'd.v_347*-1'
        },
                },
                "Last Week": {
                        range: 'month',
                        groupBy: 'day',
                        filter: '7 days',
							data: {
                                Generation: 'd.v_20',
                                Consumption: 'd.347*-1'
        },
        },
        "Last Month": {
                        range: 'month',
                        groupBy: 'week',
							data: {
                                Generation: 'd.v_20',
                                Consumption: 'd.v_347*-1'
        },
        }
        },
        lineTension: 0.5,
        datasetColors: ['lightgreen', 'orange']
}

Almost ok

In the 'Last Week' graph you have to replace 'd.347' with 'd.v_347'

[Lokonli]

Anther question about the graph information show when hovering over, the pop-up shows the values of that moment.
Is it possible to have the value and for example the C/Kwh/etc. behind it ? (example of having the solar generation and temperature in 1 graph combined)

Noted.

[Lokonli]

Hi (Again), another thing spotted.

The icon for a custom graph in front of the 24h/week/month filter are working, but when defining 'year' filter it doesn't show an icon in front of it like with the other ones (24h/week/month).

I think currently only the first three buttons get an icon.
I'll add a parameter for this.

[Chris12]

@ Lokonli Thanks! Last week graph is working now perfectly for that one!

Another thing which I'm struggeling with: in another combined graph I combine the solar output and temperature.
Looking at the month/year, the solar output is fine, but the temperature values are not average over that time frame.

Spoiler: show

Code: Select all

//Zonnepanelen opbrengst + temperatuur BME280
blocks['Zonnepanelen-graph'] = {
	debugButton: true,
	//iconColour: ['green'],
    title: ['Zonnepanelen'],
    graph: ['line','bar'],
    devices: [288,20],
    height: '300px',
	width: 12,
	aggregate: 'sum',
    custom : {
        "24 uur": {
            range: 'day',
            filter: 'today',
            data: {
				Temperatuur: 'd.te_288',
				Opbrengst: 'd.v_20',
				}
        },
        "Week": {
            range: 'month',
            filter: '7 days',
            data: {
				Opbrengst: 'd.v_20',
				Temperatuur: 'd.te_288'
				}
        },
        "Maand": {
            range: 'month',
            filter: 'month',
            groupBy: 'week',
            data: {
				Opbrengst: 'd.v_20',
				Temperatuur: 'd.te_288'
				}
        },
        "Jaar": {
            range: 'year',
            filter: 'year',
            groupBy: 'month',
            data: {
				Opbrengst: 'd.v_20',
				Temperatuur: 'd.te_288'
				}
        }
    },
    legend: false,
    beginAtZero: true,
	refresh: 60,
    datasetColors:['Blue','lightgreen']
}

[Lokonli]

@ Lokonli Thanks! Last week graph is working now perfectly for that one!

Another thing which I'm struggeling with: in another combined graph I combine the solar output and temperature.
Looking at the month/year, the solar output is fine, but the temperature values are not average over that time frame.

Spoiler: show

Code: Select all

//Zonnepanelen opbrengst + temperatuur BME280
blocks['Zonnepanelen-graph'] = {
	debugButton: true,
	//iconColour: ['green'],
    title: ['Zonnepanelen'],
    graph: ['line','bar'],
    devices: [288,20],
    height: '300px',
	width: 12,
	aggregate: 'sum',
    custom : {
        "24 uur": {
            range: 'day',
            filter: 'today',
            data: {
				Temperatuur: 'd.te_288',
				Opbrengst: 'd.v_20',
				}
        },
        "Week": {
            range: 'month',
            filter: '7 days',
            data: {
				Opbrengst: 'd.v_20',
				Temperatuur: 'd.te_288'
				}
        },
        "Maand": {
            range: 'month',
            filter: 'month',
            groupBy: 'week',
            data: {
				Opbrengst: 'd.v_20',
				Temperatuur: 'd.te_288'
				}
        },
        "Jaar": {
            range: 'year',
            filter: 'year',
            groupBy: 'month',
            data: {
				Opbrengst: 'd.v_20',
				Temperatuur: 'd.te_288'
				}
        }
    },
    legend: false,
    beginAtZero: true,
	refresh: 60,
    datasetColors:['Blue','lightgreen']
}

Try to add the following block parameter:

Code: Select all

  aggregate: 'sum'

The default aggregation method for groupBy graphs is 'average'.

[Chris12]

Try to add the following block parameter:

Code: Select all

  aggregate: 'sum'

that's allready added to the block code, or do I need to add it to the specific custom part? (I tried that, but makes no difference)

I changed it to:

Code: Select all

  aggregate: 'average'

and now it's working

[Chris12]

Hi,

When creating a block you can add the "popup: <graphname>" parameter configured there, which gives an almost fullscreen view of the graph when clicking on that block.
Is the same popup graph also possible when having that graph itself configured on the dashboard? So a click on the graph will popup that graph almost fullscreen, same behavior as when configured with a block.

[Lokonli]

Hi (Again), another thing spotted.

The icon for a custom graph in front of the 24h/week/month filter are working, but when defining 'year' filter it doesn't show an icon in front of it like with the other ones (24h/week/month).

I've added a block parameter for this to latest beta (on top of 3.6.7)
You can use the parameter 'buttonIcon' as part of the custom graph definition block.

Code: Select all

 blocks['p1_grafiek_gas'] = {
  devices: [44],
  title: 'Gas',
  custom: {
    dag: {
      buttonIcon: 'fab fa-gripfire',    //New!
      graph: 'bar',
      range: 'day',
      filter: '24 hours',
      data: {
        Gas: 'd.v_44',
      },
    },
  },
};