Convert chart-json to Histograms.

tracing/tracing/ui/base/box_chart.html

Index: tracing/tracing/ui/base/box_chart.html
diff --git a/tracing/tracing/ui/base/box_chart.html b/tracing/tracing/ui/base/box_chart.html
index 77f2334d0a5b3a1b65caed6dbcf9d44cb2ee92b1..dd689f3ab68f35269964a18d965cbc59e683f08f 100644
--- a/tracing/tracing/ui/base/box_chart.html
+++ b/tracing/tracing/ui/base/box_chart.html
@@ -45,6 +45,36 @@ tr.exportTo('tr.ui.b', function() {
       return 0.5;
     },
 
+    updateDataRange_: function() {
+      if (this.overrideDataRange_ !== undefined) {
+        return;
+      }
+
+      this.autoDataRange_.reset();
+      for (var datum of this.data_) {
+        this.autoDataRange_.addValue(datum.percentile_0);
+        this.autoDataRange_.addValue(datum.percentile_100);
+      }
+    },
+
+    updateXAxis_: function(xAxis) {
+      xAxis.selectAll('*').remove();
+      if (this.hideXAxis) {
+        return;
+      }
+
+      tr.ui.b.NameColumnChart.prototype.updateXAxis_.call(this, xAxis);
+
+      var baseline = xAxis.selectAll('path').data([this]);
+      baseline.enter().append('line')
+        .attr('stroke', 'black')
+        .attr('x1', this.xScale_(0))
+        .attr('x2', this.xScale_(this.data_.length))
+        .attr('y1', this.chartAreaSize.height)
+        .attr('y2', this.chartAreaSize.height);
+      baseline.exit().remove();
+    },
+
     updateDataContents_: function(dataSel) {
       dataSel.selectAll('*').remove();
       var boxesSel = dataSel.selectAll('path');