[Experimental] New graph module. Testers needed.

[renerene]

Latest version does not work on my Chinese Android tablet running WallPanel. Also tested FullyKiosk, no luck. It gets stuck at "loading 10%" or "Could not load graph!"
on PC with Mozilla evrything is ok.

Additional: the three time range buttons at the top consume a lot of space and are rarely used. Is it possible to hide them, or make them smaller?

[Lokonli]

update to v 3.0.6
get the newest graph.js
add some colors to my js and everything works fine

Knipsel.JPG
Knipsel1.JPG
Knipsel2.JPG

nice

[Lokonli]

Latest version does not work on my Chinese Android tablet running WallPanel. Also tested FullyKiosk, no luck. It gets stuck at "loading 10%" or "Could not load graph!"
on PC with Mozilla evrything is ok.

Additional: the three time range buttons at the top consume a lot of space and are rarely used. Is it possible to hide them, or make them smaller?

In the latest graphjs version they already shift to the upper right (if it fits).
You can also hide them completely via custom.css. I'll update the documentation.

[Lokonli]

Latest version does not work on my Chinese Android tablet running WallPanel. Also tested FullyKiosk, no luck. It gets stuck at "loading 10%" or "Could not load graph!"
on PC with Mozilla evrything is ok.

Additional: the three time range buttons at the top consume a lot of space and are rarely used. Is it possible to hide them, or make them smaller?

Did it work before? Until when?

I've started to use some more modern js functionalities (ES6, css flex)

Probably you need to update your browser. FullyKiosk uses Webview. WallPanel probably as well. Do you already have the latest webview module? You can download it from the Google play store. If you update Chrome you get the latest webview as well.

[Gianni]

@lokonli is it possible to set the graph into 24 h and not am/pm

[Lokonli]

@lokonli is it possible to set the graph into 24 h and not am/pm

It can be done now already by manually overriding the graph options:

Code: Select all

blocks['graph_6'] = {   
    options : {
       scales: {
            xAxes: [{
                time: {
                    displayFormats: {
                    'minute': 'HH:mm',
                    'hour': 'H',
                    }
                }
            }]
        }   
    }
}

(in this example is 6 the Domoticz device ID for which you want to show the graph)

Maybe I'll make it a bit easier to configure in the future.

[Gianni]

dashticz keep loading

Code: Select all

//
//graph
//
blocks['graph_126'] = {
   title: 'Zonnepanelen',
   width: 12,
   type: 'bar',
   datasetColors: ['yellow']
   options : {
       scales: {
            xAxes: [{
                time: {
                    displayFormats: {
                    'minute': 'HH:mm',
                    'hour': 'H',
                    }
                }
            }]
        }   
    }

};

checked all my open en close tags and it's seen correct.

[Gianni]

i have a little bit experience wit Java oop programming so i did try to fix it and go on a search
Found out on Stack this.

I found that this wasn't possible for Chart.js so I moved to Highcharts.js instead, which supports this functionality.
Here below is my code for the solution:

[Lokonli]

dashticz keep loading

Code: Select all

//
//graph
//
blocks['graph_126'] = {
   title: 'Zonnepanelen',
   width: 12,
   type: 'bar',
   datasetColors: ['yellow']
   options : {
       scales: {
            xAxes: [{
                time: {
                    displayFormats: {
                    'minute': 'HH:mm',
                    'hour': 'H',
                    }
                }
            }]
        }   
    }

};

checked all my open en close tags and it's seen correct.

You have to add a comma behind the datasetColors line:

Code: Select all

   datasetColors: ['yellow'],
 

[Lokonli]

i have a little bit experience wit Java oop programming so i did try to fix it and go on a search
Found out on Stack this.

I found that this wasn't possible for Chart.js so I moved to Highcharts.js instead, which supports this functionality.
Here below is my code for the solution:

It's working with chart.js on my system with the code I provided.

[renerene]

Did it work before? Until when?

I've started to use some more modern js functionalities (ES6, css flex)
Probably you need to update your browser. FullyKiosk uses Webview. WallPanel probably as well. Do you already have the latest webview module? You can download it from the Google play store. If you update Chrome you get the latest webview as well.

