You’re absolutely right, rrd4j is not good for charting.
But this is not all, even without persisted states timeline should display the items without states.
@Matt_Hias, after you change the persistennce, could you modify the url of the Webview element to include the full URL to your server?
Webview url=" http://address/static..."
Also, could you try that url directly from browser?
That’s it: I changed to influxdb and added the complete URL to the webview-thing:
Many thanks so far.
But why does it required the complete URL? It’s different in your setup, isn’t it?
Best Regards
Matthias
if I open the url in Firefox I get
TypeError: array is null in openHAB.js:55:21
For what its worth, objArray is null too.
Its the for loop of
// JSON to CSV Converter
function ConvertToCSV(objArray) {
var array = typeof objArray != ‘object’ ? JSON.parse(objArray) : objArray;
var str = ‘’;
for (var i = 0; i < array.data.length; i++) {
var line = '';
for (var index in array.data[i]) {
if (line !== '') line += ',';
line += array.data[i][index];
}
str += line + '\r\n';
}
return str;
}
I tried different items and groups and adjusted the persistence to “influx”
tracking it a bit further
jsonData = GetData(encodeURI(itemUrl));
fails with itemUrl being “…/…/…/rest/persistence/items/KG_Gaeste_Fenster?serviceId=influx”
Does the URL work in a browser?
Also, shouldn’t be influxdb instead of influx?
@Mihai_Badea, Thanks, your hint got me one step further.
I tried some urls in the browser. Here are the results
[Result] URL
[ OK ] http://192.168.1.52:8080/static/Visualization/Timeline.html?Item=KG_Gaeste_Fenster?serviceId=influxdb
[Fail] …/static/Visualization/Timeline.html?Item=KG_Gaeste_Fenster?serviceId=influx
[Fail] …/static/Visualization/Timeline.html?Item=KG_Gaeste_Fenster&serviceId=influxdb
Lessons learned:
technical background: I run a wired Homematic system.
Input module HMW-Sen-SC-12-DR…#SENSOR returns open/closed
Input module HMW-IO-12-Sw14-DR…#VALUE returns 0/1
Actually, I had it working for Contact items with OPEN/CLOSED states… but apparently I didn’t upload the latest version 
.
Please, try and download again html.zip The only changed file is Timeline.html.
I’m not sure what you mean by that… The REST API clearly uses ? not &.
I’m not sure what you mean by that… The REST API clearly uses ? not &.
on march 7th you posted :
Webview url="/static/.......?Item=timeline&serviceId=rrd4j" height=...
Please note that the html parameter list is started by ? but the parameter delimiter is & in your post. I found it working with ? as parameter delimiter.
Please, try and download again html.zip The only changed file is Timeline.html.
will do this evening. Thanks.
Actually, what I wrote is correct.
To transfer parameters to Timeline.html one has to use &. That’s why the Webview examples are given with &.
REST API, however, uses ? so, when Timeline.html queries the persistence it will append needed parameters with ?.
Did I understand that right that I need to use ? for the browser
but & for the webview
webview url ="/static/Visualization/Timeline.html?Item=KG_Gaeste_Fenster&serviceId=influxdb" height = 4
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 &.
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=…}
Using the REST API can you query persistence data for the group?
How do you persist the group?
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 ?
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.
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!!!
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.
Hi guys!
Sorry for my late reply…
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.
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"
});
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
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.