Fixed issue where legend may not show on initial load

panels/histogram/module.js

@@ -112,7 +112,7 @@ angular.module('kibana.histogram', [])
 
 
           var series = { 
           var series = { 
             data: {
             data: {
-              label: $scope.panel.query[k].label || k, 
+              label: $scope.panel.query[k].label || (parseInt(k)+1), 
               data: data,
               data: data,
             },
             },
 
 
@@ -167,11 +167,7 @@ angular.module('kibana.histogram', [])
 
 
       var height = scope.panel.height || scope.row.height;
       var height = scope.panel.height || scope.row.height;
 
 
-      elem.html(
-        '<div class="legend_container"></div>'+
-        '<div class="chart" style="height:'+height+'">'+
-         '<center><img src="common/img/load_big.gif"></center>'+
-        '</div>')
+      elem.html('<center><img src="common/img/load_big.gif"></center>')
 
 
       // Receive render events
       // Receive render events
       scope.$on('render',function(){
       scope.$on('render',function(){
@@ -211,7 +207,7 @@ angular.module('kibana.histogram', [])
         scripts.wait(function(){
         scripts.wait(function(){
           // Populate element
           // Populate element
           try { 
           try { 
-            var plot = $.plot($('.chart',elem), scope.data, {
+            var plot = $.plot(elem, scope.data, {
               legend: { 
               legend: { 
                 show: false,
                 show: false,
               },
               },
@@ -248,6 +244,7 @@ angular.module('kibana.histogram', [])
             _.each(plot.getData(),function(series) {
             _.each(plot.getData(),function(series) {
               scope.legend.push(_.pick(series,'label','color'))
               scope.legend.push(_.pick(series,'label','color'))
             })
             })
+            scope.$apply()
           } catch(e) {
           } catch(e) {
             elem.text(e)
             elem.text(e)
           }
           }