InfluxDB+Grafana persistence and graphing

I’ve just got this up and running and have encountered the same issue as you @vespaman

I don’t have a reverse proxy set up, but am running openHABian fwiw. I have triple checked my login settings match those set out in the guide, but still no image actually loads.

As a workaround (a better option @ThomDietrich?) i’ve set up a few html pages with iframes to the graphs. And not only does it work, it loads pretty quickly on my Pi3 and has some of the interactive elemnts of the original grafana graphs. Just put the html files and charts.css in the conf/html folder and it’ll all work fine. He say’s while crossing his fingers…

chartsDay.html (Also have chartsHour.html and chartsWeek.html)

<!DOCTYPE html>
<html>
<head>
        <meta http-equiv="Content-type" CONTENT="text/html; charset=utf-8">
        <link rel="stylesheet" type="text/css" href="charts.css" />
</head>

    <div class="container">
        <iframe src="http://192.168.1.20:3000/dashboard-solo/db/environment?from=now-1h&to=now&panelId=1"></iframe>
    </div>
  </br>
    <div class="container">
        <iframe src="http://192.168.1.20:3000/dashboard-solo/db/environment?from=now-1h&to=now&panelId=2"></iframe>
    </div>
</html>

charts.css

.container iframe {
  width: 100%;
  height: 400px;
}

.container {
  width: 98%;
  margin: 0 auto;
}

h2 {
  text-align: center;
}

Sitemap

Text item=Charts icon="calendar"{
    Switch item=weatherChartPeriod label="Chart Period" mappings=[0="Hour", 1="Day", 2="Week"]
    Webview url="/static/chartsHour.html" height=33 visibility=[weatherChartPeriod=="0"]
    Webview url="/static/chartsDay.html" height=33 visibility=[weatherChartPeriod=="1"]
    Webview url="/static/chartsWeek.html" height=33 visibility=[weatherChartPeriod=="2"]
} 
 //height varies based on number of graphs and dimensions of them. 

The height of the iframe is a bit weird and if you don’t want scroll bars then add a scrolling="no" attribute to the iframe. In Firefox the bars disappear when not being used anyway.

A solution for using this approach with the Android app is outlined by @Dries below.

6 Likes