Graph panel: table format support improvements, issue #5812.

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

@@ -265,6 +265,11 @@ function (angular, $, moment, _, kbn, GraphTooltip) {
             addXSeriesAxis(options);
 
           } else if (panel.xaxis.mode === 'table') {
+            if (data.length) {
+              options.series.bars.barWidth = 0.7;
+              options.series.bars.align = 'center';
+            }
+
             addXTableAxis(options);
 
           } else {

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

@@ -194,12 +194,18 @@ class GraphCtrl extends MetricsPanelCtrl {
       if (dataList.length) {
         // Table panel uses only first enabled tagret, so we can use dataList[0]
         // for table data representation
+        dataList.splice(1, dataList.length - 1);
         this.xAxisColumns = _.map(dataList[0].columns, function(column, index) {
           return {
             text: column.text,
             index: index
           };
         });
+
+        // Set last column as default value
+        if (!this.panel.xaxis.valueColumnIndex) {
+          this.panel.xaxis.valueColumnIndex = this.xAxisColumns.length - 1;
+        }
       }
 
       dataHandler = this.tableHandler;
@@ -250,14 +256,16 @@ class GraphCtrl extends MetricsPanelCtrl {
 
   tableHandler(seriesData, index) {
     var xColumnIndex = Number(this.panel.xaxis.columnIndex);
+    var valueColumnIndex = this.panel.xaxis.valueColumnIndex;
     var datapoints = _.map(seriesData.rows, (row) => {
+      var value = valueColumnIndex ? row[valueColumnIndex] : _.last(row);
       return [
-        _.last(row),       // Y value (always last column)
+        value,             // Y value
         row[xColumnIndex]  // X value
       ];
     });
 
-    var alias = seriesData.columns[xColumnIndex].text;
+    var alias = seriesData.columns[valueColumnIndex].text;
 
     var colorIndex = index % this.colors.length;
     var color = this.panel.aliasColors[alias] || this.colors[colorIndex];

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

@@ -73,6 +73,17 @@
 				</select>
 			</div>
 		</div>
+
+		<div class="gf-form" ng-if="ctrl.panel.xaxis.mode === 'table'">
+			<label class="gf-form-label width-5">Value</label>
+			<div class="gf-form-select-wrapper max-width-15">
+				<select class="gf-form-input"
+					ng-model="ctrl.panel.xaxis.valueColumnIndex"
+					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">