patch up realtime example, add crappy legend

Author: boorad

examples/realtime/css/chart.css

@@ -16,12 +16,19 @@ path.line {
     fill: none;
 }
 
-.line.male {
-    stroke: steelblue;
+.line.s_all {
+    stroke: black;
+    color: black
 }
 
-.line.female {
+.line.s_male {
+    stroke: #89CFF0;
+    color: #89CFF0;
+}
+
+.line.s_female {
     stroke: pink;
+    color: pink;
 }
 
 .line.summary {
@@ -30,4 +37,8 @@ path.line {
 
 div.summary {
     display: none;
-}
+}
+
+.legend {
+    text-align: center;
+}

examples/realtime/index.haml

@@ -13,5 +13,8 @@
   %body
     #container
       #chart
-
+    .legend
+      .line.s_all Overall Average
+      .line.s_male Male
+      .line.s_female Female
     %script(type="text/javascript" src="js/chart.js")

examples/realtime/index.html

@@ -12,6 +12,11 @@
     <div id='container'>
       <div id='chart'></div>
     </div>
+    <div class='legend'>
+      <div class='line s_all'>Overall Average</div>
+      <div class='line s_male'>Male</div>
+      <div class='line s_female'>Female</div>
+    </div>
     <script src='js/chart.js' type='text/javascript'></script>
   </body>
 </html>

examples/realtime/js/chart.js

@@ -26,6 +26,7 @@ chart.series = {
         "active" : true
     }
 };
+chart.ref_series = "all";
 chart.fill_left_pts(1, 50.0, 0);
 chart.render();