I use dygraphs to plot water tank levels measured by an ultrasonic probe and saved in CSV. I’ve noticed if the tank is full and the script records 5000L in the CSV (top of the default range) then the shading on the graph fails to draw. The html I’m using is pasted below. Viewing it with firefox 127.0.2 (64-bit) under linux. Looks the same under chrome on android, and firefox on android. I tried updating dygraphs and the problem persists.
<html>
<head>
<link rel="icon" type="image/png" href="watertank.png" />
<meta http-equiv="refresh" content="60"> <!-- Refresh every 1 minutes -->
<script type="text/javascript"
src="dygraph.js"></script>
<link rel="stylesheet" src="dygraph.css" />
</head>
<body>
<div>
<a href="http://www.fraz.link/watertankalltime.html">Water Tank Level</a> - by the minute
<div id="noroll"
style="position: absolute; left: 10px; right: 10px; height: 90%;"></div>
<div id="noroll"
style="width:600px; height:400px;"></div>
<script type="text/javascript">
g2 = new Dygraph(
document.getElementById("noroll"),
"watertank-eg.txt", // path to CSV file
{
errorBars: true,
color: 'navy',
valueRange: [0,5000],
ylabel: 'Litres',
fillGraph: true,
showRangeSelector: true,
rangeSelectorHeight: 30,
rangeSelectorPlotStrokeColor: 'navy',
rangeSelectorPlotFillColor: 'navy'
}
);
</script>
</body>
</html>
I’ve made a copy of the page and data here:
https://www.fraz.link/watertank-eg.html
Any ideas what is wrong?
Thanks!
Screenshot of how it looks
New contributor
Fraser is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.