Adicionando lib Rickshaw

Grafico de velocidade media adicionado

public/css/style.css

@@ -16,4 +16,14 @@ body {
 
 #show-map{
 	height: 600px;	
+}
+
+#show-graph1 {
+	height: 1200px;
+	z-index: 99;
+}
+
+iframe {
+	height: 1200px;
+	width: 1200px;
 }

public/graficos/css/extensions.css

@@ -0,0 +1,184 @@
+div, span, p, td {
+	font-family: Arial, sans-serif;
+}
+#content {
+	width: 1200px;
+}
+#chart {
+	display: inline-block;
+}
+#chart path {
+	-webkit-transition: opacity 0.2s linear;
+}
+#preview {
+	margin-top: 10px;
+}
+#legend {
+	display: inline-block;
+	position: relative;
+	left: 8px;
+}
+#legend_container {
+	position: absolute;
+	right: 0;
+	bottom: 26px;
+	width: 0;
+}
+#chart_container {
+	position: relative;
+	display: inline-block;
+}
+#smoother {
+	margin: 0 0 10px 16px;
+	width: 100px;
+}
+.rickshaw_graph .detail {
+	left: -1000;
+}
+#chart {
+	border: 1px solid #f0f0f0;
+}
+#side_panel {
+	padding: 0 20px 20px 0;
+	width: 240px;
+	display: inline-block;
+	vertical-align: top;
+}
+#side_panel section {
+	color: #505050;
+	font-size: 12px;
+}
+#side_panel section h6 {
+	margin: 0 0 1em 0;
+	font-size: 12px;
+	font-weight: normal;
+}
+#side_panel .ui-slider-horizontal {
+	height: 1px !important;
+	border-color: #e0e0e0;
+	margin-bottom: 10px;
+}
+#side_panel .ui-slider-handle {
+	border-color: #a0a0a0;
+	height: 9px !important;
+	width: 9px !important;
+	top: -5px !important;
+	border-radius: 6px;
+	outline: none;
+	cursor: pointer;
+}
+#legend {
+	background-color: white;
+	margin-left: 0;
+	padding: 0;
+	left: 0;
+}
+#legend .label {
+	color: #404040;
+}
+#legend .action {
+	color: black;
+	opacity: 0.5;
+}
+#legend ul {
+	padding: 0;
+}
+h1 {
+	font-family: Franklin Gothic Medium, UnDotum, Helvetica, Arial;
+	font-weight: normal;
+	font-size: 20px;
+}
+section {
+	border: none;
+	border-top: 1px solid #eaeaea;
+	padding: 15px 0;
+}
+#smoother {
+	margin: 5px 0 0 10px;
+	width: 90%;
+}
+label.disabled {
+	opacity: 0.4;
+}
+#renderer_form.toggler {
+	display: block;
+	margin: 0;
+}
+#renderer_form.toggler input[type=radio]:checked {
+	outline: 2px solid steelblue;
+}
+#renderer_form.toggler input[type=radio] {
+	-moz-appearance: button;
+	background: white;
+	margin: 0 7px;
+	width: 39px;
+	height: 26px;
+	position: absolute;
+}
+#renderer_form.toggler label {
+	display: inline-block;
+	padding: 0;
+	width: 39px;
+	padding-top: 27px;
+	text-align: center;
+	font-size: 10px;
+	color: #808080;
+	background-repeat: no-repeat;
+	position: relative;
+	margin: 0 7px;
+	cursor: pointer;
+}
+#interpolation_form,
+#offset_form {
+	vertical-align: top;
+	display: inline-block;
+	width: 45%;
+}
+#interpolation_form label,
+#offset_form label {
+	display: block;
+}
+label[for=area] {
+	background: url(../images/om_stack.png);
+}
+label[for=line] {
+	background: url(../images/om_lines.png);
+}
+label[for=bar] {
+	background: url(../images/om_bar.png);
+}
+label[for=scatter] {
+	background: url(../images/om_scatter.png);
+}
+#offset_form label,
+#interpolation_form label {
+	background-repeat: no-repeat;
+	background-position: 2em center;
+	cursor: pointer;
+	cursor: hand;
+}
+#offset_form label span,
+#interpolation_form label span {
+	padding-left: 36px;
+}
+label[for=stack] {
+	background-image: url(../images/offset_stack.png);
+}
+label[for=pct] {
+	background-image: url(../images/offset_pct.png);
+}
+label[for=stream] {
+	background-image: url(../images/offset_stream.png);
+}
+label[for=value] {
+	background-image: url(../images/offset_value.png);
+}
+label[for=cardinal] {
+	background-image: url(../images/interp_cardinal.png);
+}
+label[for=linear] {
+	background-image: url(../images/interp_linear.png);
+}
+label[for=step] {
+	background-image: url(../images/interp_step.png);
+}

