Merge pull request #15 from paulcpederson/master

Scatter Plots Aggregate Multiple Data Points into One Point
paulcpederson · May 30, 2014 · d501354 · d501354
2 parents 6172931 + 69dafcf
commit d501354
Show file tree

Hide file tree

Showing 10 changed files with 142 additions and 17 deletions.
diff --git a/dist/angular-dimple.js b/dist/angular-dimple.js
@@ -1,4 +1,4 @@
-/*! Angular-Dimple - 1.0.0 - 2014-05-28
+/*! Angular-Dimple - 1.0.0 - 2014-05-30
 *   https://github.com/esripdx/angular-dimple
 *   Licensed ISC */
 angular.module('angular-dimple.core', [])
@@ -250,10 +250,14 @@ angular.module('angular-dimple.scatter-plot', [])
       var chart = graphController.getChart();
 
       function addScatterPlot () {
-        var field = $attrs.field ? $attrs.field : "";
-        scatterPlot = chart.addSeries([$attrs.series, field], dimple.plot.bubble);
+        var array = [];
+
+        if ($attrs.series){ array.push($attrs.series); }
+        array.push($attrs.field);
+        if ($attrs.label || $attrs.label === '') { array.push($attrs.label); }
+        scatterPlot = chart.addSeries(array, dimple.plot.bubble);
         scatterPlot.aggregate = dimple.aggregateMethod.avg;
-        core.filter(scatterPlot, $scope.data, field, $attrs.value, $attrs.filter);
+        core.filter(scatterPlot, $scope.data, $attrs.field, $attrs.value, $attrs.filter);
         graphController.draw();
       }
 

diff --git a/dist/angular-dimple.min.js b/dist/angular-dimple.min.js
diff --git a/documentation/partials/scatter-plot.md b/documentation/partials/scatter-plot.md
@@ -6,7 +6,7 @@
 </h2>
 
 <div class="white-panel">
-  <graph data="graphData">
+  <graph data="graphData" height="600px">
     <x field="Operating Profit" type="Measure"></x>
     <y field="Unit Sales" type="Measure"></y>
     <legend></legend>
@@ -16,10 +16,12 @@
 
 ```html
 <!-- With Attrs -->
-<graph data="graphData">
+<graph data="graphData" height="600px">
   <x field="Operating Profit" type="Measure"></x>
   <y field="Unit Sales" type="Measure"></y>
   <legend></legend>
+  <!-- plot all of Aperture's SKU's against profit and sales
+       'series' is the data you'd like to plot on the graph -->
   <scatter-plot field="Owner" value="Aperture" series="SKU"></scatter-plot>
 </graph>
 ```
@@ -37,6 +39,50 @@
   <x field="Operating Profit" type="Measure" title="Profit, Aperture"></x>
   <y field="Unit Sales" type="Measure"></y>
   <legend></legend>
+  <!-- plot the SKU of each channel as a different color,
+       using 'filter' to only show entries for Aperture. -->
   <scatter-plot field="Channel" series="SKU" filter="Owner:Aperture"></scatter-plot>
 </graph>
 ```
+
+<div class="white-panel">
+  <graph data="simpleData" width="100%" height="600px">
+    <x field="Height" type="Measure"></x>
+    <y field="Weight" type="Measure"></y>
+    <scatter-plot field="Height" series="Weight" label="Group A"></scatter-plot>
+  </graph>
+</div>
+
+```html
+<graph data="simpleData" width="100%" height="600px">
+  <x field="Height" type="Measure"></x>
+  <y field="Weight" type="Measure"></y>
+  <!-- pass a 'label' to the scatter-plot to group entries,
+       here, all data points are plotted but they're colored the same -->
+  <scatter-plot field="Height" series="Weight" label="Group A"></scatter-plot>
+</graph>
+```
+
+```json
+[
+  {
+    "Height": 64,
+    "Weight": 190
+  },{
+    "Height": 68,
+    "Weight": 195
+  },{
+    "Height": 69,
+    "Weight": 198
+  },{
+    "Height": 70,
+    "Weight": 205
+  },{
+    "Height": 67,
+    "Weight": 198
+  },{
+    "Height": 76,
+    "Weight": 195
+  }
+]
+```
diff --git a/site/data/simple.json b/site/data/simple.json
@@ -0,0 +1,21 @@
+[
+  {
+    "Height": 64,
+    "Weight": 190
+  },{
+    "Height": 68,
+    "Weight": 195
+  },{
+    "Height": 69,
+    "Weight": 198
+  },{
+    "Height": 70,
+    "Weight": 205
+  },{
+    "Height": 67,
+    "Weight": 198
+  },{
+    "Height": 76,
+    "Weight": 195
+  }
+]