Graphs

Introduction

If you want to generate a simple graph of your data and include it in your web page, it is now possible.
You only need to include a small piece of HTML code with the chart characteristics. That's all!.

TOP

Required elements

You only need to include three elements in your HTML code to generate a chart with the data you want:

  • HTML DIV tag
  • Javascript library
  • Javascript var

HTML DIV tag

In the place where you want to display the chart, you must include an HTML DIV tag.

Example:

Javascript library

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

Example:

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.

Javascript var

Defines a variable named "carriots" and set it with the characteristics of your graph.

Parameters:

Attribute Description
apikey (mandatory) Text.
Your user APIKEY. We strongly recommend using your read-only Apikey.
mime (mandatory) Text: "image/svg+xml" or "image/png".
Char format.
Example: 'mime':'image/png'
type (mandatory) Text: "line", "bar", "horizontalbar", "dot" or "pie".
Graph type.
Example: 'type':'line'
axis[x] (mandatory) "at" for a stream at value or data key name.
Scale to represent the values in X axis.
Example: 'axis[x]':'at' or 'axis[x]':'temperature'
axis[y] (mandatory) Data key name.
Scale to represent the values in Y axis.
Example: 'axis[y]':'humidity'
data[n] (mandatory) Data key name (You can specify more than one).
Values to be represented
Example:
'data[0]':'temperature',
'data[1]':'humidity'
query[] (mandatory) Values to show (in array format).
You can build your query using the same parameters specified in "Data stream list".
Example:
'query[device]':'myDevice@myusername',
'query[sort]':'at',
'query[order]':'asc',
'query[max]':'10'
reverse (optional) Text: "true" or "false".
Default value: false.
Reverses the query result order .
Example: 'reverse':'true'
id (optional) Default value: carriots-graph.
Div id where display the chart.
Example: 'id':'carriots-temperature'
Aviso We strongly recommend using your read-only Apikey.

Example:

You can display several graphs at the same time.

Example:

Remember to add the appropriate html tags:

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.

TOP

Example

Suppose we have a device called "station@graphsCarriots" that sends streams to Carriots as shown below:

data stream example

{
"protocol":"v2",
"device":"station@graphsCarriots",
"at":"now",
"data":{"temperature":"25","humidity":"46"}
}

And we want to generate a simple graph to represent the last 10 measurements received.
To do this, we only have to enter the following code on your website and ready!

Example code:

The result will be something like this:

TOP