First question: Is it posiible to use D3.js within HABpanel?
Currently I‘m using Grafana and embed graphs with the iFrame-widgets However, as I’m not happy with the current capabilities of Grafana, I’d like to try libraries like D3.js. My second desire is to feed D3 graphs with data coming from my SQL database which I use for OH persistence.
Any ideas how this combination could work are well welcomed.
HABPanel already includes D3.js (v3), so if you develop a directive (see HABPanel Development & Advanced Features: Start Here! - there are links to examples in Advanced: Injecting custom JavaScript code) you can directly use the d3 object.
2 Likes
Hey Yannick,
this is a big surprise. Many thanks for the answer. I will study the content during the next days and get back to you when needed.
Best regards,
Pirx
@Pirx: Any progress? Implementation of D3 charts would be great!
Hey tailor
I’m currently trying to understand D3.js and working through some examples. It will take time!
One small successful step was to feed a D3.js example with the data coming from my persistence DB which is PostgreSQL. I’m doing it using a PHP-script. Next step will be to use a D3.js example within a HABpanel template… Let’s say I’ve passed maybe 30% of the way. Challange, there is no one example out there for D3.js with HABpanel.
I was able to include D3.js code, so the first step ist done. However I get errors when calling d3.json.
I wrote a PHP script to get some data from a SQL database and return them in JSON format. When I call this script
d3.json("http://192.168.178.18:80/pg2.php?from_date=%272018-01-01%2000:00:00%27", function(error, data)
{...});
I get these errors:
[Error] Origin http://192.168.178.18:8080 is not allowed by Access-Control-Allow-Origin.
[Error] Failed to load resource: Origin http://192.168.178.18:8080 is not allowed by Access-Control-Allow-Origin. (pg2.php, line 0)
[Error] XMLHttpRequest cannot load http://192.168.178.18/pg2.php?from_date=%272018-01-01%2000:00:00%27 due to access control checks.
What I do not understand ist why the error message is mentioning Port 8080? I explicitly indicated the port 80 in my d3.json call to use my Apache HTTP-Server which is running PHP.
What I am doing wrong?
How to overcome the ‘control access checks’ for this call?
Is there any other way to query a SQL database from HABpanel?
Update:
I changed the default port of my Apache HTTP Server to 81. Now I can see in the error log the correct Port number in one line.
[Error] Origin http://192.168.178.18:8080 is not allowed by Access-Control-Allow-Origin.
[Error] Failed to load resource: Origin http://192.168.178.18:8080 is not allowed by Access-Control-Allow-Origin. (pg2.php, line 0)
[Error] XMLHttpRequest cannot load http://192.168.178.18:81/pg2.php?from_date=%272018-01-01%2000:00:00%27 due to access control checks.
It looks like a bug.
I solved the above problem. The solution was to put a special “header” at the beginning of the PHP-File:
<?php
header('Access-Control-Allow-Origin: *');
....
Now I got a first small success generating a simple D3.js bar chart within a template widget out of my persistence database of OH which is PostgreSQL. I will write a small tutorial in a separate thread as soon as I created a good example. … it will take some days.
2 Likes
Congratulations, I’m looking forward!
@tailor, look here: Creating impressive graphs using D3.js
Thanks a lot. I’ll try to replicate…