Domoticz

Creo2005 wrote: Thursday 13 January 2022 11:16What theme?

config['theme'] = 'default';

Maikel76 wrote: Thursday 13 January 2022 10:39 Goodday,
Really loving the new graph possibilities. Finetuned a lot of stuff
Now I would like to change font-size of the x-axis and also the font of the legend underneath. I have a rather small and full ipad so efficient use of space is priority
this is my CONFiG.js

Code: Select all

blocks['my_graph'] = {
       title: 'Avg temp',
        devices: [13, 95, 97, 99, 98],
        graph: 'line',
        graphTypes: ['l','l','te','te','te'],
        lineTension: 0.4,
        width: 8,
        height: '125px',
            legend: {
                te_13:"now",
                te_95:"avg",
                te_97:"set",
                l_99:"din",
                l_98:"AC on"
                },
        lineFill: [false,false,false, true, true],
        datasetColors: ['grey','red','orange','green','rgba(44,130,201,0.5)'],
        debug: false
}

this is my custom.css

Code: Select all

.dt_block[data-id='my_graph'] {                     /* graph temp*/
     padding-top: 0px !important;
     padding-bottom: 0px !important;  
}
.graphheader,
.graphbuttons {
  display: none;
}

The "font-size: 9px;" with or without !important doest effect x-axis and legend
Also, is there an option to change the large rectangular blocks for small square ones?
this is how the legend looks now;
graph2.jpg

    options: {
        scales: {
            xAxes: [{
                   ticks: {
                    fontSize: 7
                   }
            }],
            yAxes: [{
                ticks: {
                 fontSize: 7,
                },
                scaleLabel: {
                    fontSize: 7
                }
                
            }],
        },
        legend:{
            labels:{
                fontSize:10,
                boxWidth:10
            },
        }
    }

Lokonli wrote: Thursday 13 January 2022 21:25

Maikel76 wrote: Thursday 13 January 2022 10:39 Goodday,
Really loving the new graph possibilities. Finetuned a lot of stuff
Now I would like to change font-size of the x-axis and also the font of the legend underneath. I have a rather small and full ipad so efficient use of space is priority
this is my CONFiG.js

Code: Select all

blocks['my_graph'] = {
       title: 'Avg temp',
        devices: [13, 95, 97, 99, 98],
        graph: 'line',
        graphTypes: ['l','l','te','te','te'],
        lineTension: 0.4,
        width: 8,
        height: '125px',
            legend: {
                te_13:"now",
                te_95:"avg",
                te_97:"set",
                l_99:"din",
                l_98:"AC on"
                },
        lineFill: [false,false,false, true, true],
        datasetColors: ['grey','red','orange','green','rgba(44,130,201,0.5)'],
        debug: false
}

this is my custom.css

Code: Select all

.dt_block[data-id='my_graph'] {                     /* graph temp*/
     padding-top: 0px !important;
     padding-bottom: 0px !important;  
}
.graphheader,
.graphbuttons {
  display: none;
}

The "font-size: 9px;" with or without !important doest effect x-axis and legend
Also, is there an option to change the large rectangular blocks for small square ones?
this is how the legend looks now;
graph2.jpg

The graph elements are no normal HTML elements, but drawn on a canvas by the Chartjs module. That means they can be styled via custom.css.

But, since the goal of Dashticz is to maximize customization options, also for the graphs there is a possibility. However, it's a bit more complex, so only suitable for advanced usage.

While doing some tests, I noticed it was not possible anymore to customize the Y-axes. In the mean time I've fixed that in the latest beta.

Assuming you are running latest beta, you can customize the the font size of x and Y axes and the width of the graph legend via the 'options' block parameter as follows:

Code: Select all

    options: {
        scales: {
            xAxes: [{
                   ticks: {
                    fontSize: 7
                   }
            }],
            yAxes: [{
                ticks: {
                 fontSize: 7,
                },
                scaleLabel: {
                    fontSize: 7
                }
                
            }],
        },
        legend:{
            labels:{
                fontSize:10,
                boxWidth:10
            },
        }
    }

If you are testing, I would advice to first literally copy the code above into your graph block definition. After that you can start adjusting the parameters.

Enjoy.

http://ip:port/json.htm?type=devices&rid=100

{
	"ActTime" : 1642160390,
	"AstrTwilightEnd" : "19:23",
	"AstrTwilightStart" : "05:30",
	"CivTwilightEnd" : "18:31",
	"CivTwilightStart" : "06:22",
	"DayLength" : "11:23",
	"NautTwilightEnd" : "18:57",
	"NautTwilightStart" : "05:56",
	"ServerTime" : "2022-01-14 18:39:50",
	"SunAtSouth" : "12:27",
	"Sunrise" : "06:45",
	"Sunset" : "18:08",
	"app_version" : "2021.1",
	"result" : 
	[
		{
			"AddjMulti" : 1.0,
			"AddjMulti2" : 1.0,
			"AddjValue" : 0.0,
			"AddjValue2" : 0.0,
			"BatteryLevel" : 255,
			"CustomImage" : 106,
			"Data" : "0.07 Mbit/s",
			"Description" : "",
			"Favorite" : 0,
			"HardwareDisabled" : false,
			"HardwareID" : 9,
			"HardwareName" : "MikroTik",
			"HardwareType" : "Mikrotik RouterOS",
			"HardwareTypeVal" : 94,
			"HaveTimeout" : false,
			"ID" : "00090001",
			"Image" : "mikrotik-routeros-winbox",
			"LastUpdate" : "2022-01-14 18:39:23",
			"Name" : "MikroTik - Bandwidth UP",
			"Notifications" : "false",
			"PlanID" : "0",
			"PlanIDs" : 
			[
				0
			],
			"Protected" : false,
			"SensorType" : 1,
			"SensorUnit" : "Mbit/s",
			"ShowNotifications" : true,
			"SignalLevel" : "-",
			"SubType" : "Custom Sensor",
			"Timers" : "false",
			"Type" : "General",
			"TypeImg" : "mikrotik-routeros-winbox",
			"Unit" : 1,
			"Used" : 1,
			"XOffset" : "0",
			"YOffset" : "0",
			"idx" : "100"
		}
	],
	"status" : "OK",
	"title" : "Devices"
}

Maikel76 wrote: Friday 14 January 2022 12:46 Could ask if it's also possible to add the following graph-type in the graphs module or is it better to make a new topic?

Lokonli wrote: Friday 14 January 2022 16:00

Maikel76 wrote: Friday 14 January 2022 12:46 Could ask if it's also possible to add the following graph-type in the graphs module or is it better to make a new topic?

Yes, please create a new topic, and I'll answer it there.