app/views/pg_hero/home/system.html.erb in pghero-1.6.2 vs app/views/pg_hero/home/system.html.erb in pghero-1.6.3

@@ -5,18 +5,30 @@
     <% end %>
   </p>
   <% path_options = {duration: params[:duration], period: params[:period]} %>
 
   <h1>CPU</h1>
-  <div style="margin-bottom: 20px;"><%= line_chart cpu_usage_path(path_options), max: 100, colors: ["#5bc0de"] %></div>
+  <div id="chart-1" class="chart" style="margin-bottom: 20px;">Loading...</div>
+  <script>
+    new Chartkick.LineChart("chart-1", <%= json_escape(cpu_usage_path(path_options).to_json).html_safe %>, {max: 100, colors: ["#5bc0de"]})
+  </script>
 
   <h1>Load</h1>
-  <div style="margin-bottom: 20px;"><%= line_chart load_stats_path(path_options), colors: ["#5bc0de", "#d9534f"] %></div>
+  <div id="chart-2" class="chart" style="margin-bottom: 20px;">Loading...</div>
+  <script>
+    new Chartkick.LineChart("chart-2", <%= json_escape(load_stats_path(path_options).to_json).html_safe %>, {colors: ["#5bc0de", "#d9534f"]})
+  </script>
 
   <h1>Connections</h1>
-  <div style="margin-bottom: 20px;"><%= line_chart connection_stats_path(path_options), colors: ["#5bc0de"] %></div>
+  <div id="chart-3" class="chart" style="margin-bottom: 20px;">Loading...</div>
+  <script>
+    new Chartkick.LineChart("chart-3", <%= json_escape(connection_stats_path(path_options).to_json).html_safe %>, {colors: ["#5bc0de"]})
+  </script>
 
   <% if @database.replica? %>
     <h1>Replication Lag</h1>
-    <div style="margin-bottom: 20px;"><%= line_chart replication_lag_stats_path(path_options), colors: ["#5bc0de"] %></div>
+    <div id="chart-4" class="chart" style="margin-bottom: 20px;">Loading...</div>
+    <script>
+      new Chartkick.LineChart("chart-4", <%= json_escape(replication_lag_stats_path(path_options).to_json).html_safe %>, {colors: ["#5bc0de"]})
+    </script>
   <% end %>
 </div>