public/graficos/css/lines.css

@@ -0,0 +1,21 @@
+div, span, p, td {
+	font-family: Arial, sans-serif;
+}
+#chart {
+	display: inline-block;
+}
+#legend {
+	display: inline-block;
+	position: relative;
+	left: 8px;
+}
+#legend_container {
+	position: absolute;
+	right: 0;
+	bottom: 26px;
+	width: 0;
+}
+#chart_container {
+	float: left;
+	position: relative;
+}

public/graficos/js/extensions.js

@@ -0,0 +1,135 @@
+var RenderControls = function(args) {
+
+	var $ = jQuery;
+
+	this.initialize = function() {
+
+		this.element = args.element;
+		this.graph = args.graph;
+		this.settings = this.serialize();
+
+		this.inputs = {
+			renderer: this.element.elements.renderer,
+			interpolation: this.element.elements.interpolation,
+			offset: this.element.elements.offset
+		};
+
+		this.element.addEventListener('change', function(e) {
+
+			this.settings = this.serialize();
+
+			if (e.target.name == 'renderer') {
+				this.setDefaultOffset(e.target.value);
+			}
+
+			this.syncOptions();
+			this.settings = this.serialize();
+
+			var config = {
+				renderer: this.settings.renderer,
+				interpolation: this.settings.interpolation
+			};
+
+			if (this.settings.offset == 'value') {
+				config.unstack = true;
+				config.offset = 'zero';
+			} else if (this.settings.offset == 'expand') {
+				config.unstack = false;
+				config.offset = this.settings.offset;
+			} else {
+				config.unstack = false;
+				config.offset = this.settings.offset;
+			}
+
+			this.graph.configure(config);
+			this.graph.render();
+
+		}.bind(this), false);
+	}
+
+	this.serialize = function() {
+
+		var values = {};
+		var pairs = $(this.element).serializeArray();
+
+		pairs.forEach( function(pair) {
+			values[pair.name] = pair.value;
+		} );
+
+		return values;
+	};
+
+	this.syncOptions = function() {
+
+		var options = this.rendererOptions[this.settings.renderer];
+
+		Array.prototype.forEach.call(this.inputs.interpolation, function(input) {
+
+			if (options.interpolation) {
+				input.disabled = false;
+				input.parentNode.classList.remove('disabled');
+			} else {
+				input.disabled = true;
+				input.parentNode.classList.add('disabled');
+			}
+		});
+
+		Array.prototype.forEach.call(this.inputs.offset, function(input) {
+
+			if (options.offset.filter( function(o) { return o == input.value } ).length) {
+				input.disabled = false;
+				input.parentNode.classList.remove('disabled');
+
+			} else {
+				input.disabled = true;
+				input.parentNode.classList.add('disabled');
+			}
+
+		}.bind(this));
+
+	};
+
+	this.setDefaultOffset = function(renderer) {
+
+		var options = this.rendererOptions[renderer];
+
+		if (options.defaults && options.defaults.offset) {
+
+			Array.prototype.forEach.call(this.inputs.offset, function(input) {
+				if (input.value == options.defaults.offset) {
+					input.checked = true;
+				} else {
+					input.checked = false;
+				}
+
+			}.bind(this));
+		}
+	};
+
+	this.rendererOptions = {
+
+		area: {
+			interpolation: true,
+			offset: ['zero', 'wiggle', 'expand', 'value'],
+			defaults: { offset: 'zero' }
+		},
+		line: {
+			interpolation: true,
+			offset: ['expand', 'value'],
+			defaults: { offset: 'value' }
+		},
+		bar: {
+			interpolation: false,
+			offset: ['zero', 'wiggle', 'expand', 'value'],
+			defaults: { offset: 'zero' }
+		},
+		scatterplot: {
+			interpolation: false,
+			offset: ['value'],
+			defaults: { offset: 'value' }
+		}
+	};
+
+	this.initialize();
+};
+