diff options
Diffstat (limited to 'www/lib/angular-google-chart')
| -rw-r--r-- | www/lib/angular-google-chart/.bower.json | 38 | ||||
| -rw-r--r-- | www/lib/angular-google-chart/README.md | 73 | ||||
| -rw-r--r-- | www/lib/angular-google-chart/bower.json | 28 | ||||
| -rw-r--r-- | www/lib/angular-google-chart/index.html | 96 | ||||
| -rw-r--r-- | www/lib/angular-google-chart/ng-google-chart.js | 261 | ||||
| -rw-r--r-- | www/lib/angular-google-chart/package.json | 22 | ||||
| -rw-r--r-- | www/lib/angular-google-chart/partials/annotation.html | 9 | ||||
| -rw-r--r-- | www/lib/angular-google-chart/partials/annotation.js | 53 | ||||
| -rw-r--r-- | www/lib/angular-google-chart/partials/fat.html | 80 | ||||
| -rw-r--r-- | www/lib/angular-google-chart/partials/fat.js | 204 | ||||
| -rw-r--r-- | www/lib/angular-google-chart/partials/generic.html | 9 | ||||
| -rw-r--r-- | www/lib/angular-google-chart/partials/generic.js | 39 | ||||
| -rw-r--r-- | www/lib/angular-google-chart/sample.js | 25 | ||||
| -rw-r--r-- | www/lib/angular-google-chart/style.css | 29 |
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><div google-chart chart="chartObject" style="{{cssStyle}}"></div></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; +} + + |