Building a Web-based Data Visualization Block

This tutorial explains the steps involved in building a Web-based Data Visualization Block to visualize data from a Temperature & Fire Monitoring & Alerting Tinker Block Application.

Pre-requisites:

Before building Web-based Data Visualization Block, please make sure to build:

Temperature Block, Fire Block, Processor Block and Power Block
IoT-based Server Block
Device Integration Block

1. Build a Data Visualization Block to display temperature data on a web page

1. Copy the below HTML, CSS and Java Script code into a Notepad.

2. Edit the code as follows:

Replace 99999 with the Channel ID of your ThingSpeak channel.
Replace XXXXXXXXXXXXXXXX with the Read API key of your ThingSpeak channel.

View HTML, CSS and Java Script code here...

<html>

<head>

<!--

NOTE: This plugin will not be visible on public views of a channel.

If you intend to make your channel public, consider using the

MATLAB Visualization App to create your visualizations.

-->

body { background-color: white; }

</style>

<body>

<canvas id="canvas-id"

data-type="linear-gauge"

data-width="120"

data-height="240"

data-units="°C"

data-min-value="0"

data-start-angle="90"

data-ticks-angle="180"

data-value-box="false"

data-max-value="100"

data-major-ticks="0,10,20,30,40,50,60,70,80,90,100"

data-minor-ticks="2"

data-stroke-ticks="true"

data-highlights='[ {"from": 0, "to": 100, "color": "rgba(200, 50, 50, .75)"} ]'

data-color-plate="#fff"

data-border-shadow-width="0"

data-borders="false"

data-needle-type="arrow"

data-needle-width="2"

data-needle-circle-size="7"

data-needle-circle-outer="true"

data-needle-circle-inner="false"

data-animation-duration="1500"

data-animation-rule="linear"

data-bar-width="10"

data-value="35"

></canvas>

</center>

// set your channel id here

var channel_id = 999999;

// set your channel's read api key here if necessary

var api_key = 'XXXXXXXXXXXXXXXX';

var gauge;

// display the data

function displayData(point) {

gauge.value = point;

gauge.draw();

}

// load the data

function loadData() {

// variable for the data point

var p;

// get the data from thingspeak

$.getJSON('https://api.thingspeak.com/channels/' + channel_id + '/feed/last.json?api_key=' + api_key, function(data) {

// get the data point

p = data.field1;

// if there is a data point display it

displayData(p);

});

}

function init() {

gauge = new LinearGauge({

renderTo: 'canvas-id',

width: 120,

height: 240,

units: "°C",

minValue: 0,

startAngle: 90,

ticksAngle: 180,

valueBox: false,

maxValue: 100,

majorTicks: [

"0",

"10",

"20",

"30",

"40",

"50",

"60",

"70",

"80",

"90",

"100"

],

minorTicks: 2,

strokeTicks: true,

highlights: [

{

"from": -100,

"to": 220,

"color": "rgba(200, 50, 50, .75)"

}

],

colorPlate: "#fff",

borderShadowWidth: 0,

borders: false,

needleType: "arrow",

needleWidth: 2,

needleCircleSize: 7,

needleCircleOuter: true,

needleCircleInner: false,

animationDuration: 1500,

animationRule: "linear",

barWidth: 10,

value: 35

});

loadData();

// load new data every 15 seconds

setInterval('loadData()', 15000);

}

init();

</script>

</body>

</head>

</html>

3. Open Google Sites web-site builder tool here: https://sites.google.com

4. Click "+" to create a new website.

5. In the home page, click the menus: Insert --> Embed --> Embed Code.

6. Paste the code you copied earlier into the Embed Code window and click "Save".

7. You will then see a thermometer visual that shows the live temperature reading from a temperature sensor (similar to the one on the left side).

2. Build a Data Visualization Block to display humidity data on a web page

1. Copy the below HTML, CSS and Java Script code into a Notepad.

2. Edit the code as follows:

Replace 99999 with the Channel ID of your ThingSpeak channel.
Replace XXXXXXXXXXXXXXXX with the Read API key of your ThingSpeak channel.

View HTML, CSS and Java Script code here...

<html>

<head>

<!--

NOTE: This plugin will not be visible on public views of a channel.

If you intend to make your channel public, consider using the

MATLAB Visualization App to create your visualizations.

-->

body { background-color: white; }

</style>

<body>

<canvas id="canvas-id"

data-type="radial-gauge"

data-width="240"

data-height="240"

data-units="%"

data-title="Humidity"

data-min-value="0"

data-max-value="100"

data-major-ticks="[0,10,20,30,40,50,60,70,80,90,100]"

data-minor-ticks="2"

data-stroke-ticks="true"

