Merge pull request #1 from hailocab/DAT-694

Add line, bar and scatter as new graphs
hailocab · Feb 4, 2014 · a6d7274 · a6d7274
2 parents 1865ca9 + 886b7fd
commit a6d7274
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 14 deletions.
diff --git a/rd_ui/app/scripts/controllers.js b/rd_ui/app/scripts/controllers.js
@@ -71,7 +71,18 @@
 
         $scope.tabs = [{'key': 'table', 'name': 'Table'}, {'key': 'chart', 'name': 'Chart'},
                        {'key': 'pivot', 'name': 'Pivot Table'}, {'key': 'cohort', 'name': 'Cohort'}];
-
+
+        $scope.chartType = 'line';
+        $scope.chartTypes = [
+          {value: 'line', name: 'Line'},
+          {value: 'bar', name: 'Bar'},
+          {value: 'scatter', name: 'Scattered Plot'}
+        ];
+
+        $scope.updateChartType = function() {
+            $scope.$broadcast('chart-type-changed', $scope.chartType);
+        };
+
         $scope.lockButton = function (lock) {
             $scope.queryExecuting = lock;
         };

diff --git a/rd_ui/app/scripts/ng-highchart.js b/rd_ui/app/scripts/ng-highchart.js
@@ -29,7 +29,16 @@ angular.module('highchart', [])
                 // Making sure that the DOM is ready before creating the chart element, so it gets proper width.
                 $timeout(function(){
                     scope.chart = new Highcharts.Chart(newSettings);
-
+
+                    //Update chart type when type changes
+                    scope.$on('chart-type-changed', function(event, type){
+                        _.each(scope.chart.series, function(s){
+                            s.update({
+                                'type': type
+                            });
+                        });
+                    });
+
                     //Update when charts data changes
                     scope.$watch(function () {
                         return (scope.series && scope.series.length) || 0;

diff --git a/rd_ui/app/scripts/query_fiddle/renderers.js b/rd_ui/app/scripts/query_fiddle/renderers.js
@@ -1,9 +1,9 @@
 var renderers = angular.module('redash.renderers', []);
 var defaultChartOptions = {
-    "title": {
-        "text": null
+    title: {
+        text: null
     },
-    "tooltip": {
+    tooltip: {
         valueDecimals: 2,
         formatter: function () {
             if (moment.isMoment(this.x)) {
@@ -68,12 +68,39 @@ var defaultChartOptions = {
         enabled: false
     },
     plotOptions: {
-        "column": {
-            "stacking": "normal",
-            "pointPadding": 0,
-            "borderWidth": 1,
-            "groupPadding": 0,
-            "shadow": false
+        column: {
+            stacking: "normal",
+            pointPadding: 0,
+            borderWidth: 1,
+            groupPadding: 0,
+            shadow: false
+        },
+        line: {
+            dataLabels: {
+                enabled: true
+            }
+        },
+        scatter: {
+            marker: {
+                radius: 5,
+                states: {
+                    hover: {
+                        enabled: true,
+                        lineColor: 'rgb(100,100,100)'
+                    }
+                }
+            },
+            states: {
+                hover: {
+                    marker: {
+                        enabled: false
+                    }
+                }
+            },
+            tooltip: {
+                headerFormat: '<b>{series.name}</b><br>',
+                pointFormat: '{point.x} cm, {point.y} kg'
+            }
         }
     },
     "series": []
@@ -102,7 +129,7 @@ renderers.directive('chartRenderer', function () {
                     if ($scope.stacking() === undefined) {
                         stacking = 'normal';
                     }
-
+                    
                     _.each($scope.queryResult.getChartData(), function (s) {
                         $scope.chartSeries.push(_.extend(s, {'stacking': stacking}));
                     });

diff --git a/rd_ui/app/scripts/services.js b/rd_ui/app/scripts/services.js
@@ -117,7 +117,6 @@
                     if (series[seriesName] == undefined) {
                         series[seriesName] = {
                             name: seriesName,
-                            type: 'column',
                             data: []
                         }
                     }

diff --git a/rd_ui/app/styles/redash.css b/rd_ui/app/styles/redash.css
@@ -193,4 +193,10 @@ to add those CSS styles here. */
     -webkit-border-radius: 6px 0 6px 6px;
     -moz-border-radius: 6px 0 6px 6px;
     border-radius: 6px 0 6px 6px;
+}
+
+/* Charts */
+.chart-tab span {
+    display:block;
+    padding:10px;
 }
diff --git a/rd_ui/app/views/queryfiddle.html b/rd_ui/app/views/queryfiddle.html
@@ -55,7 +55,10 @@ <h3 class="panel-title">
     <div class="row" ng-show="queryResult.getStatus() == 'done'">
         <rd-tabs tabs-collection='tabs' selected-tab='selectedTab'></rd-tabs>
 
-        <div ng-show="selectedTab.key == 'chart'" class="col-lg-12">
+        <div ng-show="selectedTab.key == 'chart'" class="col-lg-12 chart-tab">
+            <span class="">
+                Graph type: <select ng-model="chartType" ng-options="c.value as c.name for c in chartTypes" ng-change="updateChartType()"></select>
+            </span>
             <chart-renderer query-result="queryResult"></chart-renderer>
         </div>