diff options
Diffstat (limited to 'www/lib/angular-google-chart/partials')
| -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 |
6 files changed, 394 insertions, 0 deletions
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' + } +}); + |