19744: Adjust chart format so legend doesn't cover data
[arvados.git] / tools / crunchstat-summary / crunchstat_summary / dygraphs.js
index 52e5534ef179f1124c90084e68596b8a43bf08e4..07d9418966887a301c0c4eeb75a3a7bbf1ee570d 100644 (file)
@@ -40,9 +40,10 @@ window.onload = function() {
         },
     }
     chartdata.forEach(function(section, section_idx) {
-        var h1 = document.createElement('h1');
-        h1.appendChild(document.createTextNode(section.label));
-        document.body.appendChild(h1);
+        //var h1 = document.createElement('h1');
+        //h1.appendChild(document.createTextNode(section.label));
+        //document.body.appendChild(h1);
+        var chartDiv = document.getElementById("chart");
         section.charts.forEach(function(chart, chart_idx) {
             // Skip chart if every series has zero data points
             if (0 == chart.data.reduce(function(len, series) {
@@ -54,7 +55,7 @@ window.onload = function() {
             var div = document.createElement('div');
             div.setAttribute('id', id);
             div.setAttribute('style', 'width: 100%; height: 150px');
-            document.body.appendChild(div);
+            chartDiv.appendChild(div);
             chart.options.valueFormatter = function(y) {
             }
             chart.options.axes = {
@@ -68,6 +69,17 @@ window.onload = function() {
                     valueFormatter: fmt.iso,
                 },
             }
+            var div2 = document.createElement('div');
+            div2.setAttribute('style', 'width: 150px; height: 150px');
+            chart.options.labelsDiv = div2;
+            chart.options.labelsSeparateLines = true;
+
+            var div3 = document.createElement('div');
+            div3.setAttribute('style', 'display: flex; padding-bottom: 16px');
+            div3.appendChild(div);
+            div3.appendChild(div2);
+            chartDiv.appendChild(div3);
+
             charts[id] = new Dygraph(div, chart.data, chart.options);
         });
     });