ragland_d
Today we finished coding out the entire SVG map layout, along with creating each of the unique hover data windows.
We also successfully linked our own Mango data points with the amchart graph.
We started by manually drawing the last SVG buildings onto the map.
There are in total 9 buildings that we are displaying data about.
The next step is to link the amcharts JavaScript with the Mango api, so that we can display real data. I started by putting all of my data sources and data points into a HPA folder in the point hierarchy.
Next, I assign a unique XID to each of the data points.
Inside the JavaScript, I can create a pointconfiguration with the right matchatribute for the individual data point. I will need a unique XID for each sensor, but I will share the same datapointmatchconfiguration for all of the same points inside a single building's graph.
This matches the data provider id inside the unique amchart.
Here is the result: http://10.14.4.52:8080/private-dashboards/test.shtm
The amchart shows up with real data from our own telemetry system through the Mango API!
Also, the lack of a data point with the XID of "voltage" did not return an error, is simply did not create a bar for it.
This means that the same standard template can be used for every single chart, despite not all data points existing for every single building.
The only thing that needs to be changed per amchart is the div id and the data provider id.
Here is where we put our custom amcharts code in, so that it will be formatted right.
This means that we will have 19 amcharts, 19 datapointmatchconfigurations, and 76 unique xids.
I then tried moving my HTML and CSS from the Raspberry PI to the Mango server.
However, the image link and the CSS links did not work . I found that I had to change all the links in my .HTM file, so that my .CSS script was in the css folder, and my .JPG was in the images folder.
However, the image link and the CSS links did not work . I found that I had to change all the links in my .HTM file, so that my .CSS script was in the css folder, and my .JPG was in the images folder.
Here are the likes for the code:
Root of document is: .... /modules/dashboards/web/private/index.htm
Root of CSS is: ............. /modules/dashboards/web/private/css/style.css
Root of images folder is: /images/HPA.jpg
Link to same page: ....... /private-dashboards/index.htm
Our next step is overcomming the groupSelectConfiguration issue.
Once we fix this, we will no longer have to click on the point folder in the hierarchy in order to make it work.
Comments