Graph panel: initial support for table format, issue #5812.

public/app/plugins/panel/graph/graph.js

@@ -234,6 +234,16 @@ function (angular, $, moment, _, kbn, GraphTooltip) {
               series.data = [
                 [i + 1, series.stats[panel.xaxis.seriesValue]]
               ];
+            } else if (panel.xaxis.mode === 'table') {
+              series.data = [];
+              for (var j = 0; j < series.datapoints.length; j++) {
+                var dataIndex = i * series.datapoints.length + j;
+                series.datapoints[j];
+                series.data.push([
+                  dataIndex + 1,
+                  series.datapoints[j][0]
+                ]);
+              }
             }
 
             // if hidden remove points and disable stack
@@ -252,7 +262,10 @@ function (angular, $, moment, _, kbn, GraphTooltip) {
               options.series.lines.show = false;
             }
 
-            addXAxis(options);
+            addXSeriesAxis(options);
+
+          } else if (panel.xaxis.mode === 'table') {
+            addXTableAxis(options);
 
           } else {
             if (data.length && data[0].stats.timeStep) {
@@ -325,7 +338,7 @@ function (angular, $, moment, _, kbn, GraphTooltip) {
           };
         }
 
-        function addXAxis(options) {
+        function addXSeriesAxis(options) {
           var ticks = _.map(data, function(series, index) {
             return [index + 1, series.alias];
           });
@@ -341,6 +354,26 @@ function (angular, $, moment, _, kbn, GraphTooltip) {
           };
         }
 
+        function addXTableAxis(options) {
+          var ticks = _.map(data, function(series, seriesIndex) {
+            return _.map(series.datapoints, function(point, pointIndex) {
+              var tickIndex = seriesIndex * series.datapoints.length + pointIndex;
+              return [tickIndex + 1, point[1]];
+            });
+          });
+          ticks = _.flatten(ticks, true);
+
+          options.xaxis = {
+            timezone: dashboard.getTimezone(),
+            show: panel.xaxis.show,
+            mode: null,
+            min: 0,
+            max: ticks.length + 1,
+            label: "Datetime",
+            ticks: ticks
+          };
+        }
+
         function addGridThresholds(options, panel) {
           if (_.isNumber(panel.grid.threshold1)) {
             var limit1 = panel.grid.thresholdLine ? panel.grid.threshold1 : (panel.grid.threshold2 || null);

public/app/plugins/panel/graph/module.ts

@@ -22,6 +22,7 @@ class GraphCtrl extends MetricsPanelCtrl {
   unitFormats: any;
   xAxisModes: any;
   xAxisSeriesValues: any;
+  xAxisColumns: any = [];
   annotationsPromise: any;
   datapointsCount: number;
   datapointsOutside: boolean;
@@ -146,7 +147,8 @@ class GraphCtrl extends MetricsPanelCtrl {
 
     this.xAxisModes = {
       'Time': 'time',
-      'Series': 'series'
+      'Series': 'series',
+      'Table': 'table'
     };
 
     this.xAxisSeriesValues = ['min', 'max', 'avg', 'current', 'total'];
@@ -186,7 +188,26 @@ class GraphCtrl extends MetricsPanelCtrl {
     this.datapointsWarning = false;
     this.datapointsCount = 0;
     this.datapointsOutside = false;
-    this.seriesList = dataList.map(this.seriesHandler.bind(this));
+
+    let dataHandler: (seriesData, index)=>any;
+    if (this.panel.xaxis.mode === 'table') {
+      if (dataList.length) {
+        // Table panel uses only first enabled tagret, so we can use dataList[0]
+        // for table data representation
+        this.xAxisColumns = _.map(dataList[0].columns, function(column, index) {
+          return {
+            text: column.text,
+            index: index
+          };
+        });
+      }
+
+      dataHandler = this.tableHandler;
+    } else {
+      dataHandler = this.seriesHandler;
+    }
+
+    this.seriesList = dataList.map(dataHandler.bind(this));
     this.datapointsWarning = this.datapointsCount === 0 || this.datapointsOutside;
 
     this.annotationsPromise.then(annotations => {
@@ -227,6 +248,42 @@ class GraphCtrl extends MetricsPanelCtrl {
     return series;
   }
 
+  tableHandler(seriesData, index) {
+    var xColumnIndex = Number(this.panel.xaxis.columnIndex);
+    var datapoints = _.map(seriesData.rows, (row) => {
+      return [
+        _.last(row),       // Y value (always last column)
+        row[xColumnIndex]  // X value
+      ];
+    });
+
+    var alias = seriesData.columns[xColumnIndex].text;
+
+    var colorIndex = index % this.colors.length;
+    var color = this.panel.aliasColors[alias] || this.colors[colorIndex];
+
+    var series = new TimeSeries({
+      datapoints: datapoints,
+      alias: alias,
+      color: color,
+      unit: seriesData.unit,
+    });
+
+    if (datapoints && datapoints.length > 0) {
+      var last = moment.utc(datapoints[datapoints.length - 1][1]);
+      var from = moment.utc(this.range.from);
+      if (last - from < -10000) {
+        this.datapointsOutside = true;
+      }
+
+      this.datapointsCount += datapoints.length;
+      this.panel.tooltip.msResolution = this.panel.tooltip.msResolution || series.isMsResolutionNeeded();
+    }
+
+
+    return series;
+  }
+
   onRender() {
     if (!this.seriesList) { return; }
 

public/app/plugins/panel/graph/tab_axes.html

@@ -47,11 +47,12 @@
 				<select class="gf-form-input"
 					ng-model="ctrl.panel.xaxis.mode"
 					ng-options="v as k for (k, v) in ctrl.xAxisModes"
-					ng-change="ctrl.render()">
+					ng-change="ctrl.refresh()">
 				</select>
 			</div>
 		</div>
-		<div class="gf-form" ng-if="ctrl.panel.xaxis.mode==='series'">
+
+		<div class="gf-form" ng-if="ctrl.panel.xaxis.mode === 'series'">
 			<label class="gf-form-label width-5">Value</label>
 			<div class="gf-form-select-wrapper max-width-15">
 				<select class="gf-form-input"
@@ -61,6 +62,17 @@
 				</select>
 			</div>
 		</div>
+
+		<div class="gf-form" ng-if="ctrl.panel.xaxis.mode === 'table'">
+			<label class="gf-form-label width-5">Column</label>
+			<div class="gf-form-select-wrapper max-width-15">
+				<select class="gf-form-input"
+					ng-model="ctrl.panel.xaxis.columnIndex"
+					ng-options="col.index as col.text for col in ctrl.xAxisColumns"
+					ng-change="ctrl.refresh()">
+				</select>
+			</div>
+		</div>
 	</div>
 
   <div class="section gf-form-group">