Switch from Google charts to Charted

runtime/observatory/lib/src/elements/heap_profile.html

Index: runtime/observatory/lib/src/elements/heap_profile.html
diff --git a/runtime/observatory/lib/src/elements/heap_profile.html b/runtime/observatory/lib/src/elements/heap_profile.html
index 6cece87d2dc37da84bd53661b84883c7a149b84b..362a8cb3be73cb1f0935e80b9728bbbe890a2b54 100644
--- a/runtime/observatory/lib/src/elements/heap_profile.html
+++ b/runtime/observatory/lib/src/elements/heap_profile.html
@@ -51,6 +51,20 @@
       padding: 8px;
     }
   </style>
+  <link rel="stylesheet" href="../../../../packages/charted/charts/themes/quantum_theme.css">
+  <style>
+.chart-wrapper {
+}
+
+.chart-host-wrapper {
+height: 300px;
+}
+.chart-legend-host {
+max-height: 300px;
+overflow-x: auto;
+overflow-y: auto;
+}
+  </style>
   <nav-bar>
     <top-nav-menu></top-nav-menu>
     <vm-nav-menu vm="{{ profile.isolate.vm }}"></vm-nav-menu>
@@ -115,7 +129,12 @@
             <div class="memberValue">{{ isolate.newSpace.averageCollectionPeriodInMillis.toStringAsFixed(2) }} ms</div>
           </div>
         </div>
-        <div id="newPieChart" style="height: 300px"></div>
+        <div class="chart-wrapper" id="new-pie-chart">
+          <div class="chart-host-wrapper">
+              <div class="chart-host"></div>
+              <div class="chart-legend-host"></div>
+          </div>
+        </div>
       </div>
       <div id="oldSpace" class="flex-item-50-percent">
         <h2>Old Generation</h2>
@@ -152,7 +171,12 @@
             <div class="memberValue">{{ isolate.oldSpace.averageCollectionPeriodInMillis.toStringAsFixed(2) }} ms</div>
           </div>
         </div>
-        <div id="oldPieChart" style="height: 300px"></div>
+        <div class="chart-wrapper" id="old-pie-chart">
+          <div class="chart-host-wrapper">
+              <div class="chart-host"></div>
+              <div class="chart-legend-host"></div>
+          </div>
+        </div>
       </div>
     </div>
   </div>