From 86e4e291bfda3365c0bb82bacb2b9990a86ce759 Mon Sep 17 00:00:00 2001 From: ARC Date: Sat, 25 Apr 2015 09:13:54 -0400 Subject: First Commit --- .../angular-google-chart/partials/annotation.html | 9 + .../angular-google-chart/partials/annotation.js | 53 ++++++ www/lib/angular-google-chart/partials/fat.html | 80 ++++++++ www/lib/angular-google-chart/partials/fat.js | 204 +++++++++++++++++++++ www/lib/angular-google-chart/partials/generic.html | 9 + www/lib/angular-google-chart/partials/generic.js | 39 ++++ 6 files changed, 394 insertions(+) create mode 100644 www/lib/angular-google-chart/partials/annotation.html create mode 100644 www/lib/angular-google-chart/partials/annotation.js create mode 100644 www/lib/angular-google-chart/partials/fat.html create mode 100644 www/lib/angular-google-chart/partials/fat.js create mode 100644 www/lib/angular-google-chart/partials/generic.html create mode 100644 www/lib/angular-google-chart/partials/generic.js (limited to 'www/lib/angular-google-chart/partials') 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 @@ +

Annotation Chart

+ +
+ Some value to change: +
+ +
+ + 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 @@ +
+

Live edit

+ +
+
+ + + +
+
+ + + +
+ +
+ + + + +
+
+
+ + +
+ + +
+ +
+
+ +
+
+ +
+ + +
    +
  • + +
    • +
+
+
+
+ +
+
+ +
+ + +
+ +

Usage

+ 
<div google-chart chart="chartObject" style="{{cssStyle}}"></div>
+

Setup

+ 
$scope.chartObject = {{chart|json}}
+ +
\ 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: " Shipping " + $scope.chart.data.rows[0].c[4].v + "
"}; + $scope.chart.data.rows[1].c[5] = {v: " Shipping " + $scope.chart.data.rows[1].c[4].v + "
"}; + $scope.chart.data.rows[2].c[5] = {v: " Shipping " + $scope.chart.data.rows[2].c[4].v + "
"}; + } 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 , 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 . + // * 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 @@ +

{{chartObject.type}}

+ +
+ Onions: +
+ +
+ + \ 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' + } +}); + -- cgit v1.2.3