- 0. Introduction
- 1. Checking Data collected in Carriots (water consumption)
- 2. Generate graph to see the evolution
- 3. From here on: Enhancing the project
If you remember, in the first part of this tutorial we built a flowmeter that sent water consumption to Carriots platform.
In the second part of this tutorial, the target is to create a nice graph to analyze the information and control water consumption.
In this project you will learn how to:
- Generate graphs using Carriots library
- How to use the read only Apikey
- 1 x Carriots user account
- 1 x Complete the tutorial Part 1/2
- 1 x Personal Webpage
- 5 x minutes
Music to listen: Otis Redding-Sitting on the dock of the bay
Remember that this prototype is programmed to send a data stream to Carriots when you close the garden watering.
Check your control panel and see the streams format to decide your graph. Go to “Data management” → “Data streams” and you will see your data.
- Stream list
Data stream example
In our case, we want to generate a graph to see the consumption evolution over time and display this graphic on our personal webpage.
We need to include three elements in our HTML code to generate this graph:
- HTML DIV tag
HTML DIV tag
In the place where we want to display the chart, we must include an HTML DIV tag with ID:"carriots-graph".
We define the variable "carriots" with the graph characteristics we want to create.
- X-axis: time evolution, we will use the "at"
- Y-axis: water consumption
- Data: water consumption
- Number of data: latest 20
- Chart Type: bar
With all this, the complete example would be as follows.
And the result will be something like this:
Improve your garden watering is simple.
Why not use different sensors for temperature and soil moisture to send to Carriots their values?. You could set a "listener" in Carriots and open an electrovalve based on these values.
And you'll have a smart-automatic garden watering through Carriots.