Add line and scatter as new graphs

rd_ui/app/scripts/controllers.js

@@ -74,7 +74,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;
         };

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;

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": []
@@ -98,6 +125,11 @@ renderers.directive('chartRenderer', function () {
                 } else {
                     $scope.chartSeries.splice(0, $scope.chartSeries.length);
 
+                    var stacking = null;
+                    if ($scope.stacking() === undefined) {
+                        stacking = 'normal';
+                    }
+
                     _.each($scope.queryResult.getChartData(), function (s) {
                         $scope.chartSeries.push(_.extend(s, {'stacking': 'normal'}, $scope.options));
                     });

rd_ui/app/scripts/services.js

@@ -117,7 +117,6 @@
                     if (series[seriesName] == undefined) {
                         series[seriesName] = {
                             name: seriesName,
-                            type: 'column',
                             data: []
                         }
                     }

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;
 }

rd_ui/app/views/queryfiddle.html

@@ -53,7 +53,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>