Timeline for Basic UI

[Huge_Go]

Here is the a german tutorial. https://youtu.be/ATCqvEdePns
I’m going to do an english one as well in a few weeks.

[Huge_Go]

I would be interested in the sricpt for the graph. It looks pretty cool. Especially that you can put axis labels on both sides left and right.

[Matt_Hias]

Deal all,

I would be really interested what went wrong when I followed the tutorial. My sitemap looks the following:

As you can see, timeline chart is blank.

Many thanks for helping me out.

Cheers
Matthias

[Kai1988]

same problem here!

Thanks
Kai

[Matt_Hias]

Does no one have any idea or hint?

Matthias

[Mihai_Badea]

Hi everyone!

I managed to extend and (I think) improve the Timeline, modifying @patrik_gfeller’s excellent scripts!
Additions/modifications:

• added Item parameter to display timeline for a single item;
• added Hours parameter to specify the timeframe to display – much like period parameter of Chart element – if not present, default to 24h;
• added the ability to plot empty time bar for items which do not have state changes in the interval;
• added serviceId to specify persistence service to use;
• added support for Contact items;
• pad with leading 0 the day, month, minute, etc. of the date when accessing rest/persistence/items/;

Examples:

Webview url="/static/Visualization/Timeline.html?Item=Gas_Boiler_Actuator_Switch" height=4

Webview url="/static/Visualization/Timeline.html?Group=gPresence&Hours=12" height=6

Webview url="/static/Visualization/Timeline.html?Group=Lights&serviceId=jdbc&Hours=24" height=12

As I cannot post a zip archive to this forum, here’s a link to download html.zip. The contents of this archive needs to be placed in conf/html folder like this:

html
|- css
|    |- visualizationStyle.css
|-  javascript
|    |- date.js
|    |- jquery.csv.js
|    |- jquery.csv.min.js
|    |- openHAB.js
|- Visualization
     |- Timeline.html

Once more, many, many thanks to @patrik_gfeller!!!

[Matt_Hias]

I really don’t get what’s wrong with my setup… maybe someone can have a closer look

This is my file structure:

My group is called timeline:

My sitemap contains two webviews: one with group, one with item

My rrd4j.persist contains the items:

But the webviews are still empty:

Many many thanks!

Regards
Matthias

[HomeAutomation]

@Mihai_Badea
I want to post the same effect.

It is different if you use edge or internet exlorer and it is different in ClassicUI and BasicUI

sitemap:

Webview url="/static/Visualization/Timeline.html?Item=swSwitch02&serviceId=jdbc&Hours=24"
Webview url="/static/Visualization/Timeline.html?gSwitchStatusSW&serviceId=jdbc&Hours=24"

ClassicUI and Edge

BasicUI and Edge:

and heavy load on the machine with a lot of eclipse errors.

With Internet Explorer:

And a lot of errors in logfile

