Switch from Google charts to Charted

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

 <link rel="import" href="../../../../packages/polymer/polymer.html">
 <link rel="import" href="action_link.html">
 <link rel="import" href="function_ref.html">
 <link rel="import" href="isolate_ref.html">
 <link rel="import" href="observatory_element.html">
 <link rel="import" href="script_inset.html">
 <link rel="import" href="script_ref.html">
 <polymer-element name="isolate-summary" extends="observatory-element">
   <template>
     <link rel="stylesheet" href="css/shared.css">
@@ skipping 103 matching lines @@
       }
     </style>
     <link rel="stylesheet" href="css/shared.css">
     <template if="{{ isolate.error != null }}">
       <div class="content-centered">
         <pre class="errorBox">{{ isolate.error.message }}</pre>
         <br>
       </div>
     </template>
     <div class="flex-row">
-      <div class="flex-item-10-percent">
-      </div>
-      <div class="flex-item-40-percent">
+      <div class="flex-item-50-percent">
         <isolate-counter-chart counters="{{ isolate.counters }}"></isolate-counter-chart>
       </div>
       <div class="flex-item-40-percent">
         <div class="memberList">
           <div class="memberItem">
             <div class="memberName">new heap</div>
             <div class="memberValue">
               {{ isolate.newSpace.used | formatSize }}
               of
               {{ isolate.newSpace.capacity | formatSize }}
@@ skipping 70 matching lines @@
         -->
       </div>
       <div class="flex-item-10-percent">
       </div>
     </div>
   </template>
 </polymer-element>
 
 <polymer-element name="isolate-counter-chart" extends="observatory-element">
   <template>
-    <div id="counterPieChart" style="height: 200px"></div>
+    <link rel="stylesheet" href="../../../../packages/charted/charts/themes/quantum_theme.css">
+    <style>
+.chart-wrapper {
+}
+
+.chart-host-wrapper {
+  height: 200px;
+}
+.chart-legend-host {
+  max-height: 200px;
+  overflow-x: auto;
+  overflow-y: auto;
+}
+    </style>
+    <div class="chart-wrapper" id="isolate-counter-chart">
+      <div class="chart-host-wrapper">
+          <div class="chart-host"></div>
+          <div class="chart-legend-host"></div>
+      </div>
+  </div>
   </template>
 </polymer-element>
 
 <script type="application/dart" src="isolate_summary.dart"></script>