An application that is part of the SensorNet project. It retrieves sensor data from the SensorNet server and creates graphs using Apex Charts.
I've been running SensorNet in my home for about 3 years and collecting all the sensor data. For charting the data I had been exporting it from the database and importing the data into a spreadsheet. And then graphing it there. Not ideal, but it did what I needed.
Every so often I would search for a JavaScript charting plugin that I could use successfully. I won't bore you with the details of every plugin I investigated. But I did write testing code for each as part of their evaluation.
This client requires the following:
- A running SensorNet Server. It is a Node.js application that collects sensor data, stores it, and forwards it to connected clients.
- Which requires SensorNet Devices to provide data
- Enough data to chart.
- Shared resources (js, css) with the SensorNet Client application. Both utilize Socket.io for communication with the SensorNet Server.
A live demonstration can be seen at my website. And SensorNet Live can also be viewed.
Select one or more sensors and then choose a date in the past. Click the "Get the Data" button and the data will be displayed.
under contstruction
under contstruction
under contstruction
One or more sensors can be selected. Each is color-coded and when its graph is drawn the temperature line color will match.
When a single sensor selected the humidity line will use an alternate color.
Each sensors is associated with its own color to make it easier to distinguish them.
When a date is selected from the picker and epoch value is calculated that represents 00:00 on the day chosen. The server will use that time stamp to search for sensor data.
After the data is charted you can:
- Zoom in or out by dragging through the chart along the X-axis. or use the buttons at the top and right of the chart.
- Pan the chart by clicking a button at the top and right of the chart.
- Export SVG, PNG, or a CSV file containing chart data.
- Enable or disable specific lines by clicking on the corresponding colored dot and legend at the bottom of the chart.
Details can be found in the Apex Charts documentation and demonstrations.
under contstruction
under contstruction
under contstruction
I chose the Zebra Datepicker because of the features and a very good(i.e. working) demo page. I also like that it has 3 themes to choose from. I also browsed the source and it's commented very well and is easy to follow.
I decided that the Bootstrap theme would work the best because I was already using Bootstrap here and on SensorNet Live.