There are several ways to visualize collected data.
Page: Data -> Live Measurements
The Live Measurements page is the first page a user sees after logging in to Mycodo. It will display the current measurements being acquired from Input and Function controllers. If there is nothing displayed on the Live page, ensure an Input or Function controller is both configured correctly and activated. Data will be automatically updated on the page from the measurement database.
Page: Data -> Asynchronous Graphs
A graphical data display that is useful for viewing data sets spanning relatively long periods of time (weeks/months/years), which could be very data- and processor-intensive to view as a Synchronous Graph. Select a time frame and data will be loaded from that time span, if it exists. The first view will be of the entire selected data set. For every view/zoom, 700 data points will be loaded. If there are more than 700 data points recorded for the time span selected, 700 points will be created from an averaging of the points in that time span. This enables much less data to be used to navigate a large data set. For instance, 4 months of data may be 10 megabytes if all of it were downloaded. However, when viewing a 4 month span, it's not possible to see every data point of that 10 megabytes, and aggregating of points is inevitable. With asynchronous loading of data, you only download what you see. So, instead of downloading 10 megabytes every graph load, only ~50kb will be downloaded until a new zoom level is selected, at which time only another ~50kb is downloaded.
!!! note Graphs require measurements, therefore at least one Input/Output/Function/etc. needs to be added and activated in order to display data.
Page: Data -> Dashboard
The dashboard can be used for both viewing data and manipulating the system, thanks to the numerous dashboard widgets available. Widgets are how data is presented to the user and how the user can control aspects of the system from the dashboard. These include graphs, gauges, indicators, and more. For a full list of supported Widgets, see Supported Widgets. Multiple dashboards can be created. Widgets can be moved and arranged on the dashboards by dragging and can be resized by pulling the bottom-left or bottom-right side of the widget.
There is a Custom Widget import system in Mycodo that allows user-created Widgets to be used in the Mycodo system. Custom Widgets can be uploaded on the [Gear Icon] -> Configure -> Custom Widgets page. After import, they will be available to use on the Setup -> Widget page.
If you develop a working Widget module, please consider creating a new GitHub issue or pull request, and it may be included in the built-in set.
Open any of the built-in modules located in the directory Mycodo/mycodo/widgets for examples of the proper formatting.
There are also example Custom Widgets in the directory Mycodo/mycodo/widgets/examples
Additionally, I have another github repository devoted to Custom Modules that are not included in the built-in set, at kizniche/Mycodo-custom.
A graphical data display that is useful for viewing data sets spanning relatively short periods of time (hours/days/weeks). Select a time frame to view data and continually updating data from new sensor measurements. Multiple graphs can be created on one page that enables a dashboard to be created of graphed sensor data. Each graph may have one or more data from inputs, outputs, or PIDs rendered onto it. To edit graph options, select the plus sign on the top-right of a graph.
| Setting | Description |
|---|---|
| x-Axis (minutes) | The duration to display on the x-axis of the graph. |
| Enable Auto Refresh | Automatically refresh the data on the graph Refresh Period. |
| Refresh (seconds) | The duration between acquisitions of new data to display on the graph. |
| Inputs/Outputs/PIDs | The Inputs, Outputs, and PIDs to display on the graph. |
| Enable X-Axis Reset | Reset the x-axis min/max every time new data comes in during the auto refresh. |
| Enable Title | Show a title of the graph name. |
| Enable Navbar | Show a slidable navigation bar at the bottom of the graph. |
| Enable Export | Enable a button on the top right of the graph to allow exporting of the currently-displayed data as PNG, JPEG, PDF, SVG, CSV, XLS. |
| Enable Range Selector | Show a set of navigation buttons at the top of the graph to quickly change the display duration. |
| Enable Custom Colors | Use custom colors for Input, Output, and PID lines. Select the colors with the buttons that appear below this checkbox. |
| Enable Manual Y-Axis Min/Max | Set the minimum and maximum y-axes of a particular graph. Set both the minimum and maximum to 0 to disable for a particular y-axis. |
| Enable Y-Axis Align Ticks | Align the ticks of several y-axes of the same graph. |
| Enable Y-Axis Start On Tick | Start all y-axes of a graph on the same tick. |
| Enable Y-Axis End On Tick | End all y-axes of a graph on the same tick. |
Gauges are visual objects that allow one to quickly see what the latest measurement is of an input. An example that you may be familiar with is a speedometer in a car.
| Setting | Description |
|---|---|
| Refresh (seconds) | The duration between acquisitions of new data to display on the graph. |
| Max Age (seconds) | The maximum allowable age of the measurement. If the age is greater than this, the gauge will turn off, indicating there is an issue. |
| Gauge Min | The lowest value of the gauge. |
| Gauge Max | The highest value of the gauge. |
| Stops | The number of color ranges on the gauge. |
| Show Timestamp | Show the timestamp of the current gauge measurement. |
Cameras may be added to keep a continuous view on areas.
| Setting | Description |
|---|---|
| Refresh (seconds) | The duration between acquisitions of new data to display on the graph. |
| Max Age (seconds) | The maximum allowed age of the image timestamp before a "No Recent Image" message is returned. |
| Acquire Image (and save new file) | Acquire a new images and save the previous image. |
| Acquire Image (and erase last file) | Acquire a new image but erase the previous image. |
| Display Live Video Stream | Automatically start a video stream and display it. |
| Display Latest Timelapse Image | Display the latest timelapse image that exists. |
| Add Timestamp | Append a timestamp to the image. |
Shows a green or red button depending if the measurement value is 0 or not 0.
| Setting | Description |
|---|---|
| Refresh (seconds) | The duration between acquisitions of new data to display on the graph. |
| Max Age (seconds) | The maximum allowable age of the measurement. If the age is greater than this, the gauge will turn off, indicating there is an issue. |
| Timestamp Font (em) | The font size of the timestamp value in em. |
| Invert | Invert/reverse the colors. |
| Measurement | The device to display information about. |
| Setting | Description |
|---|---|
| Refresh (seconds) | The duration between acquisitions of new data to display on the graph. |
| Max Age (seconds) | The maximum allowable age of the measurement. If the age is greater than this, the gauge will turn off, indicating there is an issue. |
| Value Font (em) | The font size of the measurement value in em. |
| Timestamp Font (em) | The font size of the timestamp value in em. |
| Decimal Places | The number of digits to display to the right of the decimal. |
| Measurement | The device to display information about. |
| Setting | Description |
|---|---|
| Refresh (seconds) | The duration between acquisitions of new data to display on the graph. |
| Max Age (seconds) | The maximum allowable age of the measurement. If the age is greater than this, the gauge will turn off, indicating there is an issue. |
| Value Font (em) | The font size of the output value in em. |
| Timestamp Font (em) | The font size of the timestamp value in em. |
| Decimal Places | The number of digits to display to the right of the decimal. |
| Feature Output Controls | Display buttons to turn On and Off the relay from the dashboard element. |
| Output | The output to display information about. |
| Setting | Description |
|---|---|
| Refresh (seconds) | The duration between acquisitions of new data to display on the graph. |
| Max Age (seconds) | The maximum allowable age of the measurement. If the age is greater than this, the gauge will turn off, indicating there is an issue. |
| Value Font (em) | The font size of the output value in em. |
| Timestamp Font (em) | The font size of the timestamp value in em. |
| Decimal Places | The number of digits to display to the right of the decimal. |
| Feature Output Controls | Display buttons to turn On and Off the relay from the dashboard element. |
| Output | The output to display information about and allow setting the PWM with a slider. |
| Setting | Description |
|---|---|
| Refresh (seconds) | The duration between acquisitions of new data to display on the graph. |
| Max Age (seconds) | The maximum allowable age of the measurement. If the age is greater than this, the gauge will turn off, indicating there is an issue. |
| Value Font (em) | The font size of the measurement value in em. |
| Timestamp Font (em) | The font size of the timestamp value in em. |
| Decimal Places | The number of digits to display to the right of the decimal. |
| Show PID Information | Show extra PID information on the dashboard element. |
| Show Set Setpoint | Allow setting the PID setpoint on the dashboard element. |
| PID | The PID to display information about. |
| Setting | Description |
|---|---|
| Refresh (seconds) | The duration between acquisitions of new data to display on the graph. |
| Value Font (em) | The font size of the text in em. |
| Python Code (Loop) | The Python code to execute initially when the controller starts and every Refresh (seconds). |
| Python Code (Refresh) | The Python code to execute only when a widget on a dashboard is refreshed, every Refresh (seconds). Note: There may be multiple dashboards calling this function if multiple browser sessions exist. |