From 236074ea4729a2f9e1974644c5bfbb94604cd530 Mon Sep 17 00:00:00 2001
From: Ryan McKinley <ryantxu@gmail.com>
Date: Thu, 28 Mar 2019 10:15:20 -0700
Subject: [PATCH] Fix: React Graph & Show message on no data (#16278)

---
 .../app/plugins/panel/graph2/GraphPanel.tsx   | 54 +++++++++++--------
 1 file changed, 32 insertions(+), 22 deletions(-)

diff --git a/public/app/plugins/panel/graph2/GraphPanel.tsx b/public/app/plugins/panel/graph2/GraphPanel.tsx
index 902ea34b380..a6cb543b643 100644
--- a/public/app/plugins/panel/graph2/GraphPanel.tsx
+++ b/public/app/plugins/panel/graph2/GraphPanel.tsx
@@ -14,36 +14,46 @@ export class GraphPanel extends PureComponent<Props> {
     const { showLines, showBars, showPoints } = this.props.options;
 
     const graphs: GraphSeriesXY[] = [];
-    for (const series of data) {
-      const timeColumn = getFirstTimeField(series);
-      if (timeColumn < 0) {
-        continue;
-      }
+    if (data) {
+      for (const series of data) {
+        const timeColumn = getFirstTimeField(series);
+        if (timeColumn < 0) {
+          continue;
+        }
 
-      for (let i = 0; i < series.fields.length; i++) {
-        const field = series.fields[i];
+        for (let i = 0; i < series.fields.length; i++) {
+          const field = series.fields[i];
 
-        // Show all numeric columns
-        if (field.type === FieldType.number) {
-          // Use external calculator just to make sure it works :)
-          const points = getFlotPairs({
-            series,
-            xIndex: timeColumn,
-            yIndex: i,
-            nullValueMode: NullValueMode.Null,
-          });
-
-          if (points.length > 0) {
-            graphs.push({
-              label: field.name,
-              data: points,
-              color: colors[graphs.length % colors.length],
+          // Show all numeric columns
+          if (field.type === FieldType.number) {
+            // Use external calculator just to make sure it works :)
+            const points = getFlotPairs({
+              series,
+              xIndex: timeColumn,
+              yIndex: i,
+              nullValueMode: NullValueMode.Null,
             });
+
+            if (points.length > 0) {
+              graphs.push({
+                label: field.name,
+                data: points,
+                color: colors[graphs.length % colors.length],
+              });
+            }
           }
         }
       }
     }
 
+    if (graphs.length < 1) {
+      return (
+        <div className="panel-empty">
+          <p>No data found in response</p>
+        </div>
+      );
+    }
+
     return (
       <Graph
         series={graphs}