diff --git a/public/app/plugins/datasource/cloudwatch/datasource.ts b/public/app/plugins/datasource/cloudwatch/datasource.ts
index d1ca1daf9a4..bf894b03de7 100644
--- a/public/app/plugins/datasource/cloudwatch/datasource.ts
+++ b/public/app/plugins/datasource/cloudwatch/datasource.ts
@@ -158,10 +158,11 @@ export default class CloudWatchDatasource extends DataSourceApi<CloudWatchQuery,
         periodUnit = period = 60 * 60;
       }
     } else {
-      if (/^\d+$/.test(target.period)) {
-        period = parseInt(target.period, 10);
+      period = this.templateSrv.replace(target.period, options.scopedVars);
+      if (/^\d+$/.test(period)) {
+        period = parseInt(period, 10);
       } else {
-        period = kbn.interval_to_seconds(this.templateSrv.replace(target.period, options.scopedVars));
+        period = kbn.interval_to_seconds(period);
       }
     }
     if (period < 1) {
diff --git a/public/app/plugins/datasource/cloudwatch/specs/datasource.test.ts b/public/app/plugins/datasource/cloudwatch/specs/datasource.test.ts
index 6c3806dd91a..7b9ee94074e 100644
--- a/public/app/plugins/datasource/cloudwatch/specs/datasource.test.ts
+++ b/public/app/plugins/datasource/cloudwatch/specs/datasource.test.ts
@@ -340,7 +340,7 @@ describe('CloudWatchDatasource', () => {
               InstanceId: 'i-12345678',
             },
             statistics: ['Average'],
-            period: 300,
+            period: '300s',
           },
         ],
       };
@@ -367,7 +367,7 @@ describe('CloudWatchDatasource', () => {
             TargetGroup: 'tg',
           },
           statistics: ['p90.00'],
-          period: 300,
+          period: '300s',
         },
       ],
     };
@@ -484,7 +484,7 @@ describe('CloudWatchDatasource', () => {
               dim2: '[[var2]]',
             },
             statistics: ['Average'],
-            period: 300,
+            period: '300s',
           },
         ],
       };
@@ -511,7 +511,7 @@ describe('CloudWatchDatasource', () => {
               dim3: '[[var3]]',
             },
             statistics: ['Average'],
-            period: 300,
+            period: '300s',
           },
         ],
         scopedVars: {
@@ -544,7 +544,7 @@ describe('CloudWatchDatasource', () => {
               dim4: '[[var4]]',
             },
             statistics: ['Average'],
-            period: 300,
+            period: '300s',
           },
         ],
       };
@@ -573,7 +573,7 @@ describe('CloudWatchDatasource', () => {
               dim3: '[[var3]]',
             },
             statistics: ['Average'],
-            period: 300,
+            period: '300',
           },
         ],
         scopedVars: {
@@ -755,7 +755,7 @@ describe('CloudWatchDatasource', () => {
     const start = 1483196400 * 1000;
     const testData: any[] = [
       [
-        { period: 60, namespace: 'AWS/EC2' },
+        { period: '60s', namespace: 'AWS/EC2' },
         { range: { from: new Date(start), to: new Date(start + 3600 * 1000) } },
         hourSec * 3,
         60,
@@ -767,7 +767,7 @@ describe('CloudWatchDatasource', () => {
         300,
       ],
       [
-        { period: 60, namespace: 'AWS/ELB' },
+        { period: '60s', namespace: 'AWS/ELB' },
         { range: { from: new Date(start), to: new Date(start + 3600 * 1000) } },
         hourSec * 3,
         60,
@@ -779,7 +779,7 @@ describe('CloudWatchDatasource', () => {
         60,
       ],
       [
-        { period: 1, namespace: 'CustomMetricsNamespace' },
+        { period: '1', namespace: 'CustomMetricsNamespace' },
         {
           range: {
             from: new Date(start),
@@ -790,13 +790,13 @@ describe('CloudWatchDatasource', () => {
         1,
       ],
       [
-        { period: 1, namespace: 'CustomMetricsNamespace' },
+        { period: '1', namespace: 'CustomMetricsNamespace' },
         { range: { from: new Date(start), to: new Date(start + 3600 * 1000) } },
         hourSec * 3 - 1,
         60,
       ],
       [
-        { period: 60, namespace: 'CustomMetricsNamespace' },
+        { period: '60s', namespace: 'CustomMetricsNamespace' },
         { range: { from: new Date(start), to: new Date(start + 3600 * 1000) } },
         hourSec * 3,
         60,