diff --git a/ui/spec/utils/timeSeriesToDygraphSpec.js b/ui/spec/utils/timeSeriesToDygraphSpec.js
index c071889c8..0b5396be1 100644
--- a/ui/spec/utils/timeSeriesToDygraphSpec.js
+++ b/ui/spec/utils/timeSeriesToDygraphSpec.js
@@ -322,45 +322,35 @@ describe('timeSeriesToDygraph', () => {
     expect(dygraphSeries["m2.f2"].strokeWidth).to.be.above(dygraphSeries["m1.f1"].strokeWidth);
   });
 
-  it('parses a raw InfluxDB response into a dygraph friendly data format', () => {
+  it('parses labels alphabetically with the correct field values for multiple series', () => {
     const influxResponse = [
       {
         "response":
         {
           "results": [
-            {
-              "series": [
-                {
-                  "name":"mb",
-                  "columns": ["time","f1"],
-                  "values": [[1000, 1],[2000, 2]],
-                },
-              ]
-            },
             {
               "series": [
                 {
                   "name":"ma",
-                  "columns": ["time","f1"],
-                  "values": [[1000, 1],[2000, 2]],
+                  "columns": ["time","fa","fc","fb"],
+                  "values": [
+                    [1000, 20, 10, 10],
+                    [2000, 30, 15, 9],
+                    [3000, 40, 20, 8],
+                  ],
                 },
               ]
             },
             {
               "series": [
                 {
-                  "name":"mc",
-                  "columns": ["time","f2"],
-                  "values": [[2000, 3],[4000, 4]],
-                },
-              ]
-            },
-            {
-              "series": [
-                {
-                  "name":"mc",
-                  "columns": ["time","f1"],
-                  "values": [[2000, 3],[4000, 4]],
+                  "name":"mb",
+                  "columns": ["time","fa","fc","fb"],
+                  "values": [
+                    [1000, 200, 100, 100],
+                    [2000, 300, 150, 90],
+                    [3000, 400, 200, 80],
+                  ],
                 },
               ]
             },
@@ -371,14 +361,25 @@ describe('timeSeriesToDygraph', () => {
 
     const actual = timeSeriesToDygraph(influxResponse);
 
-    const expected = [
-      'time',
-      `ma.f1`,
-      `mb.f1`,
-      `mc.f1`,
-      `mc.f2`,
-    ];
+    const expected = {
+      labels: [
+        'time',
+        `ma.fa`,
+        `ma.fb`,
+        `ma.fc`,
+        `mb.fa`,
+        `mb.fb`,
+        `mb.fc`,
+      ],
+      timeSeries: [
+        [new Date(1000), 20, 10, 10],
+        [new Date(2000), 30, 9, 15],
+        [new Date(3000), 40, 8, 20],
+      ],
+    };
 
-    expect(actual.labels).to.deep.equal(expected);
+    console.log(actual.timeSeries);
+    expect(actual.labels).to.deep.equal(expected.labels);
+    expect(actual.timeSeries).to.deep.equal(expected.timeSeries);
   });
 });
diff --git a/ui/src/utils/timeSeriesToDygraph.js b/ui/src/utils/timeSeriesToDygraph.js
index a5815c202..19bb31404 100644
--- a/ui/src/utils/timeSeriesToDygraph.js
+++ b/ui/src/utils/timeSeriesToDygraph.js
@@ -79,14 +79,20 @@ export default function timeSeriesToDygraph(raw = [], activeQueryIndex, isInData
        */
       const measurementName = series.name;
       const columns = series.columns;
-
       // Tags are only included in an influxdb response under certain circumstances, e.g.
       // when a query is using GROUP BY (<tag key>).
       const tags = Object.keys(series.tags || {}).map((key) => {
         return `[${key}=${series.tags[key]}]`;
       }).sort().join('');
 
-      columns.slice(1).forEach((fieldName) => {
+      const c = columns.slice(1).sort();
+      let previousColumnLength = 0;
+
+      if (c.length != previousColumnLength) {
+        previousColumnLength = c.length;
+      }
+
+      c.forEach((fieldName) => {
         let effectiveFieldName = `${measurementName}.${fieldName}${tags}`;
 
         // If there are duplicate effectiveFieldNames identify them by their queryIndex
@@ -96,7 +102,7 @@ export default function timeSeriesToDygraph(raw = [], activeQueryIndex, isInData
 
         // Given a field name, identify which column in the timeSeries result should hold the field's value
         // ex given this timeSeries [Date, 10, 20, 30] field index at 2 would correspond to value 20
-        fieldToIndex[effectiveFieldName] = labels.length + 1;
+        fieldToIndex[effectiveFieldName] = c.indexOf(fieldName) + previousColumnLength;
         labels.push(effectiveFieldName);
 
         const {light, heavy} = STROKE_WIDTH;
@@ -156,6 +162,7 @@ export default function timeSeriesToDygraph(raw = [], activeQueryIndex, isInData
       row[0] = new Date(dates[date]);
 
       const fieldsForRow = dateToFieldValue[date];
+
       Object.keys(fieldsForRow).forEach((effectiveFieldName) => {
         row[fieldToIndex[effectiveFieldName]] = fieldsForRow[effectiveFieldName];
       });
@@ -178,4 +185,3 @@ function isEmpty(resp) {
 function hasError(resp) {
   return !!resp.results[0].error;
 }
-