2018-03-07 15:01:38.810 [ERROR] [ersey.server.ServerRuntime$Responder] - An I/O error has occurred while writing a response message entity to the container output stream.
org.glassfish.jersey.server.internal.process.MappableException: org.eclipse.jetty.io.EofException
        at org.glassfish.jersey.server.internal.MappableExceptionWrapperInterceptor.aroundWriteTo(MappableExceptionWrapperInterceptor.java:92) [179:org.glassfish.jersey.core.jersey-server:2.22.2]
        at org.glassfish.jersey.message.internal.WriterInterceptorExecutor.proceed(WriterInterceptorExecutor.java:162) [178:org.glassfish.jersey.core.jersey-common:2.22.2]
        at org.glassfish.jersey.message.internal.MessageBodyFactory.writeTo(MessageBodyFactory.java:1130) [178:org.glassfish.jersey.core.jersey-common:2.22.2]
        at org.glassfish.jersey.server.ServerRuntime$Responder.writeResponse(ServerRuntime.java:711) [179:org.glassfish.jersey.core.jersey-server:2.22.2]
        at org.glassfish.jersey.server.ServerRuntime$Responder.processResponse(ServerRuntime.java:444) [179:org.glassfish.jersey.core.jersey-server:2.22.2]
        at org.glassfish.jersey.server.ServerRuntime$Responder.process(ServerRuntime.java:434) [179:org.glassfish.jersey.core.jersey-server:2.22.2]
        at org.glassfish.jersey.server.ServerRuntime$2.run(ServerRuntime.java:329) [179:org.glassfish.jersey.core.jersey-server:2.22.2]
        at org.glassfish.jersey.internal.Errors$1.call(Errors.java:271) [178:org.glassfish.jersey.core.jersey-common:2.22.2]
        at org.glassfish.jersey.internal.Errors$1.call(Errors.java:267) [178:org.glassfish.jersey.core.jersey-common:2.22.2]
        at org.glassfish.jersey.internal.Errors.process(Errors.java:315) [178:org.glassfish.jersey.core.jersey-common:2.22.2]
        at org.glassfish.jersey.internal.Errors.process(Errors.java:297) [178:org.glassfish.jersey.core.jersey-common:2.22.2]
        at org.glassfish.jersey.internal.Errors.process(Errors.java:267) [178:org.glassfish.jersey.core.jersey-common:2.22.2]
        at org.glassfish.jersey.process.internal.RequestScope.runInScope(RequestScope.java:317) [178:org.glassfish.jersey.core.jersey-common:2.22.2]
        at org.glassfish.jersey.server.ServerRuntime.process(ServerRuntime.java:305) [179:org.glassfish.jersey.core.jersey-server:2.22.2]
        at org.glassfish.jersey.server.ApplicationHandler.handle(ApplicationHandler.java:1154) [179:org.glassfish.jersey.core.jersey-server:2.22.2]
        at org.glassfish.jersey.servlet.WebComponent.serviceImpl(WebComponent.java:473) [176:org.glassfish.jersey.containers.jersey-container-servlet-core:2.22.2]
        at org.glassfish.jersey.servlet.WebComponent.service(WebComponent.java:427) [176:org.glassfish.jersey.containers.jersey-container-servlet-core:2.22.2]
        at org.glassfish.jersey.servlet.ServletContainer.service(ServletContainer.java:388) [176:org.glassfish.jersey.containers.jersey-container-servlet-core:2.22.2]
        at org.glassfish.jersey.servlet.ServletContainer.service(ServletContainer.java:341) [176:org.glassfish.jersey.containers.jersey-container-servlet-core:2.22.2]
        at org.glassfish.jersey.servlet.ServletContainer.service(ServletContainer.java:228) [176:org.glassfish.jersey.contain

And 90% cpu load from internet explorer if page is shown.

Maybe the problem are the external links in the timeline.html. I block my OH from accessing internet.

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

[Mihai_Badea]

@Matt_Hias
If you’re using my version, I “think” (can’t look now) I hardcoded the
perisstence to jdbc.
So, you might want to use the serviceId parameter:

Webview url="/static/.......?Item=timeline&serviceId=rrd4j" height=...

[Mihai_Badea]

@HomeAutomation

Maybe the problem are the external links in the timeline.html. I block my OH from accessing internet.

It’s possible, I’m no web-developer…
I merely modified @patrik_gfeller scripts…

[HomeAutomation]

If I comment the two lines the heavy load is gone but then I cannot see the timeline at all.

    <!--
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    -->

[HomeAutomation]

I will try it on my other system with internet access.

[HomeAutomation]

With internet access the heavy load is gone but the problem with empty timeline exists.

[Mihai_Badea]

You could try to download https://www.gstatic.com/charts/loader.js, place it in the javascript folder and modify the src to include it from there - like the other scripts below it.
But, if it contains scripts from the web, you’ll be in the same situation.
jquery.min.js is already in the javascript folder so you can leave the include from web commented out.
Might worth a try…

[HomeAutomation]

I’ve done that too. Solves only the problem with heavy load

If I add height=6 is is better, but not good.

[Mihai_Badea]

The second Webview…

...Timeline.html?gSwitchStatusSW...

sould be

...Timeline.html?Item=gSwitchStatusSW...

[HomeAutomation]

ups, yes you are right.

Solved the problem in basicUI. Is there any chance to fix this in classicUI too? It looks like the dimension of the windows is calculated wrong here.

ClassicUI:

BasicUI:

[Mihai_Badea]

@HomeAutomation

Is there any chance to fix this in classicUI too?

Sorry, not using classicUI and I’m definitely not able to help with that

[HomeAutomation]

@patrik_gfeller
no problem, maybe patrik_gfeller can help.

But it is working perfect in BasicUI. cool.

[Matt_Hias]

yes, I use your version and added the “…&serviceId=rrd4j…” parameter, but no change