diff --git a/bower_components/google-chart/.bower.json b/bower_components/google-chart/.bower.json
new file mode 100644
index 0000000..191dd4d
--- /dev/null
+++ b/bower_components/google-chart/.bower.json
@@ -0,0 +1,43 @@
+{
+  "name": "google-chart",
+  "version": "1.0.4",
+  "description": "Encapsulates Google Charts into a web component",
+  "homepage": "https://googlewebcomponents.github.io/google-chart",
+  "main": "google-chart.html",
+  "authors": [
+    "Sérgio Gomes"
+  ],
+  "license": "Apache2",
+  "ignore": [
+    "/.*",
+    "/test/"
+  ],
+  "keywords": [
+    "web-component",
+    "web-components",
+    "polymer",
+    "chart",
+    "charts",
+    "google-visualization",
+    "google"
+  ],
+  "dependencies": {
+    "polymer": "Polymer/polymer#^1.0.0",
+    "google-apis": "GoogleWebComponents/google-apis#^1.0.0",
+    "iron-ajax": "PolymerElements/iron-ajax#^1.0.0"
+  },
+  "devDependencies": {
+    "iron-component-page": "PolymerElements/iron-component-page#^1.0.2",
+    "web-component-tester": "*"
+  },
+  "_release": "1.0.4",
+  "_resolution": {
+    "type": "version",
+    "tag": "1.0.4",
+    "commit": "eaaaf380c6a769ded22706702151b797fd8f031c"
+  },
+  "_source": "git://github.com/GoogleWebComponents/google-chart.git",
+  "_target": "~1.0.4",
+  "_originalSource": "google-chart",
+  "_direct": true
+}
\ No newline at end of file
diff --git a/bower_components/google-chart/LICENSE b/bower_components/google-chart/LICENSE
new file mode 100644
index 0000000..52aea39
--- /dev/null
+++ b/bower_components/google-chart/LICENSE
@@ -0,0 +1,13 @@
+Copyright 2014 Google Inc
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    https://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
diff --git a/bower_components/google-chart/README.md b/bower_components/google-chart/README.md
new file mode 100644
index 0000000..ecf9dc6
--- /dev/null
+++ b/bower_components/google-chart/README.md
@@ -0,0 +1,6 @@
+google-chart
+============
+
+[Google Charts API](https://developers.google.com/chart/) web components.
+
+See https://elements.polymer-project.org/elements/google-chart
diff --git a/bower_components/google-chart/bower.json b/bower_components/google-chart/bower.json
new file mode 100644
index 0000000..cb9ac5d
--- /dev/null
+++ b/bower_components/google-chart/bower.json
@@ -0,0 +1,33 @@
+{
+  "name": "google-chart",
+  "version": "1.0.4",
+  "description": "Encapsulates Google Charts into a web component",
+  "homepage": "https://googlewebcomponents.github.io/google-chart",
+  "main": "google-chart.html",
+  "authors": [
+    "Sérgio Gomes"
+  ],
+  "license": "Apache2",
+  "ignore": [
+    "/.*",
+    "/test/"
+  ],
+  "keywords": [
+    "web-component",
+    "web-components",
+    "polymer",
+    "chart",
+    "charts",
+    "google-visualization",
+    "google"
+  ],
+  "dependencies": {
+    "polymer": "Polymer/polymer#^1.0.0",
+    "google-apis": "GoogleWebComponents/google-apis#^1.0.0",
+    "iron-ajax": "PolymerElements/iron-ajax#^1.0.0"
+  },
+  "devDependencies": {
+    "iron-component-page": "PolymerElements/iron-component-page#^1.0.2",
+    "web-component-tester": "*"
+  }
+}
diff --git a/bower_components/google-chart/demo/chart-data.json b/bower_components/google-chart/demo/chart-data.json
new file mode 100644
index 0000000..7d9a9cb
--- /dev/null
+++ b/bower_components/google-chart/demo/chart-data.json
@@ -0,0 +1 @@
+[["Bar", "Height", { "role": "style" } ], ["Bar 1", 10, "color: gray"], ["Bar 2", 14, "color: #76A7FA"], ["Bar 3", 16, "opacity: 0.2"], ["Bar 4", 22, "stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF"],["Bar 5", 28, "stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2"]]
\ No newline at end of file
diff --git a/bower_components/google-chart/demo/country-data.json b/bower_components/google-chart/demo/country-data.json
new file mode 100644
index 0000000..b664776
--- /dev/null
+++ b/bower_components/google-chart/demo/country-data.json
@@ -0,0 +1,66 @@
+{
+  "cols": [
+    {
+      "id": "ga:country",
+      "label": "Country",
+      "type": "string"
+    },
+    {
+      "id": "ga:sessions",
+      "label": "Sessions",
+      "type": "number"
+    }
+  ],
+  "rows": [
+    {
+      "c": [
+        {
+          "v": "United States"
+        },
+        {
+          "v": 24748
+        }
+      ]
+    },
+    {
+      "c": [
+        {
+          "v": "Canada"
+        },
+        {
+          "v": 15232
+        }
+      ]
+    },
+    {
+      "c": [
+        {
+          "v": "India"
+        },
+        {
+          "v": 9100
+        }
+      ]
+    },
+    {
+      "c": [
+        {
+          "v": "Japan"
+        },
+        {
+          "v": 4845
+        }
+      ]
+    },
+    {
+      "c": [
+        {
+          "v": "United Kingdom"
+        },
+        {
+          "v": 2768
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/bower_components/google-chart/demo/index.html b/bower_components/google-chart/demo/index.html
new file mode 100644
index 0000000..324a0dc
--- /dev/null
+++ b/bower_components/google-chart/demo/index.html
@@ -0,0 +1,410 @@
+<!doctype html>
+<!-- Copyright (c) 2014 Google Inc. All rights reserved. -->
+<html>
+<head>
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+  <title>google-chart Demo</title>
+
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+  <link rel="import" href="../google-chart.html">
+  <style>
+    code {
+      color: #007000;
+    }
+
+    google-chart {
+      height: 300px;
+      width: 400px;
+    }
+
+    #selection-demo {
+      position: relative;
+      height: 300px;
+    }
+
+    #selection-chart {
+      float: left;
+    }
+
+    #selection-display {
+      display: inline-block;
+      position: relative;
+      top: 50%;
+    }
+  </style>
+
+</head>
+<body>
+
+  <p>A simple <code>google-chart</code> looks like this:</p>
+
+  <google-chart
+    cols='[{"label": "Data", "type": "string"},{"label": "Value", "type": "number"}]'
+    rows='[["Something", 1]]'>
+  </google-chart>
+
+  <p>Charts can be resized with CSS, but you'll need to call the <code>drawChart</code> method when the size changes.</p>
+  <p>Here's a basic responsive example using only CSS and JS. You could also use <code>&lt;iron-media-query&gt;</code>.</p>
+
+  <style>
+    /* Phone and tablet */
+    #resizing_chart {
+      height: 300px;
+      width: 400px;
+    }
+
+    /* Desktop */
+    @media screen and (min-width: 1024px) {
+      #resizing_chart {
+        width: 800px;
+      }
+    }
+  </style>
+
+  <script>
+    var media = window.matchMedia('(min-width: 1024px)');
+
+    media.addListener(function() {
+      document.getElementById('resizing_chart').drawChart();
+    });
+  </script>
+
+  <google-chart
+    id='resizing_chart'
+    type='column'
+    options='{"title": "Responsive chart",
+              "vAxis": {"minValue" : 0, "maxValue": 10}}'
+    cols='[{"label": "Data", "type": "string"},{"label": "Value", "type": "number"}]'
+    rows='[["Col1", 5.0],["Col2", 5.0],["Col3", 5.0]]'>
+  </google-chart>
+
+  <p>Here's a chart that changes data every 3 seconds:</p>
+
+  <google-chart
+    id='mutating_chart'
+    type='column'
+    options='{"title": "Random data",
+              "vAxis": {"minValue" : 0, "maxValue": 10},
+              "animation": {"duration": "1000"}}'
+    cols='[{"label": "Data", "type": "string"},{"label": "Value", "type": "number"}]'
+    rows='[["Col1", 5.0],["Col2", 5.0],["Col3", 5.0]]'>
+  </google-chart>
+
+  <script>
+    function getRandomValue() {
+      return Math.random() * 10;
+    }
+
+    window.setInterval(function() {
+      var chart = document.getElementById('mutating_chart');
+
+      chart.rows = [["Col1", getRandomValue()],
+                    ["Col2", getRandomValue()],
+                    ["Col3", getRandomValue()]];
+    }, 3000);
+  </script>
+
+  <p>Here's a pie chart with an area selection:</p>
+
+  <div id="selection-demo">
+    <google-chart
+      type="pie"
+      id="selection-chart"
+      options='{"title": "Distribution of days in 2001H1"}'
+      cols='[{"label": "Month", "type": "string"},{"label": "Days", "type": "number"}]'
+      rows='[["Jan", 31],["Feb", 28],["Mar", 31],["Apr", 30],["May", 31],["Jun", 30]]'>
+    </google-chart>
+    <div id="selection-display">
+      Selected row: <span id="selection-label">None</span>.
+    </div>
+  </div>
+
+  <script>
+    document.addEventListener('WebComponentsReady', function() {
+      var chart = document.querySelector('#selection-chart');
+      var label = document.querySelector('#selection-label');
+
+      chart.addEventListener('google-chart-render', function() {
+        chart.selection = [{row: 1, column: null}];
+        label.textContent = chart.selection[0].row;
+      });
+
+      document.addEventListener('google-chart-select', function(e) {
+        label.textContent =
+            chart.selection[0] ? chart.selection[0].row : 'None';
+      });
+    });
+  </script>
+
+  <p>Here's a chart defined using <code>data</code>, rather than <code>rows</code> and <code>cols</code>:</p>
+
+  <google-chart
+    type='column'
+    options='{"title": "Inventory"}'
+    data='[["Year", "Things", "Stuff"],
+           ["2004", 1000, 400],
+           ["2005", 1170, 460],
+           ["2006", 660, 1120],
+           ["2007", 1030, 540]]'>
+  </google-chart>
+
+  <p>And one with some pretty complicated styling, where the data is loaded from an external JSON resource using the <code>data</code> attribute:</p>
+
+  <google-chart
+    type='column'
+    options='{"title": "Bar height", "legend": "none"}'
+    data='chart-data.json'>
+  </google-chart>
+
+  <p>Website traffic data by country from an external JSON resource where the data is in raw DataTable format.</p>
+
+  <google-chart
+    type='column'
+    options='{"title": "Visitors by Country", "legend": "none"}'
+    data='country-data.json'>
+  </google-chart>
+
+  <h2>Chart gallery</h2>
+
+  <p>Here's an area chart:</p>
+
+  <google-chart
+    type='area'
+    options='{"title": "Days in a month"}'
+    cols='[{"label": "Month", "type": "string"},{"label": "Days", "type": "number"}]'
+    rows='[["Jan", 31],["Feb", 28],["Mar", 31],["Apr", 30],["May", 31],["Jun", 30]]'>
+  </google-chart>
+
+  <p>Here's a bar chart:</p>
+
+  <google-chart
+    type='bar'
+    options='{"title": "Days in a month"}'
+    cols='[{"label": "Month", "type": "string"},{"label": "Days", "type": "number"}]'
+    rows='[["Jan", 31],["Feb", 28],["Mar", 31],["Apr", 30],["May", 31],["Jun", 30]]'>
+  </google-chart>
+
+  <p>Here's a bubble chart:</p>
+
+  <google-chart
+    type='bubble'
+    options='{}'
+    data='[["ID", "Life Expectancy", "Fertility Rate", "Region", "Population"],
+           ["CAN", 80.66, 1.67, "North America", 33739900],
+           ["DEU", 79.84, 1.36, "Europe",        81902307],
+           ["DNK", 78.6,  1.84, "Europe",        5523095],
+           ["EGY", 72.73, 2.78, "Middle East",   79716203],
+           ["GBR", 80.05, 2,    "Europe",        61801570],
+           ["IRN", 72.49, 1.7,  "Middle East",   73137148],
+           ["IRQ", 68.09, 4.77, "Middle East",   31090763],
+           ["ISR", 81.55, 2.96, "Middle East",   7485600],
+           ["RUS", 68.6,  1.54, "Europe",        141850000],
+           ["USA", 78.09, 2.05, "North America", 307007000]]'>
+  </google-chart>
+
+  <p>Here's a candlestick chart:</p>
+
+  <google-chart
+    type='candlestick'
+    options='{"legend": "none"}'
+    data='[["Day", "low", "start", "end", "high"],
+           ["Mon", 20, 28, 38, 45],
+           ["Tue", 31, 38, 55, 66],
+           ["Wed", 50, 55, 77, 80],
+           ["Thu", 77, 77, 66, 50],
+           ["Fri", 68, 66, 22, 15]]'>
+  </google-chart>
+
+  <p>Here's a column chart:</p>
+
+  <google-chart
+    type='column'
+    options='{"title": "Days in a month"}'
+    cols='[{"label": "Month", "type": "string"},{"label": "Days", "type": "number"}]'
+    rows='[["Jan", 31],["Feb", 28],["Mar", 31],["Apr", 30],["May", 31],["Jun", 30]]'>
+  </google-chart>
+
+  <p>Here's a combo chart:</p>
+
+  <google-chart
+    type='combo'
+    options='{"seriesType": "bars", "series": {"2": {"type": "line"}}}'
+    data='[["Day", "A", "B", "C"],
+           ["Mon", 20, 45, 28],
+           ["Tue", 31, 66, 38],
+           ["Wed", 50, 80, 55],
+           ["Thu", 77, 50, 77],
+           ["Fri", 68, 15, 66]]'>
+  </google-chart>
+
+  <p>Here's a geo chart:</p>
+
+  <google-chart
+    type='geo'
+    data='[["Country", "Popularity"],
+           ["Germany", 200],
+           ["United States", 300],
+           ["Brazil", 400],
+           ["Canada", 500],
+           ["France", 600],
+           ["RU", 700]]'>
+  </google-chart>
+
+  <p>Here's a histogram:</p>
+
+  <google-chart
+    type='histogram'
+    options='{"title": "Days in a month", "legend": "none", "histogram": { "bucketSize": 1 }}'
+    cols='[{"label": "Month", "type": "string"},{"label": "Days", "type": "number"}]'
+    rows='[["Jan", 31],["Feb", 28],["Mar", 31],["Apr", 30],["May", 31],["Jun", 30]]'>
+  </google-chart>
+
+  <p>Here's a line chart:</p>
+
+  <google-chart
+    id='line_chart'
+    type='line'
+    options='{"title": "Days in a month"}'
+    cols='[{"label": "Month", "type": "string"},{"label": "Days", "type": "number"}]'
+    rows='[["Jan", 31],["Feb", 28],["Mar", 31],["Apr", 30],["May", 31],["Jun", 30]]'>
+  </google-chart>
+
+  <p>Here's a pie chart:</p>
+
+  <google-chart
+    type='pie'
+    options='{"title": "Distribution of days in 2001H1"}'
+    cols='[{"label": "Month", "type": "string"},{"label": "Days", "type": "number"}]'
+    rows='[["Jan", 31],["Feb", 28],["Mar", 31],["Apr", 30],["May", 31],["Jun", 30]]'>
+  </google-chart>
+
+  <p>Here's a scatter chart:</p>
+
+  <google-chart
+    type='scatter'
+    options='{"legend": "none"}'
+    data='[["A", "B"],
+           [20, 45],
+           [31, 66],
+           [50, 80],
+           [77, 50],
+           [68, 15]]'>
+  </google-chart>
+
+  <p>Here's a stepped area chart:</p>
+
+  <google-chart
+    type='stepped-area'
+    options='{"title": "Days in a month"}'
+    cols='[{"label": "Month", "type": "string"},{"label": "Days", "type": "number"}]'
+    rows='[["Jan", 31],["Feb", 28],["Mar", 31],["Apr", 30],["May", 31],["Jun", 30]]'>
+  </google-chart>
+
+  <p>Here's a table chart:</p>
+
+  <google-chart
+    type="table"
+    options='{"title": "Inventory"}'
+    data='[["Year", "Things", "Stuff"],
+           ["2004", 1000, 400],
+           ["2005", 1170, 460],
+           ["2006", 660, 1120],
+           ["2007", 1030, 540]]'>
+  </google-chart>
+
+  <p>Here are three gauges:</p>
+
+  <google-chart
+      type='gauge'
+      data='[["Label", "Value"],["Memory", 80],["CPU", 55],["Network", 68]]'
+      options='{"width": 400,
+                "height": 120,
+                "redFrom": 90,
+                "redTo": 100,
+                "yellowFrom":75,
+                "yellowTo": 90,
+                "minorTicks": 5}'>
+  </google-chart>
+
+  <p>Here are three gauges with random data that change every three seconds:</p>
+
+  <google-chart
+      id="mutating_gauge"
+      type="gauge"
+      data='[["Label", "Value"],["Memory", 80],["CPU", 55],["Network", 68]]'
+      options='{"width": 400,
+                "height": 120,
+                "redFrom": 90,
+                "redTo": 100,
+                "yellowFrom": 75,
+                "yellowTo": 90,
+                "minorTicks": 5}'>
+  </google-chart>
+
+  <script>
+    function getRandomGaugeValue(offset, factor) {
+      return offset + Math.round(factor * Math.random());
+    }
+
+    window.setInterval(function() {
+      var gauge = document.getElementById('mutating_gauge');
+
+      gauge.data = [["Label", "Value"],["Memory", getRandomGaugeValue(40, 60)],["CPU", getRandomGaugeValue(40, 60)],["Network", getRandomGaugeValue(60, 20)]];
+
+    }, 3000);
+  </script>
+
+  <p>Here's a treemap:</p>
+
+  <google-chart
+      type="treemap"
+      options='{"showScale": true, "maxPostDepth": 2}'
+      data='[["Location", "Parent", "Value"],
+             ["Global", null, 0],
+             ["America", "Global", 0],
+             ["Europe", "Global", 0],
+             ["Asia", "Global", 0],
+             ["Australia", "Global", 0],
+             ["Africa", "Global", 0],
+             ["Brazil", "America", 11],
+             ["USA", "America", 52],
+             ["Mexico", "America", 24],
+             ["Canada", "America", 16],
+             ["France", "Europe", 42],
+             ["Germany", "Europe", 31],
+             ["Sweden", "Europe", 22],
+             ["Italy", "Europe", 17],
+             ["UK", "Europe", 21],
+             ["China", "Asia", 36],
+             ["Japan", "Asia", 20],
+             ["India", "Asia", 40],
+             ["Laos", "Asia", 4],
+             ["Mongolia", "Asia", 1],
+             ["Israel", "Asia", 12],
+             ["Iran", "Asia", 18],
+             ["Pakistan", "Asia", 11],
+             ["Egypt", "Africa", 21],
+             ["S. Africa", "Africa", 30],
+             ["Sudan", "Africa", 12],
+             ["Congo", "Africa", 10],
+             ["Zaire", "Africa", 8]]'>
+  </google-chart>
+
+  <p>Here's an image of the line chart:</p>
+
+  <div id='line_chart_div'></div>
+
+    <script>
+    document.addEventListener('WebComponentsReady', function() {
+      var chart_div = document.querySelector('#line_chart_div');
+      var chart = document.querySelector('#line_chart');
+
+      chart.addEventListener('google-chart-render', function() {
+        chart_div.innerHTML = '<img src="' + chart.getImageURI() + '">';
+      });
+
+    });
+  </script>
+  
+</body>
+</html>
diff --git a/bower_components/google-chart/google-chart.css b/bower_components/google-chart/google-chart.css
new file mode 100644
index 0000000..8fec5aa
--- /dev/null
+++ b/bower_components/google-chart/google-chart.css
@@ -0,0 +1,18 @@
+:host {
+  display: -webkit-flex;
+  display: -ms-flex;
+  display: flex;
+  margin: 0;
+  padding: 0;
+  width: 400px;
+  height: 300px;
+}
+
+:host([type="gauge"]) {
+  width: 300px;
+  height: 300px;
+}
+
+#chartdiv {
+  width: 100%;
+}
diff --git a/bower_components/google-chart/google-chart.html b/bower_components/google-chart/google-chart.html
new file mode 100644
index 0000000..e31baeb
--- /dev/null
+++ b/bower_components/google-chart/google-chart.html
@@ -0,0 +1,399 @@
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../iron-ajax/iron-ajax.html">
+<link rel="import" href="../google-apis/google-legacy-loader.html">
+
+<!--
+`google-chart` encapsulates Google Charts as a web component, allowing you to easily visualize
+data. From simple line charts to complex hierarchical tree maps, the chart element provides a
+number of ready-to-use chart types.
+
+    <google-chart
+      type='pie'
+      options='{"title": "Distribution of days in 2001Q1"}'
+      cols='[{"label":"Month", "type":"string"}, {"label":"Days", "type":"number"}]'
+      rows='[["Jan", 31],["Feb", 28],["Mar", 31]]'>
+    </google-chart>
+
+Height and width are specified as style attributes:
+
+    google-chart {
+      height: 300px;
+      width: 50em;
+    }
+
+Data can be provided in one of three ways:
+
+- Via the `cols` and `rows` attributes:
+
+      cols='[{"label":"Mth", "type":"string"}, {"label":"Days", "type":"number"}]'
+      rows='[["Jan", 31],["Feb", 28],["Mar", 31]]'
+
+- Via the `data` attribute, passing in the data directly:
+
+      data='[["Month", "Days"], ["Jan", 31], ["Feb", 28], ["Mar", 31]]'
+
+- Via the `data` attribute, passing in the URL to a resource containing the
+  data, in JSON format:
+
+      data='http://example.com/chart-data.json'
+@demo
+-->
+<dom-module id="google-chart">
+  <link rel="import" type="css" href="google-chart.css">
+  <template>
+    <iron-ajax id="ajax" handle-as="json" url="{{data}}"
+      on-response="_externalDataLoaded"></iron-ajax>
+    <div id="chartdiv"></div>
+    <google-legacy-loader on-api-load="_readyForAction"></google-legacy-loader>
+  </template>
+</dom-module>
+
+<script>
+(function() {
+  "use strict";
+
+  Polymer({
+
+    is: 'google-chart',
+
+    /**
+     * Fired when the graph is displayed.
+     *
+     * @event google-chart-render
+     */
+
+    /**
+     * Fired when the user makes a selection in the chart.
+     *
+     * @event google-chart-select
+     * @param {object} detail
+     *   @param {array} detail.selection The user-defined selection.
+     */
+
+    properties: {
+      /**
+       * Sets the type of the chart.
+       *
+       * Should be one of:
+       * - `area`, `bar`, `bubble`, `candlestick`, `column`, `combo`, `geo`,
+       *   `histogram`, `line`, `pie`, `scatter`, `stepped-area`, `treemap`
+       *
+       * See <a href="https://google-developers.appspot.com/chart/interactive/docs/gallery">Google Visualization API reference (Chart Gallery)</a> for details.
+       *
+       */
+      type: {
+        type: String,
+        value: 'column',
+        observer: '_typeChanged'
+      },
+
+      /**
+       * Sets the options for the chart.
+       *
+       * Example:
+       * <pre>{
+       *   title: "Chart title goes here",
+       *   hAxis: {title: "Categories"},
+       *   vAxis: {title: "Values", minValue: 0, maxValue: 2},
+       *   legend: "none"
+       * };</pre>
+       * See <a href="https://google-developers.appspot.com/chart/interactive/docs/gallery">Google Visualization API reference (Chart Gallery)</a>
+       * for the options available to each chart type.
+       *
+       */
+      options: {
+        type: Object,
+        value: function() { return {}; }
+      },
+
+      /**
+       * Sets the data columns for this object.
+       *
+       * When specifying data with `cols` you must also specify `rows`, and
+       * not specify `data`.
+       *
+       * Example:
+       * <pre>[{label: "Categories", type: "string"},
+       *  {label: "Value", type: "number"}]</pre>
+       * See <a href="https://google-developers.appspot.com/chart/interactive/docs/reference#DataTable_addColumn">Google Visualization API reference (addColumn)</a>
+       * for column definition format.
+       *
+       * @attribute cols
+       * @type array
+       */
+      cols: {
+        type: Array,
+        value: function() { return []; }
+      },
+      /**
+       * Sets the data rows for this object.
+       *
+       * When specifying data with `rows` you must also specify `cols`, and
+       * not specify `data`.
+       *
+       * Example:
+       * <pre>[["Category 1", 1.0],
+       *  ["Category 2", 1.1]]</pre>
+       * See <a href="https://google-developers.appspot.com/chart/interactive/docs/reference#addrow">Google Visualization API reference (addRow)</a>
+       * for row format.
+       *
+       * @attribute rows
+       * @type array
+       */
+      rows: {
+        type: Array,
+        value: function() { return []; }
+      },
+
+      /**
+       * Sets the entire dataset for this object.
+       * Can be used to provide the data directly, or to provide a URL from
+       * which to request the data.
+       *
+       * The data format can be a two-dimensional array or the DataTable format
+       * expected by Google Charts.
+       * See <a href="https://google-developers.appspot.com/chart/interactive/docs/reference#DataTable">Google Visualization API reference (DataTable constructor)</a>
+       * for data table format details.
+       *
+       * When specifying data with `data` you must not specify `cols` or `rows`.
+       *
+       * Example:
+       * <pre>[["Categories", "Value"],
+       *  ["Category 1", 1.0],
+       *  ["Category 2", 1.1]]</pre>
+       *
+       * @attribute data
+       * @type array, object, or string
+       */
+      data: {
+        type: Object, // or array, or object
+        value: function() { return []; }
+      },
+
+      /**
+       * Selected datapoint(s) in the map.
+       *
+       * An array of objects, each with a numeric row and/or column property.
+       * `row` and `column` are the zero-based row or column number of an item
+       * in the data table to select.
+       *
+       * To select a whole column, set row to null;
+       * to select a whole row, set column to null.
+       *
+       * Example:
+       * <pre>
+       *   [{row:0,column:1}, {row:1, column:null}]
+       * </pre>
+       *
+       * @attribute selection
+       * @type array
+       */
+      selection: {
+        type: Array,
+        value: function() { return []; },
+        observer: '_selectionChanged'
+      },
+    },
+
+    observers: [
+      '_loadData(rows, cols, data)'
+    ],
+
+    _packages: null,
+
+    _chartObject: null,
+
+    _isReady: false,
+
+    _canDraw: false,
+
+    _dataTable: null,
+
+    _chartTypes: null,
+
+    _readyForAction: function(e, detail, sender) {
+      this._loadPackageByChartType();
+
+      google.load("visualization", "1", {
+        packages: this._packages[this.type],
+        callback: function() {
+          this._isReady = true;
+          this._loadChartTypes();
+          this._loadData();
+        }.bind(this)
+      });
+    },
+
+    _typeChanged: function() {
+      // Invalidate current chart object.
+      this._chartObject = null;
+      this._loadData();
+    },
+
+    _selectionChanged: function() {
+      if (this._chartObject && this.setSelection) {
+        this._chartObject.setSelection(this.selection);
+      }
+    },
+
+    /**
+     * Draws the chart.
+     *
+     * Called automatically on first load and whenever one of the attributes
+     * changes. Can be called manually to handle e.g. page resizes.
+     *
+     * @method drawChart
+     * @return {Object} Returns null.
+     */
+    drawChart: function() {
+      if (this._canDraw) {
+        if (!this.options) {
+          this.options = {};
+        }
+        if (!this._chartObject) {
+          var chartClass = this._chartTypes[this.type];
+          if (chartClass) {
+            this._chartObject = new chartClass(this.$.chartdiv);
+          }
+        }
+        if (this._chartObject) {
+          google.visualization.events.addOneTimeListener(this._chartObject,
+              'ready', function() {
+                  this.fire('google-chart-render');
+              }.bind(this));
+
+          google.visualization.events.addListener(this._chartObject,
+              'select', function() {
+                  this.selection = this._chartObject.getSelection();
+                  this.fire('google-chart-select',
+                      { selection: this._chartObject.getSelection() });
+              }.bind(this));
+
+
+          this._chartObject.draw(this._dataTable, this.options);
+
+          if (this._chartObject.setSelection){
+            this._chartObject.setSelection(this.selection);
+          }
+        } else {
+          this.$.chartdiv.innerHTML = 'Undefined chart type';
+        }
+      }
+      return null;
+    },
+
+    /**
+     * Returns the chart serialized as an image URI.
+     *
+     * Call this after the chart is drawn (google-chart-render event).
+     *
+     * @return {string} Returns image URI.
+     */
+    getImageURI: function() {
+      return this._chartObject.getImageURI();
+    },
+
+    _loadChartTypes: function() {
+      this._chartTypes = {
+        'area': google.visualization.AreaChart,
+        'bar': google.visualization.BarChart,
+        'bubble': google.visualization.BubbleChart,
+        'candlestick': google.visualization.CandlestickChart,
+        'column': google.visualization.ColumnChart,
+        'combo': google.visualization.ComboChart,
+        'geo': google.visualization.GeoChart,
+        'histogram': google.visualization.Histogram,
+        'line': google.visualization.LineChart,
+        'pie': google.visualization.PieChart,
+        'scatter': google.visualization.ScatterChart,
+        'stepped-area': google.visualization.SteppedAreaChart,
+        'table': google.visualization.Table,
+        'gauge': google.visualization.Gauge,
+        'treemap': google.visualization.TreeMap
+      };
+    },
+
+    _loadPackageByChartType: function() {
+      this._packages = {
+        'area': 'corechart',
+        'bar': 'corechart',
+        'bubble': 'corechart',
+        'candlestick': 'corechart',
+        'column': 'corechart',
+        'combo': 'corechart',
+        'geo': 'corechart',
+        'histogram': 'corechart',
+        'line': 'corechart',
+        'pie': 'corechart',
+        'scatter': 'corechart',
+        'stepped-area': 'corechart',
+        'table': 'table',
+        'gauge': 'gauge',
+        'treemap': 'treemap'
+      };
+    },
+
+    _loadData: function() {
+      this._canDraw = false;
+      if (this._isReady) {
+        if (typeof this.data == 'string' || this.data instanceof String) {
+          // Load data asynchronously, from external URL.
+          this.$.ajax.generateRequest();
+        } else {
+          var dataTable = this._createDataTable();
+          this._canDraw = true;
+          if (dataTable) {
+            this._dataTable = dataTable;
+            this.drawChart();
+          }
+        }
+      }
+    },
+
+    _externalDataLoaded: function(e) {
+      var dataTable = this._createDataTable(e.detail.response);
+      this._canDraw = true;
+      this._dataTable = dataTable;
+      this.drawChart();
+    },
+
+    _createDataTable: function(data) {
+      var dataTable = null;
+
+      // If a data object was not passed to this function, default to the
+      // chart's data attribute. Passing a data object is necessary for
+      // cases when the data attribute is a URL pointing to an external
+      // data source.
+      if (!data) {
+        data = this.data;
+      }
+      if (!data)
+        data = [];
+
+      if (this.rows && this.rows.length > 0 && this.cols &&
+          this.cols.length > 0) {
+        // Create the data table from cols and rows.
+        dataTable = new google.visualization.DataTable();
+        dataTable.cols = this.cols;
+
+        for (var i = 0; i < this.cols.length; i++) {
+          dataTable.addColumn(this.cols[i]);
+        }
+
+        dataTable.addRows(this.rows);
+      } else {
+        // Create dataTable from the passed data or the data attribute.
+        // Data can be in the form of raw DataTable data or a two
+        // dimensional array.
+        if (data.rows && data.cols) {
+          dataTable = new google.visualization.DataTable(data);
+        } else if (data.length > 0) {
+          dataTable = google.visualization.arrayToDataTable(data);
+        }
+      }
+
+      return dataTable;
+    }
+  });
+})();
+</script>
diff --git a/bower_components/google-chart/index.html b/bower_components/google-chart/index.html
new file mode 100644
index 0000000..203f4fa
--- /dev/null
+++ b/bower_components/google-chart/index.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<!-- Copyright (c) 2015 Google Inc. All rights reserved. -->
+<html>
+<head>
+
+  <script src="../webcomponentsjs/webcomponents-lite.js"></script>
+  <link rel="import" href="../iron-component-page/iron-component-page.html">
+
+</head>
+<body>
+
+  <iron-component-page></iron-component-page>
+
+</body>
+</html>
diff --git a/datalets/google_piechart-datalet/demo/index.html b/datalets/google_piechart-datalet/demo/index.html
new file mode 100644
index 0000000..802118e
--- /dev/null
+++ b/datalets/google_piechart-datalet/demo/index.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+</head>
+<body>
+
+    <script src="https://code.jquery.com/jquery-2.1.4.min.js" type="text/javascript"></script>
+
+    <link rel="import" href="../google_piechart-datalet.html" />
+
+    <style>
+        #google_piechart_container{
+            height: 400px;
+            width: 1000px;
+        }
+    </style>
+
+    <div id="google_piechart_container">
+
+        <google_piechart-datalet id="pie" data-url="http://ckan.routetopa.eu/api/action/datastore_search?resource_id=73e02092-85a1-434e-85fe-0c9a43aa9a52&amp;limit=5"
+                                 fields='["result,records,Location","result,records,_id"]'></google_piechart-datalet>
+
+        <button onclick="_3D()">3D!</button>
+        <button onclick="_pieHole()">pie hole!</button>
+        <button onclick="_title()">Sbiricuda!</button>
+
+    </div>
+
+    <script>
+        function _3D() {
+            $("#pie")[0].is3D = !$("#pie")[0].is3D;
+        }
+        function _pieHole() {
+            $("#pie")[0].is3D = false;
+            $("#pie")[0].pieHole = ($("#pie")[0].pieHole + 0.5) % 1;
+        }
+        function _title() {
+            $("#pie")[0]._title = $("#pie")[0]._title + "sbiricuda... ";
+        }
+    </script>
+
+</body>
+</html>
+
diff --git a/datalets/google_piechart-datalet/google_piechart-datalet.html b/datalets/google_piechart-datalet/google_piechart-datalet.html
new file mode 100644
index 0000000..55274de
--- /dev/null
+++ b/datalets/google_piechart-datalet/google_piechart-datalet.html
@@ -0,0 +1,159 @@
+<!--
+@license
+    The MIT License (MIT)
+
+    Copyright (c) 2015 Dipartimento di Informatica - Universit� di Salerno - Italy
+
+    Permission is hereby granted, free of charge, to any person obtaining a copy
+    of this software and associated documentation files (the "Software"), to deal
+    in the Software without restriction, including without limitation the rights
+    to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+    copies of the Software, and to permit persons to whom the Software is
+    furnished to do so, subject to the following conditions:
+
+    The above copyright notice and this permission notice shall be included in
+    all copies or substantial portions of the Software.
+
+    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+    AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+    THE SOFTWARE.
+-->
+
+<!--
+* Developed by :
+* ROUTE-TO-PA Project - grant No 645860. - www.routetopa.eu
+*
+-->
+<link rel="import" href="../../bower_components/polymer/polymer.html">
+
+<link rel="import" href="../base-ajax-json-jsonpath-datalet/base-ajax-json-jsonpath-datalet.html">
+
+<link rel="import" href="../../bower_components/google-chart/google-chart.html"/>
+
+<dom-module id="google_piechart-datalet">
+
+    <template>
+
+        <style is="custom-style">
+            #google_piechart{
+                height: 100%;
+                width: 100%;
+            }
+        </style>
+
+        <google-chart
+                id='google_piechart'
+                type='pie'
+                cols={{cols}}
+                rows={{rows}}
+                options={{options}}>
+        </google-chart>
+
+        <base-ajax-json-jsonpath-datalet data-url="{{dataUrl}}" fields="{{fields}}" data="{{data}}"></base-ajax-json-jsonpath-datalet>
+
+    </template>
+
+    <script>
+
+        var GooglePiechartBehavior = {
+
+            presentData : function(){
+                var cols = [{"label": this.data[0].name, "type": "string"}, {"label": this.data[1].name, "type": "number"}];
+
+                var rows = [];
+                for(var i=0; i<this.data[0].data.length; i++)
+                {
+                    var row = [this.data[0].data[i], this.data[1].data[i]];
+                    rows.push(row);
+                }
+
+                var options = {"title": this._component._title, "pieHole": this._component.pieHole, "is3D": this._component.is3D, "sliceVisibilityThreshold": this._component.sliceVisibilityThreshold};
+
+                this._component.cols = cols;
+                this._component.rows = rows;
+                this._component.options = options;
+            },
+
+            _updateOptions : function(){
+                var options = {"title": this._component._title, "pieHole": this._component.pieHole, "is3D": this._component.is3D, "sliceVisibilityThreshold": this._component.sliceVisibilityThreshold};
+                this._component.options = options;
+                this._component.$.google_piechart.drawChart();
+            }
+
+        };
+
+
+        PiechartDatalet = Polymer({
+            is: 'google_piechart-datalet',
+
+            properties: {
+
+                behavior : {
+                    type : Object,
+                    value : undefined
+                },
+
+                //inputs
+
+                cols: {
+                    type: Array,
+                    value:undefined
+                },
+
+                rows: {
+                    type: Array,
+                    value: undefined
+                },
+
+                //options
+
+                options: {
+                    type: Object,
+                    value: undefined
+                },
+
+                _title: {//_?
+                    type: String,
+                    value: ""
+                },
+
+                is3D: {
+                    type: Boolean,
+                    value: false
+                },
+
+                pieHole: {
+                    type: Number,
+                    value: 0
+                },
+
+                sliceVisibilityThreshold: {
+                    type: Number,
+                    value: 1/20
+                }
+            },
+
+            observers: [
+                '_updateOptions(_title, is3D, pieHole)'
+            ],
+
+            ready : function(){
+                this.behavior =  $.extend(true, {}, BaseDataletBehavior, WorkcycleBehavior, AjaxJsonJsonPathBehavior, GooglePiechartBehavior);
+                this.async(function(){this.behavior.init(this)}, 0);
+            },
+
+            _updateOptions : function(){
+//                this.async(function(){this.behavior._updateOptions()}, 1000);
+                if(this.behavior)//false on ready
+                    this.behavior._updateOptions();
+            }
+
+        });
+
+    </script>
+
+</dom-module>
\ No newline at end of file
diff --git a/datalets/google_piechart-datalet/google_piechart-datalet.png b/datalets/google_piechart-datalet/google_piechart-datalet.png
new file mode 100644
index 0000000..a797ea3
--- /dev/null
+++ b/datalets/google_piechart-datalet/google_piechart-datalet.png
diff --git a/datalets/google_piechart-datalet/index.html b/datalets/google_piechart-datalet/index.html
new file mode 100644
index 0000000..0188e7b
--- /dev/null
+++ b/datalets/google_piechart-datalet/index.html
@@ -0,0 +1,61 @@
+<html>
+
+<head>
+    <script src="../shared_js/jquery-1.11.2.min.js"></script>
+
+    <script src="../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
+
+
+    <link rel="import" href="../../bower_components/google-chart/google-chart.html"/>
+</head>
+
+<body>
+
+<style>
+    #resizing_chart {
+        height: 600px;
+        width: 600px;
+    }
+</style>
+
+<google-chart
+        id='resizing_chart'
+        type='pie'
+        options='{"title": "Sbiricuda Chart!", "pieHole": "0.5"}'
+        cols='[{"label":"Month", "type":"string"}, {"label":"Days", "type":"number"}]'
+        rows='[["Jan", 31], ["Feb", 28], ["Mar", 31], ["Apr", 11], ["Sbi", 77]]'>
+</google-chart>
+
+</body>
+
+<!--<html>-->
+<!--<head>-->
+    <!--<script type="text/javascript" src="https://www.google.com/jsapi"></script>-->
+    <!--<script type="text/javascript">-->
+        <!--google.load("visualization", "1", {packages:["corechart"]});-->
+        <!--google.setOnLoadCallback(drawChart);-->
+        <!--function drawChart() {-->
+
+            <!--var data = google.visualization.arrayToDataTable([-->
+                <!--['Task', 'Hours per Day'],-->
+                <!--['Work',     11],-->
+                <!--['Eat',      2],-->
+                <!--['Commute',  2],-->
+                <!--['Watch TV', 2],-->
+                <!--['Sleep',    7]-->
+            <!--]);-->
+
+            <!--var options = {-->
+                <!--title: 'My Daily Activities'-->
+            <!--};-->
+
+            <!--var chart = new google.visualization.PieChart(document.getElementById('piechart'));-->
+
+            <!--chart.draw(data, options);-->
+        <!--}-->
+    <!--</script>-->
+<!--</head>-->
+<!--<body>-->
+<!--<div id="piechart" style="width: 900px; height: 500px;"></div>-->
+<!--</body>-->
+<!--</html>-->
\ No newline at end of file