display a graph of station utilizations after run

dream/platform/static/css/demo-new.css

@@ -229,5 +229,13 @@ path, ._jsPlumb_endpoint { cursor:pointer; }
 }
 
 
+#graph {
+  width: 600px;
+  height: 400px;
+  text-align: center;
+  margin-left:auto;
+  margin-right:auto;
+  padding-top:2px;
+  margin-top:0px;
 }
 

dream/platform/static/index.html

@@ -29,6 +29,11 @@
           <div id="render"></div>
         </div>
 
+       <div id="graph_zone">
+         <div>Stations Utilization</div>
+         <div id="graph"> </div>
+       </div>
+
 
        <div id="sidebar">
        <table>
@@ -89,7 +94,11 @@
         <!-- jquery jsPlumb adapter -->
 		<script src="lib/jsPlumb/jquery.jsPlumb.js"></script>
 		<!-- /JS -->
-		
+        
+        <!-- flot -->
+    	<script src="lib/jquery.flot.js"></script>
+        <script src="lib/jquery.flot.stack.js"></script>
+
 
 <div id="dialog-form" title="Configure">
   <form>

dream/platform/static/src/dream_launcher.js

@@ -147,11 +147,44 @@
           function(data) {
             if (data['success']) {
               $("#json_result").text(JSON.stringify(data['success'], undefined, " "));
-              $.each(data['success'].coreObject, function(idx, obj){
-                 var e = $("#" + obj.id);
-                 /* attach something to each corresponding core object */
-                 // e.tooltip(JSON.stringify(obj['results'], undefined, " "));
+              
+              // display demo graph.
+              $("#graph_zone").show();
+              var blockage_data = [], waiting_data = [], failure_data = [], working_data = [], ticks= [], counter = 1;
+              $.each(data['success'].elementList, function(idx, obj){
+                 if (obj.results.working_ratio !== undefined) {
+                    blockage_data.push([counter, obj.results.blockage_ratio.avg]);
+                    waiting_data.push([counter, obj.results.waiting_ratio.avg]);
+                    failure_data.push([counter, obj.results.failure_ratio.avg]);
+                    working_data.push([counter, obj.results.working_ratio.avg]);
+                    ticks.push([counter, dream_instance.getData().element[obj.id].name || obj.id]);
+                    counter ++;
+                 }
               })
+              
+              var series = [
+                {label:"Working", data: working_data},
+                {label:"Waiting", data: waiting_data},
+                {label:"Failures", data: failure_data},
+                {label:"Blockage", data: blockage_data} ];
+            
+              var options = {
+                xaxis: {
+                  minTickSize: 1,
+                  ticks: ticks
+                },
+                yaxis: {max: 100},
+                series: {
+                  bars: {
+                    show: true,
+                    barWidth: .9,
+                    align: "center"
+                  },
+                  stack: true,
+                },
+              };
+              $.plot("#graph", series, options);
+
             } else {
               $("#json_result").effect('shake', 50).text(data['error']);
             }
@@ -176,5 +209,6 @@
        return false;
      });
   })
-
+  
+  $("#graph_zone").hide();
 })(jQuery);