Graphs
This feature has been deprecated the 1st of January 2018
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!.
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:
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' |
| tz (optional) |
Default value: UTC. Timezone to show the timestamps. Example: 'tz':'Europe/Amsterdam' |
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:
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.
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: