In order to embed the air quality index map visualization widget into the portal it is important:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="http://citisense.u-hopper.com/widgets/psp/jquery.aqi.js"></script>
<link rel="stylesheet" href="http://citisense.u-hopper.com/widgets/psp/psp.css">
After that we can define the container for embedding the visualization, e.g.
<div id="container_map" style="width: 300px; height: 200px;"></div>and use the following code to actually load the widget in the container
<script> $(function() { $("#container_map").aqi({ type: 'map' ,env: 'test' // or 'prod' for retrieving data from production or test environment (default is 'prod') , sensor_id: 'LEO-666BA0BF' // either sensor id can be given , participant_id: 'LEOTEST209' // or participant id can be given, or both , measurement: 'aqi' // or caqi , observedProperty: 'NO2' ,from: "2014-01-01T09:00:00" // arbitrary from, complete timestamp 2014-01-01T09:00:00.000 or only the day can be given 2014-01-01 ,to: "2015-02-02" // arbitrary to, complete timestamp 2014-01-01T09:00:00.000 or only the day can be given 2014-01-01 , aqis: [ // customizable path coloring wrt to AQI values { from: 1, to: 2, color: 'rgb(0,255,0)' }, { from: 3, to: 4, color: 'rgb(255,255,0)' }, { from: 5, to: 6, color: 'rgb(255,0,0)' } ] }); }); </script>where type attribute should have the value map, measurement should contain the value aqi, and observedProperty should specify the gas the index is computed for.
In order to embed the activity levels map visualization widget into the portal it is important:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="http://citisense.u-hopper.com/widgets/psp/jquery.met.js"></script>
<link rel="stylesheet" href="http://citisense.u-hopper.com/widgets/psp/psp.css">
After that we can define the container for embedding the visualization, e.g.
<div id="container_map" style="width: 300px; height: 200px;"></div>and use the following code to actually load the widget in the container
<script> $(function() { $("#container_map").met({ type: 'map' ,env: 'test' // or 'prod' for retrieving data from production or test environment (default is 'prod') , sensor_id: 'LEO-666BA0BF' // either sensor id can be given , participant_id: 'LEOTEST209' , observedProperty: 'ACTIVITY_INDEX' // arbitrary name of the observedProperty representing the activity level (default is ACTIVITY_INDEX) ,from: "2014-01-01T09:00:00" // arbitrary from, complete timestamp 2014-01-01T09:00:00.000 or only the day can be given 2014-01-01 ,to: "2015-02-02" // arbitrary to, complete timestamp 2014-01-01T09:00:00.000 or only the day can be given 2014-01-01 , mets: [ // customizable path colors wrt to MET value { from: 0, to: 1.5, color: 'rgb(40, 255, 40)' }, { from: 1.5, to: 3, color: 'rgb(255, 255, 0)' }, { from: 3, to: 6, color: 'rgb(255, 204, 203)' }, { from: 6, to: 10, color: 'rgb(255, 0, 0)' } ] }); }); </script>
Visualization will produce the map with routes coloured in accordance with 4 default values of activity levels:
In order to embed the Air quality index visualization widget into the portal it is important:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://citisense.u-hopper.com/widgets/psp/jquery.aqi.js"></script>
<link rel="stylesheet" href="http://citisense.u-hopper.com/widgets/psp/psp.css">
After that we can define the container for embedding the visualization, e.g.
<div id="container_graph" style="width: 300px; height: 200px;"></div>and use the following code to actually load the widget in the container
<script> $(function() { $("#container_graph").aqi({ title: 'Chart 1 title (optional)' , subtitle: 'Chart 1 subtitle (optional)' , type: 'graph' ,env: 'test' // or 'prod' for retrieving data from production or test environment (default is 'prod') ,sensor_id: 'LEO-666BA0BF' // either sensor id can be given , participant_id: 'LEOTEST209' // or participant id can be given, or both , measurement: 'aqi' , observedProperty: 'NO2' ,from: "2014-01-01T09:00:00" // arbitrary from, complete timestamp 2014-01-01T09:00:00.000 or only the day can be given 2014-01-01 ,to: "2015-02-02" // arbitrary to, complete timestamp 2014-01-01T09:00:00.000 or only the day can be given 2014-01-01 , aqis: [ // customizable bands wrt to AQIs { from: 1, to: 2, color: 'rgb(0,255,0)', label: { text: 'Light' } }, { from: 3, to: 4, color: 'rgb(255,255,0)', label: { text: 'Moderate' } }, { from: 5, to: 6, color: 'rgb(255,0,0)', label: { text: 'Strong' } } ], }); }); </script>
Visualization will produce the following graph:
In order to embed the activity levels graph visualization widget into the portal it is important:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://citisense.u-hopper.com/widgets/psp/jquery.met.js"></script>
<link rel="stylesheet" href="http://citisense.u-hopper.com/widgets/psp/psp.css">
After that we can define the container for embedding the visualization, e.g.
<div id="container_graph" style="width: 300px; height: 200px;"></div>and use the following code to actually load the widget in the container
<script> $(function() { $("#container_graph").met({ title: 'Chart 1 title (optional)' , subtitle: 'Chart 1 subtitle (optional)' , type: 'graph' ,env: 'test' // or 'prod' for retrieving data from production or test environment (default is 'prod') ,sensor_id: 'LEO-666BA0BF' // either sensor id can be given , participant_id: 'LEOTEST209' // or participant id can be given, or both ,from: "2014-01-01T09:00:00" // arbitrary from, complete timestamp 2014-01-01T09:00:00.000 or only the day can be given 2014-01-01 ,to: "2015-02-02" // arbitrary to, complete timestamp 2014-01-01T09:00:00.000 or only the day can be given 2014-01-01 , mets: [ // customizable bands of METs { from: 0, to: 1.5, color: 'rgb(40, 255, 40)', label: { text: 'Sedentary' } }, { from: 1.5, to: 3, color: 'rgb(255, 255, 0)', label: { text: 'Light' } }, { from: 3, to: 6, color: 'rgb(255, 204, 203)', label: { text: 'Moderate' } }, { }, { from: 6, to: 10, color: 'rgb(255, 0, 0)', label: { text: 'Vigorous' } } ], }); }); </script>
Visualization will produce the following graph: