progress on translating grafana/flot options to graphite png renderer options

src/app/panels/graphite/module.js

@@ -320,13 +320,14 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
 
 
     $scope.receiveGraphiteData = function(results) {
     $scope.receiveGraphiteData = function(results) {
       $scope.panelMeta.loading = false;
       $scope.panelMeta.loading = false;
+      $scope.legend = [];
+
       if (_.isString(results)) {
       if (_.isString(results)) {
         $scope.render(results);
         $scope.render(results);
         return;
         return;
       }
       }
 
 
       results = results.data;
       results = results.data;
-      $scope.legend = [];
       var data = [];
       var data = [];
 
 
       _.each(results, function(targetData) {
       _.each(results, function(targetData) {
@@ -481,8 +482,37 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
 
 
 
 
           if (_.isString(data)) {
           if (_.isString(data)) {
-            elem.html('<img src="' + data + '"></img>');
+            render_panel_as_graphite_png();
             return;
             return;
           }
           }
+          addAxisLabels();
+        }
+
+        function render_panel_as_graphite_png() {
+          data += '&width=' + elem.width();
+          data += '&height=' + elem.css('height').replace('px', '');
+          data += '&bgcolor=1f1f1f'; // @grayDarker & @kibanaPanelBackground
+          data += '&fgcolor=BBBFC2'; // @textColor & @grayLighter
+          data += scope.panel.stack ? '&areaMode=stacked' : ''
+          data += scope.panel.fill !== 0 ? ('&areaAlpha=' + (scope.panel.fill/10).toFixed(1)) : '';
+          data += scope.panel.linewidth !== 0 ? '&lineWidth=' + scope.panel.linewidth : '';
+          data += scope.panel.steppedLine ? '&lineMode=staircase' : '';
+
+          switch(scope.panel.nullPointMode) {
+          case 'connected':
+            data += '&lineMode=connected';
+            break;
+          case 'null':
+            break; // graphite default lineMode
+          case 'null as zero':
+            data += "&drawNullAsZero=true";
+            break;
+          }
+
+          elem.html('<img src="' + data + '"></img>');
+        }
+
+        function addAxisLabels() {
+
 });
 });
 
 

src/app/panels/graphite/styleEditor.html

@@ -59,7 +59,7 @@
       <select class="input-medium" ng-model="panel.nullPointMode" ng-options="f for f in ['connected', 'null', 'null as zero']" ng-change="render()"></select>
       <select class="input-medium" ng-model="panel.nullPointMode" ng-options="f for f in ['connected', 'null', 'null as zero']" ng-change="render()"></select>
     </div>
     </div>
     <div class="editor-option">
     <div class="editor-option">
-      <label class="small">Stepped lines</label><input type="checkbox" ng-model="panel.steppedLine" ng-checked="panel.steppedLine" ng-change="render()">
+      <label class="small">Staircase line</label><input type="checkbox" ng-model="panel.steppedLine" ng-checked="panel.steppedLine" ng-change="render()">
     </div>
     </div>
   </div>
   </div>
   <div class="section">
   <div class="section">