jdevoo/_ecoviz.html

## _ecoviz.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<title>Data</title>
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://vooght.de/raphael-min.js"></script>
<script src="http://vooght.de/morris.min.js"></script>
<script type="text/javascript">
$(function() {
  var lat=46.5097, lon=6.6617;
  var zoom=10;
  var epsg4326 = new OpenLayers.Projection("EPSG:4326");
  var epsg900913 = new OpenLayers.Projection("EPSG:900913");
  var graph1, graph2;

  var getParameter = function(name) {
    var query = location.search.substring(1);
    var res;
    $.each(query.split('&'), function(i, pair) {
      var tmp = pair.split('=');
      if (tmp[0] == name) {
        res = decodeURIComponent(tmp[1]);
        return false;
      }
    });
    return res;
  };
  var table = getParameter("table");

  var dataLoaded = function(evt) {
    if (graph1 == null) {
      graph1 = new Morris.Line({
        element: "graph1",
        data: jQuery.map(layerSensor.features, function(f) {
          return({
            "ts": f.data["ts"],
            "NOx": f.data["NOx"],
            "COx": f.data["COx"]
          })
        }),
        xkey: "ts",
        ykeys: ["COx", "NOx"],
        labels: ["COx", "NOx"],
        lineColors: ["#f00", "#0f0"],
        hideHover: true,
        pointSize: 0,
        lineWidth: 2,
        smooth: false,
        postUnits: "V",
        gridLineColor: "#000",
        gridTextColor: "#000"
      });
      graph1.el.mousemove(function(evt) {
        var hoverIndex, i, ref;
        var x = evt.pageX - graph1.el.offset().left;
        featureSelect.unselectAll();
        for (hoverIndex = i = ref = graph1.hoverMargins.length; ref <= 0 ? i <= 0 : i >= 0; hoverIndex = ref <= 0 ? ++i : --i) {
          if (hoverIndex === 0 || graph1.hoverMargins[hoverIndex - 1] > x) {
            featureSelect.select(layerSensor.features[layerSensor.features.length - 1 - hoverIndex]);
            break;
          }
        }
      });
      graph1.el.mouseout(function(evt) {
        featureSelect.unselectAll();
      });
    } else {
      graph1.setData(jQuery.map(evt.features, function(f) {
        return({
          "ts": f.data["ts"],
          "NOx": f.data["NOx"],
          "COx": f.data["COx"]
        })
      }));
    }
    if (graph2 == null) {
      graph2 = new Morris.Line({
        element: "graph2",
        data: jQuery.map(layerSensor.features, function(f) {
          return({
            "ts": f.data["ts"],
            "Noise": f.data["Noise"]
          })
        }),
        xkey: "ts",
        ykeys: ["Noise"],
        labels: ["Noise"],
        lineColors: ["#00f"],
        hideHover: true,
        pointSize: 0,
        lineWidth: 2,
        smooth: false,
        postUnits: "dB",
        gridLineColor: "#000",
        gridTextColor: "#000"
      });
      graph2.el.mousemove(function(evt) {
        var hoverIndex, i, ref;
        var x = evt.pageX - graph1.el.offset().left;
        featureSelect.unselectAll();
        for (hoverIndex = i = ref = graph1.hoverMargins.length; ref <= 0 ? i <= 0 : i >= 0; hoverIndex = ref <= 0 ? ++i : --i) {
          if (hoverIndex === 0 || graph1.hoverMargins[hoverIndex - 1] > x) {
            featureSelect.select(layerSensor.features[layerSensor.features.length - 1 - hoverIndex]);
            break;
          }
        }
      });
      graph2.el.mouseout(function(evt) {
        featureSelect.unselectAll();
      });
    } else {
      graph2.setData(jQuery.map(evt.features, function(f) {
        return({
          "ts": f.data["ts"],
          "Noise": f.data["Noise"]
        })
      }));
    }
    this.map.zoomToExtent(this.getDataExtent());
  };

  if (table.length != 0) {
    var map = new OpenLayers.Map("map", {
      controls: [
        new OpenLayers.Control.Navigation({
          mouseWheelOptions: {keyMask: OpenLayers.Handler.MOD_SHIFT}
        }),
        new OpenLayers.Control.PanZoomBar(),
        new OpenLayers.Control.ScaleLine(),
        new OpenLayers.Control.MousePosition(),
        new OpenLayers.Control.KeyboardDefaults({
          autoActivate: false
        })
      ],
      maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
      numZoomLevels: 18,
      maxResolution: 156543.0339,
      units: "m",
      projection: epsg900913,
      displayProjection: epsg4326
    });

    var layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
    var layerSensor = new OpenLayers.Layer.Vector("sensor", {
      projection: epsg4326,
      strategies: [new OpenLayers.Strategy.Fixed()],
      drawn: false,
      protocol: new OpenLayers.Protocol.Script({
        url: "https://www.googleapis.com/fusiontables/v1/query",
	    params: {
          sql: "select * from " + table,
          key: "<YOUR KEY HERE>"
        },
        format: new OpenLayers.Format.GeoJSON({
          ignoreExtraDims: true,
          read: function(json) {
            var row, feature, features = [];
	        var cols = json.columns;
            for (var i = 0; i < json.rows.length; i++) {
              row = json.rows[i];
              feature = new OpenLayers.Feature.Vector();
              for (var j = 0; j < cols.length; j++) {
                feature.data[cols[j]] = row[j];
              }
              feature.geometry = new OpenLayers.Geometry.Point(+(feature.data["Lon"]), +(feature.data["Lat"]));
              delete feature.data["Lon"];
              delete feature.data["Lat"];
              features.push(feature);
            }
            return features;
          }
        }),
        callbackKey: "callback"
      }),
      eventListeners: {
        "featuresadded": dataLoaded
      },
      styleMap: new OpenLayers.StyleMap({
        "temporary": new OpenLayers.Style({
          strokeColor: "#00008b",
          strokeOpacity: 1.0,
          strokeWidth: 5,
          fillColor: "#00008b",
          fillOpacity: 1.0,
          cursor: "pointer"
        })
      })
    });
    map.addLayers([layerMapnik, layerSensor]);
    map.setCenter(new OpenLayers.LonLat(lon, lat).transform(epsg4326, map.getProjectionObject()), zoom);

    var featureSelect = new OpenLayers.Control.SelectFeature(layerSensor, {
      hover: true,
      highlightOnly: true,
      renderIntent: "temporary",
      eventListeners: {
        featurehighlighted: function(e) {
          graph1.updateHilight(graph1.transX(graph1.xvals[graph1.columnLabels.indexOf(e.feature.data.ts)-1]));
          graph2.updateHilight(graph2.transX(graph2.xvals[graph2.columnLabels.indexOf(e.feature.data.ts)-1]));
        },
        featureunhighlighted: function(e) {
          graph1.hilight(null);
          graph2.hilight(null);
        }
      }
    });
    map.addControl(featureSelect);
    featureSelect.activate();

    var changeTable = function(e) {
      if (/^([a-zA-Z0-9-_]){40,41}$/.test(e.data)) {
        layerSensor.refresh({
          params: {sql: "select * from " + e.data}
        });
      }
    }

    if (window.addEventListener) {
      window.addEventListener('message', changeTable, false);
    } else {
      window.attachEvent('onmessage', changeTable, false);
    }
  }
});
</script>
<style type="text/css">
body {
  margin: 0px;
  padding: 0px;
  background-color: #fff;
  font-family: "Lucida Grande", "Tahoma", "Helvetica", "Arial", sans-serif;
  font-size: 80%;
}
#map {
  width: 650px;
  height: 400px;
}
#graph1, #graph2 {
  width: 650px;
  height: 200px;
}
#license {
  color: #888;
  font-size: 80%;
}
</style>
</head>
<body>
<div id="map"></div>
<div id="graph1"></div>
<div id="graph2"></div>
<div id="license">
<a rel="license" href="http://creativecommons.org/licenses/by/3.0/"><img alt="Creative Commons Licence" style="border-width:0" src="http://i.creativecommons.org/l/by/3.0/80x15.png" /></a><br />This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0 Unported License</a>.
</div>
</body>
</html>
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
	<title>Data</title>
	<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
	<script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
	<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
	<script src="http://vooght.de/raphael-min.js"></script>
	<script src="http://vooght.de/morris.min.js"></script>
	<script type="text/javascript">
	$(function() {
	var lat=46.5097, lon=6.6617;
	var zoom=10;
	var epsg4326 = new OpenLayers.Projection("EPSG:4326");
	var epsg900913 = new OpenLayers.Projection("EPSG:900913");
	var graph1, graph2;

	var getParameter = function(name) {
	var query = location.search.substring(1);
	var res;
	$.each(query.split('&'), function(i, pair) {
	var tmp = pair.split('=');
	if (tmp[0] == name) {
	res = decodeURIComponent(tmp[1]);
	return false;
	}
	});
	return res;
	};
	var table = getParameter("table");

	var dataLoaded = function(evt) {
	if (graph1 == null) {
	graph1 = new Morris.Line({
	element: "graph1",
	data: jQuery.map(layerSensor.features, function(f) {
	return({
	"ts": f.data["ts"],
	"NOx": f.data["NOx"],
	"COx": f.data["COx"]
	})
	}),
	xkey: "ts",
	ykeys: ["COx", "NOx"],
	labels: ["COx", "NOx"],
	lineColors: ["#f00", "#0f0"],
	hideHover: true,
	pointSize: 0,
	lineWidth: 2,
	smooth: false,
	postUnits: "V",
	gridLineColor: "#000",
	gridTextColor: "#000"
	});
	graph1.el.mousemove(function(evt) {
	var hoverIndex, i, ref;
	var x = evt.pageX - graph1.el.offset().left;
	featureSelect.unselectAll();
	for (hoverIndex = i = ref = graph1.hoverMargins.length; ref <= 0 ? i <= 0 : i >= 0; hoverIndex = ref <= 0 ? ++i : --i) {
	if (hoverIndex === 0 \|\| graph1.hoverMargins[hoverIndex - 1] > x) {
	featureSelect.select(layerSensor.features[layerSensor.features.length - 1 - hoverIndex]);
	break;
	}
	}
	});
	graph1.el.mouseout(function(evt) {
	featureSelect.unselectAll();
	});
	} else {
	graph1.setData(jQuery.map(evt.features, function(f) {
	return({
	"ts": f.data["ts"],
	"NOx": f.data["NOx"],
	"COx": f.data["COx"]
	})
	}));
	}
	if (graph2 == null) {
	graph2 = new Morris.Line({
	element: "graph2",
	data: jQuery.map(layerSensor.features, function(f) {
	return({
	"ts": f.data["ts"],
	"Noise": f.data["Noise"]
	})
	}),
	xkey: "ts",
	ykeys: ["Noise"],
	labels: ["Noise"],
	lineColors: ["#00f"],
	hideHover: true,
	pointSize: 0,
	lineWidth: 2,
	smooth: false,
	postUnits: "dB",
	gridLineColor: "#000",
	gridTextColor: "#000"
	});
	graph2.el.mousemove(function(evt) {
	var hoverIndex, i, ref;
	var x = evt.pageX - graph1.el.offset().left;
	featureSelect.unselectAll();
	for (hoverIndex = i = ref = graph1.hoverMargins.length; ref <= 0 ? i <= 0 : i >= 0; hoverIndex = ref <= 0 ? ++i : --i) {
	if (hoverIndex === 0 \|\| graph1.hoverMargins[hoverIndex - 1] > x) {
	featureSelect.select(layerSensor.features[layerSensor.features.length - 1 - hoverIndex]);
	break;
	}
	}
	});
	graph2.el.mouseout(function(evt) {
	featureSelect.unselectAll();
	});
	} else {
	graph2.setData(jQuery.map(evt.features, function(f) {
	return({
	"ts": f.data["ts"],
	"Noise": f.data["Noise"]
	})
	}));
	}
	this.map.zoomToExtent(this.getDataExtent());
	};

	if (table.length != 0) {
	var map = new OpenLayers.Map("map", {
	controls: [
	new OpenLayers.Control.Navigation({
	mouseWheelOptions: {keyMask: OpenLayers.Handler.MOD_SHIFT}
	}),
	new OpenLayers.Control.PanZoomBar(),
	new OpenLayers.Control.ScaleLine(),
	new OpenLayers.Control.MousePosition(),
	new OpenLayers.Control.KeyboardDefaults({
	autoActivate: false
	})
	],
	maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
	numZoomLevels: 18,
	maxResolution: 156543.0339,
	units: "m",
	projection: epsg900913,
	displayProjection: epsg4326
	});

	var layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
	var layerSensor = new OpenLayers.Layer.Vector("sensor", {
	projection: epsg4326,
	strategies: [new OpenLayers.Strategy.Fixed()],
	drawn: false,
	protocol: new OpenLayers.Protocol.Script({
	url: "https://www.googleapis.com/fusiontables/v1/query",
	params: {
	sql: "select * from " + table,
	key: "<YOUR KEY HERE>"
	},
	format: new OpenLayers.Format.GeoJSON({
	ignoreExtraDims: true,
	read: function(json) {
	var row, feature, features = [];
	var cols = json.columns;
	for (var i = 0; i < json.rows.length; i++) {
	row = json.rows[i];
	feature = new OpenLayers.Feature.Vector();
	for (var j = 0; j < cols.length; j++) {
	feature.data[cols[j]] = row[j];
	}
	feature.geometry = new OpenLayers.Geometry.Point(+(feature.data["Lon"]), +(feature.data["Lat"]));
	delete feature.data["Lon"];
	delete feature.data["Lat"];
	features.push(feature);
	}
	return features;
	}
	}),
	callbackKey: "callback"
	}),
	eventListeners: {
	"featuresadded": dataLoaded
	},
	styleMap: new OpenLayers.StyleMap({
	"temporary": new OpenLayers.Style({
	strokeColor: "#00008b",
	strokeOpacity: 1.0,
	strokeWidth: 5,
	fillColor: "#00008b",
	fillOpacity: 1.0,
	cursor: "pointer"
	})
	})
	});
	map.addLayers([layerMapnik, layerSensor]);
	map.setCenter(new OpenLayers.LonLat(lon, lat).transform(epsg4326, map.getProjectionObject()), zoom);

	var featureSelect = new OpenLayers.Control.SelectFeature(layerSensor, {
	hover: true,
	highlightOnly: true,
	renderIntent: "temporary",
	eventListeners: {
	featurehighlighted: function(e) {
	graph1.updateHilight(graph1.transX(graph1.xvals[graph1.columnLabels.indexOf(e.feature.data.ts)-1]));
	graph2.updateHilight(graph2.transX(graph2.xvals[graph2.columnLabels.indexOf(e.feature.data.ts)-1]));
	},
	featureunhighlighted: function(e) {
	graph1.hilight(null);
	graph2.hilight(null);
	}
	}
	});
	map.addControl(featureSelect);
	featureSelect.activate();

	var changeTable = function(e) {
	if (/^([a-zA-Z0-9-_]){40,41}$/.test(e.data)) {
	layerSensor.refresh({
	params: {sql: "select * from " + e.data}
	});
	}
	}

	if (window.addEventListener) {
	window.addEventListener('message', changeTable, false);
	} else {
	window.attachEvent('onmessage', changeTable, false);
	}
	}
	});
	</script>
	<style type="text/css">
	body {
	margin: 0px;
	padding: 0px;
	background-color: #fff;
	font-family: "Lucida Grande", "Tahoma", "Helvetica", "Arial", sans-serif;
	font-size: 80%;
	}
	#map {
	width: 650px;
	height: 400px;
	}
	#graph1, #graph2 {
	width: 650px;
	height: 200px;
	}
	#license {
	color: #888;
	font-size: 80%;
	}
	</style>
	</head>
	<body>
	<div id="map"></div>
	<div id="graph1"></div>
	<div id="graph2"></div>
	<div id="license">
	<a rel="license" href="http://creativecommons.org/licenses/by/3.0/"><img alt="Creative Commons Licence" style="border-width:0" src="http://i.creativecommons.org/l/by/3.0/80x15.png" /></a><br />This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0 Unported License</a>.
	</div>
	</body>
	</html>