Add user-experience chart (need to put it in a modal or popover or something)

src/app/index.coffee

@@ -116,6 +116,13 @@ ready (model) ->
           todoTally += absVal
         task.set('completed', false) if type == 'daily'
     model.push '_user.history.todos', { date: new Date(), value: todoTally }
+    
+    # tally experience
+    expTally = user.get 'exp'
+    _(user.get('lvl')-1).times ->
+      expTally += 50 * Math.pow(lvl, 2) - 150 * lvl + 200
+    model.push '_user.history.exp',  { date: new Date(), value: expTally }
+    
      
   #TODO: remove when cron implemented 
   poormanscron = ->
@@ -306,6 +313,24 @@ ready (model) ->
     chart = new google.visualization.LineChart(document.getElementById( 'todos-chart' ))
     chart.draw(data, options)
 
+  exports.toggleExpChart = (e, el) ->
+    $('#exp-chart').toggle()
+    
+    matrix = [['Date', 'Score']]
+    for obj in model.get('_user.history.exp')
+      date = new Date(obj.date)
+      readableDate = "#{date.getMonth()}/#{date.getDate()}/#{date.getFullYear()}"
+      matrix.push [ readableDate, obj.value ]
+    data = google.visualization.arrayToDataTable matrix
+    
+    options = {
+      title: 'History'
+      backgroundColor: 'whiteSmoke'
+    }
+
+    chart = new google.visualization.LineChart(document.getElementById( 'exp-chart' ))
+    chart.draw(data, options)
+
   exports.vote = (e, el, next) ->
     direction = $(el).attr('data-direction')
     direction = 'up' if direction == 'true/'

views/app/index.html

@@ -18,12 +18,16 @@
             </div>
 
             <div class="progress progress-warning">
-              <span class="progress-text">Exp: {round(_user.exp)} / {_tnl}</span>
+              <span class="progress-text"><a x-bind=click:toggleExpChart><i class=icon-signal></i></a> Exp: {round(_user.exp)} / {_tnl}</span>
               <div class="bar" style="width: {percent(_user.exp,_tnl)}%;"></div>
             </div>
               
-            </div>
           </td>
+
+          <td>
+            &nbsp;<div id="exp-chart" style="display:none;height:95px;width:300px;"></div>
+          </td>
+
         </tr>
       </table>
     <!--<% else %>