Added value goals and time events.

morrisjs · Nov 1, 2012 · 38a1cdd · 38a1cdd
1 parent df9eb94
commit 38a1cdd
Show file tree

Hide file tree

Showing 5 changed files with 177 additions and 2 deletions.
diff --git a/examples/events.html b/examples/events.html
@@ -0,0 +1,56 @@
+<!doctype html>
+<head>
+  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+  <script src="https://raw.github.com/DmitryBaranovskiy/raphael/300aa589f5a0ba7fce667cd62c7cdda0bd5ad904/raphael-min.js"></script>
+  <script src="../morris.js"></script>
+  <script src="lib/prettify.js"></script>
+  <script src="lib/example.js"></script>
+  <link rel="stylesheet" href="lib/example.css">
+  <link rel="stylesheet" href="lib/prettify.css">
+</head>
+<body>
+<h1>Time Events</h1>
+<div id="graph"></div>
+<pre id="code" class="prettyprint linenums">
+var week_data = [
+  {"period": "2011 W27", "licensed": 3407, "sorned": 660},
+  {"period": "2011 W26", "licensed": 3351, "sorned": 629},
+  {"period": "2011 W25", "licensed": 3269, "sorned": 618},
+  {"period": "2011 W24", "licensed": 3246, "sorned": 661},
+  {"period": "2011 W23", "licensed": 3257, "sorned": 667},
+  {"period": "2011 W22", "licensed": 3248, "sorned": 627},
+  {"period": "2011 W21", "licensed": 3171, "sorned": 660},
+  {"period": "2011 W20", "licensed": 3171, "sorned": 676},
+  {"period": "2011 W19", "licensed": 3201, "sorned": 656},
+  {"period": "2011 W18", "licensed": 3215, "sorned": 622},
+  {"period": "2011 W17", "licensed": 3148, "sorned": 632},
+  {"period": "2011 W16", "licensed": 3155, "sorned": 681},
+  {"period": "2011 W15", "licensed": 3190, "sorned": 667},
+  {"period": "2011 W14", "licensed": 3226, "sorned": 620},
+  {"period": "2011 W13", "licensed": 3245, "sorned": null},
+  {"period": "2011 W12", "licensed": 3289, "sorned": null},
+  {"period": "2011 W11", "licensed": 3263, "sorned": null},
+  {"period": "2011 W10", "licensed": 3189, "sorned": null},
+  {"period": "2011 W09", "licensed": 3079, "sorned": null},
+  {"period": "2011 W08", "licensed": 3085, "sorned": null},
+  {"period": "2011 W07", "licensed": 3055, "sorned": null},
+  {"period": "2011 W06", "licensed": 3063, "sorned": null},
+  {"period": "2011 W05", "licensed": 2943, "sorned": null},
+  {"period": "2011 W04", "licensed": 2806, "sorned": null},
+  {"period": "2011 W03", "licensed": 2674, "sorned": null},
+  {"period": "2011 W02", "licensed": 1702, "sorned": null},
+  {"period": "2011 W01", "licensed": 1732, "sorned": null}
+];
+Morris.Line({
+  element: 'graph',
+  data: week_data,
+  xkey: 'period',
+  ykeys: ['licensed', 'sorned'],
+  labels: ['Licensed', 'SORN'],
+  events: [
+    '2011-04',
+    '2011-08'
+  ]
+});
+</pre>
+</body>
diff --git a/examples/goals.html b/examples/goals.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<head>
+  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+  <script src="https://raw.github.com/DmitryBaranovskiy/raphael/300aa589f5a0ba7fce667cd62c7cdda0bd5ad904/raphael-min.js"></script>
+  <script src="../morris.js"></script>
+  <script src="lib/prettify.js"></script>
+  <script src="lib/example.js"></script>
+  <link rel="stylesheet" href="lib/example.css">
+  <link rel="stylesheet" href="lib/prettify.css">
+</head>
+<body>
+<h1>Value Goals</h1>
+<div id="graph"></div>
+<pre id="code" class="prettyprint linenums">
+var decimal_data = [];
+for (var x = 0; x <= 360; x += 10) {
+  decimal_data.push({
+    x: x,
+    y: Math.sin(Math.PI * x / 180).toFixed(4)
+  });
+}
+window.m = Morris.Line({
+  element: 'graph',
+  data: decimal_data,
+  xkey: 'x',
+  ykeys: ['y'],
+  labels: ['sin(x)'],
+  parseTime: false,
+  goals: [-1, 0, 1]
+});
+</pre>
+</body>
diff --git a/lib/morris.grid.coffee b/lib/morris.grid.coffee
@@ -51,12 +51,33 @@ class Morris.Grid extends Morris.EventEmitter
     preUnits: ''
     ymax: 'auto'
     ymin: 'auto 0'
+    goals: []
+    goalStrokeWidth: 1.0
+    goalLineColors: [
+      '#666633'
+      '#999966'
+      '#cc6666'
+      '#663333'
+    ]
+    events: []
+    eventStrokeWidth: 1.0
+    eventLineColors: [
+      '#005a04'
+      '#ccffbb'
+      '#3a5f0b'
+      '#005502'
+    ]
 
   # Update the data series and redraw the chart.
   #
   setData: (data, redraw = true) ->
     ymax = if @cumulative then 0 else null
     ymin = if @cumulative then 0 else null
+
+    if @options.goals.length > 0
+      ymax = Math.max(ymax, Math.max.apply(null,@options.goals))
+      ymin = Math.min(ymin, Math.min.apply(null,@options.goals))
+
     @data = $.map data, (row, index) =>
       ret = {}
       ret.label = row[@options.xkey]
@@ -94,6 +115,13 @@ class Morris.Grid extends Morris.EventEmitter
     # calculate horizontal range of the graph
     @xmin = @data[0].x
     @xmax = @data[@data.length - 1].x
+
+    @events = []
+    if @options.parseTime and @options.events.length > 0
+      @events = $.map @options.events, (event, index) => Morris.parseDate(event)
+      @xmax = Math.max(@xmax, Math.max.apply(null,@events))
+      @xmin = Math.min(@xmin, Math.min.apply(null,@events))
+
     if @xmin is @xmax
       @xmin -= 1
       @xmax += 1
@@ -174,8 +202,25 @@ class Morris.Grid extends Morris.EventEmitter
     @r.clear()
     @_calc()
     @drawGrid()
+    @drawGoals()
+    @drawEvents()
     @draw() if @draw
 
+  # draw goals horizontal lines
+  #
+  drawGoals: ->
+    for goal, i in @options.goals
+      @r.path("M#{@left},#{@transY(goal)}H#{@left + @width}")
+        .attr('stroke', @options.goalLineColors[i % @options.goalLineColors.length])
+        .attr('stroke-width', @options.goalStrokeWidth)
+
+  # draw events vertical lines
+  drawEvents: ->
+    for event, i in @events
+      @r.path("M#{@transX(event)},#{@bottom}V#{@top}")
+        .attr('stroke', @options.eventLineColors[i % @options.eventLineColors.length])
+        .attr('stroke-width', @options.eventStrokeWidth)
+
   # draw y axis labels, horizontal lines
   #
   drawGrid: ->

diff --git a/morris.js b/morris.js
diff --git a/morris.min.js b/morris.min.js