Graph tweaks.

--HG--
branch : profiledev

profile.html

@@ -103,7 +103,7 @@ $(function() {
     <div id="grade-detail-graph" style="width:650px;height:200px;"></div>
     <br/>
     <br/>
-    <div id="grade-overview-graph" style="width:650px;height:150px;"></div>
+    <div id="grade-overview-graph" style="width:650px;height:130px;"></div>
     
     <script type="text/javascript" src="${ settings.LIB_URL }flot/jquery.flot.js"></script>
     <script type="text/javascript" src="${ settings.LIB_URL }flot/jquery.flot.stack.js"></script>
@@ -124,7 +124,14 @@ $(function() {
       }
       
       /* -------------------------------- Grade detail graph -------------------------------- */
-      var colors = [$.color.parse("#E8B800"), $.color.parse("#A0CEFA"), $.color.parse("#BD3738"), $.color.parse("#429A2E")];
+      //var colors = [$.color.parse("#E8B800"), $.color.parse("#A0CEFA"), $.color.parse("#BD3738"), $.color.parse("#429A2E")];
+      //var colors = [$.color.parse("#1B2045"), $.color.parse("#557a00"), $.color.parse("#F5600"), $.color.parse("#FEBA2C")];
+      //var colors = [$.color.parse("#E7C856"), $.color.parse("#CD462E"), $.color.parse("#B01732"), $.color.parse("#41192A")];
+      var colors = [$.color.parse("#434F5E"), $.color.parse("#BEF731"), $.color.parse("#FB5455"), $.color.parse("#44C4B7")];
+      //var colors = [$.color.parse("#147A7D"), $.color.parse("#C0C900"), $.color.parse("#C9005B"), $.color.parse("#FCF9A5")];
+      
+      
+      
       var series = [];
       var ticks = []; //These are the indices and x-axis labels for the data
       var bottomTicks = []; //Labels on the bottom
@@ -234,13 +241,17 @@ $(function() {
       totalScore = 0.0
       %>
       %for section in grade_summary:
+      %if section['totalscore']['score'] > 0:
         series.push({label: "${section['category']}",
           data: [[${section['totalscore']['score'] * section['weight']}, 1]],
-          color: colors[${sectionIndex}].toString(), });
+          color: colors[${sectionIndex}].toString(), 
+          ##We need at least one to be on xaxis 2 for the second xaxis labels to show up
+          ${"xaxis: 2" if sectionIndex % 2 == 0 else ""} }); 
+        %endif
         
           ticks.push( [${totalWeight + section['weight'] * 0.5}, "${'{} - {:.0%}'.format(section['category'], section['weight'])}" ] );
           
-          markings.push({xaxis: {from: ${totalWeight}, to: ${totalWeight + section['weight']} }, color:colors[${sectionIndex}].scale("a", 0.3).toString() });
+          markings.push({xaxis: {from: ${totalWeight}, to: ${totalWeight + section['weight']} }, color:colors[${sectionIndex}].scale("a", 0.6).toString() });
           
           overview_tooltips["${section['category']}"] = [ "${section['totalscore']['summary']}" ];
         <%
@@ -250,15 +261,12 @@ $(function() {
         %>
       %endfor
       
-      //Alwasy be sure that one series has the xaxis set to 2, or the second xaxis labels won't show up
-      series.push({label: "Total", data: [[0.9, 1]], points: {symbol: "cross", show: true, radius: 3}, bars: {show: false}, color: "red", xaxis: 2});
-      
       options = {
           series: {stack: 0,
                    lines: {show: false, steps: false },
-                   bars: {show: true, barWidth: 1, align: 'center', horizontal: true, linewidth: 0, fill:1},},
+                   bars: {show: true, barWidth: 0.8, align: 'center', horizontal: true, linewidth:0, fill:1},},
           xaxis: {min: 0.0, max: 1.0},
-          yaxis: {min: 0.0, max: 2.0, ticks: []},
+          yaxis: {min: 0.0, max: 2.0, labelWidth:50, ticks:[[1.18,"Grade Totals"]], tickLength: 0},
           xaxes: [ {ticks: [[0.87, "A 87%"], [0.7, "B 70%"], [0.6, "C 60%"]], position: top}, 
                     {ticks: ticks }],
           grid: { markings: markings, hoverable: true, clickable: true, borderWidth: 1},
@@ -270,7 +278,7 @@ $(function() {
       
       //Put the percent on the graph
       var o = plot.pointOffset({x: ${totalScore}, y: 1 });
-      $gradeOverviewGraph.append('<div style="position:absolute;left:' + (o.left + 4) + 'px;top:' + (o.top - 7) + 'px">${"{:.0%}".format(totalScore)}</div>');
+      $gradeOverviewGraph.append('<div style="position:absolute;left:' + (o.left + 4) + 'px;top:' + (o.top - 10) + 'px">${"{:.0%}".format(totalScore)}</div>');
       
       
       $("#grade-overview-graph").bind("plothover", function (event, pos, item) {