diff --git a/CHANGELOG.md b/CHANGELOG.md
index f6576d9f17a..957e75e7e91 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,13 +2,14 @@
 
 ## New Features
 
-* **Table panel**: Render cell values as links that can use url that uses variables from current table row. [#3754](https://github.com/grafana/grafana/issues/3754) 
+* **Table panel**: Render cell values as links that can use url that uses variables from current table row. [#3754](https://github.com/grafana/grafana/issues/3754)
 
 ## Enhancements
 
 * **GitHub OAuth**: Support for GitHub organizations with 100+ teams. [#8846](https://github.com/grafana/grafana/issues/8846), thx [@skwashd](https://github.com/skwashd)
+* **Graphite**: Calls to Graphite api /metrics/find now include panel or dashboad time range (from & until) in most cases, [#8055](https://github.com/grafana/grafana/issues/8055)
 
-# 4.4.2 (unreleased) 
+# 4.4.2 (unreleased)
 
 ## Bug Fixes
 
diff --git a/public/app/features/panel/metrics_panel_ctrl.ts b/public/app/features/panel/metrics_panel_ctrl.ts
index e3b4e9c77cf..0e94df437a8 100644
--- a/public/app/features/panel/metrics_panel_ctrl.ts
+++ b/public/app/features/panel/metrics_panel_ctrl.ts
@@ -25,7 +25,6 @@ class MetricsPanelCtrl extends PanelCtrl {
   templateSrv: any;
   timing: any;
   range: any;
-  rangeRaw: any;
   interval: any;
   intervalMs: any;
   resolution: any;
@@ -137,7 +136,6 @@ class MetricsPanelCtrl extends PanelCtrl {
   updateTimeRange(datasource?) {
     this.datasource = datasource || this.datasource;
     this.range = this.timeSrv.timeRange();
-    this.rangeRaw = this.range.raw;
 
     this.applyPanelTimeOverrides();
 
@@ -179,13 +177,13 @@ class MetricsPanelCtrl extends PanelCtrl {
         return;
       }
 
-      if (_.isString(this.rangeRaw.from)) {
+      if (_.isString(this.range.raw.from)) {
         var timeFromDate = dateMath.parse(timeFromInfo.from);
         this.timeInfo = timeFromInfo.display;
-        this.rangeRaw.from = timeFromInfo.from;
-        this.rangeRaw.to = timeFromInfo.to;
         this.range.from = timeFromDate;
         this.range.to = dateMath.parse(timeFromInfo.to);
+        this.range.raw.from = timeFromInfo.from;
+        this.range.raw.to = timeFromInfo.to;
       }
     }
 
@@ -201,8 +199,7 @@ class MetricsPanelCtrl extends PanelCtrl {
       this.timeInfo += ' timeshift ' + timeShift;
       this.range.from = dateMath.parseDateMath(timeShift, this.range.from, false);
       this.range.to = dateMath.parseDateMath(timeShift, this.range.to, true);
-
-      this.rangeRaw = this.range;
+      this.range.raw = {from: this.range.from, to: this.range.to};
     }
 
     if (this.panel.hideTimeOverride) {
@@ -227,7 +224,7 @@ class MetricsPanelCtrl extends PanelCtrl {
     var metricsQuery = {
       panelId: this.panel.id,
       range: this.range,
-      rangeRaw: this.rangeRaw,
+      rangeRaw: this.range.raw,
       interval: this.interval,
       intervalMs: this.intervalMs,
       targets: this.panel.targets,
diff --git a/public/app/features/templating/query_variable.ts b/public/app/features/templating/query_variable.ts
index a40aade24ef..04d642547b0 100644
--- a/public/app/features/templating/query_variable.ts
+++ b/public/app/features/templating/query_variable.ts
@@ -48,7 +48,7 @@ export class QueryVariable implements Variable {
   };
 
   /** @ngInject **/
-  constructor(private model, private datasourceSrv, private templateSrv, private variableSrv, private $q)  {
+  constructor(private model, private datasourceSrv, private templateSrv, private variableSrv, private $q, private timeSrv)  {
     // copy model properties to this instance
     assignModelProperties(this, model, this.defaults);
   }
@@ -89,7 +89,7 @@ export class QueryVariable implements Variable {
 
   updateTags(datasource) {
     if (this.useTags) {
-      return datasource.metricFindQuery(this.tagsQuery).then(results => {
+      return this.metricFindQuery(datasource, this.tagsQuery).then(results => {
         this.tags = [];
         for (var i = 0; i < results.length; i++) {
           this.tags.push(results[i].text);
@@ -106,7 +106,7 @@ export class QueryVariable implements Variable {
   getValuesForTag(tagKey) {
     return this.datasourceSrv.get(this.datasource).then(datasource => {
       var query = this.tagValuesQuery.replace('$tag', tagKey);
-      return datasource.metricFindQuery(query).then(function (results) {
+      return this.metricFindQuery(datasource, query).then(function (results) {
         return _.map(results, function(value) {
           return value.text;
         });
@@ -115,7 +115,7 @@ export class QueryVariable implements Variable {
   }
 
   updateOptionsFromMetricFindQuery(datasource) {
-    return datasource.metricFindQuery(this.query).then(results => {
+    return this.metricFindQuery(datasource, this.query).then(results => {
       this.options = this.metricNamesToVariableValues(results);
       if (this.includeAll) {
         this.addAllOption();
@@ -127,6 +127,16 @@ export class QueryVariable implements Variable {
     });
   }
 
+  metricFindQuery(datasource, query) {
+    var options = {range: undefined};
+
+    if (this.refresh === 2) {
+      options.range = this.timeSrv.timeRange();
+    }
+
+    return datasource.metricFindQuery(query, options);
+  }
+
   addAllOption() {
     this.options.unshift({text: 'All', value: "$__all"});
   }
diff --git a/public/app/features/templating/specs/query_variable_specs.ts b/public/app/features/templating/specs/query_variable_specs.ts
index 4d3539fb7c6..fda44161fb9 100644
--- a/public/app/features/templating/specs/query_variable_specs.ts
+++ b/public/app/features/templating/specs/query_variable_specs.ts
@@ -7,7 +7,7 @@ describe('QueryVariable', () => {
   describe('when creating from model', () => {
 
     it('should set defaults', () => {
-      var variable = new QueryVariable({}, null, null, null, null);
+      var variable = new QueryVariable({}, null, null, null, null, null);
       expect(variable.datasource).to.be(null);
       expect(variable.refresh).to.be(0);
       expect(variable.sort).to.be(0);
@@ -19,7 +19,7 @@ describe('QueryVariable', () => {
     });
 
     it('get model should copy changes back to model', () => {
-      var variable = new QueryVariable({}, null, null, null, null);
+      var variable = new QueryVariable({}, null, null, null, null, null);
       variable.options = [{text: 'test'}];
       variable.datasource = 'google';
       variable.regex = 'asd';
@@ -34,7 +34,7 @@ describe('QueryVariable', () => {
     });
 
     it('if refresh != 0 then remove options in presisted mode', () => {
-      var variable = new QueryVariable({}, null, null, null, null);
+      var variable = new QueryVariable({}, null, null, null, null, null);
       variable.options = [{text: 'test'}];
       variable.refresh = 1;
 
@@ -44,7 +44,7 @@ describe('QueryVariable', () => {
   });
 
   describe('can convert and sort metric names',() => {
-    var variable = new QueryVariable({}, null, null, null, null);
+    var variable = new QueryVariable({}, null, null, null, null, null);
     variable.sort = 3; // Numerical (asc)
 
     describe('can sort a mixed array of metric variables', () => {
diff --git a/public/app/plugins/datasource/graphite/datasource.ts b/public/app/plugins/datasource/graphite/datasource.ts
index 5d0b3de0630..fe0082cb10c 100644
--- a/public/app/plugins/datasource/graphite/datasource.ts
+++ b/public/app/plugins/datasource/graphite/datasource.ts
@@ -160,17 +160,26 @@ export function GraphiteDatasource(instanceSettings, $q, backendSrv, templateSrv
     return date.unix();
   };
 
-  this.metricFindQuery = function(query) {
-    var interpolated;
-    try {
-      interpolated = encodeURIComponent(templateSrv.replace(query));
-    } catch (err) {
-      return $q.reject(err);
+  this.metricFindQuery = function(query, options) {
+    let interpolatedQuery = templateSrv.replace(query);
+
+    let httpOptions: any =  {
+      method: 'GET',
+      url: '/metrics/find',
+      params: {
+        query: interpolatedQuery
+      },
+      // for cancellations
+      requestId: options.requestId,
+    };
+
+    if (options && options.range) {
+      httpOptions.params.from = this.translateTime(options.range.raw.from, false);
+      httpOptions.params.until = this.translateTime(options.range.raw.to, true);
     }
 
-    return this.doGraphiteRequest({method: 'GET', url: '/metrics/find/?query=' + interpolated })
-    .then(function(results) {
-      return _.map(results.data, function(metric) {
+    return this.doGraphiteRequest(httpOptions).then(results => {
+      return _.map(results.data, metric => {
         return {
           text: metric.text,
           expandable: metric.expandable ? true : false
diff --git a/public/app/plugins/datasource/graphite/query_ctrl.ts b/public/app/plugins/datasource/graphite/query_ctrl.ts
index ae72d7ab1d0..09fe5d6cb26 100644
--- a/public/app/plugins/datasource/graphite/query_ctrl.ts
+++ b/public/app/plugins/datasource/graphite/query_ctrl.ts
@@ -162,8 +162,9 @@ export class GraphiteQueryCtrl extends QueryCtrl {
 
   getAltSegments(index) {
     var query = index === 0 ?  '*' : this.getSegmentPathUpTo(index) + '.*';
+    var options = {range: this.panelCtrl.range, requestId: "get-alt-segments"};
 
-    return this.datasource.metricFindQuery(query).then(segments => {
+    return this.datasource.metricFindQuery(query, options).then(segments => {
       var altSegments = _.map(segments, segment => {
         return this.uiSegmentSrv.newSegment({value: segment.text, expandable: segment.expandable});
       });