Switch from Google charts to Charted

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

 <link rel="import" href="../../../../packages/polymer/polymer.html">
 <link rel="import" href="class_ref.html">
 <link rel="import" href="observatory_element.html">
 <link rel="import" href="nav_bar.html">
 <link rel="import" href="view_footer.html">
 
 <polymer-element name="heap-profile" extends="observatory-element">
 <template>
   <link rel="stylesheet" href="css/shared.css">
   <style>
@@ skipping 33 matching lines @@
     #classtable tr:hover > td {
       background-color: #F4C7C3;
     }
     .nav-option {
       color: white;
       float: right;
       margin: 3px;
       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>
     <isolate-nav-menu isolate="{{ profile.isolate }}"></isolate-nav-menu>
     <nav-menu link="{{ makeLink('/allocation-profiler', profile.isolate) }}" anchor="allocation profile" last="{{ true }}"></nav-menu>
     <nav-refresh callback="{{ resetAccumulator }}" label="Reset Accumulator"></nav-refresh>
     <nav-refresh callback="{{ refreshGC }}" label="GC"></nav-refresh>
     <nav-refresh callback="{{ refresh }}"></nav-refresh>
     <div class="nav-option">
       <input type="checkbox" checked="{{ autoRefresh }}">Auto-refresh on GC
@@ skipping 44 matching lines @@
           </div>
           <div class="memberItem">
             <div class="memberName">cumulative collection time</div>
             <div class="memberValue">{{ formattedTotalCollectionTime(true) }}</div>
           </div>
           <div class="memberItem">
             <div class="memberName">average time between collections</div>
             <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>
         <br>
         <div class="memberList">
           <div class="memberItem">
             <div class="memberName">used</div>
             <div class="memberValue">
               {{ isolate.oldSpace.used | formatSize }}
               of
@@ skipping 16 matching lines @@
           </div>
           <div class="memberItem">
             <div class="memberName">cumulative collection time</div>
             <div class="memberValue">{{ formattedTotalCollectionTime(false) }}</div>
           </div>
           <div class="memberItem">
             <div class="memberName">average time between collections</div>
             <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>
   <br>
   <hr>
   <div class="content-centered-big">
     <table id="classtable" class="flex-item-100-percent table">
       <thead id="classTableHead">
         <tr>
           <th on-click="{{changeSort}}" class="clickable" title="Class">{{ classTable.getColumnLabel(0) }}</th>
@@ skipping 11 matching lines @@
       </thead>
       <tbody id="classTableBody">
       </tbody>
     </table>
     <view-footer></view-footer>
   </div>
 </template>
 </polymer-element>
 
 <script type="application/dart" src="heap_profile.dart"></script>