How to control your water consumption (Part 2/2).

 

0. Introduction

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

Difficulty:

Ingredients:

  • 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

TOP

1. Checking Data collected in Carriots (water consumption)

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
    {
    "protocol":"v2",
    "device":"flowmeter@gardenCarriots",
    "at":1369317197,
    "data":{"consumption":1423}
    }

TOP

2. Generate graph to see the evolution

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
  • Javascript library
  • Javascript var

HTML DIV tag

In the place where we want to display the chart, we must include an HTML DIV tag with ID:"carriots-graph".

 

Javascript library

In order to represent the graph, it's necessary to include the Carriots javascript library: "graphs.js".

 

Javascript var

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
notice  If you want to use the Best Practices for Speeding Up Your Website, put this script at the bottom, just before the closing body tag.

 

Full example

With all this, the complete example would be as follows.

Example code:

And the result will be something like this:

  • Webpage

TOP

3. From here on: Enhancing the project

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.

Enjoy!

TOP