Timeline for Basic UI

[s0170071]

Did I understand that right that I need to use ? for the browser

http://192.168.1.52:8080/static/Visualization/Timeline.html?Item=KG_Gaeste_Fenster?serviceId=influxdb

but & for the webview

webview url ="/static/Visualization/Timeline.html?Item=KG_Gaeste_Fenster&serviceId=influxdb" height = 4

[Mihai_Badea]

In the first link, you are querying the persistence REST API directly, so, yes, you should use ?. That won’t be of much use in a sitemap… I asked you to check if you can open the URL who was throwing the error just as a test.
On the second one, you are calling Timeline.html and you should specify the parameters with &.

[s0170071]

I can display both Items now, open/close and 0/1.
Groups however no not work.

http://192.168.1.52:8080/static/Visualization/Timeline.html?Item=EG_Flur_Haustuer?serviceId=influxdb
works,
http://192.168.1.52:8080/static/Visualization/Timeline.html?Group=gdisplayFenster?serviceId=influxdb
does not.

items file reads:
Group gdisplayFenster

Contact EG_Flur_Haustuer “Tür” (EG_Flur, gHaustuer,gdisplayFenster) {channel=…}

[Mihai_Badea]

Using the REST API can you query persistence data for the group?
How do you persist the group?

[s0170071]

I don’t. But gHaustuer is persisted. EG_Flur_Haustuer is a member gHaustuer. Since EG_Flur_Haustuer is the only member of gdisplayFenster I did not think that was a problem.

I was assuming that displaying the group concatenates all elements.
If i do persist the group in addition to its elements, does this result in twice the amount of data to be stored ?

[s0170071]

If you use ServiceId=influxdb it works for Group and Item
If you use serviceId=influxdb it works for Item only

Can’t explain it. In Timeline.html it says
var serviceParameter = GetParameter(“ServiceId”);

In fact, if you use Item, you do not need any other parameter, just a “?”. Maybe it is then using the default persistence ?

---

This is the image I wanted to post further down, but the board wouln’t let me…
Now its up here where it doesn’t belong.

Same for longer periods, the image seems to be inverted.

[Melkor (Marco Salinardi)]

Hello, I implemented this function and I just love it! only a question, when I stop on a plotted area it shows the time in 12 am/pm format even though the timeline is in the correct 24 format. And i would also like to translate in Italian the duration and hours. Can i get a clue on how to do it?Thanks in advance, GREAT JOB!!!

[s0170071]

This is odd. If i plot 192.168.1.52:8080/static/Visualization/Timeline.html?Group=heatingTimeline&ServiceId=influxdb&Hours=28 I get:

If I plot one more hour,
192.168.1.52:8080/static/Visualization/Timeline.html?Group=heatingTimeline&ServiceId=influxdb&Hours=29
I get all values inverted. I would love to post an image of it but this software wouldn’t let me. New users are so limited…
Edit: see two posts up.

Same for longer periods, the image seems to be inverted.

[Mihai_Badea]

Hi guys!
Sorry for my late reply…

@s0170071

I get all values inverted.

I’m sorry, but I have no clue as why you are experience this. I’m no web programmer and all I did was to modify @patrik_gfeller’s work with help from Google and other forums.
AFAIK, this Timeline visualization only plots state changes, so my guess is that you don’t have enough data in your persistence… But, again, it’s only a guess. I’m using this chart type in my sitemap and I didn’t have any problems with it…

@Melkor
Well, I also wanted to make some modifications to the tooltip display and your question was just one more push for me to try something .
So, here is what I accomplished:

