Unified line chart

Change-Id: I815530116853ae6968263077ad7cd4629b7ff7dd

9 files changed, 196 insertions, 238 deletions

diff --git a/horizon/static/horizon/js/horizon.d3linechart.js b/horizon/static/horizon/js/horizon.d3linechart.js
index d21a185d..ebe1ba9e 100644
--- a/horizon/static/horizon/js/horizon.d3linechart.js
+++ b/horizon/static/horizon/js/horizon.d3linechart.js
@@ -1,62 +1,129 @@
 /*
-    Draw a non-modal line chart in d3.
+    Draw line chart in d3.
+
+    It support 2 types of usage:
+      * as a standard line chart
+      * as a line chart in a modal window
+
+    To use as a standard line chart the following data attributes need to be
+    provided for a div:
+      data-chart-type - must be "line_chart"
+      data-url        - (string) url for the json data for the chart
+      data-series     - (string) the list of series separated by comma
+
+    Example:
+      <div data-chart-type="line_chart"
+           data-url="/data_url"
+           data-series="cpu,ram,storage,network">
+      </div>
+
+    To use as a line chart in a modal windows the following data attributes
+    need to be provided for a link:
+      data-chart-type - must be "modal_line_chart"
+      data-url        - (string) url for the json data for the chart
+      data-series     - (string) the list of series separated by comma
 
     Example:
-        <div id="some_sort_of_data_chart"
-             class="line_chart"
-             data-line-url="/url/to/get/data/from"
-        </div>
+      <a data-chart-type="modal_line_chart"
+         data-url="/data_url"
+         data-series="network">
+        Click me!
+      </a>
 */
 
 horizon.d3_line_chart = {
-  line_charts: [],
 
   init: function() {
-    this.line_charts = $('div[data-line-url]');
+    var self = this;
+
+    self.init_line_charts();
+    self.init_modal_chart_links();
+  },
 
-    this._initialCreation(this.line_charts);
+  init_line_charts: function() {
+    var self = this;
+
+    line_charts = $("div[data-chart-type='line_chart']");
+    $.each(line_charts, function(index, line_chart) {
+      if($(line_chart).data('modal') != true) {
+        var template = horizon.templates.compiled_templates["#modal_chart_template"];
+        self.init_svg(line_chart);
+        self.draw(self.data(line_chart));
+      }
+    });
   },
 
-  draw: function(element, url) {
+  init_modal_chart_links: function() {
     var self = this;
 
-    var margin = {top: 20, right: 80, bottom: 30, left: 50};
-    var width = 1000 - margin.left - margin.right;
-    var height = 400 - margin.top - margin.bottom;
+    $(document).on('click', "a[data-chart-type='modal_line_chart']", function(event) {
+      event.preventDefault();
+
+      var template = horizon.templates.compiled_templates["#modal_chart_template"];
+      $('#modal_wrapper').append(template.render({classes: "modal"}));
 
-    var svg = d3.select("#"+element)
-                .append("svg")
-                .attr("width", width + margin.left + margin.right)
-                .attr("height", height + margin.top + margin.bottom)
-                .append("g")
-                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
+      var modal = $('.modal:last');
+      modal.modal();
 
-    var x = d3.time.scale().range([0, width]);
-    var y = d3.scale.linear().range([height, 0]);
+      $(modal).on('click', 'ul#interval_selector li a', function(event){
+        event.preventDefault();
 
-    var xAxis = d3.svg.axis()
-                      .scale(x)
-                      .orient("bottom");
-    var yAxis = d3.svg.axis()
-                  .scale(y)
-                  .orient("left");
+        self.url_options.interval = $(event.target).data('interval');
+        self.draw(self.url_options);
+        $("ul#interval_selector li").removeClass("active");
+        $(event.target).parent().addClass("active");
+      })
 
-    var parseDate = d3.time.format("%Y-%m-%dT%H:%M:%S.%L").parse;
+      self.init_svg("#modal_chart");
+      self.url_options = self.data($(event.target))
+      self.draw(self.url_options)
+    });
+  },
 
-    var line = d3.svg.line().interpolate("linear")
-                            .x(function(d) { return x(d.date); })
-                            .y(function(d) { return y(d.value); });
+  init_svg: function(chart_div) {
+    var self = this;
 
-    var color = d3.scale.category10();
+    self.margin = {top: 20, right: 80, bottom: 30, left: 50};
+    self.width = 700 - self.margin.left - self.margin.right;
+    self.height = 400 - self.margin.top - self.margin.bottom;
 
-    d3.json(url, function(error, data) {
-      data.forEach(function(d) {
-        d.date = parseDate(d.date);
-      });
+    self.svg = d3.select(chart_div)
+                 .append("svg")
+                 .attr("width", self.width + self.margin.left + self.margin.right)
+                 .attr("height", self.height + self.margin.top + self.margin.bottom)
+                 .append("g")
+                 .attr("transform", "translate(" + self.margin.left + "," + self.margin.top + ")");
 
-      color.domain(d3.keys(data[0]).filter(function(key) { return key !== 'date'; }));
+    self.x = d3.time.scale().range([0, self.width]);
+    self.y = d3.scale.linear().range([self.height, 0]);
 
-      var usage_values = color.domain().map(function(name) {
+    self.xAxis = d3.svg.axis()
+                       .scale(self.x)
+                       .orient("bottom").ticks(6);
+    self.yAxis = d3.svg.axis()
+                       .scale(self.y)
+                       .orient("left");
+
+    self.parse_date = d3.time.format("%Y-%m-%dT%H:%M:%S.%L").parse;
+
+    self.line = d3.svg.line().interpolate("linear")
+                             .x(function(d) { return self.x(d.date); })
+                             .y(function(d) { return self.y(d.value); });
+
+    self.color = d3.scale.category10();
+  },
+
+  draw: function(url_options) {
+    var self = this;
+    var url_options = url_options || {};
+    url_options.interval = url_options.interval || "1w";
+
+    d3.json(self.json_url(url_options), function(error, data) {
+      data.forEach(function(d) { d.date = self.parse_date(d.date); });
+
+      self.color.domain(d3.keys(data[0]).filter(function(key) { return key !== 'date'; }));
+
+      var usage_values = self.color.domain().map(function(name) {
         return {
           name: name,
           values: data.map(function(d) {
@@ -65,41 +132,69 @@ horizon.d3_line_chart = {
         };
       });
 
-      x.domain(d3.extent(data, function(d) { return d.date; }));
-      y.domain([
-        d3.min(usage_values, function(u) { return d3.min(u.values, function(v) { return v.value; }) - 1; }),
-        d3.max(usage_values, function(u) { return d3.max(u.values, function(v) { return v.value; }) + 6; })
-      ]);
+      self.svg.selectAll(".axis").remove();
+      self.x.domain(d3.extent(data, function(d) { return d.date; }));
+      self.y.domain([0, 15]);
+
+      self.svg.append("g")
+              .attr("transform", "translate(0," + self.height + ")")
+              .attr("class", "axis")
+              .call(self.xAxis);
+      self.svg.append("g")
+              .attr("class", "axis")
+              .call(self.yAxis)
 
-      svg.append("g")
-         .attr("transform", "translate(0," + height + ")")
-         .attr("class", "axis")
-         .call(xAxis);
-      svg.append("g")
-         .attr("class", "axis")
-         .call(yAxis)
+      var usages = self.svg.selectAll(".usage")
+                           .data(usage_values, function(d) { return self.key(d) });
 
-      var usage = svg.selectAll(".usage")
-                    .data(usage_values)
-                    .enter().append("g");
+      var usage = usages.enter().append("g")
+                                .attr("class", "usage");
 
       usage.append("path")
-        .attr("d", function(d) { return line(d.values); })
-        .style("stroke", function(d) { return color(d.name); })
-        .style("fill", "none")
-        .style("stroke-width", 3);
+           .attr("d", function(d) { return self.line(d.values); })
+           .style("stroke", function(d) { return self.color(d.name); })
+           .style("fill", "none")
+           .style("stroke-width", 3);
+
+      var legend = usage.append('g')
+                        .attr('class', 'legend');
+
+      legend.append('rect')
+            .attr('x', self.width - 60)
+            .attr('y', function(d, i){ return (i *  20) + 30 ;})
+            .attr('width', 10)
+            .attr('height', 10)
+            .style('fill', function(d) { return self.color(d.name); });
+
+      legend.append('text')
+          .attr('x', self.width - 40)
+          .attr('y', function(d, i){ return (i *  20) + 39;})
+          .text(function(d){ return d.name.replace(/_/g, " "); });
+
+      usages.exit().remove();
     });
   },
 
-  // Draw the initial d3 bars
-  _initialCreation: function(charts) {
-    var scope = this;
-    $(charts).each(function(index, element) {
-      var chart_element = $(element);
+  data: function(element) {
+    return {
+      url: $(element).data("url"),
+      series: $(element).data("series")
+    };
+  },
+
+  json_url: function(url_options) {
+    var options = $.extend({}, url_options);
+    var url = options.url
+    delete options.url
+    return url + '?' + $.param(options);
+  },
 
-      var chart_url = chart_element.attr('data-line-url');
+  key: function(data){
+    return data.name + data.values.length + data.values[0].date + data.values[data.values.length-1].date
+  },
 
-      scope.draw($(element).attr('id'), chart_url);
-    });
-  }
 };
+
+horizon.addInitFunction(function () {
+  horizon.d3_line_chart.init();
+});
diff --git a/horizon/static/horizon/js/horizon.d3modallinechart.js b/horizon/static/horizon/js/horizon.d3modallinechart.js
deleted file mode 100644
index a4015f51..00000000
--- a/horizon/static/horizon/js/horizon.d3modallinechart.js
+++ /dev/null
@@ -1,132 +0,0 @@
-/*
-    Draw line chart in d3.
-
-    To use, a link is required with the class .modal_chart
-
-    Example:
-        <a class="modal_chart">Click me!</a>
-*/
-
-horizon.d3_modal_line_chart = {
-
-  init: function() {
-    var self = this;
-
-    $(document).on('click', '.modal_chart', function (evt) {
-      evt.preventDefault();
-      var $this = $(this);
-
-      var template = horizon.templates.compiled_templates["#modal_chart_template"];
-      $('#modal_wrapper').append(template.render());
-
-      var modal = $('.modal:last');
-      modal.modal();
-
-      $(modal).on('click', 'ul#interval_selector li a', function(event){
-        event.preventDefault();
-
-        interval = $(event.target).data("interval");
-        self.draw('/infrastructure/resource_management/racks/usage_data', {interval: interval});
-
-        $("ul#interval_selector li").removeClass("active");
-        $(event.target).parent().addClass("active");
-      })
-
-      self.init_svg();
-      self.draw('/infrastructure/resource_management/racks/usage_data')
-    });
-  },
-
-  init_svg: function() {
-    var self = this;
-
-    self.margin = {top: 20, right: 80, bottom: 30, left: 50};
-    self.width = 700 - self.margin.left - self.margin.right;
-    self.height = 400 - self.margin.top - self.margin.bottom;
-
-    self.svg = d3.select("#modal_chart")
-                 .append("svg")
-                 .attr("width", self.width + self.margin.left + self.margin.right)
-                 .attr("height", self.height + self.margin.top + self.margin.bottom)
-                 .append("g")
-                 .attr("transform", "translate(" + self.margin.left + "," + self.margin.top + ")");
-
-    self.x = d3.time.scale().range([0, self.width]);
-    self.y = d3.scale.linear().range([self.height, 0]);
-
-    self.xAxis = d3.svg.axis()
-                       .scale(self.x)
-                       .orient("bottom").ticks(6);
-    self.yAxis = d3.svg.axis()
-                       .scale(self.y)
-                       .orient("left");
-
-    self.parse_date = d3.time.format("%Y-%m-%dT%H:%M:%S.%L").parse;
-
-    self.line = d3.svg.line().interpolate("linear")
-                             .x(function(d) { return self.x(d.date); })
-                             .y(function(d) { return self.y(d.value); });
-
-    self.color = d3.scale.category10();
-  },
-
-  draw: function(url, url_options) {
-    var self = this;
-    var url_options = url_options || {};
-    url_options.interval = url_options.interval || "1w";
-
-    d3.json(self.data_url(url, url_options), function(error, data) {
-      data.forEach(function(d) { d.date = self.parse_date(d.date); });
-
-      self.color.domain(d3.keys(data[0]).filter(function(key) { return key !== 'date'; }));
-
-      var usage_values = self.color.domain().map(function(name) {
-        return {
-          name: name,
-          values: data.map(function(d) {
-            return {date: d.date, value: d[name]};
-          })
-        };
-      });
-
-      self.svg.selectAll(".axis").remove();
-      self.x.domain(d3.extent(data, function(d) { return d.date; }));
-      self.y.domain([0, 15]);
-
-      self.svg.append("g")
-              .attr("transform", "translate(0," + self.height + ")")
-              .attr("class", "axis")
-              .call(self.xAxis);
-      self.svg.append("g")
-              .attr("class", "axis")
-              .call(self.yAxis)
-
-      var usages = self.svg.selectAll(".usage")
-                           .data(usage_values, function(d) { return self.key(d) });
-
-      var usage = usages.enter().append("g")
-                                .attr("class", "usage");
-
-      usage.append("path")
-           .attr("d", function(d) { return self.line(d.values); })
-           .style("stroke", function(d) { return self.color(d.name); })
-           .style("fill", "none")
-           .style("stroke-width", 3);
-
-      usages.exit().remove();
-    });
-  },
-
-  data_url: function(url, options) {
-    return url + '?' + $.param(options);
-  },
-
-  key: function(data){
-    return data.name + data.values.length + data.values[0].date + data.values[data.values.length-1].date
-  },
-
-};
-
-horizon.addInitFunction(function () {
-  horizon.d3_modal_line_chart.init();
-});
diff --git a/horizon/templates/horizon/client_side/_modal_chart.html b/horizon/templates/horizon/client_side/_modal_chart.html
index 53b9fb4c..e26a7d4d 100644
--- a/horizon/templates/horizon/client_side/_modal_chart.html
+++ b/horizon/templates/horizon/client_side/_modal_chart.html
@@ -5,7 +5,7 @@
 
 {% block template %}
 {% jstemplate %}
-<div class="modal" style="top: 80px; display: block;">
+<div class="[[classes]]" style="top: 80px; display: block;">
     <ul id="interval_selector">
         <li><a href="#" data-interval="12h">12h</a></li>
         <li><a href="#" data-interval="24h">24h</a></li>
diff --git a/openstack_dashboard/api/tuskar.py b/openstack_dashboard/api/tuskar.py
index acc64e44..e6031867 100644
--- a/openstack_dashboard/api/tuskar.py
+++ b/openstack_dashboard/api/tuskar.py
@@ -695,8 +695,9 @@ class FlavorTemplate(StringIdAPIResourceWrapper):
         values = []
         current_time = start_time
         while current_time <= end_time:
-            values.append({'date': current_time,
-                           'value': randint(0, self.running_virtual_machines)})
+            values.append(
+                {'date': current_time,
+                 'active_vms': randint(0, self.running_virtual_machines)})
             current_time += timedelta(hours=1)
 
         return values
diff --git a/openstack_dashboard/dashboards/infrastructure/resource_management/racks/views.py b/openstack_dashboard/dashboards/infrastructure/resource_management/racks/views.py
index 25b67a71..4268c29f 100644
--- a/openstack_dashboard/dashboards/infrastructure/resource_management/racks/views.py
+++ b/openstack_dashboard/dashboards/infrastructure/resource_management/racks/views.py
@@ -139,6 +139,8 @@ class UsageDataView(View):
 
     def get(self, request, *args, **kwargs):
         interval = request.GET.get('interval', '1w')
+        series = request.GET.get('series', "")
+        series = series.split(',')
 
         if interval == '12h':
             data_count = 12
@@ -160,8 +162,12 @@ class UsageDataView(View):
         values = []
         for i in range(data_count):
             timediff = timedelta(**{timedelta_param: i})
-            values.append({'date': datetime.now() - timediff,
-                           'ram': random.randint(1, 9)})
+            current_value = {'date': datetime.now() - timediff}
+
+            for usage_type in series:
+                current_value[usage_type] = random.randint(1, 9)
+
+            values.append(current_value)
 
         return HttpResponse(json.dumps(values, cls=DjangoJSONEncoder),
                             mimetype='application/json')
diff --git a/openstack_dashboard/dashboards/infrastructure/resource_management/templates/resource_management/flavors/_detail_overview.html b/openstack_dashboard/dashboards/infrastructure/resource_management/templates/resource_management/flavors/_detail_overview.html
index 33db3100..3a6905e0 100644
--- a/openstack_dashboard/dashboards/infrastructure/resource_management/templates/resource_management/flavors/_detail_overview.html
+++ b/openstack_dashboard/dashboards/infrastructure/resource_management/templates/resource_management/flavors/_detail_overview.html
@@ -51,7 +51,7 @@
           </div>
         </td>
         <td>
-          <a href="#" class="modal_chart">{{ flavor.vcpu.usage }}/{{ flavor.vcpu.value }} {{ flavor.vcpu.unit }}</a>
+          <a href="#" data-chart-type="modal_line_chart" data-url="/infrastructure/resource_management/racks/usage_data" data-series="cpu">{{ flavor.vcpu.usage }}/{{ flavor.vcpu.value }} {{ flavor.vcpu.unit }}</a>
         </td>
       </tr>
       <tr>
@@ -65,7 +65,7 @@
           </div>
         </td>
         <td>
-          <a href="#" class="modal_chart">{{ flavor.ram.usage }}/{{ flavor.ram.value }} {{ flavor.ram.unit }}</a>
+          <a href="#" data-chart-type="modal_line_chart" data-url="/infrastructure/resource_management/racks/usage_data" data-series="ram">{{ flavor.ram.usage }}/{{ flavor.ram.value }} {{ flavor.ram.unit }}</a>
         </td>
       </tr>
       <tr>
@@ -79,7 +79,7 @@
           </div>
         </td>
         <td>
-          <a href="#" class="modal_chart">{{ flavor.root_disk.usage }}/{{ flavor.root_disk.value }} {{ flavor.root_disk.unit }}</a>
+          <a href="#" data-chart-type="modal_line_chart" data-url="/infrastructure/resource_management/racks/usage_data" data-series="root_disk">{{ flavor.root_disk.usage }}/{{ flavor.root_disk.value }} {{ flavor.root_disk.unit }}</a>
         </td>
       </tr>
       <tr>
@@ -93,7 +93,7 @@
           </div>
         </td>
         <td>
-          <a href="#" class="modal_chart">{{ flavor.ephemeral_disk.usage }}/{{ flavor.ephemeral_disk.value }} {{ flavor.ephemeral_disk.unit }}</a>
+          <a href="#" data-chart-type="modal_line_chart" data-url="/infrastructure/resource_management/racks/usage_data" data-series="ephemeral_disk">{{ flavor.ephemeral_disk.usage }}/{{ flavor.ephemeral_disk.value }} {{ flavor.ephemeral_disk.unit }}</a>
         </td>
       </tr>
       <tr>
@@ -107,7 +107,7 @@
           </div>
         </td>
         <td>
-          <a href="#" class="modal_chart">{{ flavor.swap_disk.usage }}/{{ flavor.swap_disk.value }} {{ flavor.swap_disk.unit }}</a>
+          <a href="#" data-chart-type="modal_line_chart" data-url="/infrastructure/resource_management/racks/usage_data" data-series="ephemeral_disk">{{ flavor.swap_disk.usage }}/{{ flavor.swap_disk.value }} {{ flavor.swap_disk.unit }}</a>
         </td>
       </tr>
     </table>
@@ -121,22 +121,9 @@
     <table class="chart">
       <tr>
         <td>
-          <div id="active_instances"
-               class="line_chart"
-               data-line-url="{% url 'horizon:infrastructure:resource_management:flavors:active_instances_data' flavor.id%}">
-          </div>
+          <div data-chart-type="line_chart" data-url="{% url 'horizon:infrastructure:resource_management:flavors:active_instances_data' flavor.id%}" data-series="active_instances"></div>
         </td>
       </tr>
     </table>
   </div>
 </div>
-
-<script type="text/javascript" charset="utf-8">
-  if(typeof horizon.d3_line_chart !== 'undefined') {
-    horizon.d3_line_chart.init();
-  } else {
-    addHorizonLoadEvent(function() {
-      horizon.d3_line_chart.init();
-    });
-  }
-</script>
diff --git a/openstack_dashboard/dashboards/infrastructure/resource_management/templates/resource_management/nodes/_detail_overview.html b/openstack_dashboard/dashboards/infrastructure/resource_management/templates/resource_management/nodes/_detail_overview.html
index 2f8e8a3a..f1acd571 100644
--- a/openstack_dashboard/dashboards/infrastructure/resource_management/templates/resource_management/nodes/_detail_overview.html
+++ b/openstack_dashboard/dashboards/infrastructure/resource_management/templates/resource_management/nodes/_detail_overview.html
@@ -51,7 +51,7 @@
           </div>
         </td>
         <td>
-          <a href="#" class="modal_chart">{{ node.cpu.usage }}/{{ node.cpu.value }} {{ node.cpu.unit }}</a>
+          <a href="#" data-chart-type="modal_line_chart" data-url="/infrastructure/resource_management/racks/usage_data">{{ node.cpu.usage }}/{{ node.cpu.value }} {{ node.cpu.unit }}</a>
         </td>
       </tr>
       <tr>
@@ -65,7 +65,7 @@
           </div>
         </td>
         <td>
-          <a href="#" class="modal_chart">{{ node.ram.usage }}/{{ node.ram.value }} {{ node.ram.unit }}</a>
+          <a href="#" data-chart-type="modal_line_chart" data-url="/infrastructure/resource_management/racks/usage_data">{{ node.ram.usage }}/{{ node.ram.value }} {{ node.ram.unit }}</a>
         </td>
       </tr>
       <tr>
@@ -79,7 +79,7 @@
           </div>
         </td>
         <td>
-          <a href="#" class="modal_chart">{{ node.storage.usage }}/{{ node.storage.value }} {{ node.storage.unit }}</a>
+          <a href="#" data-chart-type="modal_line_chart" data-url="/infrastructure/resource_management/racks/usage_data">{{ node.storage.usage }}/{{ node.storage.value }} {{ node.storage.unit }}</a>
         </td>
       </tr>
       <tr>
@@ -93,7 +93,7 @@
           </div>
         </td>
         <td>
-          <a href="#" class="modal_chart">{{ node.network.usage }}/{{ node.network.value }} {{ node.network.unit }}</a>
+          <a href="#" data-chart-type="modal_line_chart" data-url="/infrastructure/resource_management/racks/usage_data">{{ node.network.usage }}/{{ node.network.value }} {{ node.network.unit }}</a>
         </td>
       </tr>
     </table>
diff --git a/openstack_dashboard/dashboards/infrastructure/resource_management/templates/resource_management/racks/_detail_overview.html b/openstack_dashboard/dashboards/infrastructure/resource_management/templates/resource_management/racks/_detail_overview.html
index 0d093052..81facdc3 100644
--- a/openstack_dashboard/dashboards/infrastructure/resource_management/templates/resource_management/racks/_detail_overview.html
+++ b/openstack_dashboard/dashboards/infrastructure/resource_management/templates/resource_management/racks/_detail_overview.html
@@ -44,7 +44,7 @@
           </div>
         </td>
         <td>
-          <a href="#" class="modal_chart">{{ capacity.usage|default:_(" - ") }}/{{ capacity.value|default:_(" - ") }} {{ capacity.unit }}</a>
+          <a href="#" data-chart-type="modal_line_chart" data-url="/infrastructure/resource_management/racks/usage_data">{{ capacity.usage|default:_(" - ") }}/{{ capacity.value|default:_(" - ") }} {{ capacity.unit }}</a>
         </td>
       </tr>
       {% endfor %}
diff --git a/openstack_dashboard/dashboards/infrastructure/resource_management/templates/resource_management/resource_classes/_detail_overview.html b/openstack_dashboard/dashboards/infrastructure/resource_management/templates/resource_management/resource_classes/_detail_overview.html
index 7a0db04d..618a05cc 100644
--- a/openstack_dashboard/dashboards/infrastructure/resource_management/templates/resource_management/resource_classes/_detail_overview.html
+++ b/openstack_dashboard/dashboards/infrastructure/resource_management/templates/resource_management/resource_classes/_detail_overview.html
@@ -42,7 +42,7 @@
           </div>
         </td>
         <td>
-          <a href="#" class="modal_chart">{{ resource_class.cpu.usage }}/{{ resource_class.cpu.value }} {{ resource_class.cpu.unit }}</a>
+          <a href="#" data-chart-type="modal_line_chart" data-url="/infrastructure/resource_management/racks/usage_data" data-series="cpu">{{ resource_class.cpu.usage }}/{{ resource_class.cpu.value }} {{ resource_class.cpu.unit }}</a>
         </td>
       </tr>
       <tr>
@@ -56,7 +56,7 @@
           </div>
         </td>
         <td>
-          <a href="#" class="modal_chart">{{ resource_class.ram.usage }}/{{ resource_class.ram.value }} {{ resource_class.ram.unit }}</a>
+          <a href="#" data-chart-type="modal_line_chart" data-url="/infrastructure/resource_management/racks/usage_data" data-series="ram">{{ resource_class.ram.usage }}/{{ resource_class.ram.value }} {{ resource_class.ram.unit }}</a>
         </td>
       </tr>
       <tr>
@@ -70,7 +70,7 @@
           </div>
         </td>
         <td>
-          <a href="#" class="modal_chart">{{ resource_class.storage.usage }}/{{ resource_class.storage.value }} {{ resource_class.storage.unit }}</a>
+          <a href="#" data-chart-type="modal_line_chart" data-url="/infrastructure/resource_management/racks/usage_data" data-series="storage">{{ resource_class.storage.usage }}/{{ resource_class.storage.value }} {{ resource_class.storage.unit }}</a>
         </td>
       </tr>
       <tr>
@@ -84,7 +84,7 @@
           </div>
         </td>
         <td>
-          <a href="#" class="modal_chart">{{ resource_class.network.usage }}/{{ resource_class.network.value }} {{ resource_class.network.unit }}</a>
+          <a href="#" data-chart-type="modal_line_chart" data-url="/infrastructure/resource_management/racks/usage_data" data-series="network">{{ resource_class.network.usage }}/{{ resource_class.network.value }} {{ resource_class.network.unit }}</a>
         </td>
       </tr>
     </table>
@@ -93,14 +93,9 @@
 
 <div class="status row-fluid detail">
   <div class="span6">
-    <h4>{% trans "Running Virtual Machines" %}</h4>
+    <h4>{% trans "Capacity Usage" %}</h4>
     <hr class="header_rule">
-    <dl>
-      {% for flavor_count in resource_class.running_virtual_machines %}
-        <dt>{{ flavor_count.flavor.name }}</dt>
-        <dd>{{ flavor_count.max_vms }}</dd>
-      {% endfor %}
-    </dl>
+    <div data-chart-type="line_chart" data-url="/infrastructure/resource_management/racks/usage_data" data-series="cpu,ram,storage,network"></div>
   </div>
 
   <div class="span6">
@@ -117,8 +112,14 @@
 
 <div class="row-fluid detail">
   <div class="span6">
-    <h4>Summary of instances and usage</h4>
+    <h4>{% trans "Summary of Instances and Usage" %}</h4>
     <hr class="header_rule">
+    <dl>
+      {% for flavor_count in resource_class.running_virtual_machines %}
+        <dt>{{ flavor_count.flavor.name }}</dt>
+        <dd>{{ flavor_count.max_vms }}</dd>
+      {% endfor %}
+    </dl>
   </div>
 
   <div class="span6">