First Commit

14 files changed, 966 insertions, 0 deletions

diff --git a/www/lib/angular-google-chart/.bower.json b/www/lib/angular-google-chart/.bower.json
new file mode 100644
index 00000000..2b95e409
--- /dev/null
+++ b/www/lib/angular-google-chart/.bower.json
@@ -0,0 +1,38 @@
+{
+  "name": "angular-google-chart",
+  "version": "0.0.11",
+  "main": "./ng-google-chart.js",
+  "homepage": "http://bouil.github.io/angular-google-chart/",
+  "authors": [
+    "Nicolas Bouillon <nicolas@bouil.org>",
+    "GitHub Contributors"
+  ],
+  "keywords": [
+    "angular",
+    "angularjs",
+    "google",
+    "chart",
+    "graph"
+  ],
+  "license": "MIT",
+  "ignore": [
+    ".jshintrc",
+    "**/*.txt",
+    "**/.*",
+    "bower_components"
+  ],
+  "dependencies": {
+    "angular": "~1.2.9"
+  },
+  "devDependencies": {},
+  "_release": "0.0.11",
+  "_resolution": {
+    "type": "version",
+    "tag": "0.0.11",
+    "commit": "96a9b1d37c9d30d8666e45fe9d1255290d84951b"
+  },
+  "_source": "git://github.com/bouil/angular-google-chart.git",
+  "_target": "~0.0.11",
+  "_originalSource": "angular-google-chart",
+  "_direct": true
+}
\ No newline at end of file
diff --git a/www/lib/angular-google-chart/README.md b/www/lib/angular-google-chart/README.md
new file mode 100644
index 00000000..0bc35c4a
--- /dev/null
+++ b/www/lib/angular-google-chart/README.md
@@ -0,0 +1,73 @@
+Google Chart Tools Directive Module
+============================
+for AngularJS
+-------------
+
+### Goal
+
+Wrapper directive for [Google Chart Tools](https://google-developers.appspot.com/chart/)
+
+### A note on branches
+
+Developpement branch is `gh-pages`.
+
+Release branch is `master` (idealy), and was created just because Bower needed it.
+
+Please send your pull requests to `gh-pages`.
+
+### Usage and Demo
+
+See sample files index.html and controllers in partials directory. [Live Demo](http://bouil.github.io/angular-google-chart/)
+
+#### Other samples
+
+* http://plnkr.co/edit/3RJ2HS?p=preview
+* http://plnkr.co/edit/E4iPtQ?p=preview
+
+### Chart Data doc
+
+See [ChartWrapper](https://google-developers.appspot.com/chart/interactive/docs/reference#chartwrapperobject) and [DataTable](https://google-developers.appspot.com/chart/interactive/docs/reference#DataTable) documentation.
+
+### Release notes
+
+#### 0.0.11
+
+* Revert to AngularJS 1.2.x as requested by user.
+* Changed Charts API loader config from a constant to a value to accomodate the use of localization localization features.
+* Add before-draw event callback attribute, allowing for last-minute changes from user's javascript (like dynamically resizing chart area for responsive designs).
+* Added French local sample.
+* Fixed issue where changing view properties didn't cause a redraw.
+
+#### 0.0.10
+
+* Fixed bug with Formatter implementation.
+* Fix issue where Select listener function was not called for unselect events.
+* Fixed some issues where drawing the chart triggered another call to draw the chart.
+* `select` attribute is now deprecated, to be removed in a future release.  Replaced with `on-select` to keep naming consistent with `on-ready`.
+
+#### 0.0.9
+
+* Load Google Charts API with https as default protocol.
+* Support for Custom Formatters
+* Added and Reorganized Samples
+* Improved IE Compatability for API Loading
+
+#### 0.0.8
+
+Exposing a factory `googleChartApiPromise` which is a Promise resolved when the `google` global object is correctly initialized.
+
+#### 0.0.7
+
+Removed jQuery dependency.
+
+#### 0.0.3
+
+Advanced chart formatter are available. Therefore, compatibility is broken withe the previous version of NumberFormat. Check the demo for usage.
+
+#### 0.0.2
+
+The module is now named `googlechart` (instead of `googlechart.directives`)
+
+### Out of luck ?
+
+Try another AngularJS directive that use [Highcharts](https://github.com/pablojim/highcharts-ng).
diff --git a/www/lib/angular-google-chart/bower.json b/www/lib/angular-google-chart/bower.json
new file mode 100644
index 00000000..c1484246
--- /dev/null
+++ b/www/lib/angular-google-chart/bower.json
@@ -0,0 +1,28 @@
+{
+    "name": "angular-google-chart",
+    "version": "0.0.11",
+    "main": "./ng-google-chart.js",
+    "homepage": "http://bouil.github.io/angular-google-chart/",
+    "authors": [
+        "Nicolas Bouillon <nicolas@bouil.org>",
+        "GitHub Contributors"
+    ],
+    "keywords": [
+        "angular",
+        "angularjs",
+        "google",
+        "chart",
+        "graph"
+    ],
+    "license": "MIT",
+    "ignore": [
+        ".jshintrc",
+        "**/*.txt",
+        "**/.*",
+        "bower_components"
+    ],
+    "dependencies": {
+        "angular": "~1.2.9"
+    },
+    "devDependencies": {}
+}
diff --git a/www/lib/angular-google-chart/index.html b/www/lib/angular-google-chart/index.html
new file mode 100644
index 00000000..c4d77463
--- /dev/null
+++ b/www/lib/angular-google-chart/index.html
@@ -0,0 +1,96 @@
+<?xml version="1.0" ?>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <!-- Latest compiled and minified CSS -->
+    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
+    <!-- Optional theme -->
+    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap-theme.min.css">
+    <!-- Latest compiled and minified JavaScript -->
+    <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
+    <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
+    <link href="style.css" rel="stylesheet">
+    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
+    <!--[if lt IE 9]>
+    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+    <title>Google Chart Tools AngularJS Directive </title>
+</head>
+<body ng-app="google-chart-sample" ng-cloak="">
+<div class="navbar navbar-default navbar-fixed-top" role="navigation">
+    <div class="container">
+        <div class="navbar-header">
+            <a href="#" class="navbar-brand">angular-google-chart</a>
+        </div>
+        <div class="navbar-collapse collapse">
+            <ul class="nav navbar-nav">
+                <li>
+                    <a href="https://github.com/bouil/angular-google-chart"><i class="fa fa-github"></i>
+                        Github</a>
+                </li>
+                <li class="dropdown">
+                    <a href="" class="dropdown-toggle" style="cursor: pointer" data-toggle="dropdown">Samples <b
+                            class="caret"></b></a>
+                    <ul class="dropdown-menu">
+                        <li><a href="#/generic/BarChart"><i class="fa fa-bars"></i> Bar chart</a></li>
+                        <li><a href="#/generic/ColumnChart"><i class="fa fa-bar-chart-o"></i> Column chart</a></li>
+                        <li><a href="#/generic/PieChart"><i class="fa fa-circle"></i> Pie chart</a></li>
+                        <li><a href="#/generic/LineChart">Line chart</a></li>
+                        <li><a href="#/annotation">Annotation chart</a></li>
+                        <li class="divider"></li>
+                        <li class="dropdown-header">All together</li>
+                        <li><a href="#/fat">Mutli charts sample</a></li>
+                    </ul>
+                </li>
+                <li><a href="http://code.google.com/apis/chart/"><i class="fa fa-question-circle"></i> Chart reference
+                    at Google</a></li>
+            </ul>
+        </div>
+        <!--/.nav-collapse -->
+    </div>
+</div>
+<div class="container">
+    <div class="row">
+        <div class="col-xs-12" style="text-align: center;">
+            <h1>AngularJs Google Chart Tools directive</h1>
+            <hr/>
+        </div>
+    </div>
+    <div class="row">
+        <div ng-view></div>
+    </div>
+
+</div>
+</div>
+</div>
+<!-- jQuery imported here only for Bootstrap.js and for this sample functions. It's not needed for the directive itself. -->
+<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
+<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
+<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script>
+<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular-route.min.js"></script>
+<script src="ng-google-chart.js"></script>
+<script src="sample.js"></script>
+<script src="partials/annotation.js"></script>
+<script src="partials/generic.js"></script>
+<script src="partials/fat.js"></script>
+<!-- Google Analytics -->
+<script>
+    (function (i, s, o, g, r, a, m) {
+        i['GoogleAnalyticsObject'] = r;
+        i[r] = i[r] || function () {
+            (i[r].q = i[r].q || []).push(arguments)
+        }, i[r].l = 1 * new Date();
+        a = s.createElement(o),
+                m = s.getElementsByTagName(o)[0];
+        a.async = 1;
+        a.src = g;
+        m.parentNode.insertBefore(a, m)
+    })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
+
+    ga('create', 'UA-3451018-11', 'github.io');
+    ga('send', 'pageview');
+</script>
+</body>
+</html>
diff --git a/www/lib/angular-google-chart/ng-google-chart.js b/www/lib/angular-google-chart/ng-google-chart.js
new file mode 100644
index 00000000..16c7e1cb
--- /dev/null
+++ b/www/lib/angular-google-chart/ng-google-chart.js
@@ -0,0 +1,261 @@
+/**
+ * @description Google Chart Api Directive Module for AngularJS
+ * @version 0.0.11
+ * @author Nicolas Bouillon <nicolas@bouil.org>
+ * @author GitHub contributors
+ * @license MIT
+ * @year 2013
+ */
+(function (document, window, angular) {
+    'use strict';
+
+    angular.module('googlechart', [])
+
+        .value('googleChartApiConfig', {
+            version: '1',
+            optionalSettings: {
+                packages: ['corechart']
+            }
+        })
+
+        .provider('googleJsapiUrl', function () {
+            var protocol = 'https:';
+            var url = '//www.google.com/jsapi';
+
+            this.setProtocol = function(newProtocol) {
+                protocol = newProtocol;
+            };
+
+            this.setUrl = function(newUrl) {
+                url = newUrl;
+            };
+
+            this.$get = function() {
+                return (protocol ? protocol : '') + url;
+            };
+        })
+        .factory('googleChartApiPromise', ['$rootScope', '$q', 'googleChartApiConfig', 'googleJsapiUrl', function ($rootScope, $q, apiConfig, googleJsapiUrl) {
+            var apiReady = $q.defer();
+            var onLoad = function () {
+                // override callback function
+                var settings = {
+                    callback: function () {
+                        var oldCb = apiConfig.optionalSettings.callback;
+                        $rootScope.$apply(function () {
+                            apiReady.resolve();
+                        });
+
+                        if (angular.isFunction(oldCb)) {
+                            oldCb.call(this);
+                        }
+                    }
+                };
+
+                settings = angular.extend({}, apiConfig.optionalSettings, settings);
+
+                window.google.load('visualization', apiConfig.version, settings);
+            };
+            var head = document.getElementsByTagName('head')[0];
+            var script = document.createElement('script');
+
+            script.setAttribute('type', 'text/javascript');
+            script.src = googleJsapiUrl;
+
+            if (script.addEventListener) { // Standard browsers (including IE9+)
+                script.addEventListener('load', onLoad, false);
+            } else { // IE8 and below
+                script.onreadystatechange = function () {
+                    if (script.readyState === 'loaded' || script.readyState === 'complete') {
+                        script.onreadystatechange = null;
+                        onLoad();
+                    }
+                };
+            }
+
+            head.appendChild(script);
+
+            return apiReady.promise;
+        }])
+        .directive('googleChart', ['$timeout', '$window', '$rootScope', 'googleChartApiPromise', function ($timeout, $window, $rootScope, googleChartApiPromise) {
+            return {
+                restrict: 'A',
+                scope: {
+                    beforeDraw: '&',
+                    chart: '=chart',
+                    onReady: '&',
+                    onSelect: '&',
+                    select: '&'
+                },
+                link: function ($scope, $elm, $attrs) {
+                    /* Watches, to refresh the chart when its data, formatters, options, view,
+                        or type change. All other values intentionally disregarded to avoid double
+                        calls to the draw function. Please avoid making changes to these objects
+                        directly from this directive.*/
+                    $scope.$watch(function () {
+                        if ($scope.chart) {
+                            return {
+                                customFormatters: $scope.chart.customFormatters,
+                                data: $scope.chart.data,
+                                formatters: $scope.chart.formatters,
+                                options: $scope.chart.options,
+                                type: $scope.chart.type,
+                                view: $scope.chart.view
+                            };
+                        }
+                        return $scope.chart;
+                    }, function () {
+                        drawAsync();
+                    }, true); // true is for deep object equality checking
+
+                    // Redraw the chart if the window is resized
+                    var resizeHandler = $rootScope.$on('resizeMsg', function () {
+                        $timeout(function () {
+                            // Not always defined yet in IE so check
+                            if($scope.chartWrapper) {
+                                drawAsync();
+                            }
+                        });
+                    });
+
+                    //Cleanup resize handler.
+                    $scope.$on('$destroy', function () {
+                        resizeHandler();
+                    });
+
+                    // Keeps old formatter configuration to compare against
+                    $scope.oldChartFormatters = {};
+
+                    function applyFormat(formatType, formatClass, dataTable) {
+
+                        if (typeof($scope.chart.formatters[formatType]) != 'undefined') {
+                            if (!angular.equals($scope.chart.formatters[formatType], $scope.oldChartFormatters[formatType])) {
+                                $scope.oldChartFormatters[formatType] = $scope.chart.formatters[formatType];
+                                $scope.formatters[formatType] = [];
+
+                                if (formatType === 'color') {
+                                    for (var cIdx = 0; cIdx < $scope.chart.formatters[formatType].length; cIdx++) {
+                                        var colorFormat = new formatClass();
+
+                                        for (i = 0; i < $scope.chart.formatters[formatType][cIdx].formats.length; i++) {
+                                            var data = $scope.chart.formatters[formatType][cIdx].formats[i];
+
+                                            if (typeof(data.fromBgColor) != 'undefined' && typeof(data.toBgColor) != 'undefined')
+                                                colorFormat.addGradientRange(data.from, data.to, data.color, data.fromBgColor, data.toBgColor);
+                                            else
+                                                colorFormat.addRange(data.from, data.to, data.color, data.bgcolor);
+                                        }
+
+                                        $scope.formatters[formatType].push(colorFormat)
+                                    }
+                                } else {
+
+                                    for (var i = 0; i < $scope.chart.formatters[formatType].length; i++) {
+                                        $scope.formatters[formatType].push(new formatClass(
+                                            $scope.chart.formatters[formatType][i])
+                                        );
+                                    }
+                                }
+                            }
+
+
+                            //apply formats to dataTable
+                            for (i = 0; i < $scope.formatters[formatType].length; i++) {
+                                if ($scope.chart.formatters[formatType][i].columnNum < dataTable.getNumberOfColumns())
+                                    $scope.formatters[formatType][i].format(dataTable, $scope.chart.formatters[formatType][i].columnNum);
+                            }
+
+
+                            //Many formatters require HTML tags to display special formatting
+                            if (formatType === 'arrow' || formatType === 'bar' || formatType === 'color')
+                                $scope.chart.options.allowHtml = true;
+                        }
+                    }
+
+                    function draw() {
+                        if (!draw.triggered && ($scope.chart != undefined)) {
+                            draw.triggered = true;
+                            $timeout(function () {
+
+                                if (typeof ($scope.chartWrapper) == 'undefined') {
+                                    var chartWrapperArgs = {
+                                        chartType: $scope.chart.type,
+                                        dataTable: $scope.chart.data,
+                                        view: $scope.chart.view,
+                                        options: $scope.chart.options,
+                                        containerId: $elm[0]
+                                    };
+
+                                    $scope.chartWrapper = new google.visualization.ChartWrapper(chartWrapperArgs);
+                                    google.visualization.events.addListener($scope.chartWrapper, 'ready', function () {
+                                        $scope.chart.displayed = true;
+                                        $scope.$apply(function (scope) {
+                                            scope.onReady({ chartWrapper: scope.chartWrapper });
+                                        });
+                                    });
+                                    google.visualization.events.addListener($scope.chartWrapper, 'error', function (err) {
+                                        console.log("Chart not displayed due to error: " + err.message + ". Full error object follows.");
+                                        console.log(err);
+                                    });
+                                    google.visualization.events.addListener($scope.chartWrapper, 'select', function () {
+                                        var selectedItem = $scope.chartWrapper.getChart().getSelection()[0];
+                                        $scope.$apply(function () {
+                                            if ($attrs.select) {
+                                                console.log('Angular-Google-Chart: The \'select\' attribute is deprecated and will be removed in a future release.  Please use \'onSelect\'.');
+                                                $scope.select({ selectedItem: selectedItem });
+                                            }
+                                            else {
+                                                $scope.onSelect({ selectedItem: selectedItem });
+                                            }
+                                        });
+                                    });
+                                }
+                                else {
+                                    $scope.chartWrapper.setChartType($scope.chart.type);
+                                    $scope.chartWrapper.setDataTable($scope.chart.data);
+                                    $scope.chartWrapper.setView($scope.chart.view);
+                                    $scope.chartWrapper.setOptions($scope.chart.options);
+                                }
+
+                                if (typeof($scope.formatters) === 'undefined')
+                                    $scope.formatters = {};
+
+                                if (typeof($scope.chart.formatters) != 'undefined') {
+                                    applyFormat("number", google.visualization.NumberFormat, $scope.chartWrapper.getDataTable());
+                                    applyFormat("arrow", google.visualization.ArrowFormat, $scope.chartWrapper.getDataTable());
+                                    applyFormat("date", google.visualization.DateFormat, $scope.chartWrapper.getDataTable());
+                                    applyFormat("bar", google.visualization.BarFormat, $scope.chartWrapper.getDataTable());
+                                    applyFormat("color", google.visualization.ColorFormat, $scope.chartWrapper.getDataTable());
+                                }
+
+                                var customFormatters = $scope.chart.customFormatters;
+                                if (typeof(customFormatters) != 'undefined') {
+                                    for (var name in customFormatters) {
+                                        applyFormat(name, customFormatters[name], $scope.chartWrapper.getDataTable());
+                                    }
+                                }
+
+                                $timeout(function () {
+                                    $scope.beforeDraw({ chartWrapper: $scope.chartWrapper });
+                                    $scope.chartWrapper.draw();
+                                    draw.triggered = false;
+                                });
+                            }, 0, true);
+                        }
+                    }
+
+                    function drawAsync() {
+                        googleChartApiPromise.then(function () {
+                            draw();
+                        })
+                    }
+                }
+            };
+        }])
+
+        .run(['$rootScope', '$window', function ($rootScope, $window) {
+            angular.element($window).bind('resize', function () {
+                $rootScope.$emit('resizeMsg');
+            });
+        }]);
+
+})(document, window, window.angular);
diff --git a/www/lib/angular-google-chart/package.json b/www/lib/angular-google-chart/package.json
new file mode 100644
index 00000000..9673374b
--- /dev/null
+++ b/www/lib/angular-google-chart/package.json
@@ -0,0 +1,22 @@
+{
+    "name": "angular-google-chart",
+    "version": "0.0.11",
+    "main": "./ng-google-chart.js",
+    "homepage": "http://bouil.github.io/angular-google-chart/",
+    "author": {
+      "name": "Nicolas Bouillon",
+      "email": "nicolas@bouil.org"
+    },
+    "keywords": [
+        "angular",
+        "angularjs",
+        "google",
+        "chart",
+        "graph"
+    ],
+    "license": "MIT",
+    "dependencies": {
+        "angular": "~1.2.9"
+    },
+    "devDependencies": {}
+}
diff --git a/www/lib/angular-google-chart/partials/annotation.html b/www/lib/angular-google-chart/partials/annotation.html
new file mode 100644
index 00000000..d2a2700f
--- /dev/null
+++ b/www/lib/angular-google-chart/partials/annotation.html
@@ -0,0 +1,9 @@
+<h1>Annotation Chart</h1>
+
+<div>
+    Some value to change: <input type="number" ng-model="secondRow[1].v" />
+</div>
+
+<div google-chart chart="chartObject" style="height:600px; width:100%;"></div>
+
+<iframe src="partials/annotation.js" style="width:90%; height: 600px; margin: 1%; border: 1px solid black;" frameborder="0"></iframe>
diff --git a/www/lib/angular-google-chart/partials/annotation.js b/www/lib/angular-google-chart/partials/annotation.js
new file mode 100644
index 00000000..4ba31aca
--- /dev/null
+++ b/www/lib/angular-google-chart/partials/annotation.js
@@ -0,0 +1,53 @@
+angular.module("google-chart-sample").controller("AnnotationChartCtrl", function ($scope, googleChartApiPromise) {
+    $scope.chartObject = {};
+
+    $scope.secondRow = [
+        {v: new Date(2314, 2, 16)},
+        {v: 13},
+        {v: 'Lalibertines'},
+        {v: 'They are very tall'},
+        {v: 25},
+        {v: 'Gallantors'},
+        {v: 'First Encounter'}
+    ];
+
+
+    $scope.chartObject.type = "AnnotationChart";
+
+    $scope.chartObject.data = {"cols": [
+        {id: "month", label: "Month", type: "date"},
+        {id: "kepler-data", label: "Kepler-22b mission", type: "number"},
+        {id: "kepler-annot", label: "Kepler-22b Annotation Title", type: "string"},
+        {id: "kepler-annot-body", label: "Kepler-22b Annotation Text", type: "string"},
+        {id: "desktop-data", label: "Gliese mission", type: "number"},
+        {id: "desktop-annot", label: "Gliese Annotation Title", type: "string"},
+        {id: "desktop-annot-body", label: "Gliese Annotaioon Text", type: "string"}
+    ], "rows": [
+        {c: [
+            {v: new Date(2314, 2, 15)},
+            {v: 19 },
+            {v: 'Lalibertines'},
+            {v: 'First encounter'},
+            {v: 7},
+            {v: undefined},
+            {v: undefined}
+        ]},
+        {c: $scope.secondRow},
+        {c: [
+            {v: new Date(2314, 2, 17)},
+            {v: 0},
+            {v: 'Lalibertines'},
+            {v: 'All crew lost'},
+            {v: 28},
+            {v: 'Gallantors'},
+            {v: 'Omniscience achieved'}
+
+        ]}
+    ]};
+
+    $scope.chartObject.options = {
+        displayAnnotations: true
+    };
+
+
+});
\ No newline at end of file
diff --git a/www/lib/angular-google-chart/partials/fat.html b/www/lib/angular-google-chart/partials/fat.html
new file mode 100644
index 00000000..7a2eca5c
--- /dev/null
+++ b/www/lib/angular-google-chart/partials/fat.html
@@ -0,0 +1,80 @@
+<div class="col-xs-5">
+    <h2>Live edit</h2>
+
+    <form class="form-horizontal" role="form">
+        <div class="form-group ">
+            <label class="control-label"
+                   for="chart-data-rows-1-3-v">February server sale units</label>
+
+            <input class="form-control" type="number" min="0" max="100" ng-model="chart.data.rows[1].c[3].v"
+                   id="chart-data-rows-1-3-v"/>
+        </div>
+        <div class="form-group">
+            <label class="control-label"
+                   for="chart-options-vAxis-gridlines-count">Number of grid lines</label>
+
+            <input class="form-control" type="number" min="0" max="100" ng-model="chart.options.vAxis.gridlines.count"
+                   id="chart-options-vAxis-gridlines-count"/>
+        </div>
+
+        <div class="form-group">
+            <label for="chartType">Chart type</label>
+
+            <select class="form-control" id="chartType" ng-model="chart.type" ng-change="chartSelectionChange()">
+                <option value="AreaChart">AreaChart</option>
+                <option value="PieChart">PieChart</option>
+                <option value="ColumnChart">ColumnChart</option>
+                <option value="LineChart">LineChart</option>
+                <option value="Table">Table</option>
+                <option value="BarChart">BarChart</option>
+            </select>
+
+        </div>
+        <div class="form-group">
+            <div class="checkbox">
+                <label for="hideServer">
+                    <input id="hideServer" type="checkbox" ng-model="hideServer"
+                           ng-change="selectionChange()"/>
+                    Hide Server</label>
+
+            </div>
+
+
+        </div>
+
+        <div class="form-group">
+            <div class="checkbox">
+                <label for="htmlTooltip" ng-show="chart.type!='Table'">
+                    <input id="htmlTooltip" type="checkbox" ng-model="chart.options.tooltip.isHtml"
+                           ng-change="htmlTooltip()"/>
+                    HTML Tooltip
+                </label>
+            </div>
+        </div>
+
+        <div class="form-group" ng-show="chart.type=='Table'">
+            <label for="chartType">Format</label>
+
+            <ul class="inputs-list">
+                <li ng-repeat="format in formatCollection">
+                    <button class="btn primary" ng-click="toggleFormat(format)">{{format.name}}</button>
+                </li>
+            </ul>
+        </div>
+    </form>
+</div>
+
+<div class="col-xs-7">
+    <div google-chart chart="chart" style="{{cssStyle}}" on-ready="chartReady()"></div>
+    <!-- explicit close of tag seems to be necessary -->
+</div>
+
+
+<div class="col-xs-12">
+
+    <h2>Usage</h2>
+    <pre ng-non-bindable>&lt;div google-chart chart="chartObject" style="{{cssStyle}}"&gt;&lt;/div&gt;</pre>
+    <h2>Setup</h2>
+    <pre>$scope.chartObject = {{chart|json}}</pre>
+
+</div>
\ No newline at end of file
diff --git a/www/lib/angular-google-chart/partials/fat.js b/www/lib/angular-google-chart/partials/fat.js
new file mode 100644
index 00000000..ee8109ef
--- /dev/null
+++ b/www/lib/angular-google-chart/partials/fat.js
@@ -0,0 +1,204 @@
+'use strict';
+
+angular.module('google-chart-sample').controller("FatChartCtrl", function ($scope) {
+
+    var chart1 = {};
+    chart1.type = "AreaChart";
+    chart1.displayed = false;
+    chart1.data = {"cols": [
+        {id: "month", label: "Month", type: "string"},
+        {id: "laptop-id", label: "Laptop", type: "number"},
+        {id: "desktop-id", label: "Desktop", type: "number"},
+        {id: "server-id", label: "Server", type: "number"},
+        {id: "cost-id", label: "Shipping", type: "number"}
+    ], "rows": [
+        {c: [
+            {v: "January"},
+            {v: 19, f: "42 items"},
+            {v: 12, f: "Ony 12 items"},
+            {v: 7, f: "7 servers"},
+            {v: 4}
+        ]},
+        {c: [
+            {v: "February"},
+            {v: 13},
+            {v: 1, f: "1 unit (Out of stock this month)"},
+            {v: 12},
+            {v: 2}
+        ]},
+        {c: [
+            {v: "March"},
+            {v: 24},
+            {v: 5},
+            {v: 11},
+            {v: 6}
+
+        ]}
+    ]};
+
+    chart1.options = {
+        "title": "Sales per month",
+        "isStacked": "true",
+        "fill": 20,
+        "displayExactValues": true,
+        "vAxis": {
+            "title": "Sales unit", "gridlines": {"count": 10}
+        },
+        "hAxis": {
+            "title": "Date"
+        }
+    };
+
+
+    var formatCollection = [
+        {
+            name: "color",
+            format: [
+                {
+                    columnNum: 4,
+                    formats: [
+                        {
+                            from: 0,
+                            to: 3,
+                            color: "white",
+                            bgcolor: "red"
+                        },
+                        {
+                            from: 3,
+                            to: 5,
+                            color: "white",
+                            fromBgColor: "red",
+                            toBgColor: "blue"
+                        },
+                        {
+                            from: 6,
+                            to: null,
+                            color: "black",
+                            bgcolor: "#33ff33"
+                        }
+                    ]
+                }
+            ]
+        },
+        {
+            name: "arrow",
+            checked: false,
+            format: [
+                {
+                    columnNum: 1,
+                    base: 19
+                }
+            ]
+        },
+        {
+            name: "date",
+            format: [
+                {
+                    columnNum: 5,
+                    formatType: 'long'
+                }
+            ]
+        },
+        {
+            name: "number",
+            format: [
+                {
+                    columnNum: 4,
+                    prefix: '$'
+                }
+            ]
+        },
+        {
+            name: "bar",
+            format: [
+                {
+                    columnNum: 1,
+                    width: 100
+                }
+            ]
+        }
+    ]
+
+    chart1.formatters = {};
+
+    $scope.chart = chart1;
+    $scope.cssStyle = "height:600px; width:100%;";
+
+    $scope.chartSelectionChange = function () {
+
+        if (($scope.chart.type === 'Table' && $scope.chart.data.cols.length === 6 && $scope.chart.options.tooltip.isHtml === true) ||
+            ($scope.chart.type != 'Table' && $scope.chart.data.cols.length === 6 && $scope.chart.options.tooltip.isHtml === false)) {
+            $scope.chart.data.cols.pop();
+            delete $scope.chart.data.rows[0].c[5];
+            delete $scope.chart.data.rows[1].c[5];
+            delete $scope.chart.data.rows[2].c[5];
+        }
+
+
+        if ($scope.chart.type === 'Table') {
+
+            $scope.chart.options.tooltip.isHtml = false;
+
+            $scope.chart.data.cols.push({id: "data-id", label: "Date", type: "date"});
+            $scope.chart.data.rows[0].c[5] = {v: "Date(2013,01,05)"};
+            $scope.chart.data.rows[1].c[5] = {v: "Date(2013,02,05)"};
+            $scope.chart.data.rows[2].c[5] = {v: "Date(2013,03,05)"};
+        }
+
+    }
+
+
+    $scope.htmlTooltip = function () {
+
+        if ($scope.chart.options.tooltip.isHtml) {
+            $scope.chart.data.cols.push({id: "", "role": "tooltip", "type": "string", "p": { "role": "tooltip", 'html': true} });
+            $scope.chart.data.rows[0].c[5] = {v: " <b>Shipping " + $scope.chart.data.rows[0].c[4].v + "</b><br /><img src=\"http://icons.iconarchive.com/icons/antrepo/container-4-cargo-vans/512/Google-Shipping-Box-icon.png\" style=\"height:85px\" />"};
+            $scope.chart.data.rows[1].c[5] = {v: " <b>Shipping " + $scope.chart.data.rows[1].c[4].v + "</b><br /><img src=\"http://icons.iconarchive.com/icons/antrepo/container-4-cargo-vans/512/Google-Shipping-Box-icon.png\" style=\"height:85px\" />"};
+            $scope.chart.data.rows[2].c[5] = {v: " <b>Shipping " + $scope.chart.data.rows[2].c[4].v + "</b><br /><img src=\"http://icons.iconarchive.com/icons/antrepo/container-4-cargo-vans/512/Google-Shipping-Box-icon.png\" style=\"height:85px\" />"};
+        } else {
+            $scope.chart.data.cols.pop();
+            delete $scope.chart.data.rows[0].c[5];
+            delete $scope.chart.data.rows[1].c[5];
+            delete $scope.chart.data.rows[2].c[5];
+        }
+    }
+
+
+    $scope.hideServer = false;
+    $scope.selectionChange = function () {
+        if ($scope.hideServer) {
+            $scope.chart.view = {columns: [0, 1, 2, 4]};
+        } else {
+            $scope.chart.view = {};
+        }
+    }
+
+    $scope.formatCollection = formatCollection;
+    $scope.toggleFormat = function (format) {
+        $scope.chart.formatters[format.name] = format.format;
+    };
+
+    $scope.chartReady = function () {
+        fixGoogleChartsBarsBootstrap();
+    }
+
+    function fixGoogleChartsBarsBootstrap() {
+        // Google charts uses <img height="12px">, which is incompatible with Twitter
+        // * bootstrap in responsive mode, which inserts a css rule for: img { height: auto; }.
+        // *
+        // * The fix is to use inline style width attributes, ie <img style="height: 12px;">.
+        // * BUT we can't change the way Google Charts renders its bars. Nor can we change
+        // * the Twitter bootstrap CSS and remain future proof.
+        // *
+        // * Instead, this function can be called after a Google charts render to "fix" the
+        // * issue by setting the style attributes dynamically.
+
+        $(".google-visualization-table-table img[width]").each(function (index, img) {
+            $(img).css("width", $(img).attr("width")).css("height", $(img).attr("height"));
+        });
+    };
+
+});
+
+
+
diff --git a/www/lib/angular-google-chart/partials/generic.html b/www/lib/angular-google-chart/partials/generic.html
new file mode 100644
index 00000000..ea7c37b9
--- /dev/null
+++ b/www/lib/angular-google-chart/partials/generic.html
@@ -0,0 +1,9 @@
+<h1>{{chartObject.type}}</h1>
+
+<div>
+    Onions: <input type="number" ng-model="onions[1].v" />
+</div>
+
+<div google-chart chart="chartObject" style="height:600px; width:100%;"></div>
+
+<iframe src="partials/generic.js" style="width:90%; height: 600px; margin: 1%; border: 1px solid black;" frameborder="0"></iframe>
\ No newline at end of file
diff --git a/www/lib/angular-google-chart/partials/generic.js b/www/lib/angular-google-chart/partials/generic.js
new file mode 100644
index 00000000..6521e7d5
--- /dev/null
+++ b/www/lib/angular-google-chart/partials/generic.js
@@ -0,0 +1,39 @@
+angular.module("google-chart-sample").controller("GenericChartCtrl", function ($scope, $routeParams) {
+    $scope.chartObject = {};
+
+    $scope.onions = [
+        {v: "Onions"},
+        {v: 3},
+    ];
+
+    $scope.chartObject.data = {"cols": [
+        {id: "t", label: "Topping", type: "string"},
+        {id: "s", label: "Slices", type: "number"}
+    ], "rows": [
+        {c: [
+            {v: "Mushrooms"},
+            {v: 3},
+        ]},
+        {c: $scope.onions},
+        {c: [
+            {v: "Olives"},
+            {v: 31}
+        ]},
+        {c: [
+            {v: "Zucchini"},
+            {v: 1},
+        ]},
+        {c: [
+            {v: "Pepperoni"},
+            {v: 2},
+        ]}
+    ]};
+
+
+    // $routeParams.chartType == BarChart or PieChart or ColumnChart...
+    $scope.chartObject.type = $routeParams.chartType;
+    $scope.chartObject.options = {
+        'title': 'How Much Pizza I Ate Last Night'
+    }
+});
+
diff --git a/www/lib/angular-google-chart/sample.js b/www/lib/angular-google-chart/sample.js
new file mode 100644
index 00000000..4ed46fff
--- /dev/null
+++ b/www/lib/angular-google-chart/sample.js
@@ -0,0 +1,25 @@
+angular.module("google-chart-sample", ["ngRoute", "googlechart"]).config(['$routeProvider',
+    function ($routeProvider) {
+        $routeProvider.
+            when('/fat', {
+                templateUrl: 'partials/fat.html',
+                controller: 'FatChartCtrl'
+            }).
+            when('/annotation', {
+                templateUrl: 'partials/annotation.html',
+                controller: 'AnnotationChartCtrl'
+            }).
+            when('/generic/:chartType', {
+                templateUrl: 'partials/generic.html',
+                controller: 'GenericChartCtrl'
+            }).
+            otherwise({
+                redirectTo: '/fat'
+            });
+    }]).value('googleChartApiConfig', {
+            version: '1',
+            optionalSettings: {
+                packages: ['corechart'],
+                language: 'fr'
+            }
+    });
diff --git a/www/lib/angular-google-chart/style.css b/www/lib/angular-google-chart/style.css
new file mode 100644
index 00000000..887ce12e
--- /dev/null
+++ b/www/lib/angular-google-chart/style.css
@@ -0,0 +1,29 @@
+
+[ng-cloak] {
+    display: none;
+}
+
+body {
+    padding: 20px;
+    padding-top: 60px;
+    padding-bottom: 40px;
+}
+
+table td.number {
+    text-align: right;
+}
+
+.navbar-fixed-top {
+    z-index: 1111;
+}
+
+.inputs-list li {
+    display: inline-block;
+    margin-right: 20px;
+}
+
+.inputs-list > li input[type="checkbox"] {
+    margin: 0;
+}
+
+