For translating the labels, you can take a look in Timeline.html and edit yourself the corresponding text (around line# 144):

					entry[2] = '<div class="ggl-tooltip">' +
						'<div><strong>' + label + '</strong></div>' +
						'<hr>' +
						'<table>' +
						'<tr><td><span>Start:</span></td><td>' + formatDate(entry[4],1) + '</td></tr>' +
						'<tr><td><span>End:</span></td><td>' + formatDate(entry[5],1) + '</td></tr>' +
						'</table><hr><table>' +
						'<tr><td><span>Duration:</span></td><td>' + duration_string + '</td></tr>' +
						'</table>' +
						'</div>';

For changing the datetime format, you’ll have to take a look at formatDate function (lines# 64-100). Choose another format and use it in the tooltip’s definition or modify to suit your need.
It shouldn’t be complicated at all.

I updated the previous link with the new version, but, in any case here it is again.
Files modified: Visualization\Timeline.html and css\visualizationStyle.css.

[cweitkamp (Christoph Weitkamp)]

All,

Thanks for this great feature. It improves my sitemap very much.

I discovered an issue with calculating the durations for the tooltip. The results always were less than 24h even if the state changes were longer than that. I have changed the calculation slightly to:

             var duration = Math.trunc((entry[5] - entry[4]) / 1000);
             var hours = parseInt( duration / 3600 );
             var minutes = parseInt( duration / 60 ) % 60;
             var seconds = duration % 60;

A second thing which seems to be nice to know for everyone is a way how to localize the timeline itself. When displaying a period longer than 24h the labels of the x-axis contain the abbreviations for the day. To streamline it with your local settings you can add the language option while loading the visualization package.

     google.charts.load("current", {
         packages: ["timeline"],
         language: "de"
     });

[Oleide (Ole Eide)]

Hi All off you
This looks absolutely awesome, but no way i can get it to work, I just get a “white” space,
tried with edge an Chrome, same thing, tried the bare url in the browser : (http://192.168.0.132:8080/static/Visualization/Timeline.html?Group=gBevegelse&serviceId=rrd4j&Hours=24)
The percistance works fine as i get the Chart with the same group to work fine…

I downloaded Mihai_Badea html.zip, and changed the baseURL = “http://192.168.0.132:8080/” still nothing…

Is it anything else i need to install to get this to work ?

/Ole

[zuernc (Christoph)]

I had the exact same white-space-issue. What solved it for me was adding every single item I wanted to display into the rrd4j.persist file -instead of just the group:

Strategies {
		    everyMinute : "0 * * * * ?"
        	everyHour : "0 0 * * * ?"
        	everyDay  : "0 0 0 * * ?"
        	default = everyChange
			}
		    Items {
					timeline* : strategy = everyUpdate, everyMinute
                    timeline_item_1 : strategy = everyUpdate, everyMinute
                    timeline_item_2 : strategy = everyUpdate, everyMinute
                    [...]
			}

Remains the nagging feeling that it shouldn’t be necessary as it seems very redundant.

[nakh_Home]

@Huge_Go Did you make it in english?

[Huge_Go]

Sorry,

But I’m really busy and I couldn’t make it so far.

[nakh_Home]

Thanks for your answer

[nakh_Home]

maybe Some noob questions,

your help will me more than appreciated . you know the feeling to be close than ever

1. Why do i have a such space (red square)?

    Text label="Security" icon="releaselock" {
        Frame label="Main" icon="alarm" {
                Selection item=HomeStatus icon="home"  label="Status"   mappings=[bye="Bye",lock="Lock",night="Night",back="Back",door="Door"]
                Default item=gpresence_Notification label="Last motion"					
                //myStr= Z_Door1 + " " +Z_Door1_LastUpdate
                Default item=DoorProxy_terrasse						 label="Terrace [%s]"	icon="door"
                Default item=Z_Door1_LastUpdate  label="Last update" icon="time" 
                Default item= mqtt_sensor_door label="Entry Door" icon="door"    
               // Default item= mqtt_sensor_door_LastUpdate label="Last update"  icon="time" 
                
                Default item= mqtt_sensor_door_LastUpdate1     
                Default item= mqtt_sensor_door_LastUpdate2     
                Default item= mqtt_sensor_door_LastUpdate3     
                Default item= mqtt_sensor_door_LastUpdate4     
                Default item= mqtt_sensor_door_LastUpdate5     
                Default item= mqtt_sensor_door_LastUpdate6     
                Default item= mqtt_sensor_door_LastUpdate7     
                Default item= mqtt_sensor_door_LastUpdate8     
                Default item= mqtt_sensor_door_LastUpdate9  	
                Default item= mqtt_sensor_door_LastUpdate10  	
                Webview url="/static/Visualization/Timeline.html?Item=mqtt_sensor_door&ServiceId=influxdb&Hours=12" height=12

                Default item=Door_Snooze_Switch						 label="Door_Snooze_Switch"	icon="door"

        }
    }

2. is it possible to change the font color or the X axis (currently black on black?

3. Correct me if i am wrong. this widget could be displayed only when connected to the local network AND only from a browser

[nakh_Home]

Guys, any ideas?

[kevinshane (shane kevin)]

@patrik_gfeller

I can post some more of my .html for charting if desired - but it is not documented and I´m not a web-developer; thus not a reference. But if it helps and there´s interest to play with this as a basis let me know.

Please I would like to see this example! Thanks!!

[Franky_Dabomb]

Hello,
I want to access a sitemap containing timeline through a nginx reverse-proxy.
The local access “http://adress:8080/basicui/app?sitemap=diagnostic” works fine,
but when I try to access this site through a nginx-reverseproxy
“https://adress.tld/basicui/app?sitemap=diagnostic” the timline dosnt appear.
Which changes are required to acces timline through a reverseproxy?

[nakh_Home]

Grafana and nginx - easy solution

There are lots of posts in the forum about difficulties displaying grafana charts in sitemaps, when openHAB is being run through a nginx reverse proxy. A number of possible solutions are discussed but, unless I am missing something, none were very easy or straightforward. This seems to be the easiest way. add an nginx location block to catch public urls starting ‘grafana’. The below example shows my standard openahb location block followed by the new grafana block: location / { proxy_pass …