began work on adding support for native graphite png renderer support (#22)

src/app/panels/graphite/module.js

@@ -83,6 +83,10 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
     // Set and populate defaults
     // Set and populate defaults
     var _d = {
     var _d = {
       /** @scratch /panels/histogram/3
       /** @scratch /panels/histogram/3
+       * renderer:: sets client side (flot) or native graphite png renderer (png)
+       */
+      renderer: 'flot',
+      /** @scratch /panels/histogram/3
        * x-axis:: Show the x-axis
        * x-axis:: Show the x-axis
        */
        */
       'x-axis'      : true,
       'x-axis'      : true,
@@ -240,10 +244,6 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
       }
       }
     };
     };
 
 
-    $scope.typeAheadSource = function () {
-      return ["test", "asd", "testing2"];
-    };
-
     $scope.remove_panel_from_row = function(row, panel) {
     $scope.remove_panel_from_row = function(row, panel) {
       if ($scope.fullscreen) {
       if ($scope.fullscreen) {
         $rootScope.$emit('panel-fullscreen-exit');
         $rootScope.$emit('panel-fullscreen-exit');
@@ -307,6 +307,7 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
       var graphiteQuery = {
       var graphiteQuery = {
         range: filterSrv.timeRange(false),
         range: filterSrv.timeRange(false),
         targets: $scope.panel.targets,
         targets: $scope.panel.targets,
+        renderer: $scope.panel.renderer,
         maxDataPoints: $scope.panel.span * 50
         maxDataPoints: $scope.panel.span * 50
       };
       };
 
 
@@ -319,6 +320,10 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
 
 
     $scope.receiveGraphiteData = function(results) {
     $scope.receiveGraphiteData = function(results) {
       $scope.panelMeta.loading = false;
       $scope.panelMeta.loading = false;
+      if (_.isString(results)) {
+        $scope.render(results);
+        return;
+      }
 
 
       results = results.data;
       results = results.data;
       $scope.legend = [];
       $scope.legend = [];
@@ -474,5 +479,10 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
 
 
   });
   });
 
 
+
+          if (_.isString(data)) {
+            elem.html('<img src="' + data + '"></img>');
+            return;
+          }
 });
 });
 
 

src/app/panels/graphite/styleEditor.html

+
+
 <div class="editor-row">
 <div class="editor-row">
   <div class="section">
   <div class="section">
     <h5>Chart Options</h5>
     <h5>Chart Options</h5>
     <div class="editor-option">
     <div class="editor-option">
+      <label class="small">Renderer</label><select class="input-mini" ng-model="panel.renderer" ng-options="f for f in ['flot', 'png']" ng-change="get_data()"></select>
+    </div>
+    <div class="editor-option">
         <label class="small">Time correction</label>
         <label class="small">Time correction</label>
         <select ng-model="panel.timezone" class='input-small' ng-options="f for f in ['browser','utc']"></select>
         <select ng-model="panel.timezone" class='input-small' ng-options="f for f in ['browser','utc']"></select>
     </div>
     </div>

src/app/services/graphite/graphiteSrv.js

@@ -12,6 +12,7 @@ function (angular, _, $, config, kbn, moment) {
   var module = angular.module('kibana.services');
   var module = angular.module('kibana.services');
 
 
   module.service('graphiteSrv', function($http, $q, filterSrv) {
   module.service('graphiteSrv', function($http, $q, filterSrv) {
+    var graphiteRenderUrl = config.graphiteUrl + "/render";
 
 
     this.query = function(options) {
     this.query = function(options) {
       try {
       try {
@@ -19,14 +20,19 @@ function (angular, _, $, config, kbn, moment) {
           from: this.translateTime(options.range.from),
           from: this.translateTime(options.range.from),
           until: this.translateTime(options.range.to),
           until: this.translateTime(options.range.to),
           targets: options.targets,
           targets: options.targets,
+          renderer: options.renderer,
           maxDataPoints: options.maxDataPoints
           maxDataPoints: options.maxDataPoints
         };
         };
 
 
-        var params = buildGraphitePostParams(graphOptions);
+        var params = buildGraphiteParams(graphOptions);
+
+        if (options.renderer === 'png') {
+          return $q.when(graphiteRenderUrl + '?' + params.join('&'));
+        }
 
 
         return doGraphiteRequest({
         return doGraphiteRequest({
           method: 'POST',
           method: 'POST',
-          url: config.graphiteUrl + '/render/',
+          url: graphiteRenderUrl,
           data: params.join('&'),
           data: params.join('&'),
           headers: {
           headers: {
             'Content-Type': 'application/x-www-form-urlencoded',
             'Content-Type': 'application/x-www-form-urlencoded',
@@ -122,11 +128,13 @@ function (angular, _, $, config, kbn, moment) {
       return $http(options);
       return $http(options);
     }
     }
 
 
-    function buildGraphitePostParams(options) {
+    function buildGraphiteParams(options) {
       var clean_options = [];
       var clean_options = [];
       var graphite_options = ['target', 'targets', 'from', 'until', 'rawData', 'format', 'maxDataPoints'];
       var graphite_options = ['target', 'targets', 'from', 'until', 'rawData', 'format', 'maxDataPoints'];
 
 
-      options['format'] = 'json';
+      if (options.renderer === 'flot') {
+        options['format'] = 'json';
+      }
 
 
       $.each(options, function (key, value) {
       $.each(options, function (key, value) {
         if ($.inArray(key, graphite_options) === -1) {
         if ($.inArray(key, graphite_options) === -1) {