Solved. The problem was in

Code: Select all

            range: '24 hours',
            filter: '8 hours',

After changing the first line to range: 'day' the could not load graph error was gone.

[Lokonli]

Did it work before? Until when?

I've started to use some more modern js functionalities (ES6, css flex)
Probably you need to update your browser. FullyKiosk uses Webview. WallPanel probably as well. Do you already have the latest webview module? You can download it from the Google play store. If you update Chrome you get the latest webview as well.

Solved. The problem was in

Code: Select all

            range: '24 hours',
            filter: '8 hours',

After changing the first line to range: 'day' the could not load graph error was gone.

Good, thanks. Probably I've to add some checks on valid values.

[renerene]

Code: Select all

/*	P1 power gas*/
blocks['graph_428'] = {
    type: 'line',
    datasetColors: ['white'],
    width:6
};

Hmm, 'vandaag' (today) looks more like 4 days. Also, there is just one data point per hour, but that is the same in domoticz. Maybe it only sends (or stores?) one value per hour. In the domoticz log an updated is annonced every 10 seconds:
2019-08-30 22:17:39.314 (stroommeter-USB1) P1 Smart Meter (Stroom)
2019-08-30 22:17:39.315 (stroommeter-USB1) Usage (Usage L1)
2019-08-30 22:17:39.315 (stroommeter-USB1) Usage (Delivery L1)
2019-08-30 22:17:39.326 (stroommeter-USB1) P1 Smart Meter (Gas)

[Lokonli]

If you select 'vandaag' you should receive the same amount of data as in the Domoticz graph.

What is your Domoticz setting for 'Log geschiedenis' -> 'Korte log sensoren'?
Probably it's 4 days.

A gasmeter can't measure the flow. It only shows the used amount. Domoticz stores the used amount per hour.

[Gianni]

You have to add a comma behind the datasetColors line:

Damn i hate this
does remind me at my college and need to debug 10 time's to find out i forget of ;

thx works now

[renerene]

Hmm, i'm a bit puzzled here. Since a few days, dashticz crashes after ca. 1/2 hour. Don't know the exact time. It happens both on Wallpanel and Fullykiosk. After a while there is the startup screen on my tablet. Thought the cause was in the graphs, but after not displaying them (modify columns declaration), the problem remains. Is there something else modified that could cause a crash?
I will do a 'git checkout beta' and keep you updated.

[Lokonli]

Hmm, i'm a bit puzzled here. Since a few days, dashticz crashes after ca. 1/2 hour. Don't know the exact time. It happens both on Wallpanel and Fullykiosk. After a while there is the startup screen on my tablet. Thought the cause was in the graphs, but after not displaying them (modify columns declaration), the problem remains. Is there something else modified that could cause a crash?
I will do a 'git checkout beta' and keep you updated.

You had the crash with the chartjs branch? or with the beta branch?

[renerene]

Code: Select all

You had the crash with the chartjs branch? or with the beta branch?

I was on Chartjs branch. But the problem continues back on the beta branch. Probably another issue something with the tablet.

[Lokonli]

My water usage graph in dashticz does not show liters but m3. In domoticz the values are reported in liters (x1000). Is there a possibility to adjust the graph so it shows liters instead of m3?

Knipsel.JPG

With the new graph module, a first version is available via the chartjs branch, you can create a custom graph.



It's still a bit experimental, but I expect the following will work:

First find the value name. You can do that as follows (assuming the device id is 6) :

Code: Select all

blocks['graph_6'] = {
    graph: 'bar',
    datasetColors: ['yellow'],
    legend: true
}

In the legend you see the name of value name. Probably it's 'v'

Then you can create a custom graph:

Code: Select all

blocks['graph_6'] = {
    graph: 'bar',
    datasetColors: ['yellow'],
    legend: true,
    custom : {
        "last day": {
            range: 'day',
            filter: '24 hours',
            data: {
                liter: 'd.v*1000'            }
            }
        }
   }
}

[madradrakie]

it works! Thank you so much!