data-highlights='[ {"from": 0, "to": 50, "color": "rgba(0,0, 255, .3)"},

{"from": 50, "to": 100, "color": "rgba(255, 0, 0, .3)"} ]'

data-ticks-angle="225"

data-start-angle="67.5"

data-color-major-ticks="#ddd"

data-color-minor-ticks="#ddd"

data-color-title="#eee"

data-color-units="#ccc"

data-color-numbers="#eee"

data-color-plate="#222"

data-border-shadow-width="0"

data-borders="true"

data-needle-type="arrow"

data-needle-width="2"

data-needle-circle-size="7"

data-needle-circle-outer="true"

data-needle-circle-inner="false"

data-animation-duration="1500"

data-animation-rule="linear"

data-color-border-outer="#333"

data-color-border-outer-end="#111"

data-color-border-middle="#222"

data-color-border-middle-end="#111"

data-color-border-inner="#111"

data-color-border-inner-end="#333"

data-color-needle-shadow-down="#333"

data-color-needle-circle-outer="#333"

data-color-needle-circle-outer-end="#111"

data-color-needle-circle-inner="#111"

data-color-needle-circle-inner-end="#222"

data-value-box-border-radius="0"

data-color-value-box-rect="#222"

data-color-value-box-rect-end="#333"

></canvas>

</center>

// set your channel id here

var channel_id = 99999;

// set your channel's read api key here if necessary

var api_key = 'XXXXXXXXXXXXXXXX';

var gauge;

// display the data

function displayData(point) {

gauge.value = point;

gauge.draw();

}

// load the data

function loadData() {

// variable for the data point

var p;

// get the data from thingspeak

$.getJSON('https://api.thingspeak.com/channels/' + channel_id + '/feed/last.json?api_key=' + api_key, function(data) {

// get the data point

p = data.field2;

// if there is a data point display it

displayData(p);

});

}

function init() {

gauge = new RadialGauge({

renderTo: 'canvas-id',

width: 240,

height: 240,

units: "%",

title: "Humidity",

minValue: 0,

maxValue: 100,

majorTicks: [

0,

10,

20,

30,

40,

50,

60,

70,

80,

90,

100

],

minorTicks: 2,

strokeTicks: true,

highlights: [

{

"from": 0,

"to": 50,

"color": "rgba(0,0, 255, .3)"

},

{

"from": 50,

"to": 100,

"color": "rgba(255, 0, 0, .3)"

}

],

ticksAngle: 225,

startAngle: 67.5,

colorMajorTicks: "#ddd",

colorMinorTicks: "#ddd",

colorTitle: "#eee",

colorUnits: "#ccc",

colorNumbers: "#eee",

colorPlate: "#222",

borderShadowWidth: 0,

borders: true,

needleType: "arrow",

needleWidth: 2,

needleCircleSize: 7,

needleCircleOuter: true,

needleCircleInner: false,

animationDuration: 1500,

animationRule: "linear",

colorBorderOuter: "#333",

colorBorderOuterEnd: "#111",

colorBorderMiddle: "#222",

colorBorderMiddleEnd: "#111",

colorBorderInner: "#111",

colorBorderInnerEnd: "#333",

colorNeedleShadowDown: "#333",

colorNeedleCircleOuter: "#333",

colorNeedleCircleOuterEnd: "#111",

colorNeedleCircleInner: "#111",

colorNeedleCircleInnerEnd: "#222",

valueBoxBorderRadius: 0,

colorValueBoxRect: "#222",

colorValueBoxRectEnd: "#333"

});

loadData();

// load new data every 15 seconds

setInterval('loadData()', 15000);

}

init();

</script>

</body>

</head>

</html>

3. In your Google Sites website's home-page, click the menus Insert --> Embed --> Embed Code.

4. In the home page, click the menus: Insert --> Embed --> Embed Code.

5. Paste the code you copied earlier into the Embed Code window and click "Save".

6. You will then see a gauge visual that shows the live humidity reading from a humidity sensor (similar to the one on the left side).

3. Create a Web Dashboard to monitor temperature & humidity data

Place the individual visual displays and indicators side-by-side or in a grid fashion to create your own web dashboard to remotely monitor and control various Sensor and Actuator Tinker Blocks.

4. Visualize temperature and humidity data by scanning a QR code on the Temperature Block

Create a QR code and link it with your website that displays the Web dashboard.
Print the QR Code on physical paper or sticker and stick it on a the Temperature Tinker Block:

3. Ask your friends to scan the QR Code on the Temperature Block using any QR code raeding App on a Smartphone or Computer. As soon as they scan the QR Code, the temperature and humidity reading will be displayed within the Smartphone's web-browser as shown below: