From 2586da5cd97e74cfc4746c070cf63dd3cae69370 Mon Sep 17 00:00:00 2001 From: Nikolas Wise Date: Mon, 28 Jul 2014 09:18:52 -0700 Subject: [PATCH 01/29] define sample graph widths to 100% --- dist/angular-dimple.js | 2 +- documentation/partials/area.md | 8 ++++---- documentation/partials/bar-graph.md | 4 ++-- documentation/partials/expanded-stacked-area.md | 4 ++-- documentation/partials/homepage-code.md | 2 +- documentation/partials/line-graph.md | 4 ++-- documentation/partials/scatter-plot.md | 4 ++-- documentation/partials/stacked-area.md | 6 +++--- documentation/partials/stacked-bar-graph.md | 4 ++-- site/documentation/partials/area.html | 8 ++++---- site/documentation/partials/bar-graph.html | 4 ++-- site/documentation/partials/expanded-stacked-area.html | 4 ++-- site/documentation/partials/homepage-code.html | 2 +- site/documentation/partials/line-graph.html | 4 ++-- site/documentation/partials/scatter-plot.html | 4 ++-- site/documentation/partials/stacked-area.html | 6 +++--- site/documentation/partials/stacked-bar-graph.html | 4 ++-- site/index.html | 2 +- site/js/lib/angular-dimple.js | 2 +- 19 files changed, 39 insertions(+), 39 deletions(-) diff --git a/dist/angular-dimple.js b/dist/angular-dimple.js index d0f11e8..80bf7d5 100644 --- a/dist/angular-dimple.js +++ b/dist/angular-dimple.js @@ -1,4 +1,4 @@ -/*! Angular-Dimple - 1.0.0 - 2014-05-30 +/*! Angular-Dimple - 1.0.0 - 2014-07-28 * https://github.com/esripdx/angular-dimple * Licensed ISC */ angular.module('angular-dimple.core', []) diff --git a/documentation/partials/area.md b/documentation/partials/area.md index 71fe7f0..5f39df8 100644 --- a/documentation/partials/area.md +++ b/documentation/partials/area.md @@ -6,7 +6,7 @@
- + @@ -17,7 +17,7 @@ ```
- + @@ -28,7 +28,7 @@
- + @@ -41,7 +41,7 @@ ```
- + diff --git a/documentation/partials/bar-graph.md b/documentation/partials/bar-graph.md index fcea323..81265ba 100644 --- a/documentation/partials/bar-graph.md +++ b/documentation/partials/bar-graph.md @@ -6,7 +6,7 @@
- + @@ -15,7 +15,7 @@
```html - + diff --git a/documentation/partials/expanded-stacked-area.md b/documentation/partials/expanded-stacked-area.md index cb5588d..bf0b8b5 100644 --- a/documentation/partials/expanded-stacked-area.md +++ b/documentation/partials/expanded-stacked-area.md @@ -5,7 +5,7 @@ - + @@ -14,7 +14,7 @@ ```html - + diff --git a/documentation/partials/homepage-code.md b/documentation/partials/homepage-code.md index a780c61..9f927eb 100644 --- a/documentation/partials/homepage-code.md +++ b/documentation/partials/homepage-code.md @@ -1,7 +1,7 @@ Top Tabbed Code Sample: ```html - + diff --git a/documentation/partials/line-graph.md b/documentation/partials/line-graph.md index 19c5e17..3189c05 100644 --- a/documentation/partials/line-graph.md +++ b/documentation/partials/line-graph.md @@ -7,7 +7,7 @@
- + @@ -17,7 +17,7 @@ ```html - + diff --git a/documentation/partials/scatter-plot.md b/documentation/partials/scatter-plot.md index 22fa7dc..fe7c699 100644 --- a/documentation/partials/scatter-plot.md +++ b/documentation/partials/scatter-plot.md @@ -6,7 +6,7 @@
- + @@ -16,7 +16,7 @@ ```html - + diff --git a/documentation/partials/stacked-area.md b/documentation/partials/stacked-area.md index acbd97b..d1515cc 100644 --- a/documentation/partials/stacked-area.md +++ b/documentation/partials/stacked-area.md @@ -6,7 +6,7 @@
- + @@ -53,7 +53,7 @@
- + @@ -62,7 +62,7 @@
``` - + diff --git a/documentation/partials/stacked-bar-graph.md b/documentation/partials/stacked-bar-graph.md index 14afee9..68ead76 100644 --- a/documentation/partials/stacked-bar-graph.md +++ b/documentation/partials/stacked-bar-graph.md @@ -6,7 +6,7 @@
- + @@ -16,7 +16,7 @@ ```html - + diff --git a/site/documentation/partials/area.html b/site/documentation/partials/area.html index 0e7790f..114eba2 100644 --- a/site/documentation/partials/area.html +++ b/site/documentation/partials/area.html @@ -6,7 +6,7 @@

- + @@ -16,7 +16,7 @@ 

<!-- Default -->
 <div class="white-panel">
-  <graph data="graphData">
+ <graph data="graphData" width="100%" height="600px">
     <x field="Month" order-by="Date"></x>
     <y field="Unit Sales"></y>
     <legend></legend>
@@ -25,7 +25,7 @@ 

 </div>

- + @@ -37,7 +37,7 @@ 

<!-- Grouped Area -->
 <div class="white-panel">
-  <graph data="graphData" width="100%" height="600px">
+ <graph data="graphData" width="100%" height="600px">
     <x group-by="Owner" field="Month" order-by="Date" title="Cream, Get the Money"></x>
     <y field="Unit Sales" type="Measure" title="Dollah Dolah Bill Yall"></y>
 
diff --git a/site/documentation/partials/bar-graph.html b/site/documentation/partials/bar-graph.html
index f9a665f..9c526e6 100644
--- a/site/documentation/partials/bar-graph.html
+++ b/site/documentation/partials/bar-graph.html
@@ -6,7 +6,7 @@ 

 

 
 

-  
+  
     
     
     
@@ -14,7 +14,7 @@ 

   
 

 
-
<graph data="graphData">
+
<graph data="graphData" width="100%" height="600px">
   <x field="Month" order-by="Date"></x>
   <y field="Unit Sales"></y>
   <legend></legend>
diff --git a/site/documentation/partials/expanded-stacked-area.html b/site/documentation/partials/expanded-stacked-area.html
index 736e41a..e896d54 100644
--- a/site/documentation/partials/expanded-stacked-area.html
+++ b/site/documentation/partials/expanded-stacked-area.html
@@ -5,7 +5,7 @@ 

     
 

 
-
+
   
   
   
@@ -13,7 +13,7 @@ 

 
 
 
<!-- Default Stacked -->
-<graph data="graphData">
+<graph data="graphData" width="100%" height="600px">
   <x field="Month" order-by="Date"></x>
   <y field="Unit Sales" type="Percent"></y>
   <legend></legend>
diff --git a/site/documentation/partials/homepage-code.html b/site/documentation/partials/homepage-code.html
index 454a303..20e0500 100644
--- a/site/documentation/partials/homepage-code.html
+++ b/site/documentation/partials/homepage-code.html
@@ -1,5 +1,5 @@
 
Top Tabbed Code Sample:

-
<graph data="graphData" height="400">
+
<graph data="graphData" height="400" width="100%">
   <x field="Month" order-by="Date"></x>
   <y field="Unit Sales"></y>
   <legend></legend>
diff --git a/site/documentation/partials/line-graph.html b/site/documentation/partials/line-graph.html
index c394c56..3c5d521 100644
--- a/site/documentation/partials/line-graph.html
+++ b/site/documentation/partials/line-graph.html
@@ -6,7 +6,7 @@ 

 

 
 

-  
+  
     
     
     
@@ -15,7 +15,7 @@ 

 

 
 
<!-- Default -->
-<graph data="graphData">
+<graph data="graphData" width="100%" height="600px">
   <x field="Month" order-by="Date"></x>
   <y field="Unit Sales"></y>
   <legend></legend>
diff --git a/site/documentation/partials/scatter-plot.html b/site/documentation/partials/scatter-plot.html
index 751f0b0..1d8d70c 100644
--- a/site/documentation/partials/scatter-plot.html
+++ b/site/documentation/partials/scatter-plot.html
@@ -6,7 +6,7 @@ 

 

 
 

-  
+  
     
     
     
@@ -15,7 +15,7 @@ 

 

 
 
<!-- With Attrs -->
-<graph data="graphData" height="600px">
+<graph data="graphData" width="100%" height="600px">
   <x field="Operating Profit" type="Measure"></x>
   <y field="Unit Sales" type="Measure"></y>
   <legend></legend>
diff --git a/site/documentation/partials/stacked-area.html b/site/documentation/partials/stacked-area.html
index 243ceb4..5037028 100644
--- a/site/documentation/partials/stacked-area.html
+++ b/site/documentation/partials/stacked-area.html
@@ -6,7 +6,7 @@ 

 

 
 

-  
+  
     
     
     
@@ -47,7 +47,7 @@ 

 

 
 

-  
+  
     
     
     
@@ -55,7 +55,7 @@ 

   
 

 
-
<graph data="graphData" height="600">
+
<graph data="graphData" width="100%" height="600px">
   <x field="Month" order-by="Date"></x>
   <y field="Unit Sales" type="Percent"></y>
   <legend></legend>
diff --git a/site/documentation/partials/stacked-bar-graph.html b/site/documentation/partials/stacked-bar-graph.html
index a6cdc9d..ccb3aae 100644
--- a/site/documentation/partials/stacked-bar-graph.html
+++ b/site/documentation/partials/stacked-bar-graph.html
@@ -6,7 +6,7 @@ 

 

 
 

-  
+  
     
     
     
@@ -15,7 +15,7 @@ 

 

 
 
<!-- As Stacked Bar -->
-<graph data="graphData">
+<graph data="graphData" width="100%" height="600px">
   <x field="Month" order-by="Date"></x>
   <y field="Unit Sales"></y>
   <legend></legend>
diff --git a/site/index.html b/site/index.html
index 9d7f45f..d3d9ef8 100644
--- a/site/index.html
+++ b/site/index.html
@@ -113,7 +113,7 @@ 
The Power of Angular Directives

 </graph>

                 
                 

-                  
+                  
                     
                     
                     
diff --git a/site/js/lib/angular-dimple.js b/site/js/lib/angular-dimple.js
index d0f11e8..80bf7d5 100644
--- a/site/js/lib/angular-dimple.js
+++ b/site/js/lib/angular-dimple.js
@@ -1,4 +1,4 @@
-/*! Angular-Dimple - 1.0.0 - 2014-05-30
+/*! Angular-Dimple - 1.0.0 - 2014-07-28
 *   https://github.com/esripdx/angular-dimple
 *   Licensed ISC */
 angular.module('angular-dimple.core', [])

From 7e12e1803afde20335e2553a38ceaa9bec9663f0 Mon Sep 17 00:00:00 2001
From: Nikolas Wise 
Date: Mon, 28 Jul 2014 09:25:28 -0700
Subject: [PATCH 02/29] stub out ring chart

---
 documentation/partials/ring.md        | 58 +++++++++++++++++++++++++++
 site/documentation/partials/ring.html | 52 ++++++++++++++++++++++++
 site/js/app.js                        |  4 ++
 site/js/controllers.js                |  6 +++
 4 files changed, 120 insertions(+)
 create mode 100644 documentation/partials/ring.md
 create mode 100644 site/documentation/partials/ring.html

diff --git a/documentation/partials/ring.md b/documentation/partials/ring.md
new file mode 100644
index 0000000..fb490b3
--- /dev/null
+++ b/documentation/partials/ring.md
@@ -0,0 +1,58 @@
+

+    Ring Chart
+    
+      Stacked Area Documentation
+    
+

+
+

+  
+    
+    
+    
+    
+  
+

+
+

+  
+

+
+```html
+

+  
+

+```
+
+
+```html
+
+
+  
+  
+  
+  
+
+```
\ No newline at end of file
diff --git a/site/documentation/partials/ring.html b/site/documentation/partials/ring.html
new file mode 100644
index 0000000..e5c09c4
--- /dev/null
+++ b/site/documentation/partials/ring.html
@@ -0,0 +1,52 @@
+

+    Ring Chart
+    
+      Stacked Area Documentation
+    
+

+
+

+  
+    
+    
+    
+    
+  
+

+
+

+  
+

+
+
<div id="chartContainer">
+  <script type="text/javascript">
+    var svg = dimple.newSvg("#chartContainer", 590, 400);
+    d3.tsv("/data/example_data.tsv", function (data) {
+      var myChart = new dimple.chart(svg, data);
+      myChart.setBounds(20, 20, 460, 360)
+      myChart.addMeasureAxis("p", "Unit Sales");
+      var ring = myChart.addSeries("Owner", dimple.plot.pie);
+      ring.innerRadius = "50%";
+      myChart.addLegend(500, 20, 90, 300, "left");
+      myChart.draw();
+    });
+  </script>
+</div>

+
<!-- Default Stacked -->
+<graph data="graphData">
+  <x field="Month" order-by="Date"></x>
+  <y field="Unit Sales"></y>
+  <legend></legend>
+  <stacked-area field="Owner"></area>
+</graph>

diff --git a/site/js/app.js b/site/js/app.js
index fb4fa93..e9f3572 100644
--- a/site/js/app.js
+++ b/site/js/app.js
@@ -38,6 +38,10 @@ angular.module('myApp', [
     templateUrl: '../documentation/partials/scatter-plot.html',
     controller: 'scatterController'
   })
+  .when('/ring', {
+    templateUrl: '../documentation/partials/ring.html',
+    controller: 'ringController'
+  })
 
   .otherwise({
     redirectTo: '/line-graph'
diff --git a/site/js/controllers.js b/site/js/controllers.js
index 42f885d..f7d6cc7 100644
--- a/site/js/controllers.js
+++ b/site/js/controllers.js
@@ -37,6 +37,12 @@ angular.module('myApp.controllers', [])
   });
 }])
 
+.controller('ringController', ['$scope', 'dataService', function($scope, dataService) {
+  dataService.getData().then(function(response) {
+    $scope.graphData = response.data;
+  });
+}])
+
 .controller('scatterController', ['$scope', 'dataService', function($scope, dataService) {
   dataService.getData().then(function(response) {
     $scope.graphData = response.data;

From 829e8b734c2728f300b2b2df6f36beeb8f088881 Mon Sep 17 00:00:00 2001
From: Nikolas Wise 
Date: Mon, 28 Jul 2014 10:01:47 -0700
Subject: [PATCH 03/29] add simple single ring chart

---
 dist/angular-dimple.js                | 88 ++++++++++++++++++++++++++-
 dist/angular-dimple.min.js            |  2 +-
 documentation/partials/ring.md        | 49 +++------------
 site/documentation/partials/ring.html | 45 +++-----------
 site/examples/index.html              |  2 +-
 site/index.html                       |  2 +-
 site/js/lib/angular-dimple.js         | 88 ++++++++++++++++++++++++++-
 site/js/lib/angular-dimple.min.js     |  2 +-
 source/angular-dimple.js              |  4 +-
 source/p.js                           | 30 +++++++++
 source/ring.js                        | 53 ++++++++++++++++
 11 files changed, 278 insertions(+), 87 deletions(-)
 create mode 100644 source/p.js
 create mode 100644 source/ring.js

diff --git a/dist/angular-dimple.js b/dist/angular-dimple.js
index 80bf7d5..8b0ac09 100644
--- a/dist/angular-dimple.js
+++ b/dist/angular-dimple.js
@@ -32,12 +32,14 @@ angular.module('angular-dimple', [
   'angular-dimple.legend',
   'angular-dimple.x',
   'angular-dimple.y',
+  'angular-dimple.p',
   'angular-dimple.line',
   'angular-dimple.bar',
   'angular-dimple.stacked-bar',
   'angular-dimple.area',
   'angular-dimple.stacked-area',
-  'angular-dimple.scatter-plot'
+  'angular-dimple.scatter-plot',
+  'angular-dimple.ring'
 ])
 
 .constant('MODULE_VERSION', '0.0.1')
@@ -237,6 +239,90 @@ angular.module('angular-dimple.line', [])
     }
   };
 }]);
+angular.module('angular-dimple.p', [])
+
+.directive('p', [function () {
+  return {
+    restrict: 'E',
+    replace: true,
+    require: ['p', '^graph'],
+    controller: ['$scope', '$element', '$attrs', function($scope, $element, $attrs) {
+    }],
+    link: function($scope, $element, $attrs, $controllers) {
+      var graphController = $controllers[1];
+      var chart = graphController.getChart();
+
+      function addAxis () {
+        p = chart.addMeasureAxis('p', $attrs.field);
+
+        if ($attrs.title && $attrs.title !== "null") {
+          p.title = $attrs.title;
+        } else if ($attrs.title == "null") {
+          p.title = null;
+        }
+      }
+      $scope.$watch('data', function(newValue, oldValue) {
+        if (newValue) {
+          addAxis();
+        }
+      });
+    }
+  };
+}]);
+angular.module('angular-dimple.ring', [])
+
+.directive('ring', ['angular-dimple.core', function (core) {
+  return {
+    restrict: 'E',
+    replace: true,
+    require: ['ring', '^graph'],
+    controller: ['$scope', '$element', '$attrs', function($scope, $element, $attrs) {
+    }],
+    link: function($scope, $element, $attrs, $controllers) {
+      var graphController = $controllers[1];
+      var areaController = $controllers[0];
+      var chart = graphController.getChart();
+
+      function addRing () {
+        ring = chart.addSeries([$attrs.field], dimple.plot.pie);
+        if ($attrs.stroke) {
+          var stroke = (100 - $attrs.stroke) + '%';
+          ring.innerRadius = stroke;
+          console.log(stroke);
+        } else {
+          ring.innerRadius = "50%";
+        }
+
+
+        // ring.innerRadius = "50%";
+        // core.filter(ring, $scope.data, $attrs.field, $attrs.value, $attrs.filter);
+        // ring.lineMarkers = true;
+
+        // if ($attrs.value) {
+        //   ring = chart.addSeries([$attrs.field], dimple.plot.pie);
+        //   core.filter(ring, $scope.data, $attrs.field, $attrs.value, $attrs.filter);
+        //   ring.lineMarkers = true;
+        // } else {
+        //   var values = dimple.getUniqueValues($scope.data, $attrs.field);
+        //   angular.forEach(values, function(value){
+        //     ring = chart.addSeries([$attrs.field], dimple.plot.pie);
+        //     core.filter(ring, $scope.data, $attrs.field, value, $attrs.filter);
+        //     ring.lineMarkers = true;
+        //   });
+        // }
+        graphController.draw();
+      }
+
+      $scope.$watch('data', function(newValue, oldValue) {
+        if (newValue) {
+          addRing();
+        }
+      });
+    }
+  };
+}]);
+
+
 angular.module('angular-dimple.scatter-plot', [])
 
 .directive('scatterPlot', ['angular-dimple.core', function (core) {
diff --git a/dist/angular-dimple.min.js b/dist/angular-dimple.min.js
index 20639f1..ec66052 100644
--- a/dist/angular-dimple.min.js
+++ b/dist/angular-dimple.min.js
@@ -1 +1 @@
-angular.module("angular-dimple.core",[]).service("angular-dimple.core",[function(){return{filter:function(a,b,c,d,e){if(null!==b){var f=this.filterData(b,e);a.data=f,void 0!==d&&(a.data=dimple.filterData(f,c,[d]))}},filterData:function(a,b){if(b){var c=b.split(":");return dimple.filterData(a,c[0],[c[1]])}return a}}}]),angular.module("angular-dimple",["angular-dimple.core","angular-dimple.graph","angular-dimple.legend","angular-dimple.x","angular-dimple.y","angular-dimple.line","angular-dimple.bar","angular-dimple.stacked-bar","angular-dimple.area","angular-dimple.stacked-area","angular-dimple.scatter-plot"]).constant("MODULE_VERSION","0.0.1").value("defaults",{foo:"bar"}),angular.module("angular-dimple.area",[]).directive("area",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["area","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){if(d.value)area=h.addSeries([d.field],dimple.plot.area),a.filter(area,b.data,d.field,d.value,d.filter),area.lineMarkers=!0;else{var c=dimple.getUniqueValues(b.data,d.field);angular.forEach(c,function(c){area=h.addSeries([d.field],dimple.plot.area),a.filter(area,b.data,d.field,c,d.filter),area.lineMarkers=!0})}g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.bar",[]).directive("bar",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["bar","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){bar=h.addSeries([d.field],dimple.plot.bar),a.filter(bar,b.data,d.field,d.value,d.filter),g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.graph",[]).directive("graph",[function(){return{restrict:"E",replace:!0,scope:{data:"="},require:["graph"],transclude:!0,compile:function(a){var b=(1e9*Math.random()).toString(36).replace(".","_");return a.append('
'),{post:function(a,c,d,e,f){var g=e[0];g._createChart(b),a.$watch("data",function(a){a&&g.setData()}),f(a,function(a){c.append(a)})}}},controller:["$scope","$element","$attrs",function(a,b,c){var d,e;this._createChart=function(a){e=a;var b=dimple.newSvg("#dng-"+e,c.width,c.height);d=new dimple.chart(b);var f="false"===c.autoStyle?!0:!1;d.noFormats=f},this.getChart=function(){return d},this.setData=function(){d.data=a.data},this.draw=function(){d.draw()},this.getID=function(){return e}}]}}]),angular.module("angular-dimple.legend",[]).directive("legend",[function(){return{restrict:"E",replace:!0,require:["legend","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){var a=c.left?c.left:"10%",b=c.top?c.top:"4%",d=c.height?c.height:"10%",e=c.width?c.width:"90%",f=c.position?c.position:"left";g.addLegend(a,b,e,d,f)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.line",[]).directive("line",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["line","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){line=h.addSeries([d.field],dimple.plot.line),a.filter(line,b.data,d.field,d.value,d.filter),line.lineMarkers=!0,g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.scatter-plot",[]).directive("scatterPlot",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["scatterPlot","^graph"],controller:[function(){}],link:function(b,c,d,e){function f(){var c=[];d.series&&c.push(d.series),c.push(d.field),(d.label||""===d.label)&&c.push(d.label),scatterPlot=h.addSeries(c,dimple.plot.bubble),scatterPlot.aggregate=dimple.aggregateMethod.avg,a.filter(scatterPlot,b.data,d.field,d.value,d.filter),g.draw()}var g=e[1],h=g.getChart();b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.stacked-area",[]).directive("stackedArea",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["stackedArea","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){area=d.series?h.addSeries([d.series],dimple.plot.area):h.addSeries([d.field],dimple.plot.area),a.filter(area,b.data,d.field,d.value,d.filter),area.lineMarkers=!1,g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.stacked-bar",[]).directive("stackedBar",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["stackedBar","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){bar=d.series?h.addSeries([d.series],dimple.plot.bar):h.addSeries([d.field],dimple.plot.bar),a.filter(bar,b.data,d.field,d.value,d.filter),g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.x",[]).directive("x",[function(){return{restrict:"E",replace:!0,require:["x","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){c.groupBy?(x="Measure"==c.type?g.addMeasureAxis("x",[c.groupBy,c.field]):"Percent"==c.type?g.addPctAxis("x",c.field):g.addCategoryAxis("x",[c.groupBy,c.field]),c.orderBy&&x.addGroupOrderRule(c.orderBy)):(x="Measure"==c.type?g.addMeasureAxis("x",c.field):"Percent"==c.type?g.addPctAxis("x",c.field):g.addCategoryAxis("x",c.field),c.orderBy&&x.addOrderRule(c.orderBy)),c.title&&"null"!==c.title?x.title=c.title:"null"==c.title&&(x.title=null)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.y",[]).directive("y",[function(){return{restrict:"E",replace:!0,require:["y","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){c.groupBy?(y="Category"==c.type?g.addCategoryAxis("y",c.field):"Percent"==c.type?g.addPctAxis("y",c.field):g.addMeasureAxis("y",c.field),c.orderBy&&y.addGroupOrderRule(c.orderBy)):(y="Category"==c.type?g.addCategoryAxis("y",c.field):"Percent"==c.type?g.addPctAxis("y",c.field):g.addMeasureAxis("y",c.field),c.orderBy&&y.addOrderRule(c.orderBy)),c.title&&"null"!==c.title?y.title=c.title:"null"==c.title&&(y.title=null)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]);
\ No newline at end of file
+angular.module("angular-dimple.core",[]).service("angular-dimple.core",[function(){return{filter:function(a,b,c,d,e){if(null!==b){var f=this.filterData(b,e);a.data=f,void 0!==d&&(a.data=dimple.filterData(f,c,[d]))}},filterData:function(a,b){if(b){var c=b.split(":");return dimple.filterData(a,c[0],[c[1]])}return a}}}]),angular.module("angular-dimple",["angular-dimple.core","angular-dimple.graph","angular-dimple.legend","angular-dimple.x","angular-dimple.y","angular-dimple.p","angular-dimple.line","angular-dimple.bar","angular-dimple.stacked-bar","angular-dimple.area","angular-dimple.stacked-area","angular-dimple.scatter-plot","angular-dimple.ring"]).constant("MODULE_VERSION","0.0.1").value("defaults",{foo:"bar"}),angular.module("angular-dimple.area",[]).directive("area",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["area","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){if(d.value)area=h.addSeries([d.field],dimple.plot.area),a.filter(area,b.data,d.field,d.value,d.filter),area.lineMarkers=!0;else{var c=dimple.getUniqueValues(b.data,d.field);angular.forEach(c,function(c){area=h.addSeries([d.field],dimple.plot.area),a.filter(area,b.data,d.field,c,d.filter),area.lineMarkers=!0})}g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.bar",[]).directive("bar",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["bar","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){bar=h.addSeries([d.field],dimple.plot.bar),a.filter(bar,b.data,d.field,d.value,d.filter),g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.graph",[]).directive("graph",[function(){return{restrict:"E",replace:!0,scope:{data:"="},require:["graph"],transclude:!0,compile:function(a){var b=(1e9*Math.random()).toString(36).replace(".","_");return a.append('
'),{post:function(a,c,d,e,f){var g=e[0];g._createChart(b),a.$watch("data",function(a){a&&g.setData()}),f(a,function(a){c.append(a)})}}},controller:["$scope","$element","$attrs",function(a,b,c){var d,e;this._createChart=function(a){e=a;var b=dimple.newSvg("#dng-"+e,c.width,c.height);d=new dimple.chart(b);var f="false"===c.autoStyle?!0:!1;d.noFormats=f},this.getChart=function(){return d},this.setData=function(){d.data=a.data},this.draw=function(){d.draw()},this.getID=function(){return e}}]}}]),angular.module("angular-dimple.legend",[]).directive("legend",[function(){return{restrict:"E",replace:!0,require:["legend","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){var a=c.left?c.left:"10%",b=c.top?c.top:"4%",d=c.height?c.height:"10%",e=c.width?c.width:"90%",f=c.position?c.position:"left";g.addLegend(a,b,e,d,f)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.line",[]).directive("line",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["line","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){line=h.addSeries([d.field],dimple.plot.line),a.filter(line,b.data,d.field,d.value,d.filter),line.lineMarkers=!0,g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.p",[]).directive("p",[function(){return{restrict:"E",replace:!0,require:["p","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){p=g.addMeasureAxis("p",c.field),c.title&&"null"!==c.title?p.title=c.title:"null"==c.title&&(p.title=null)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.ring",[]).directive("ring",["angular-dimple.core",function(){return{restrict:"E",replace:!0,require:["ring","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){if(ring=g.addSeries([c.field],dimple.plot.pie),c.stroke){var a=100-c.stroke+"%";ring.innerRadius=a,console.log(a)}else ring.innerRadius="50%";f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.scatter-plot",[]).directive("scatterPlot",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["scatterPlot","^graph"],controller:[function(){}],link:function(b,c,d,e){function f(){var c=[];d.series&&c.push(d.series),c.push(d.field),(d.label||""===d.label)&&c.push(d.label),scatterPlot=h.addSeries(c,dimple.plot.bubble),scatterPlot.aggregate=dimple.aggregateMethod.avg,a.filter(scatterPlot,b.data,d.field,d.value,d.filter),g.draw()}var g=e[1],h=g.getChart();b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.stacked-area",[]).directive("stackedArea",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["stackedArea","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){area=d.series?h.addSeries([d.series],dimple.plot.area):h.addSeries([d.field],dimple.plot.area),a.filter(area,b.data,d.field,d.value,d.filter),area.lineMarkers=!1,g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.stacked-bar",[]).directive("stackedBar",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["stackedBar","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){bar=d.series?h.addSeries([d.series],dimple.plot.bar):h.addSeries([d.field],dimple.plot.bar),a.filter(bar,b.data,d.field,d.value,d.filter),g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.x",[]).directive("x",[function(){return{restrict:"E",replace:!0,require:["x","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){c.groupBy?(x="Measure"==c.type?g.addMeasureAxis("x",[c.groupBy,c.field]):"Percent"==c.type?g.addPctAxis("x",c.field):g.addCategoryAxis("x",[c.groupBy,c.field]),c.orderBy&&x.addGroupOrderRule(c.orderBy)):(x="Measure"==c.type?g.addMeasureAxis("x",c.field):"Percent"==c.type?g.addPctAxis("x",c.field):g.addCategoryAxis("x",c.field),c.orderBy&&x.addOrderRule(c.orderBy)),c.title&&"null"!==c.title?x.title=c.title:"null"==c.title&&(x.title=null)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.y",[]).directive("y",[function(){return{restrict:"E",replace:!0,require:["y","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){c.groupBy?(y="Category"==c.type?g.addCategoryAxis("y",c.field):"Percent"==c.type?g.addPctAxis("y",c.field):g.addMeasureAxis("y",c.field),c.orderBy&&y.addGroupOrderRule(c.orderBy)):(y="Category"==c.type?g.addCategoryAxis("y",c.field):"Percent"==c.type?g.addPctAxis("y",c.field):g.addMeasureAxis("y",c.field),c.orderBy&&y.addOrderRule(c.orderBy)),c.title&&"null"!==c.title?y.title=c.title:"null"==c.title&&(y.title=null)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]);
\ No newline at end of file
diff --git a/documentation/partials/ring.md b/documentation/partials/ring.md
index fb490b3..ffd061b 100644
--- a/documentation/partials/ring.md
+++ b/documentation/partials/ring.md
@@ -7,52 +7,17 @@
 
 

   
-    
-    
+    

     
-    
+    
   
 

 
-

-  
-

-
-```html
-

-  
-

-```
-
-
 ```html
 
-
-  
-  
-  
-  
-
+  
+    

+    
+    
+  
 ```
\ No newline at end of file
diff --git a/site/documentation/partials/ring.html b/site/documentation/partials/ring.html
index e5c09c4..d557dd7 100644
--- a/site/documentation/partials/ring.html
+++ b/site/documentation/partials/ring.html
@@ -7,46 +7,15 @@ 

 
 

   
-    
-    
+    

     
-    
+    
   
 

 
-

-  
-

-
-
<div id="chartContainer">
-  <script type="text/javascript">
-    var svg = dimple.newSvg("#chartContainer", 590, 400);
-    d3.tsv("/data/example_data.tsv", function (data) {
-      var myChart = new dimple.chart(svg, data);
-      myChart.setBounds(20, 20, 460, 360)
-      myChart.addMeasureAxis("p", "Unit Sales");
-      var ring = myChart.addSeries("Owner", dimple.plot.pie);
-      ring.innerRadius = "50%";
-      myChart.addLegend(500, 20, 90, 300, "left");
-      myChart.draw();
-    });
-  </script>
-</div>

 
<!-- Default Stacked -->
-<graph data="graphData">
-  <x field="Month" order-by="Date"></x>
-  <y field="Unit Sales"></y>
-  <legend></legend>
-  <stacked-area field="Owner"></area>
-</graph>

+  <graph data="graphData" width="100%" height="600px">
+    <p field="Unit Sales"></p>
+    <legend></legend>
+    <ring field="Owner" stroke="20"></ring>
+  </graph>

diff --git a/site/examples/index.html b/site/examples/index.html
index 1e1736e..814a438 100644
--- a/site/examples/index.html
+++ b/site/examples/index.html
@@ -17,7 +17,7 @@
 
   
   
-  
+  
 
 
 
diff --git a/site/index.html b/site/index.html
index d3d9ef8..f9e5193 100644
--- a/site/index.html
+++ b/site/index.html
@@ -17,7 +17,7 @@
 
   
   
-  
+  
 
 
 
diff --git a/site/js/lib/angular-dimple.js b/site/js/lib/angular-dimple.js
index 80bf7d5..8b0ac09 100644
--- a/site/js/lib/angular-dimple.js
+++ b/site/js/lib/angular-dimple.js
@@ -32,12 +32,14 @@ angular.module('angular-dimple', [
   'angular-dimple.legend',
   'angular-dimple.x',
   'angular-dimple.y',
+  'angular-dimple.p',
   'angular-dimple.line',
   'angular-dimple.bar',
   'angular-dimple.stacked-bar',
   'angular-dimple.area',
   'angular-dimple.stacked-area',
-  'angular-dimple.scatter-plot'
+  'angular-dimple.scatter-plot',
+  'angular-dimple.ring'
 ])
 
 .constant('MODULE_VERSION', '0.0.1')
@@ -237,6 +239,90 @@ angular.module('angular-dimple.line', [])
     }
   };
 }]);
+angular.module('angular-dimple.p', [])
+
+.directive('p', [function () {
+  return {
+    restrict: 'E',
+    replace: true,
+    require: ['p', '^graph'],
+    controller: ['$scope', '$element', '$attrs', function($scope, $element, $attrs) {
+    }],
+    link: function($scope, $element, $attrs, $controllers) {
+      var graphController = $controllers[1];
+      var chart = graphController.getChart();
+
+      function addAxis () {
+        p = chart.addMeasureAxis('p', $attrs.field);
+
+        if ($attrs.title && $attrs.title !== "null") {
+          p.title = $attrs.title;
+        } else if ($attrs.title == "null") {
+          p.title = null;
+        }
+      }
+      $scope.$watch('data', function(newValue, oldValue) {
+        if (newValue) {
+          addAxis();
+        }
+      });
+    }
+  };
+}]);
+angular.module('angular-dimple.ring', [])
+
+.directive('ring', ['angular-dimple.core', function (core) {
+  return {
+    restrict: 'E',
+    replace: true,
+    require: ['ring', '^graph'],
+    controller: ['$scope', '$element', '$attrs', function($scope, $element, $attrs) {
+    }],
+    link: function($scope, $element, $attrs, $controllers) {
+      var graphController = $controllers[1];
+      var areaController = $controllers[0];
+      var chart = graphController.getChart();
+
+      function addRing () {
+        ring = chart.addSeries([$attrs.field], dimple.plot.pie);
+        if ($attrs.stroke) {
+          var stroke = (100 - $attrs.stroke) + '%';
+          ring.innerRadius = stroke;
+          console.log(stroke);
+        } else {
+          ring.innerRadius = "50%";
+        }
+
+
+        // ring.innerRadius = "50%";
+        // core.filter(ring, $scope.data, $attrs.field, $attrs.value, $attrs.filter);
+        // ring.lineMarkers = true;
+
+        // if ($attrs.value) {
+        //   ring = chart.addSeries([$attrs.field], dimple.plot.pie);
+        //   core.filter(ring, $scope.data, $attrs.field, $attrs.value, $attrs.filter);
+        //   ring.lineMarkers = true;
+        // } else {
+        //   var values = dimple.getUniqueValues($scope.data, $attrs.field);
+        //   angular.forEach(values, function(value){
+        //     ring = chart.addSeries([$attrs.field], dimple.plot.pie);
+        //     core.filter(ring, $scope.data, $attrs.field, value, $attrs.filter);
+        //     ring.lineMarkers = true;
+        //   });
+        // }
+        graphController.draw();
+      }
+
+      $scope.$watch('data', function(newValue, oldValue) {
+        if (newValue) {
+          addRing();
+        }
+      });
+    }
+  };
+}]);
+
+
 angular.module('angular-dimple.scatter-plot', [])
 
 .directive('scatterPlot', ['angular-dimple.core', function (core) {
diff --git a/site/js/lib/angular-dimple.min.js b/site/js/lib/angular-dimple.min.js
index 20639f1..ec66052 100644
--- a/site/js/lib/angular-dimple.min.js
+++ b/site/js/lib/angular-dimple.min.js
@@ -1 +1 @@
-angular.module("angular-dimple.core",[]).service("angular-dimple.core",[function(){return{filter:function(a,b,c,d,e){if(null!==b){var f=this.filterData(b,e);a.data=f,void 0!==d&&(a.data=dimple.filterData(f,c,[d]))}},filterData:function(a,b){if(b){var c=b.split(":");return dimple.filterData(a,c[0],[c[1]])}return a}}}]),angular.module("angular-dimple",["angular-dimple.core","angular-dimple.graph","angular-dimple.legend","angular-dimple.x","angular-dimple.y","angular-dimple.line","angular-dimple.bar","angular-dimple.stacked-bar","angular-dimple.area","angular-dimple.stacked-area","angular-dimple.scatter-plot"]).constant("MODULE_VERSION","0.0.1").value("defaults",{foo:"bar"}),angular.module("angular-dimple.area",[]).directive("area",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["area","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){if(d.value)area=h.addSeries([d.field],dimple.plot.area),a.filter(area,b.data,d.field,d.value,d.filter),area.lineMarkers=!0;else{var c=dimple.getUniqueValues(b.data,d.field);angular.forEach(c,function(c){area=h.addSeries([d.field],dimple.plot.area),a.filter(area,b.data,d.field,c,d.filter),area.lineMarkers=!0})}g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.bar",[]).directive("bar",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["bar","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){bar=h.addSeries([d.field],dimple.plot.bar),a.filter(bar,b.data,d.field,d.value,d.filter),g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.graph",[]).directive("graph",[function(){return{restrict:"E",replace:!0,scope:{data:"="},require:["graph"],transclude:!0,compile:function(a){var b=(1e9*Math.random()).toString(36).replace(".","_");return a.append('
'),{post:function(a,c,d,e,f){var g=e[0];g._createChart(b),a.$watch("data",function(a){a&&g.setData()}),f(a,function(a){c.append(a)})}}},controller:["$scope","$element","$attrs",function(a,b,c){var d,e;this._createChart=function(a){e=a;var b=dimple.newSvg("#dng-"+e,c.width,c.height);d=new dimple.chart(b);var f="false"===c.autoStyle?!0:!1;d.noFormats=f},this.getChart=function(){return d},this.setData=function(){d.data=a.data},this.draw=function(){d.draw()},this.getID=function(){return e}}]}}]),angular.module("angular-dimple.legend",[]).directive("legend",[function(){return{restrict:"E",replace:!0,require:["legend","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){var a=c.left?c.left:"10%",b=c.top?c.top:"4%",d=c.height?c.height:"10%",e=c.width?c.width:"90%",f=c.position?c.position:"left";g.addLegend(a,b,e,d,f)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.line",[]).directive("line",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["line","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){line=h.addSeries([d.field],dimple.plot.line),a.filter(line,b.data,d.field,d.value,d.filter),line.lineMarkers=!0,g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.scatter-plot",[]).directive("scatterPlot",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["scatterPlot","^graph"],controller:[function(){}],link:function(b,c,d,e){function f(){var c=[];d.series&&c.push(d.series),c.push(d.field),(d.label||""===d.label)&&c.push(d.label),scatterPlot=h.addSeries(c,dimple.plot.bubble),scatterPlot.aggregate=dimple.aggregateMethod.avg,a.filter(scatterPlot,b.data,d.field,d.value,d.filter),g.draw()}var g=e[1],h=g.getChart();b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.stacked-area",[]).directive("stackedArea",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["stackedArea","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){area=d.series?h.addSeries([d.series],dimple.plot.area):h.addSeries([d.field],dimple.plot.area),a.filter(area,b.data,d.field,d.value,d.filter),area.lineMarkers=!1,g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.stacked-bar",[]).directive("stackedBar",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["stackedBar","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){bar=d.series?h.addSeries([d.series],dimple.plot.bar):h.addSeries([d.field],dimple.plot.bar),a.filter(bar,b.data,d.field,d.value,d.filter),g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.x",[]).directive("x",[function(){return{restrict:"E",replace:!0,require:["x","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){c.groupBy?(x="Measure"==c.type?g.addMeasureAxis("x",[c.groupBy,c.field]):"Percent"==c.type?g.addPctAxis("x",c.field):g.addCategoryAxis("x",[c.groupBy,c.field]),c.orderBy&&x.addGroupOrderRule(c.orderBy)):(x="Measure"==c.type?g.addMeasureAxis("x",c.field):"Percent"==c.type?g.addPctAxis("x",c.field):g.addCategoryAxis("x",c.field),c.orderBy&&x.addOrderRule(c.orderBy)),c.title&&"null"!==c.title?x.title=c.title:"null"==c.title&&(x.title=null)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.y",[]).directive("y",[function(){return{restrict:"E",replace:!0,require:["y","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){c.groupBy?(y="Category"==c.type?g.addCategoryAxis("y",c.field):"Percent"==c.type?g.addPctAxis("y",c.field):g.addMeasureAxis("y",c.field),c.orderBy&&y.addGroupOrderRule(c.orderBy)):(y="Category"==c.type?g.addCategoryAxis("y",c.field):"Percent"==c.type?g.addPctAxis("y",c.field):g.addMeasureAxis("y",c.field),c.orderBy&&y.addOrderRule(c.orderBy)),c.title&&"null"!==c.title?y.title=c.title:"null"==c.title&&(y.title=null)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]);
\ No newline at end of file
+angular.module("angular-dimple.core",[]).service("angular-dimple.core",[function(){return{filter:function(a,b,c,d,e){if(null!==b){var f=this.filterData(b,e);a.data=f,void 0!==d&&(a.data=dimple.filterData(f,c,[d]))}},filterData:function(a,b){if(b){var c=b.split(":");return dimple.filterData(a,c[0],[c[1]])}return a}}}]),angular.module("angular-dimple",["angular-dimple.core","angular-dimple.graph","angular-dimple.legend","angular-dimple.x","angular-dimple.y","angular-dimple.p","angular-dimple.line","angular-dimple.bar","angular-dimple.stacked-bar","angular-dimple.area","angular-dimple.stacked-area","angular-dimple.scatter-plot","angular-dimple.ring"]).constant("MODULE_VERSION","0.0.1").value("defaults",{foo:"bar"}),angular.module("angular-dimple.area",[]).directive("area",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["area","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){if(d.value)area=h.addSeries([d.field],dimple.plot.area),a.filter(area,b.data,d.field,d.value,d.filter),area.lineMarkers=!0;else{var c=dimple.getUniqueValues(b.data,d.field);angular.forEach(c,function(c){area=h.addSeries([d.field],dimple.plot.area),a.filter(area,b.data,d.field,c,d.filter),area.lineMarkers=!0})}g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.bar",[]).directive("bar",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["bar","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){bar=h.addSeries([d.field],dimple.plot.bar),a.filter(bar,b.data,d.field,d.value,d.filter),g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.graph",[]).directive("graph",[function(){return{restrict:"E",replace:!0,scope:{data:"="},require:["graph"],transclude:!0,compile:function(a){var b=(1e9*Math.random()).toString(36).replace(".","_");return a.append('
'),{post:function(a,c,d,e,f){var g=e[0];g._createChart(b),a.$watch("data",function(a){a&&g.setData()}),f(a,function(a){c.append(a)})}}},controller:["$scope","$element","$attrs",function(a,b,c){var d,e;this._createChart=function(a){e=a;var b=dimple.newSvg("#dng-"+e,c.width,c.height);d=new dimple.chart(b);var f="false"===c.autoStyle?!0:!1;d.noFormats=f},this.getChart=function(){return d},this.setData=function(){d.data=a.data},this.draw=function(){d.draw()},this.getID=function(){return e}}]}}]),angular.module("angular-dimple.legend",[]).directive("legend",[function(){return{restrict:"E",replace:!0,require:["legend","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){var a=c.left?c.left:"10%",b=c.top?c.top:"4%",d=c.height?c.height:"10%",e=c.width?c.width:"90%",f=c.position?c.position:"left";g.addLegend(a,b,e,d,f)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.line",[]).directive("line",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["line","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){line=h.addSeries([d.field],dimple.plot.line),a.filter(line,b.data,d.field,d.value,d.filter),line.lineMarkers=!0,g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.p",[]).directive("p",[function(){return{restrict:"E",replace:!0,require:["p","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){p=g.addMeasureAxis("p",c.field),c.title&&"null"!==c.title?p.title=c.title:"null"==c.title&&(p.title=null)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.ring",[]).directive("ring",["angular-dimple.core",function(){return{restrict:"E",replace:!0,require:["ring","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){if(ring=g.addSeries([c.field],dimple.plot.pie),c.stroke){var a=100-c.stroke+"%";ring.innerRadius=a,console.log(a)}else ring.innerRadius="50%";f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.scatter-plot",[]).directive("scatterPlot",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["scatterPlot","^graph"],controller:[function(){}],link:function(b,c,d,e){function f(){var c=[];d.series&&c.push(d.series),c.push(d.field),(d.label||""===d.label)&&c.push(d.label),scatterPlot=h.addSeries(c,dimple.plot.bubble),scatterPlot.aggregate=dimple.aggregateMethod.avg,a.filter(scatterPlot,b.data,d.field,d.value,d.filter),g.draw()}var g=e[1],h=g.getChart();b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.stacked-area",[]).directive("stackedArea",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["stackedArea","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){area=d.series?h.addSeries([d.series],dimple.plot.area):h.addSeries([d.field],dimple.plot.area),a.filter(area,b.data,d.field,d.value,d.filter),area.lineMarkers=!1,g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.stacked-bar",[]).directive("stackedBar",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["stackedBar","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){bar=d.series?h.addSeries([d.series],dimple.plot.bar):h.addSeries([d.field],dimple.plot.bar),a.filter(bar,b.data,d.field,d.value,d.filter),g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.x",[]).directive("x",[function(){return{restrict:"E",replace:!0,require:["x","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){c.groupBy?(x="Measure"==c.type?g.addMeasureAxis("x",[c.groupBy,c.field]):"Percent"==c.type?g.addPctAxis("x",c.field):g.addCategoryAxis("x",[c.groupBy,c.field]),c.orderBy&&x.addGroupOrderRule(c.orderBy)):(x="Measure"==c.type?g.addMeasureAxis("x",c.field):"Percent"==c.type?g.addPctAxis("x",c.field):g.addCategoryAxis("x",c.field),c.orderBy&&x.addOrderRule(c.orderBy)),c.title&&"null"!==c.title?x.title=c.title:"null"==c.title&&(x.title=null)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.y",[]).directive("y",[function(){return{restrict:"E",replace:!0,require:["y","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){c.groupBy?(y="Category"==c.type?g.addCategoryAxis("y",c.field):"Percent"==c.type?g.addPctAxis("y",c.field):g.addMeasureAxis("y",c.field),c.orderBy&&y.addGroupOrderRule(c.orderBy)):(y="Category"==c.type?g.addCategoryAxis("y",c.field):"Percent"==c.type?g.addPctAxis("y",c.field):g.addMeasureAxis("y",c.field),c.orderBy&&y.addOrderRule(c.orderBy)),c.title&&"null"!==c.title?y.title=c.title:"null"==c.title&&(y.title=null)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]);
\ No newline at end of file
diff --git a/source/angular-dimple.js b/source/angular-dimple.js
index d238595..a7ac723 100644
--- a/source/angular-dimple.js
+++ b/source/angular-dimple.js
@@ -4,12 +4,14 @@ angular.module('angular-dimple', [
   'angular-dimple.legend',
   'angular-dimple.x',
   'angular-dimple.y',
+  'angular-dimple.p',
   'angular-dimple.line',
   'angular-dimple.bar',
   'angular-dimple.stacked-bar',
   'angular-dimple.area',
   'angular-dimple.stacked-area',
-  'angular-dimple.scatter-plot'
+  'angular-dimple.scatter-plot',
+  'angular-dimple.ring'
 ])
 
 .constant('MODULE_VERSION', '0.0.1')
diff --git a/source/p.js b/source/p.js
new file mode 100644
index 0000000..57bd4bf
--- /dev/null
+++ b/source/p.js
@@ -0,0 +1,30 @@
+angular.module('angular-dimple.p', [])
+
+.directive('p', [function () {
+  return {
+    restrict: 'E',
+    replace: true,
+    require: ['p', '^graph'],
+    controller: ['$scope', '$element', '$attrs', function($scope, $element, $attrs) {
+    }],
+    link: function($scope, $element, $attrs, $controllers) {
+      var graphController = $controllers[1];
+      var chart = graphController.getChart();
+
+      function addAxis () {
+        p = chart.addMeasureAxis('p', $attrs.field);
+
+        if ($attrs.title && $attrs.title !== "null") {
+          p.title = $attrs.title;
+        } else if ($attrs.title == "null") {
+          p.title = null;
+        }
+      }
+      $scope.$watch('data', function(newValue, oldValue) {
+        if (newValue) {
+          addAxis();
+        }
+      });
+    }
+  };
+}]);
\ No newline at end of file
diff --git a/source/ring.js b/source/ring.js
new file mode 100644
index 0000000..42c40db
--- /dev/null
+++ b/source/ring.js
@@ -0,0 +1,53 @@
+angular.module('angular-dimple.ring', [])
+
+.directive('ring', ['angular-dimple.core', function (core) {
+  return {
+    restrict: 'E',
+    replace: true,
+    require: ['ring', '^graph'],
+    controller: ['$scope', '$element', '$attrs', function($scope, $element, $attrs) {
+    }],
+    link: function($scope, $element, $attrs, $controllers) {
+      var graphController = $controllers[1];
+      var areaController = $controllers[0];
+      var chart = graphController.getChart();
+
+      function addRing () {
+        ring = chart.addSeries([$attrs.field], dimple.plot.pie);
+        if ($attrs.stroke) {
+          var stroke = (100 - $attrs.stroke) + '%';
+          ring.innerRadius = stroke;
+          console.log(stroke);
+        } else {
+          ring.innerRadius = "50%";
+        }
+
+
+        // ring.innerRadius = "50%";
+        // core.filter(ring, $scope.data, $attrs.field, $attrs.value, $attrs.filter);
+        // ring.lineMarkers = true;
+
+        // if ($attrs.value) {
+        //   ring = chart.addSeries([$attrs.field], dimple.plot.pie);
+        //   core.filter(ring, $scope.data, $attrs.field, $attrs.value, $attrs.filter);
+        //   ring.lineMarkers = true;
+        // } else {
+        //   var values = dimple.getUniqueValues($scope.data, $attrs.field);
+        //   angular.forEach(values, function(value){
+        //     ring = chart.addSeries([$attrs.field], dimple.plot.pie);
+        //     core.filter(ring, $scope.data, $attrs.field, value, $attrs.filter);
+        //     ring.lineMarkers = true;
+        //   });
+        // }
+        graphController.draw();
+      }
+
+      $scope.$watch('data', function(newValue, oldValue) {
+        if (newValue) {
+          addRing();
+        }
+      });
+    }
+  };
+}]);
+

From aaa8192793cc4d4d796c978dec49852103fb7976 Mon Sep 17 00:00:00 2001
From: Nikolas Wise 
Date: Mon, 28 Jul 2014 10:26:12 -0700
Subject: [PATCH 04/29] add multi-ring

---
 dist/angular-dimple.js                | 19 ++++++++++++++----
 dist/angular-dimple.min.js            |  2 +-
 documentation/partials/ring.md        | 28 ++++++++++++++++++++++++++-
 site/documentation/partials/ring.html | 25 +++++++++++++++++++++++-
 site/js/lib/angular-dimple.js         | 19 ++++++++++++++----
 site/js/lib/angular-dimple.min.js     |  2 +-
 source/ring.js                        | 19 ++++++++++++++----
 7 files changed, 98 insertions(+), 16 deletions(-)

diff --git a/dist/angular-dimple.js b/dist/angular-dimple.js
index 8b0ac09..932461a 100644
--- a/dist/angular-dimple.js
+++ b/dist/angular-dimple.js
@@ -282,17 +282,28 @@ angular.module('angular-dimple.ring', [])
       var graphController = $controllers[1];
       var areaController = $controllers[0];
       var chart = graphController.getChart();
+      var ring;
+
+      function setData (data, series) {
+        series.data = data;
+      }
 
       function addRing () {
         ring = chart.addSeries([$attrs.field], dimple.plot.pie);
-        if ($attrs.stroke) {
-          var stroke = (100 - $attrs.stroke) + '%';
-          ring.innerRadius = stroke;
-          console.log(stroke);
+        if ($attrs.width && !$attrs.radius) {
+          var width = (100 - $attrs.width) + '%';
+          ring.innerRadius = width;
+        } else if ($attrs.width && $attrs.radius) {
+          var width = ($attrs.radius - $attrs.width) + '%';
+          ring.innerRadius = width;
         } else {
           ring.innerRadius = "50%";
         }
 
+        if ($attrs.radius) {
+          ring.outerRadius = ($attrs.radius) + '%';
+        }
+
 
         // ring.innerRadius = "50%";
         // core.filter(ring, $scope.data, $attrs.field, $attrs.value, $attrs.filter);
diff --git a/dist/angular-dimple.min.js b/dist/angular-dimple.min.js
index ec66052..c06a849 100644
--- a/dist/angular-dimple.min.js
+++ b/dist/angular-dimple.min.js
@@ -1 +1 @@
-angular.module("angular-dimple.core",[]).service("angular-dimple.core",[function(){return{filter:function(a,b,c,d,e){if(null!==b){var f=this.filterData(b,e);a.data=f,void 0!==d&&(a.data=dimple.filterData(f,c,[d]))}},filterData:function(a,b){if(b){var c=b.split(":");return dimple.filterData(a,c[0],[c[1]])}return a}}}]),angular.module("angular-dimple",["angular-dimple.core","angular-dimple.graph","angular-dimple.legend","angular-dimple.x","angular-dimple.y","angular-dimple.p","angular-dimple.line","angular-dimple.bar","angular-dimple.stacked-bar","angular-dimple.area","angular-dimple.stacked-area","angular-dimple.scatter-plot","angular-dimple.ring"]).constant("MODULE_VERSION","0.0.1").value("defaults",{foo:"bar"}),angular.module("angular-dimple.area",[]).directive("area",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["area","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){if(d.value)area=h.addSeries([d.field],dimple.plot.area),a.filter(area,b.data,d.field,d.value,d.filter),area.lineMarkers=!0;else{var c=dimple.getUniqueValues(b.data,d.field);angular.forEach(c,function(c){area=h.addSeries([d.field],dimple.plot.area),a.filter(area,b.data,d.field,c,d.filter),area.lineMarkers=!0})}g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.bar",[]).directive("bar",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["bar","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){bar=h.addSeries([d.field],dimple.plot.bar),a.filter(bar,b.data,d.field,d.value,d.filter),g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.graph",[]).directive("graph",[function(){return{restrict:"E",replace:!0,scope:{data:"="},require:["graph"],transclude:!0,compile:function(a){var b=(1e9*Math.random()).toString(36).replace(".","_");return a.append('
'),{post:function(a,c,d,e,f){var g=e[0];g._createChart(b),a.$watch("data",function(a){a&&g.setData()}),f(a,function(a){c.append(a)})}}},controller:["$scope","$element","$attrs",function(a,b,c){var d,e;this._createChart=function(a){e=a;var b=dimple.newSvg("#dng-"+e,c.width,c.height);d=new dimple.chart(b);var f="false"===c.autoStyle?!0:!1;d.noFormats=f},this.getChart=function(){return d},this.setData=function(){d.data=a.data},this.draw=function(){d.draw()},this.getID=function(){return e}}]}}]),angular.module("angular-dimple.legend",[]).directive("legend",[function(){return{restrict:"E",replace:!0,require:["legend","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){var a=c.left?c.left:"10%",b=c.top?c.top:"4%",d=c.height?c.height:"10%",e=c.width?c.width:"90%",f=c.position?c.position:"left";g.addLegend(a,b,e,d,f)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.line",[]).directive("line",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["line","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){line=h.addSeries([d.field],dimple.plot.line),a.filter(line,b.data,d.field,d.value,d.filter),line.lineMarkers=!0,g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.p",[]).directive("p",[function(){return{restrict:"E",replace:!0,require:["p","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){p=g.addMeasureAxis("p",c.field),c.title&&"null"!==c.title?p.title=c.title:"null"==c.title&&(p.title=null)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.ring",[]).directive("ring",["angular-dimple.core",function(){return{restrict:"E",replace:!0,require:["ring","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){if(ring=g.addSeries([c.field],dimple.plot.pie),c.stroke){var a=100-c.stroke+"%";ring.innerRadius=a,console.log(a)}else ring.innerRadius="50%";f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.scatter-plot",[]).directive("scatterPlot",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["scatterPlot","^graph"],controller:[function(){}],link:function(b,c,d,e){function f(){var c=[];d.series&&c.push(d.series),c.push(d.field),(d.label||""===d.label)&&c.push(d.label),scatterPlot=h.addSeries(c,dimple.plot.bubble),scatterPlot.aggregate=dimple.aggregateMethod.avg,a.filter(scatterPlot,b.data,d.field,d.value,d.filter),g.draw()}var g=e[1],h=g.getChart();b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.stacked-area",[]).directive("stackedArea",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["stackedArea","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){area=d.series?h.addSeries([d.series],dimple.plot.area):h.addSeries([d.field],dimple.plot.area),a.filter(area,b.data,d.field,d.value,d.filter),area.lineMarkers=!1,g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.stacked-bar",[]).directive("stackedBar",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["stackedBar","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){bar=d.series?h.addSeries([d.series],dimple.plot.bar):h.addSeries([d.field],dimple.plot.bar),a.filter(bar,b.data,d.field,d.value,d.filter),g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.x",[]).directive("x",[function(){return{restrict:"E",replace:!0,require:["x","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){c.groupBy?(x="Measure"==c.type?g.addMeasureAxis("x",[c.groupBy,c.field]):"Percent"==c.type?g.addPctAxis("x",c.field):g.addCategoryAxis("x",[c.groupBy,c.field]),c.orderBy&&x.addGroupOrderRule(c.orderBy)):(x="Measure"==c.type?g.addMeasureAxis("x",c.field):"Percent"==c.type?g.addPctAxis("x",c.field):g.addCategoryAxis("x",c.field),c.orderBy&&x.addOrderRule(c.orderBy)),c.title&&"null"!==c.title?x.title=c.title:"null"==c.title&&(x.title=null)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.y",[]).directive("y",[function(){return{restrict:"E",replace:!0,require:["y","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){c.groupBy?(y="Category"==c.type?g.addCategoryAxis("y",c.field):"Percent"==c.type?g.addPctAxis("y",c.field):g.addMeasureAxis("y",c.field),c.orderBy&&y.addGroupOrderRule(c.orderBy)):(y="Category"==c.type?g.addCategoryAxis("y",c.field):"Percent"==c.type?g.addPctAxis("y",c.field):g.addMeasureAxis("y",c.field),c.orderBy&&y.addOrderRule(c.orderBy)),c.title&&"null"!==c.title?y.title=c.title:"null"==c.title&&(y.title=null)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]);
\ No newline at end of file
+angular.module("angular-dimple.core",[]).service("angular-dimple.core",[function(){return{filter:function(a,b,c,d,e){if(null!==b){var f=this.filterData(b,e);a.data=f,void 0!==d&&(a.data=dimple.filterData(f,c,[d]))}},filterData:function(a,b){if(b){var c=b.split(":");return dimple.filterData(a,c[0],[c[1]])}return a}}}]),angular.module("angular-dimple",["angular-dimple.core","angular-dimple.graph","angular-dimple.legend","angular-dimple.x","angular-dimple.y","angular-dimple.p","angular-dimple.line","angular-dimple.bar","angular-dimple.stacked-bar","angular-dimple.area","angular-dimple.stacked-area","angular-dimple.scatter-plot","angular-dimple.ring"]).constant("MODULE_VERSION","0.0.1").value("defaults",{foo:"bar"}),angular.module("angular-dimple.area",[]).directive("area",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["area","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){if(d.value)area=h.addSeries([d.field],dimple.plot.area),a.filter(area,b.data,d.field,d.value,d.filter),area.lineMarkers=!0;else{var c=dimple.getUniqueValues(b.data,d.field);angular.forEach(c,function(c){area=h.addSeries([d.field],dimple.plot.area),a.filter(area,b.data,d.field,c,d.filter),area.lineMarkers=!0})}g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.bar",[]).directive("bar",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["bar","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){bar=h.addSeries([d.field],dimple.plot.bar),a.filter(bar,b.data,d.field,d.value,d.filter),g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.graph",[]).directive("graph",[function(){return{restrict:"E",replace:!0,scope:{data:"="},require:["graph"],transclude:!0,compile:function(a){var b=(1e9*Math.random()).toString(36).replace(".","_");return a.append('
'),{post:function(a,c,d,e,f){var g=e[0];g._createChart(b),a.$watch("data",function(a){a&&g.setData()}),f(a,function(a){c.append(a)})}}},controller:["$scope","$element","$attrs",function(a,b,c){var d,e;this._createChart=function(a){e=a;var b=dimple.newSvg("#dng-"+e,c.width,c.height);d=new dimple.chart(b);var f="false"===c.autoStyle?!0:!1;d.noFormats=f},this.getChart=function(){return d},this.setData=function(){d.data=a.data},this.draw=function(){d.draw()},this.getID=function(){return e}}]}}]),angular.module("angular-dimple.legend",[]).directive("legend",[function(){return{restrict:"E",replace:!0,require:["legend","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){var a=c.left?c.left:"10%",b=c.top?c.top:"4%",d=c.height?c.height:"10%",e=c.width?c.width:"90%",f=c.position?c.position:"left";g.addLegend(a,b,e,d,f)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.line",[]).directive("line",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["line","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){line=h.addSeries([d.field],dimple.plot.line),a.filter(line,b.data,d.field,d.value,d.filter),line.lineMarkers=!0,g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.p",[]).directive("p",[function(){return{restrict:"E",replace:!0,require:["p","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){p=g.addMeasureAxis("p",c.field),c.title&&"null"!==c.title?p.title=c.title:"null"==c.title&&(p.title=null)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.ring",[]).directive("ring",["angular-dimple.core",function(){return{restrict:"E",replace:!0,require:["ring","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){if(f=h.addSeries([c.field],dimple.plot.pie),c.width&&!c.radius){var a=100-c.width+"%";f.innerRadius=a}else if(c.width&&c.radius){var a=c.radius-c.width+"%";f.innerRadius=a}else f.innerRadius="50%";c.radius&&(f.outerRadius=c.radius+"%"),g.draw()}var f,g=d[1],h=(d[0],g.getChart());a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.scatter-plot",[]).directive("scatterPlot",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["scatterPlot","^graph"],controller:[function(){}],link:function(b,c,d,e){function f(){var c=[];d.series&&c.push(d.series),c.push(d.field),(d.label||""===d.label)&&c.push(d.label),scatterPlot=h.addSeries(c,dimple.plot.bubble),scatterPlot.aggregate=dimple.aggregateMethod.avg,a.filter(scatterPlot,b.data,d.field,d.value,d.filter),g.draw()}var g=e[1],h=g.getChart();b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.stacked-area",[]).directive("stackedArea",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["stackedArea","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){area=d.series?h.addSeries([d.series],dimple.plot.area):h.addSeries([d.field],dimple.plot.area),a.filter(area,b.data,d.field,d.value,d.filter),area.lineMarkers=!1,g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.stacked-bar",[]).directive("stackedBar",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["stackedBar","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){bar=d.series?h.addSeries([d.series],dimple.plot.bar):h.addSeries([d.field],dimple.plot.bar),a.filter(bar,b.data,d.field,d.value,d.filter),g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.x",[]).directive("x",[function(){return{restrict:"E",replace:!0,require:["x","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){c.groupBy?(x="Measure"==c.type?g.addMeasureAxis("x",[c.groupBy,c.field]):"Percent"==c.type?g.addPctAxis("x",c.field):g.addCategoryAxis("x",[c.groupBy,c.field]),c.orderBy&&x.addGroupOrderRule(c.orderBy)):(x="Measure"==c.type?g.addMeasureAxis("x",c.field):"Percent"==c.type?g.addPctAxis("x",c.field):g.addCategoryAxis("x",c.field),c.orderBy&&x.addOrderRule(c.orderBy)),c.title&&"null"!==c.title?x.title=c.title:"null"==c.title&&(x.title=null)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.y",[]).directive("y",[function(){return{restrict:"E",replace:!0,require:["y","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){c.groupBy?(y="Category"==c.type?g.addCategoryAxis("y",c.field):"Percent"==c.type?g.addPctAxis("y",c.field):g.addMeasureAxis("y",c.field),c.orderBy&&y.addGroupOrderRule(c.orderBy)):(y="Category"==c.type?g.addCategoryAxis("y",c.field):"Percent"==c.type?g.addPctAxis("y",c.field):g.addMeasureAxis("y",c.field),c.orderBy&&y.addOrderRule(c.orderBy)),c.title&&"null"!==c.title?y.title=c.title:"null"==c.title&&(y.title=null)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]);
\ No newline at end of file
diff --git a/documentation/partials/ring.md b/documentation/partials/ring.md
index ffd061b..42a7aea 100644
--- a/documentation/partials/ring.md
+++ b/documentation/partials/ring.md
@@ -1,7 +1,7 @@
 

     Ring Chart
     
-      Stacked Area Documentation
+      Ring Chart Documentation
     
 

 
@@ -20,4 +20,30 @@
     
     
   
+```
+
+

+    Multi Ring Chart
+    
+      Ring Chart Documentation
+    
+

+
+

+  
+    

+    
+    
+	
+  
+

+
+```html
+
+  
+    

+    
+    
+	
+  
 ```
\ No newline at end of file
diff --git a/site/documentation/partials/ring.html b/site/documentation/partials/ring.html
index d557dd7..54390f7 100644
--- a/site/documentation/partials/ring.html
+++ b/site/documentation/partials/ring.html
@@ -1,7 +1,7 @@
 

     Ring Chart
     
-      Stacked Area Documentation
+      Ring Chart Documentation
     
 

 
@@ -19,3 +19,26 @@ 

     <legend></legend>
     <ring field="Owner" stroke="20"></ring>
   </graph>

+

+    Multi Ring Chart
+    
+      Ring Chart Documentation
+    
+

+
+

+  
+    

+    
+    
+    
+  
+

+
+
<!-- Default Stacked -->
+  <graph data="graphData" width="100%" height="600px">
+    <p field="Unit Sales"></p>
+    <legend></legend>
+    <ring field="Owner" width="20"></ring>
+    <ring field="Price Tier" width="20" radius="75"></ring>
+  </graph>

diff --git a/site/js/lib/angular-dimple.js b/site/js/lib/angular-dimple.js
index 8b0ac09..932461a 100644
--- a/site/js/lib/angular-dimple.js
+++ b/site/js/lib/angular-dimple.js
@@ -282,17 +282,28 @@ angular.module('angular-dimple.ring', [])
       var graphController = $controllers[1];
       var areaController = $controllers[0];
       var chart = graphController.getChart();
+      var ring;
+
+      function setData (data, series) {
+        series.data = data;
+      }
 
       function addRing () {
         ring = chart.addSeries([$attrs.field], dimple.plot.pie);
-        if ($attrs.stroke) {
-          var stroke = (100 - $attrs.stroke) + '%';
-          ring.innerRadius = stroke;
-          console.log(stroke);
+        if ($attrs.width && !$attrs.radius) {
+          var width = (100 - $attrs.width) + '%';
+          ring.innerRadius = width;
+        } else if ($attrs.width && $attrs.radius) {
+          var width = ($attrs.radius - $attrs.width) + '%';
+          ring.innerRadius = width;
         } else {
           ring.innerRadius = "50%";
         }
 
+        if ($attrs.radius) {
+          ring.outerRadius = ($attrs.radius) + '%';
+        }
+
 
         // ring.innerRadius = "50%";
         // core.filter(ring, $scope.data, $attrs.field, $attrs.value, $attrs.filter);
diff --git a/site/js/lib/angular-dimple.min.js b/site/js/lib/angular-dimple.min.js
index ec66052..c06a849 100644
--- a/site/js/lib/angular-dimple.min.js
+++ b/site/js/lib/angular-dimple.min.js
@@ -1 +1 @@
-angular.module("angular-dimple.core",[]).service("angular-dimple.core",[function(){return{filter:function(a,b,c,d,e){if(null!==b){var f=this.filterData(b,e);a.data=f,void 0!==d&&(a.data=dimple.filterData(f,c,[d]))}},filterData:function(a,b){if(b){var c=b.split(":");return dimple.filterData(a,c[0],[c[1]])}return a}}}]),angular.module("angular-dimple",["angular-dimple.core","angular-dimple.graph","angular-dimple.legend","angular-dimple.x","angular-dimple.y","angular-dimple.p","angular-dimple.line","angular-dimple.bar","angular-dimple.stacked-bar","angular-dimple.area","angular-dimple.stacked-area","angular-dimple.scatter-plot","angular-dimple.ring"]).constant("MODULE_VERSION","0.0.1").value("defaults",{foo:"bar"}),angular.module("angular-dimple.area",[]).directive("area",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["area","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){if(d.value)area=h.addSeries([d.field],dimple.plot.area),a.filter(area,b.data,d.field,d.value,d.filter),area.lineMarkers=!0;else{var c=dimple.getUniqueValues(b.data,d.field);angular.forEach(c,function(c){area=h.addSeries([d.field],dimple.plot.area),a.filter(area,b.data,d.field,c,d.filter),area.lineMarkers=!0})}g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.bar",[]).directive("bar",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["bar","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){bar=h.addSeries([d.field],dimple.plot.bar),a.filter(bar,b.data,d.field,d.value,d.filter),g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.graph",[]).directive("graph",[function(){return{restrict:"E",replace:!0,scope:{data:"="},require:["graph"],transclude:!0,compile:function(a){var b=(1e9*Math.random()).toString(36).replace(".","_");return a.append('
'),{post:function(a,c,d,e,f){var g=e[0];g._createChart(b),a.$watch("data",function(a){a&&g.setData()}),f(a,function(a){c.append(a)})}}},controller:["$scope","$element","$attrs",function(a,b,c){var d,e;this._createChart=function(a){e=a;var b=dimple.newSvg("#dng-"+e,c.width,c.height);d=new dimple.chart(b);var f="false"===c.autoStyle?!0:!1;d.noFormats=f},this.getChart=function(){return d},this.setData=function(){d.data=a.data},this.draw=function(){d.draw()},this.getID=function(){return e}}]}}]),angular.module("angular-dimple.legend",[]).directive("legend",[function(){return{restrict:"E",replace:!0,require:["legend","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){var a=c.left?c.left:"10%",b=c.top?c.top:"4%",d=c.height?c.height:"10%",e=c.width?c.width:"90%",f=c.position?c.position:"left";g.addLegend(a,b,e,d,f)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.line",[]).directive("line",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["line","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){line=h.addSeries([d.field],dimple.plot.line),a.filter(line,b.data,d.field,d.value,d.filter),line.lineMarkers=!0,g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.p",[]).directive("p",[function(){return{restrict:"E",replace:!0,require:["p","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){p=g.addMeasureAxis("p",c.field),c.title&&"null"!==c.title?p.title=c.title:"null"==c.title&&(p.title=null)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.ring",[]).directive("ring",["angular-dimple.core",function(){return{restrict:"E",replace:!0,require:["ring","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){if(ring=g.addSeries([c.field],dimple.plot.pie),c.stroke){var a=100-c.stroke+"%";ring.innerRadius=a,console.log(a)}else ring.innerRadius="50%";f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.scatter-plot",[]).directive("scatterPlot",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["scatterPlot","^graph"],controller:[function(){}],link:function(b,c,d,e){function f(){var c=[];d.series&&c.push(d.series),c.push(d.field),(d.label||""===d.label)&&c.push(d.label),scatterPlot=h.addSeries(c,dimple.plot.bubble),scatterPlot.aggregate=dimple.aggregateMethod.avg,a.filter(scatterPlot,b.data,d.field,d.value,d.filter),g.draw()}var g=e[1],h=g.getChart();b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.stacked-area",[]).directive("stackedArea",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["stackedArea","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){area=d.series?h.addSeries([d.series],dimple.plot.area):h.addSeries([d.field],dimple.plot.area),a.filter(area,b.data,d.field,d.value,d.filter),area.lineMarkers=!1,g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.stacked-bar",[]).directive("stackedBar",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["stackedBar","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){bar=d.series?h.addSeries([d.series],dimple.plot.bar):h.addSeries([d.field],dimple.plot.bar),a.filter(bar,b.data,d.field,d.value,d.filter),g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.x",[]).directive("x",[function(){return{restrict:"E",replace:!0,require:["x","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){c.groupBy?(x="Measure"==c.type?g.addMeasureAxis("x",[c.groupBy,c.field]):"Percent"==c.type?g.addPctAxis("x",c.field):g.addCategoryAxis("x",[c.groupBy,c.field]),c.orderBy&&x.addGroupOrderRule(c.orderBy)):(x="Measure"==c.type?g.addMeasureAxis("x",c.field):"Percent"==c.type?g.addPctAxis("x",c.field):g.addCategoryAxis("x",c.field),c.orderBy&&x.addOrderRule(c.orderBy)),c.title&&"null"!==c.title?x.title=c.title:"null"==c.title&&(x.title=null)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.y",[]).directive("y",[function(){return{restrict:"E",replace:!0,require:["y","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){c.groupBy?(y="Category"==c.type?g.addCategoryAxis("y",c.field):"Percent"==c.type?g.addPctAxis("y",c.field):g.addMeasureAxis("y",c.field),c.orderBy&&y.addGroupOrderRule(c.orderBy)):(y="Category"==c.type?g.addCategoryAxis("y",c.field):"Percent"==c.type?g.addPctAxis("y",c.field):g.addMeasureAxis("y",c.field),c.orderBy&&y.addOrderRule(c.orderBy)),c.title&&"null"!==c.title?y.title=c.title:"null"==c.title&&(y.title=null)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]);
\ No newline at end of file
+angular.module("angular-dimple.core",[]).service("angular-dimple.core",[function(){return{filter:function(a,b,c,d,e){if(null!==b){var f=this.filterData(b,e);a.data=f,void 0!==d&&(a.data=dimple.filterData(f,c,[d]))}},filterData:function(a,b){if(b){var c=b.split(":");return dimple.filterData(a,c[0],[c[1]])}return a}}}]),angular.module("angular-dimple",["angular-dimple.core","angular-dimple.graph","angular-dimple.legend","angular-dimple.x","angular-dimple.y","angular-dimple.p","angular-dimple.line","angular-dimple.bar","angular-dimple.stacked-bar","angular-dimple.area","angular-dimple.stacked-area","angular-dimple.scatter-plot","angular-dimple.ring"]).constant("MODULE_VERSION","0.0.1").value("defaults",{foo:"bar"}),angular.module("angular-dimple.area",[]).directive("area",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["area","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){if(d.value)area=h.addSeries([d.field],dimple.plot.area),a.filter(area,b.data,d.field,d.value,d.filter),area.lineMarkers=!0;else{var c=dimple.getUniqueValues(b.data,d.field);angular.forEach(c,function(c){area=h.addSeries([d.field],dimple.plot.area),a.filter(area,b.data,d.field,c,d.filter),area.lineMarkers=!0})}g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.bar",[]).directive("bar",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["bar","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){bar=h.addSeries([d.field],dimple.plot.bar),a.filter(bar,b.data,d.field,d.value,d.filter),g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.graph",[]).directive("graph",[function(){return{restrict:"E",replace:!0,scope:{data:"="},require:["graph"],transclude:!0,compile:function(a){var b=(1e9*Math.random()).toString(36).replace(".","_");return a.append('
'),{post:function(a,c,d,e,f){var g=e[0];g._createChart(b),a.$watch("data",function(a){a&&g.setData()}),f(a,function(a){c.append(a)})}}},controller:["$scope","$element","$attrs",function(a,b,c){var d,e;this._createChart=function(a){e=a;var b=dimple.newSvg("#dng-"+e,c.width,c.height);d=new dimple.chart(b);var f="false"===c.autoStyle?!0:!1;d.noFormats=f},this.getChart=function(){return d},this.setData=function(){d.data=a.data},this.draw=function(){d.draw()},this.getID=function(){return e}}]}}]),angular.module("angular-dimple.legend",[]).directive("legend",[function(){return{restrict:"E",replace:!0,require:["legend","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){var a=c.left?c.left:"10%",b=c.top?c.top:"4%",d=c.height?c.height:"10%",e=c.width?c.width:"90%",f=c.position?c.position:"left";g.addLegend(a,b,e,d,f)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.line",[]).directive("line",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["line","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){line=h.addSeries([d.field],dimple.plot.line),a.filter(line,b.data,d.field,d.value,d.filter),line.lineMarkers=!0,g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.p",[]).directive("p",[function(){return{restrict:"E",replace:!0,require:["p","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){p=g.addMeasureAxis("p",c.field),c.title&&"null"!==c.title?p.title=c.title:"null"==c.title&&(p.title=null)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.ring",[]).directive("ring",["angular-dimple.core",function(){return{restrict:"E",replace:!0,require:["ring","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){if(f=h.addSeries([c.field],dimple.plot.pie),c.width&&!c.radius){var a=100-c.width+"%";f.innerRadius=a}else if(c.width&&c.radius){var a=c.radius-c.width+"%";f.innerRadius=a}else f.innerRadius="50%";c.radius&&(f.outerRadius=c.radius+"%"),g.draw()}var f,g=d[1],h=(d[0],g.getChart());a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.scatter-plot",[]).directive("scatterPlot",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["scatterPlot","^graph"],controller:[function(){}],link:function(b,c,d,e){function f(){var c=[];d.series&&c.push(d.series),c.push(d.field),(d.label||""===d.label)&&c.push(d.label),scatterPlot=h.addSeries(c,dimple.plot.bubble),scatterPlot.aggregate=dimple.aggregateMethod.avg,a.filter(scatterPlot,b.data,d.field,d.value,d.filter),g.draw()}var g=e[1],h=g.getChart();b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.stacked-area",[]).directive("stackedArea",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["stackedArea","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){area=d.series?h.addSeries([d.series],dimple.plot.area):h.addSeries([d.field],dimple.plot.area),a.filter(area,b.data,d.field,d.value,d.filter),area.lineMarkers=!1,g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.stacked-bar",[]).directive("stackedBar",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["stackedBar","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){bar=d.series?h.addSeries([d.series],dimple.plot.bar):h.addSeries([d.field],dimple.plot.bar),a.filter(bar,b.data,d.field,d.value,d.filter),g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.x",[]).directive("x",[function(){return{restrict:"E",replace:!0,require:["x","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){c.groupBy?(x="Measure"==c.type?g.addMeasureAxis("x",[c.groupBy,c.field]):"Percent"==c.type?g.addPctAxis("x",c.field):g.addCategoryAxis("x",[c.groupBy,c.field]),c.orderBy&&x.addGroupOrderRule(c.orderBy)):(x="Measure"==c.type?g.addMeasureAxis("x",c.field):"Percent"==c.type?g.addPctAxis("x",c.field):g.addCategoryAxis("x",c.field),c.orderBy&&x.addOrderRule(c.orderBy)),c.title&&"null"!==c.title?x.title=c.title:"null"==c.title&&(x.title=null)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.y",[]).directive("y",[function(){return{restrict:"E",replace:!0,require:["y","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){c.groupBy?(y="Category"==c.type?g.addCategoryAxis("y",c.field):"Percent"==c.type?g.addPctAxis("y",c.field):g.addMeasureAxis("y",c.field),c.orderBy&&y.addGroupOrderRule(c.orderBy)):(y="Category"==c.type?g.addCategoryAxis("y",c.field):"Percent"==c.type?g.addPctAxis("y",c.field):g.addMeasureAxis("y",c.field),c.orderBy&&y.addOrderRule(c.orderBy)),c.title&&"null"!==c.title?y.title=c.title:"null"==c.title&&(y.title=null)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]);
\ No newline at end of file
diff --git a/source/ring.js b/source/ring.js
index 42c40db..8f7c913 100644
--- a/source/ring.js
+++ b/source/ring.js
@@ -11,17 +11,28 @@ angular.module('angular-dimple.ring', [])
       var graphController = $controllers[1];
       var areaController = $controllers[0];
       var chart = graphController.getChart();
+      var ring;
+
+      function setData (data, series) {
+        series.data = data;
+      }
 
       function addRing () {
         ring = chart.addSeries([$attrs.field], dimple.plot.pie);
-        if ($attrs.stroke) {
-          var stroke = (100 - $attrs.stroke) + '%';
-          ring.innerRadius = stroke;
-          console.log(stroke);
+        if ($attrs.width && !$attrs.radius) {
+          var width = (100 - $attrs.width) + '%';
+          ring.innerRadius = width;
+        } else if ($attrs.width && $attrs.radius) {
+          var width = ($attrs.radius - $attrs.width) + '%';
+          ring.innerRadius = width;
         } else {
           ring.innerRadius = "50%";
         }
 
+        if ($attrs.radius) {
+          ring.outerRadius = ($attrs.radius) + '%';
+        }
+
 
         // ring.innerRadius = "50%";
         // core.filter(ring, $scope.data, $attrs.field, $attrs.value, $attrs.filter);

From 72d2f7d12f37e69cb8915e3735609dbbeec591bd Mon Sep 17 00:00:00 2001
From: Nikolas Wise 
Date: Mon, 28 Jul 2014 10:31:05 -0700
Subject: [PATCH 05/29] nesting rings

---
 dist/angular-dimple.js                | 2 +-
 dist/angular-dimple.min.js            | 2 +-
 documentation/partials/ring.md        | 4 ++--
 site/documentation/partials/ring.html | 4 ++--
 site/js/lib/angular-dimple.js         | 2 +-
 site/js/lib/angular-dimple.min.js     | 2 +-
 source/ring.js                        | 2 +-
 7 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/dist/angular-dimple.js b/dist/angular-dimple.js
index 932461a..a81b005 100644
--- a/dist/angular-dimple.js
+++ b/dist/angular-dimple.js
@@ -282,7 +282,6 @@ angular.module('angular-dimple.ring', [])
       var graphController = $controllers[1];
       var areaController = $controllers[0];
       var chart = graphController.getChart();
-      var ring;
 
       function setData (data, series) {
         series.data = data;
@@ -293,6 +292,7 @@ angular.module('angular-dimple.ring', [])
         if ($attrs.width && !$attrs.radius) {
           var width = (100 - $attrs.width) + '%';
           ring.innerRadius = width;
+          console.log(width);
         } else if ($attrs.width && $attrs.radius) {
           var width = ($attrs.radius - $attrs.width) + '%';
           ring.innerRadius = width;
diff --git a/dist/angular-dimple.min.js b/dist/angular-dimple.min.js
index c06a849..21e9948 100644
--- a/dist/angular-dimple.min.js
+++ b/dist/angular-dimple.min.js
@@ -1 +1 @@
-angular.module("angular-dimple.core",[]).service("angular-dimple.core",[function(){return{filter:function(a,b,c,d,e){if(null!==b){var f=this.filterData(b,e);a.data=f,void 0!==d&&(a.data=dimple.filterData(f,c,[d]))}},filterData:function(a,b){if(b){var c=b.split(":");return dimple.filterData(a,c[0],[c[1]])}return a}}}]),angular.module("angular-dimple",["angular-dimple.core","angular-dimple.graph","angular-dimple.legend","angular-dimple.x","angular-dimple.y","angular-dimple.p","angular-dimple.line","angular-dimple.bar","angular-dimple.stacked-bar","angular-dimple.area","angular-dimple.stacked-area","angular-dimple.scatter-plot","angular-dimple.ring"]).constant("MODULE_VERSION","0.0.1").value("defaults",{foo:"bar"}),angular.module("angular-dimple.area",[]).directive("area",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["area","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){if(d.value)area=h.addSeries([d.field],dimple.plot.area),a.filter(area,b.data,d.field,d.value,d.filter),area.lineMarkers=!0;else{var c=dimple.getUniqueValues(b.data,d.field);angular.forEach(c,function(c){area=h.addSeries([d.field],dimple.plot.area),a.filter(area,b.data,d.field,c,d.filter),area.lineMarkers=!0})}g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.bar",[]).directive("bar",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["bar","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){bar=h.addSeries([d.field],dimple.plot.bar),a.filter(bar,b.data,d.field,d.value,d.filter),g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.graph",[]).directive("graph",[function(){return{restrict:"E",replace:!0,scope:{data:"="},require:["graph"],transclude:!0,compile:function(a){var b=(1e9*Math.random()).toString(36).replace(".","_");return a.append('
'),{post:function(a,c,d,e,f){var g=e[0];g._createChart(b),a.$watch("data",function(a){a&&g.setData()}),f(a,function(a){c.append(a)})}}},controller:["$scope","$element","$attrs",function(a,b,c){var d,e;this._createChart=function(a){e=a;var b=dimple.newSvg("#dng-"+e,c.width,c.height);d=new dimple.chart(b);var f="false"===c.autoStyle?!0:!1;d.noFormats=f},this.getChart=function(){return d},this.setData=function(){d.data=a.data},this.draw=function(){d.draw()},this.getID=function(){return e}}]}}]),angular.module("angular-dimple.legend",[]).directive("legend",[function(){return{restrict:"E",replace:!0,require:["legend","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){var a=c.left?c.left:"10%",b=c.top?c.top:"4%",d=c.height?c.height:"10%",e=c.width?c.width:"90%",f=c.position?c.position:"left";g.addLegend(a,b,e,d,f)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.line",[]).directive("line",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["line","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){line=h.addSeries([d.field],dimple.plot.line),a.filter(line,b.data,d.field,d.value,d.filter),line.lineMarkers=!0,g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.p",[]).directive("p",[function(){return{restrict:"E",replace:!0,require:["p","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){p=g.addMeasureAxis("p",c.field),c.title&&"null"!==c.title?p.title=c.title:"null"==c.title&&(p.title=null)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.ring",[]).directive("ring",["angular-dimple.core",function(){return{restrict:"E",replace:!0,require:["ring","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){if(f=h.addSeries([c.field],dimple.plot.pie),c.width&&!c.radius){var a=100-c.width+"%";f.innerRadius=a}else if(c.width&&c.radius){var a=c.radius-c.width+"%";f.innerRadius=a}else f.innerRadius="50%";c.radius&&(f.outerRadius=c.radius+"%"),g.draw()}var f,g=d[1],h=(d[0],g.getChart());a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.scatter-plot",[]).directive("scatterPlot",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["scatterPlot","^graph"],controller:[function(){}],link:function(b,c,d,e){function f(){var c=[];d.series&&c.push(d.series),c.push(d.field),(d.label||""===d.label)&&c.push(d.label),scatterPlot=h.addSeries(c,dimple.plot.bubble),scatterPlot.aggregate=dimple.aggregateMethod.avg,a.filter(scatterPlot,b.data,d.field,d.value,d.filter),g.draw()}var g=e[1],h=g.getChart();b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.stacked-area",[]).directive("stackedArea",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["stackedArea","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){area=d.series?h.addSeries([d.series],dimple.plot.area):h.addSeries([d.field],dimple.plot.area),a.filter(area,b.data,d.field,d.value,d.filter),area.lineMarkers=!1,g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.stacked-bar",[]).directive("stackedBar",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["stackedBar","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){bar=d.series?h.addSeries([d.series],dimple.plot.bar):h.addSeries([d.field],dimple.plot.bar),a.filter(bar,b.data,d.field,d.value,d.filter),g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.x",[]).directive("x",[function(){return{restrict:"E",replace:!0,require:["x","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){c.groupBy?(x="Measure"==c.type?g.addMeasureAxis("x",[c.groupBy,c.field]):"Percent"==c.type?g.addPctAxis("x",c.field):g.addCategoryAxis("x",[c.groupBy,c.field]),c.orderBy&&x.addGroupOrderRule(c.orderBy)):(x="Measure"==c.type?g.addMeasureAxis("x",c.field):"Percent"==c.type?g.addPctAxis("x",c.field):g.addCategoryAxis("x",c.field),c.orderBy&&x.addOrderRule(c.orderBy)),c.title&&"null"!==c.title?x.title=c.title:"null"==c.title&&(x.title=null)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.y",[]).directive("y",[function(){return{restrict:"E",replace:!0,require:["y","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){c.groupBy?(y="Category"==c.type?g.addCategoryAxis("y",c.field):"Percent"==c.type?g.addPctAxis("y",c.field):g.addMeasureAxis("y",c.field),c.orderBy&&y.addGroupOrderRule(c.orderBy)):(y="Category"==c.type?g.addCategoryAxis("y",c.field):"Percent"==c.type?g.addPctAxis("y",c.field):g.addMeasureAxis("y",c.field),c.orderBy&&y.addOrderRule(c.orderBy)),c.title&&"null"!==c.title?y.title=c.title:"null"==c.title&&(y.title=null)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]);
\ No newline at end of file
+angular.module("angular-dimple.core",[]).service("angular-dimple.core",[function(){return{filter:function(a,b,c,d,e){if(null!==b){var f=this.filterData(b,e);a.data=f,void 0!==d&&(a.data=dimple.filterData(f,c,[d]))}},filterData:function(a,b){if(b){var c=b.split(":");return dimple.filterData(a,c[0],[c[1]])}return a}}}]),angular.module("angular-dimple",["angular-dimple.core","angular-dimple.graph","angular-dimple.legend","angular-dimple.x","angular-dimple.y","angular-dimple.p","angular-dimple.line","angular-dimple.bar","angular-dimple.stacked-bar","angular-dimple.area","angular-dimple.stacked-area","angular-dimple.scatter-plot","angular-dimple.ring"]).constant("MODULE_VERSION","0.0.1").value("defaults",{foo:"bar"}),angular.module("angular-dimple.area",[]).directive("area",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["area","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){if(d.value)area=h.addSeries([d.field],dimple.plot.area),a.filter(area,b.data,d.field,d.value,d.filter),area.lineMarkers=!0;else{var c=dimple.getUniqueValues(b.data,d.field);angular.forEach(c,function(c){area=h.addSeries([d.field],dimple.plot.area),a.filter(area,b.data,d.field,c,d.filter),area.lineMarkers=!0})}g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.bar",[]).directive("bar",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["bar","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){bar=h.addSeries([d.field],dimple.plot.bar),a.filter(bar,b.data,d.field,d.value,d.filter),g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.graph",[]).directive("graph",[function(){return{restrict:"E",replace:!0,scope:{data:"="},require:["graph"],transclude:!0,compile:function(a){var b=(1e9*Math.random()).toString(36).replace(".","_");return a.append('
'),{post:function(a,c,d,e,f){var g=e[0];g._createChart(b),a.$watch("data",function(a){a&&g.setData()}),f(a,function(a){c.append(a)})}}},controller:["$scope","$element","$attrs",function(a,b,c){var d,e;this._createChart=function(a){e=a;var b=dimple.newSvg("#dng-"+e,c.width,c.height);d=new dimple.chart(b);var f="false"===c.autoStyle?!0:!1;d.noFormats=f},this.getChart=function(){return d},this.setData=function(){d.data=a.data},this.draw=function(){d.draw()},this.getID=function(){return e}}]}}]),angular.module("angular-dimple.legend",[]).directive("legend",[function(){return{restrict:"E",replace:!0,require:["legend","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){var a=c.left?c.left:"10%",b=c.top?c.top:"4%",d=c.height?c.height:"10%",e=c.width?c.width:"90%",f=c.position?c.position:"left";g.addLegend(a,b,e,d,f)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.line",[]).directive("line",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["line","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){line=h.addSeries([d.field],dimple.plot.line),a.filter(line,b.data,d.field,d.value,d.filter),line.lineMarkers=!0,g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.p",[]).directive("p",[function(){return{restrict:"E",replace:!0,require:["p","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){p=g.addMeasureAxis("p",c.field),c.title&&"null"!==c.title?p.title=c.title:"null"==c.title&&(p.title=null)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.ring",[]).directive("ring",["angular-dimple.core",function(){return{restrict:"E",replace:!0,require:["ring","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){if(ring=g.addSeries([c.field],dimple.plot.pie),c.width&&!c.radius){var a=100-c.width+"%";ring.innerRadius=a,console.log(a)}else if(c.width&&c.radius){var a=c.radius-c.width+"%";ring.innerRadius=a}else ring.innerRadius="50%";c.radius&&(ring.outerRadius=c.radius+"%"),f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.scatter-plot",[]).directive("scatterPlot",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["scatterPlot","^graph"],controller:[function(){}],link:function(b,c,d,e){function f(){var c=[];d.series&&c.push(d.series),c.push(d.field),(d.label||""===d.label)&&c.push(d.label),scatterPlot=h.addSeries(c,dimple.plot.bubble),scatterPlot.aggregate=dimple.aggregateMethod.avg,a.filter(scatterPlot,b.data,d.field,d.value,d.filter),g.draw()}var g=e[1],h=g.getChart();b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.stacked-area",[]).directive("stackedArea",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["stackedArea","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){area=d.series?h.addSeries([d.series],dimple.plot.area):h.addSeries([d.field],dimple.plot.area),a.filter(area,b.data,d.field,d.value,d.filter),area.lineMarkers=!1,g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.stacked-bar",[]).directive("stackedBar",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["stackedBar","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){bar=d.series?h.addSeries([d.series],dimple.plot.bar):h.addSeries([d.field],dimple.plot.bar),a.filter(bar,b.data,d.field,d.value,d.filter),g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.x",[]).directive("x",[function(){return{restrict:"E",replace:!0,require:["x","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){c.groupBy?(x="Measure"==c.type?g.addMeasureAxis("x",[c.groupBy,c.field]):"Percent"==c.type?g.addPctAxis("x",c.field):g.addCategoryAxis("x",[c.groupBy,c.field]),c.orderBy&&x.addGroupOrderRule(c.orderBy)):(x="Measure"==c.type?g.addMeasureAxis("x",c.field):"Percent"==c.type?g.addPctAxis("x",c.field):g.addCategoryAxis("x",c.field),c.orderBy&&x.addOrderRule(c.orderBy)),c.title&&"null"!==c.title?x.title=c.title:"null"==c.title&&(x.title=null)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.y",[]).directive("y",[function(){return{restrict:"E",replace:!0,require:["y","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){c.groupBy?(y="Category"==c.type?g.addCategoryAxis("y",c.field):"Percent"==c.type?g.addPctAxis("y",c.field):g.addMeasureAxis("y",c.field),c.orderBy&&y.addGroupOrderRule(c.orderBy)):(y="Category"==c.type?g.addCategoryAxis("y",c.field):"Percent"==c.type?g.addPctAxis("y",c.field):g.addMeasureAxis("y",c.field),c.orderBy&&y.addOrderRule(c.orderBy)),c.title&&"null"!==c.title?y.title=c.title:"null"==c.title&&(y.title=null)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]);
\ No newline at end of file
diff --git a/documentation/partials/ring.md b/documentation/partials/ring.md
index 42a7aea..c3055f6 100644
--- a/documentation/partials/ring.md
+++ b/documentation/partials/ring.md
@@ -9,7 +9,7 @@
   
     

     
-    
+    
   
 

 
@@ -18,7 +18,7 @@
   
     

     
-    
+    
   
 ```
 
diff --git a/site/documentation/partials/ring.html b/site/documentation/partials/ring.html
index 54390f7..89cb4c0 100644
--- a/site/documentation/partials/ring.html
+++ b/site/documentation/partials/ring.html
@@ -9,7 +9,7 @@ 

   
     

     
-    
+

@@ -17,7 +17,7 @@

<graph data="graphData" width="100%" height="600px"> <p field="Unit Sales"></p> <legend></legend> - <ring field="Owner" stroke="20"></ring> + <ring field="Owner" width="20"></ring> </graph>

Multi Ring Chart diff --git a/site/js/lib/angular-dimple.js b/site/js/lib/angular-dimple.js index 932461a..a81b005 100644 --- a/site/js/lib/angular-dimple.js +++ b/site/js/lib/angular-dimple.js @@ -282,7 +282,6 @@ angular.module('angular-dimple.ring', []) var graphController = $controllers[1]; var areaController = $controllers[0]; var chart = graphController.getChart(); - var ring; function setData (data, series) { series.data = data; @@ -293,6 +292,7 @@ angular.module('angular-dimple.ring', []) if ($attrs.width && !$attrs.radius) { var width = (100 - $attrs.width) + '%'; ring.innerRadius = width; + console.log(width); } else if ($attrs.width && $attrs.radius) { var width = ($attrs.radius - $attrs.width) + '%'; ring.innerRadius = width; diff --git a/site/js/lib/angular-dimple.min.js b/site/js/lib/angular-dimple.min.js index c06a849..21e9948 100644 --- a/site/js/lib/angular-dimple.min.js +++ b/site/js/lib/angular-dimple.min.js @@ -1 +1 @@ -angular.module("angular-dimple.core",[]).service("angular-dimple.core",[function(){return{filter:function(a,b,c,d,e){if(null!==b){var f=this.filterData(b,e);a.data=f,void 0!==d&&(a.data=dimple.filterData(f,c,[d]))}},filterData:function(a,b){if(b){var c=b.split(":");return dimple.filterData(a,c[0],[c[1]])}return a}}}]),angular.module("angular-dimple",["angular-dimple.core","angular-dimple.graph","angular-dimple.legend","angular-dimple.x","angular-dimple.y","angular-dimple.p","angular-dimple.line","angular-dimple.bar","angular-dimple.stacked-bar","angular-dimple.area","angular-dimple.stacked-area","angular-dimple.scatter-plot","angular-dimple.ring"]).constant("MODULE_VERSION","0.0.1").value("defaults",{foo:"bar"}),angular.module("angular-dimple.area",[]).directive("area",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["area","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){if(d.value)area=h.addSeries([d.field],dimple.plot.area),a.filter(area,b.data,d.field,d.value,d.filter),area.lineMarkers=!0;else{var c=dimple.getUniqueValues(b.data,d.field);angular.forEach(c,function(c){area=h.addSeries([d.field],dimple.plot.area),a.filter(area,b.data,d.field,c,d.filter),area.lineMarkers=!0})}g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.bar",[]).directive("bar",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["bar","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){bar=h.addSeries([d.field],dimple.plot.bar),a.filter(bar,b.data,d.field,d.value,d.filter),g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.graph",[]).directive("graph",[function(){return{restrict:"E",replace:!0,scope:{data:"="},require:["graph"],transclude:!0,compile:function(a){var b=(1e9*Math.random()).toString(36).replace(".","_");return a.append('
'),{post:function(a,c,d,e,f){var g=e[0];g._createChart(b),a.$watch("data",function(a){a&&g.setData()}),f(a,function(a){c.append(a)})}}},controller:["$scope","$element","$attrs",function(a,b,c){var d,e;this._createChart=function(a){e=a;var b=dimple.newSvg("#dng-"+e,c.width,c.height);d=new dimple.chart(b);var f="false"===c.autoStyle?!0:!1;d.noFormats=f},this.getChart=function(){return d},this.setData=function(){d.data=a.data},this.draw=function(){d.draw()},this.getID=function(){return e}}]}}]),angular.module("angular-dimple.legend",[]).directive("legend",[function(){return{restrict:"E",replace:!0,require:["legend","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){var a=c.left?c.left:"10%",b=c.top?c.top:"4%",d=c.height?c.height:"10%",e=c.width?c.width:"90%",f=c.position?c.position:"left";g.addLegend(a,b,e,d,f)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.line",[]).directive("line",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["line","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){line=h.addSeries([d.field],dimple.plot.line),a.filter(line,b.data,d.field,d.value,d.filter),line.lineMarkers=!0,g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.p",[]).directive("p",[function(){return{restrict:"E",replace:!0,require:["p","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){p=g.addMeasureAxis("p",c.field),c.title&&"null"!==c.title?p.title=c.title:"null"==c.title&&(p.title=null)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.ring",[]).directive("ring",["angular-dimple.core",function(){return{restrict:"E",replace:!0,require:["ring","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){if(f=h.addSeries([c.field],dimple.plot.pie),c.width&&!c.radius){var a=100-c.width+"%";f.innerRadius=a}else if(c.width&&c.radius){var a=c.radius-c.width+"%";f.innerRadius=a}else f.innerRadius="50%";c.radius&&(f.outerRadius=c.radius+"%"),g.draw()}var f,g=d[1],h=(d[0],g.getChart());a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.scatter-plot",[]).directive("scatterPlot",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["scatterPlot","^graph"],controller:[function(){}],link:function(b,c,d,e){function f(){var c=[];d.series&&c.push(d.series),c.push(d.field),(d.label||""===d.label)&&c.push(d.label),scatterPlot=h.addSeries(c,dimple.plot.bubble),scatterPlot.aggregate=dimple.aggregateMethod.avg,a.filter(scatterPlot,b.data,d.field,d.value,d.filter),g.draw()}var g=e[1],h=g.getChart();b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.stacked-area",[]).directive("stackedArea",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["stackedArea","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){area=d.series?h.addSeries([d.series],dimple.plot.area):h.addSeries([d.field],dimple.plot.area),a.filter(area,b.data,d.field,d.value,d.filter),area.lineMarkers=!1,g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.stacked-bar",[]).directive("stackedBar",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["stackedBar","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){bar=d.series?h.addSeries([d.series],dimple.plot.bar):h.addSeries([d.field],dimple.plot.bar),a.filter(bar,b.data,d.field,d.value,d.filter),g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.x",[]).directive("x",[function(){return{restrict:"E",replace:!0,require:["x","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){c.groupBy?(x="Measure"==c.type?g.addMeasureAxis("x",[c.groupBy,c.field]):"Percent"==c.type?g.addPctAxis("x",c.field):g.addCategoryAxis("x",[c.groupBy,c.field]),c.orderBy&&x.addGroupOrderRule(c.orderBy)):(x="Measure"==c.type?g.addMeasureAxis("x",c.field):"Percent"==c.type?g.addPctAxis("x",c.field):g.addCategoryAxis("x",c.field),c.orderBy&&x.addOrderRule(c.orderBy)),c.title&&"null"!==c.title?x.title=c.title:"null"==c.title&&(x.title=null)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.y",[]).directive("y",[function(){return{restrict:"E",replace:!0,require:["y","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){c.groupBy?(y="Category"==c.type?g.addCategoryAxis("y",c.field):"Percent"==c.type?g.addPctAxis("y",c.field):g.addMeasureAxis("y",c.field),c.orderBy&&y.addGroupOrderRule(c.orderBy)):(y="Category"==c.type?g.addCategoryAxis("y",c.field):"Percent"==c.type?g.addPctAxis("y",c.field):g.addMeasureAxis("y",c.field),c.orderBy&&y.addOrderRule(c.orderBy)),c.title&&"null"!==c.title?y.title=c.title:"null"==c.title&&(y.title=null)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]); \ No newline at end of file +angular.module("angular-dimple.core",[]).service("angular-dimple.core",[function(){return{filter:function(a,b,c,d,e){if(null!==b){var f=this.filterData(b,e);a.data=f,void 0!==d&&(a.data=dimple.filterData(f,c,[d]))}},filterData:function(a,b){if(b){var c=b.split(":");return dimple.filterData(a,c[0],[c[1]])}return a}}}]),angular.module("angular-dimple",["angular-dimple.core","angular-dimple.graph","angular-dimple.legend","angular-dimple.x","angular-dimple.y","angular-dimple.p","angular-dimple.line","angular-dimple.bar","angular-dimple.stacked-bar","angular-dimple.area","angular-dimple.stacked-area","angular-dimple.scatter-plot","angular-dimple.ring"]).constant("MODULE_VERSION","0.0.1").value("defaults",{foo:"bar"}),angular.module("angular-dimple.area",[]).directive("area",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["area","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){if(d.value)area=h.addSeries([d.field],dimple.plot.area),a.filter(area,b.data,d.field,d.value,d.filter),area.lineMarkers=!0;else{var c=dimple.getUniqueValues(b.data,d.field);angular.forEach(c,function(c){area=h.addSeries([d.field],dimple.plot.area),a.filter(area,b.data,d.field,c,d.filter),area.lineMarkers=!0})}g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.bar",[]).directive("bar",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["bar","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){bar=h.addSeries([d.field],dimple.plot.bar),a.filter(bar,b.data,d.field,d.value,d.filter),g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.graph",[]).directive("graph",[function(){return{restrict:"E",replace:!0,scope:{data:"="},require:["graph"],transclude:!0,compile:function(a){var b=(1e9*Math.random()).toString(36).replace(".","_");return a.append('
'),{post:function(a,c,d,e,f){var g=e[0];g._createChart(b),a.$watch("data",function(a){a&&g.setData()}),f(a,function(a){c.append(a)})}}},controller:["$scope","$element","$attrs",function(a,b,c){var d,e;this._createChart=function(a){e=a;var b=dimple.newSvg("#dng-"+e,c.width,c.height);d=new dimple.chart(b);var f="false"===c.autoStyle?!0:!1;d.noFormats=f},this.getChart=function(){return d},this.setData=function(){d.data=a.data},this.draw=function(){d.draw()},this.getID=function(){return e}}]}}]),angular.module("angular-dimple.legend",[]).directive("legend",[function(){return{restrict:"E",replace:!0,require:["legend","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){var a=c.left?c.left:"10%",b=c.top?c.top:"4%",d=c.height?c.height:"10%",e=c.width?c.width:"90%",f=c.position?c.position:"left";g.addLegend(a,b,e,d,f)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.line",[]).directive("line",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["line","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){line=h.addSeries([d.field],dimple.plot.line),a.filter(line,b.data,d.field,d.value,d.filter),line.lineMarkers=!0,g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.p",[]).directive("p",[function(){return{restrict:"E",replace:!0,require:["p","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){p=g.addMeasureAxis("p",c.field),c.title&&"null"!==c.title?p.title=c.title:"null"==c.title&&(p.title=null)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.ring",[]).directive("ring",["angular-dimple.core",function(){return{restrict:"E",replace:!0,require:["ring","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){if(ring=g.addSeries([c.field],dimple.plot.pie),c.width&&!c.radius){var a=100-c.width+"%";ring.innerRadius=a,console.log(a)}else if(c.width&&c.radius){var a=c.radius-c.width+"%";ring.innerRadius=a}else ring.innerRadius="50%";c.radius&&(ring.outerRadius=c.radius+"%"),f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.scatter-plot",[]).directive("scatterPlot",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["scatterPlot","^graph"],controller:[function(){}],link:function(b,c,d,e){function f(){var c=[];d.series&&c.push(d.series),c.push(d.field),(d.label||""===d.label)&&c.push(d.label),scatterPlot=h.addSeries(c,dimple.plot.bubble),scatterPlot.aggregate=dimple.aggregateMethod.avg,a.filter(scatterPlot,b.data,d.field,d.value,d.filter),g.draw()}var g=e[1],h=g.getChart();b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.stacked-area",[]).directive("stackedArea",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["stackedArea","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){area=d.series?h.addSeries([d.series],dimple.plot.area):h.addSeries([d.field],dimple.plot.area),a.filter(area,b.data,d.field,d.value,d.filter),area.lineMarkers=!1,g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.stacked-bar",[]).directive("stackedBar",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["stackedBar","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){bar=d.series?h.addSeries([d.series],dimple.plot.bar):h.addSeries([d.field],dimple.plot.bar),a.filter(bar,b.data,d.field,d.value,d.filter),g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.x",[]).directive("x",[function(){return{restrict:"E",replace:!0,require:["x","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){c.groupBy?(x="Measure"==c.type?g.addMeasureAxis("x",[c.groupBy,c.field]):"Percent"==c.type?g.addPctAxis("x",c.field):g.addCategoryAxis("x",[c.groupBy,c.field]),c.orderBy&&x.addGroupOrderRule(c.orderBy)):(x="Measure"==c.type?g.addMeasureAxis("x",c.field):"Percent"==c.type?g.addPctAxis("x",c.field):g.addCategoryAxis("x",c.field),c.orderBy&&x.addOrderRule(c.orderBy)),c.title&&"null"!==c.title?x.title=c.title:"null"==c.title&&(x.title=null)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.y",[]).directive("y",[function(){return{restrict:"E",replace:!0,require:["y","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){c.groupBy?(y="Category"==c.type?g.addCategoryAxis("y",c.field):"Percent"==c.type?g.addPctAxis("y",c.field):g.addMeasureAxis("y",c.field),c.orderBy&&y.addGroupOrderRule(c.orderBy)):(y="Category"==c.type?g.addCategoryAxis("y",c.field):"Percent"==c.type?g.addPctAxis("y",c.field):g.addMeasureAxis("y",c.field),c.orderBy&&y.addOrderRule(c.orderBy)),c.title&&"null"!==c.title?y.title=c.title:"null"==c.title&&(y.title=null)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]); \ No newline at end of file diff --git a/source/ring.js b/source/ring.js index 8f7c913..14b41cc 100644 --- a/source/ring.js +++ b/source/ring.js @@ -11,7 +11,6 @@ angular.module('angular-dimple.ring', []) var graphController = $controllers[1]; var areaController = $controllers[0]; var chart = graphController.getChart(); - var ring; function setData (data, series) { series.data = data; @@ -22,6 +21,7 @@ angular.module('angular-dimple.ring', []) if ($attrs.width && !$attrs.radius) { var width = (100 - $attrs.width) + '%'; ring.innerRadius = width; + console.log(width); } else if ($attrs.width && $attrs.radius) { var width = ($attrs.radius - $attrs.width) + '%'; ring.innerRadius = width; From 500a7df87f202d52f3abd2501a9f6dc5f4dfb8d7 Mon Sep 17 00:00:00 2001 From: Nikolas Wise Date: Mon, 28 Jul 2014 10:50:53 -0700 Subject: [PATCH 06/29] add ring to docs --- documentation/index.md | 29 +++++++++++++++++++++++++ documentation/layout.html | 6 +++++ site/documentation/index.html | 41 +++++++++++++++++++++++++++++++++++ site/examples/index.html | 6 +++++ site/img/ring.svg | 16 ++++++++++++++ 5 files changed, 98 insertions(+) create mode 100644 site/img/ring.svg diff --git a/documentation/index.md b/documentation/index.md index 1e1cd7a..96ab4af 100644 --- a/documentation/index.md +++ b/documentation/index.md @@ -240,3 +240,32 @@ Scatter Plots also use the `series` attribute. Series defines the categorical da | series | Accepts a string 'field'. | | filter | Accepts a string 'field:value'. Will filter the data to only points where the defined field matches the defined value. | +--- + +## Ring +The `ring` directive creates pie and donut charts - but require a seperate type of axis that the other charts in Angular Dimple. A ring chart uses a `

` axis to plot a single measure. Adding multiple series to a ring chart will create concentric circles within the chart. + +You can define both the width of the ring (as a percentage) and the size of the ring (as a percentage). + +```html +

+ + + + +

+ +> +``` + +#### Attributes + +| attribute | description | +| --------- | ----------- | +| field | **Required.** Field to plot as a ring. | +| width | Accepts a number. Width of ring, as percent of circle size. | +| radius | Accepts a number. Size of ring, as percent of circle size. | + + + + diff --git a/documentation/layout.html b/documentation/layout.html index 0e24b2d..0f25937 100644 --- a/documentation/layout.html +++ b/documentation/layout.html @@ -107,6 +107,12 @@ Scatter Plot +
  • + + + Ring + +
    • diff --git a/site/documentation/index.html b/site/documentation/index.html index 32e6489..4bc0e8a 100644 --- a/site/documentation/index.html +++ b/site/documentation/index.html @@ -107,6 +107,12 @@ Scatter Plot +
  • + + + Ring + +
    • @@ -486,6 +492,41 @@

    Attributes

    Accepts a string 'field:value'. Will filter the data to only points where the defined field matches the defined value. + +
    +

    Ring

    +

    The ring directive creates pie and donut charts - but require a seperate type of axis that the other charts in Angular Dimple. A ring chart uses a <p></p> axis to plot a single measure. Adding multiple series to a ring chart will create concentric circles within the chart.

    +

    You can define both the width of the ring (as a percentage) and the size of the ring (as a percentage).

    +
    <p field="Unit Sales"></p>
+<ring field="Owner"></ring>
+
+<!-- OR -->
+
+<p field="Unit Sales"></p>
+<ring field="Owner" width="20"></ring>
+<ring field="Price Tier" width="20" radius="75"></ring>>
    +

    Attributes

    + + + + + + + + + + + + + + + + + + + + +
    attributedescription
    fieldRequired. Field to plot as a ring.
    widthAccepts a number. Width of ring, as percent of circle size.
    radiusAccepts a number. Size of ring, as percent of circle size.

    diff --git a/site/examples/index.html b/site/examples/index.html index 814a438..39b6ab4 100644 --- a/site/examples/index.html +++ b/site/examples/index.html @@ -86,6 +86,12 @@ Scatter Plot +
  • + + + Ring + +
    • diff --git a/site/img/ring.svg b/site/img/ring.svg new file mode 100644 index 0000000..39c6ca7 --- /dev/null +++ b/site/img/ring.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + From 44b761ae55fbfe4b714db33d9d6aab7c763b53dd Mon Sep 17 00:00:00 2001 From: Nikolas Wise Date: Mon, 28 Jul 2014 10:57:38 -0700 Subject: [PATCH 07/29] add ring to homepage --- site/index.html | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/site/index.html b/site/index.html index f9e5193..f3d602b 100644 --- a/site/index.html +++ b/site/index.html @@ -202,6 +202,20 @@

    Reference

    + +
    + + + +

    + Ring +

    +

    + Examples | + Reference +

    +
    +
    From 32119b5b339c5d71ac19ea53463c34d4a060325b Mon Sep 17 00:00:00 2001 From: Nikolas Wise Date: Mon, 28 Jul 2014 11:01:38 -0700 Subject: [PATCH 08/29] clean code --- dist/angular-dimple.js | 18 +----------------- site/js/lib/angular-dimple.js | 18 +----------------- source/p.js | 1 + source/ring.js | 17 ----------------- 4 files changed, 3 insertions(+), 51 deletions(-) diff --git a/dist/angular-dimple.js b/dist/angular-dimple.js index a81b005..139d3df 100644 --- a/dist/angular-dimple.js +++ b/dist/angular-dimple.js @@ -261,6 +261,7 @@ angular.module('angular-dimple.p', []) p.title = null; } } + $scope.$watch('data', function(newValue, oldValue) { if (newValue) { addAxis(); @@ -304,23 +305,6 @@ angular.module('angular-dimple.ring', []) ring.outerRadius = ($attrs.radius) + '%'; } - - // ring.innerRadius = "50%"; - // core.filter(ring, $scope.data, $attrs.field, $attrs.value, $attrs.filter); - // ring.lineMarkers = true; - - // if ($attrs.value) { - // ring = chart.addSeries([$attrs.field], dimple.plot.pie); - // core.filter(ring, $scope.data, $attrs.field, $attrs.value, $attrs.filter); - // ring.lineMarkers = true; - // } else { - // var values = dimple.getUniqueValues($scope.data, $attrs.field); - // angular.forEach(values, function(value){ - // ring = chart.addSeries([$attrs.field], dimple.plot.pie); - // core.filter(ring, $scope.data, $attrs.field, value, $attrs.filter); - // ring.lineMarkers = true; - // }); - // } graphController.draw(); } diff --git a/site/js/lib/angular-dimple.js b/site/js/lib/angular-dimple.js index a81b005..139d3df 100644 --- a/site/js/lib/angular-dimple.js +++ b/site/js/lib/angular-dimple.js @@ -261,6 +261,7 @@ angular.module('angular-dimple.p', []) p.title = null; } } + $scope.$watch('data', function(newValue, oldValue) { if (newValue) { addAxis(); @@ -304,23 +305,6 @@ angular.module('angular-dimple.ring', []) ring.outerRadius = ($attrs.radius) + '%'; } - - // ring.innerRadius = "50%"; - // core.filter(ring, $scope.data, $attrs.field, $attrs.value, $attrs.filter); - // ring.lineMarkers = true; - - // if ($attrs.value) { - // ring = chart.addSeries([$attrs.field], dimple.plot.pie); - // core.filter(ring, $scope.data, $attrs.field, $attrs.value, $attrs.filter); - // ring.lineMarkers = true; - // } else { - // var values = dimple.getUniqueValues($scope.data, $attrs.field); - // angular.forEach(values, function(value){ - // ring = chart.addSeries([$attrs.field], dimple.plot.pie); - // core.filter(ring, $scope.data, $attrs.field, value, $attrs.filter); - // ring.lineMarkers = true; - // }); - // } graphController.draw(); } diff --git a/source/p.js b/source/p.js index 57bd4bf..f1fe837 100644 --- a/source/p.js +++ b/source/p.js @@ -20,6 +20,7 @@ angular.module('angular-dimple.p', []) p.title = null; } } + $scope.$watch('data', function(newValue, oldValue) { if (newValue) { addAxis(); diff --git a/source/ring.js b/source/ring.js index 14b41cc..6eacbcc 100644 --- a/source/ring.js +++ b/source/ring.js @@ -33,23 +33,6 @@ angular.module('angular-dimple.ring', []) ring.outerRadius = ($attrs.radius) + '%'; } - - // ring.innerRadius = "50%"; - // core.filter(ring, $scope.data, $attrs.field, $attrs.value, $attrs.filter); - // ring.lineMarkers = true; - - // if ($attrs.value) { - // ring = chart.addSeries([$attrs.field], dimple.plot.pie); - // core.filter(ring, $scope.data, $attrs.field, $attrs.value, $attrs.filter); - // ring.lineMarkers = true; - // } else { - // var values = dimple.getUniqueValues($scope.data, $attrs.field); - // angular.forEach(values, function(value){ - // ring = chart.addSeries([$attrs.field], dimple.plot.pie); - // core.filter(ring, $scope.data, $attrs.field, value, $attrs.filter); - // ring.lineMarkers = true; - // }); - // } graphController.draw(); } From b31bfcfd97509d0a6a8afe30b2aadec26b07f5f6 Mon Sep 17 00:00:00 2001 From: Paul C Pederson Date: Wed, 30 Jul 2014 10:41:21 -0700 Subject: [PATCH 09/29] width => thickness --- dist/angular-dimple.js | 11 ++++++----- dist/angular-dimple.min.js | 2 +- documentation/partials/ring.md | 12 ++++++------ site/documentation/partials/ring.html | 12 ++++++------ site/js/lib/angular-dimple.js | 11 ++++++----- site/js/lib/angular-dimple.min.js | 2 +- source/ring.js | 9 +++++---- 7 files changed, 31 insertions(+), 28 deletions(-) diff --git a/dist/angular-dimple.js b/dist/angular-dimple.js index 139d3df..bd662a7 100644 --- a/dist/angular-dimple.js +++ b/dist/angular-dimple.js @@ -1,4 +1,4 @@ -/*! Angular-Dimple - 1.0.0 - 2014-07-28 +/*! Angular-Dimple - 1.0.2 - 2014-07-28 * https://github.com/esripdx/angular-dimple * Licensed ISC */ angular.module('angular-dimple.core', []) @@ -289,13 +289,14 @@ angular.module('angular-dimple.ring', []) } function addRing () { + var width; ring = chart.addSeries([$attrs.field], dimple.plot.pie); - if ($attrs.width && !$attrs.radius) { - var width = (100 - $attrs.width) + '%'; + if ($attrs.thickness && !$attrs.radius) { + width = (100 - $attrs.thickness) + '%'; ring.innerRadius = width; console.log(width); - } else if ($attrs.width && $attrs.radius) { - var width = ($attrs.radius - $attrs.width) + '%'; + } else if ($attrs.thickness && $attrs.radius) { + width = ($attrs.radius - $attrs.thickness) + '%'; ring.innerRadius = width; } else { ring.innerRadius = "50%"; diff --git a/dist/angular-dimple.min.js b/dist/angular-dimple.min.js index 21e9948..0a21a6f 100644 --- a/dist/angular-dimple.min.js +++ b/dist/angular-dimple.min.js @@ -1 +1 @@ -angular.module("angular-dimple.core",[]).service("angular-dimple.core",[function(){return{filter:function(a,b,c,d,e){if(null!==b){var f=this.filterData(b,e);a.data=f,void 0!==d&&(a.data=dimple.filterData(f,c,[d]))}},filterData:function(a,b){if(b){var c=b.split(":");return dimple.filterData(a,c[0],[c[1]])}return a}}}]),angular.module("angular-dimple",["angular-dimple.core","angular-dimple.graph","angular-dimple.legend","angular-dimple.x","angular-dimple.y","angular-dimple.p","angular-dimple.line","angular-dimple.bar","angular-dimple.stacked-bar","angular-dimple.area","angular-dimple.stacked-area","angular-dimple.scatter-plot","angular-dimple.ring"]).constant("MODULE_VERSION","0.0.1").value("defaults",{foo:"bar"}),angular.module("angular-dimple.area",[]).directive("area",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["area","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){if(d.value)area=h.addSeries([d.field],dimple.plot.area),a.filter(area,b.data,d.field,d.value,d.filter),area.lineMarkers=!0;else{var c=dimple.getUniqueValues(b.data,d.field);angular.forEach(c,function(c){area=h.addSeries([d.field],dimple.plot.area),a.filter(area,b.data,d.field,c,d.filter),area.lineMarkers=!0})}g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.bar",[]).directive("bar",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["bar","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){bar=h.addSeries([d.field],dimple.plot.bar),a.filter(bar,b.data,d.field,d.value,d.filter),g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.graph",[]).directive("graph",[function(){return{restrict:"E",replace:!0,scope:{data:"="},require:["graph"],transclude:!0,compile:function(a){var b=(1e9*Math.random()).toString(36).replace(".","_");return a.append('
    '),{post:function(a,c,d,e,f){var g=e[0];g._createChart(b),a.$watch("data",function(a){a&&g.setData()}),f(a,function(a){c.append(a)})}}},controller:["$scope","$element","$attrs",function(a,b,c){var d,e;this._createChart=function(a){e=a;var b=dimple.newSvg("#dng-"+e,c.width,c.height);d=new dimple.chart(b);var f="false"===c.autoStyle?!0:!1;d.noFormats=f},this.getChart=function(){return d},this.setData=function(){d.data=a.data},this.draw=function(){d.draw()},this.getID=function(){return e}}]}}]),angular.module("angular-dimple.legend",[]).directive("legend",[function(){return{restrict:"E",replace:!0,require:["legend","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){var a=c.left?c.left:"10%",b=c.top?c.top:"4%",d=c.height?c.height:"10%",e=c.width?c.width:"90%",f=c.position?c.position:"left";g.addLegend(a,b,e,d,f)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.line",[]).directive("line",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["line","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){line=h.addSeries([d.field],dimple.plot.line),a.filter(line,b.data,d.field,d.value,d.filter),line.lineMarkers=!0,g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.p",[]).directive("p",[function(){return{restrict:"E",replace:!0,require:["p","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){p=g.addMeasureAxis("p",c.field),c.title&&"null"!==c.title?p.title=c.title:"null"==c.title&&(p.title=null)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.ring",[]).directive("ring",["angular-dimple.core",function(){return{restrict:"E",replace:!0,require:["ring","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){if(ring=g.addSeries([c.field],dimple.plot.pie),c.width&&!c.radius){var a=100-c.width+"%";ring.innerRadius=a,console.log(a)}else if(c.width&&c.radius){var a=c.radius-c.width+"%";ring.innerRadius=a}else ring.innerRadius="50%";c.radius&&(ring.outerRadius=c.radius+"%"),f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.scatter-plot",[]).directive("scatterPlot",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["scatterPlot","^graph"],controller:[function(){}],link:function(b,c,d,e){function f(){var c=[];d.series&&c.push(d.series),c.push(d.field),(d.label||""===d.label)&&c.push(d.label),scatterPlot=h.addSeries(c,dimple.plot.bubble),scatterPlot.aggregate=dimple.aggregateMethod.avg,a.filter(scatterPlot,b.data,d.field,d.value,d.filter),g.draw()}var g=e[1],h=g.getChart();b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.stacked-area",[]).directive("stackedArea",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["stackedArea","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){area=d.series?h.addSeries([d.series],dimple.plot.area):h.addSeries([d.field],dimple.plot.area),a.filter(area,b.data,d.field,d.value,d.filter),area.lineMarkers=!1,g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.stacked-bar",[]).directive("stackedBar",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["stackedBar","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){bar=d.series?h.addSeries([d.series],dimple.plot.bar):h.addSeries([d.field],dimple.plot.bar),a.filter(bar,b.data,d.field,d.value,d.filter),g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.x",[]).directive("x",[function(){return{restrict:"E",replace:!0,require:["x","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){c.groupBy?(x="Measure"==c.type?g.addMeasureAxis("x",[c.groupBy,c.field]):"Percent"==c.type?g.addPctAxis("x",c.field):g.addCategoryAxis("x",[c.groupBy,c.field]),c.orderBy&&x.addGroupOrderRule(c.orderBy)):(x="Measure"==c.type?g.addMeasureAxis("x",c.field):"Percent"==c.type?g.addPctAxis("x",c.field):g.addCategoryAxis("x",c.field),c.orderBy&&x.addOrderRule(c.orderBy)),c.title&&"null"!==c.title?x.title=c.title:"null"==c.title&&(x.title=null)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.y",[]).directive("y",[function(){return{restrict:"E",replace:!0,require:["y","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){c.groupBy?(y="Category"==c.type?g.addCategoryAxis("y",c.field):"Percent"==c.type?g.addPctAxis("y",c.field):g.addMeasureAxis("y",c.field),c.orderBy&&y.addGroupOrderRule(c.orderBy)):(y="Category"==c.type?g.addCategoryAxis("y",c.field):"Percent"==c.type?g.addPctAxis("y",c.field):g.addMeasureAxis("y",c.field),c.orderBy&&y.addOrderRule(c.orderBy)),c.title&&"null"!==c.title?y.title=c.title:"null"==c.title&&(y.title=null)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]); \ No newline at end of file +angular.module("angular-dimple.core",[]).service("angular-dimple.core",[function(){return{filter:function(a,b,c,d,e){if(null!==b){var f=this.filterData(b,e);a.data=f,void 0!==d&&(a.data=dimple.filterData(f,c,[d]))}},filterData:function(a,b){if(b){var c=b.split(":");return dimple.filterData(a,c[0],[c[1]])}return a}}}]),angular.module("angular-dimple",["angular-dimple.core","angular-dimple.graph","angular-dimple.legend","angular-dimple.x","angular-dimple.y","angular-dimple.p","angular-dimple.line","angular-dimple.bar","angular-dimple.stacked-bar","angular-dimple.area","angular-dimple.stacked-area","angular-dimple.scatter-plot","angular-dimple.ring"]).constant("MODULE_VERSION","0.0.1").value("defaults",{foo:"bar"}),angular.module("angular-dimple.area",[]).directive("area",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["area","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){if(d.value)area=h.addSeries([d.field],dimple.plot.area),a.filter(area,b.data,d.field,d.value,d.filter),area.lineMarkers=!0;else{var c=dimple.getUniqueValues(b.data,d.field);angular.forEach(c,function(c){area=h.addSeries([d.field],dimple.plot.area),a.filter(area,b.data,d.field,c,d.filter),area.lineMarkers=!0})}g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.bar",[]).directive("bar",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["bar","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){bar=h.addSeries([d.field],dimple.plot.bar),a.filter(bar,b.data,d.field,d.value,d.filter),g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.graph",[]).directive("graph",[function(){return{restrict:"E",replace:!0,scope:{data:"="},require:["graph"],transclude:!0,compile:function(a){var b=(1e9*Math.random()).toString(36).replace(".","_");return a.append('
    '),{post:function(a,c,d,e,f){var g=e[0];g._createChart(b),a.$watch("data",function(a){a&&g.setData()}),f(a,function(a){c.append(a)})}}},controller:["$scope","$element","$attrs",function(a,b,c){var d,e;this._createChart=function(a){e=a;var b=dimple.newSvg("#dng-"+e,c.width,c.height);d=new dimple.chart(b);var f="false"===c.autoStyle?!0:!1;d.noFormats=f},this.getChart=function(){return d},this.setData=function(){d.data=a.data},this.draw=function(){d.draw()},this.getID=function(){return e}}]}}]),angular.module("angular-dimple.legend",[]).directive("legend",[function(){return{restrict:"E",replace:!0,require:["legend","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){var a=c.left?c.left:"10%",b=c.top?c.top:"4%",d=c.height?c.height:"10%",e=c.width?c.width:"90%",f=c.position?c.position:"left";g.addLegend(a,b,e,d,f)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.line",[]).directive("line",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["line","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){line=h.addSeries([d.field],dimple.plot.line),a.filter(line,b.data,d.field,d.value,d.filter),line.lineMarkers=!0,g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.p",[]).directive("p",[function(){return{restrict:"E",replace:!0,require:["p","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){p=g.addMeasureAxis("p",c.field),c.title&&"null"!==c.title?p.title=c.title:"null"==c.title&&(p.title=null)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.ring",[]).directive("ring",["angular-dimple.core",function(){return{restrict:"E",replace:!0,require:["ring","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){var a;ring=g.addSeries([c.field],dimple.plot.pie),c.thickness&&!c.radius?(a=100-c.thickness+"%",ring.innerRadius=a,console.log(a)):c.thickness&&c.radius?(a=c.radius-c.thickness+"%",ring.innerRadius=a):ring.innerRadius="50%",c.radius&&(ring.outerRadius=c.radius+"%"),f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.scatter-plot",[]).directive("scatterPlot",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["scatterPlot","^graph"],controller:[function(){}],link:function(b,c,d,e){function f(){var c=[];d.series&&c.push(d.series),c.push(d.field),(d.label||""===d.label)&&c.push(d.label),scatterPlot=h.addSeries(c,dimple.plot.bubble),scatterPlot.aggregate=dimple.aggregateMethod.avg,a.filter(scatterPlot,b.data,d.field,d.value,d.filter),g.draw()}var g=e[1],h=g.getChart();b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.stacked-area",[]).directive("stackedArea",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["stackedArea","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){area=d.series?h.addSeries([d.series],dimple.plot.area):h.addSeries([d.field],dimple.plot.area),a.filter(area,b.data,d.field,d.value,d.filter),area.lineMarkers=!1,g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.stacked-bar",[]).directive("stackedBar",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["stackedBar","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){bar=d.series?h.addSeries([d.series],dimple.plot.bar):h.addSeries([d.field],dimple.plot.bar),a.filter(bar,b.data,d.field,d.value,d.filter),g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.x",[]).directive("x",[function(){return{restrict:"E",replace:!0,require:["x","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){c.groupBy?(x="Measure"==c.type?g.addMeasureAxis("x",[c.groupBy,c.field]):"Percent"==c.type?g.addPctAxis("x",c.field):g.addCategoryAxis("x",[c.groupBy,c.field]),c.orderBy&&x.addGroupOrderRule(c.orderBy)):(x="Measure"==c.type?g.addMeasureAxis("x",c.field):"Percent"==c.type?g.addPctAxis("x",c.field):g.addCategoryAxis("x",c.field),c.orderBy&&x.addOrderRule(c.orderBy)),c.title&&"null"!==c.title?x.title=c.title:"null"==c.title&&(x.title=null)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.y",[]).directive("y",[function(){return{restrict:"E",replace:!0,require:["y","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){c.groupBy?(y="Category"==c.type?g.addCategoryAxis("y",c.field):"Percent"==c.type?g.addPctAxis("y",c.field):g.addMeasureAxis("y",c.field),c.orderBy&&y.addGroupOrderRule(c.orderBy)):(y="Category"==c.type?g.addCategoryAxis("y",c.field):"Percent"==c.type?g.addPctAxis("y",c.field):g.addMeasureAxis("y",c.field),c.orderBy&&y.addOrderRule(c.orderBy)),c.title&&"null"!==c.title?y.title=c.title:"null"==c.title&&(y.title=null)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]); \ No newline at end of file diff --git a/documentation/partials/ring.md b/documentation/partials/ring.md index c3055f6..2e90b1f 100644 --- a/documentation/partials/ring.md +++ b/documentation/partials/ring.md @@ -9,7 +9,7 @@

    - +
    @@ -18,7 +18,7 @@

    - +     ``` @@ -33,8 +33,8 @@

    - - + +
    @@ -43,7 +43,7 @@

    - - + +     ``` \ No newline at end of file diff --git a/site/documentation/partials/ring.html b/site/documentation/partials/ring.html index 89cb4c0..088dc4d 100644 --- a/site/documentation/partials/ring.html +++ b/site/documentation/partials/ring.html @@ -9,7 +9,7 @@

    - +

    @@ -17,7 +17,7 @@

    <graph data="graphData" width="100%" height="600px"> <p field="Unit Sales"></p> <legend></legend> - <ring field="Owner" width="20"></ring> + <ring field="Owner" thickness="20"></ring> </graph>

    Multi Ring Chart @@ -30,8 +30,8 @@

    - - + +

    @@ -39,6 +39,6 @@

    <graph data="graphData" width="100%" height="600px"> <p field="Unit Sales"></p> <legend></legend> - <ring field="Owner" width="20"></ring> - <ring field="Price Tier" width="20" radius="75"></ring> + <ring field="Owner" thickness="20"></ring> + <ring field="Price Tier" thickness="20" radius="75"></ring> </graph> diff --git a/site/js/lib/angular-dimple.js b/site/js/lib/angular-dimple.js index 139d3df..bd662a7 100644 --- a/site/js/lib/angular-dimple.js +++ b/site/js/lib/angular-dimple.js @@ -1,4 +1,4 @@ -/*! Angular-Dimple - 1.0.0 - 2014-07-28 +/*! Angular-Dimple - 1.0.2 - 2014-07-28 * https://github.com/esripdx/angular-dimple * Licensed ISC */ angular.module('angular-dimple.core', []) @@ -289,13 +289,14 @@ angular.module('angular-dimple.ring', []) } function addRing () { + var width; ring = chart.addSeries([$attrs.field], dimple.plot.pie); - if ($attrs.width && !$attrs.radius) { - var width = (100 - $attrs.width) + '%'; + if ($attrs.thickness && !$attrs.radius) { + width = (100 - $attrs.thickness) + '%'; ring.innerRadius = width; console.log(width); - } else if ($attrs.width && $attrs.radius) { - var width = ($attrs.radius - $attrs.width) + '%'; + } else if ($attrs.thickness && $attrs.radius) { + width = ($attrs.radius - $attrs.thickness) + '%'; ring.innerRadius = width; } else { ring.innerRadius = "50%"; diff --git a/site/js/lib/angular-dimple.min.js b/site/js/lib/angular-dimple.min.js index 21e9948..0a21a6f 100644 --- a/site/js/lib/angular-dimple.min.js +++ b/site/js/lib/angular-dimple.min.js @@ -1 +1 @@ -angular.module("angular-dimple.core",[]).service("angular-dimple.core",[function(){return{filter:function(a,b,c,d,e){if(null!==b){var f=this.filterData(b,e);a.data=f,void 0!==d&&(a.data=dimple.filterData(f,c,[d]))}},filterData:function(a,b){if(b){var c=b.split(":");return dimple.filterData(a,c[0],[c[1]])}return a}}}]),angular.module("angular-dimple",["angular-dimple.core","angular-dimple.graph","angular-dimple.legend","angular-dimple.x","angular-dimple.y","angular-dimple.p","angular-dimple.line","angular-dimple.bar","angular-dimple.stacked-bar","angular-dimple.area","angular-dimple.stacked-area","angular-dimple.scatter-plot","angular-dimple.ring"]).constant("MODULE_VERSION","0.0.1").value("defaults",{foo:"bar"}),angular.module("angular-dimple.area",[]).directive("area",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["area","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){if(d.value)area=h.addSeries([d.field],dimple.plot.area),a.filter(area,b.data,d.field,d.value,d.filter),area.lineMarkers=!0;else{var c=dimple.getUniqueValues(b.data,d.field);angular.forEach(c,function(c){area=h.addSeries([d.field],dimple.plot.area),a.filter(area,b.data,d.field,c,d.filter),area.lineMarkers=!0})}g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.bar",[]).directive("bar",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["bar","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){bar=h.addSeries([d.field],dimple.plot.bar),a.filter(bar,b.data,d.field,d.value,d.filter),g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.graph",[]).directive("graph",[function(){return{restrict:"E",replace:!0,scope:{data:"="},require:["graph"],transclude:!0,compile:function(a){var b=(1e9*Math.random()).toString(36).replace(".","_");return a.append('
    '),{post:function(a,c,d,e,f){var g=e[0];g._createChart(b),a.$watch("data",function(a){a&&g.setData()}),f(a,function(a){c.append(a)})}}},controller:["$scope","$element","$attrs",function(a,b,c){var d,e;this._createChart=function(a){e=a;var b=dimple.newSvg("#dng-"+e,c.width,c.height);d=new dimple.chart(b);var f="false"===c.autoStyle?!0:!1;d.noFormats=f},this.getChart=function(){return d},this.setData=function(){d.data=a.data},this.draw=function(){d.draw()},this.getID=function(){return e}}]}}]),angular.module("angular-dimple.legend",[]).directive("legend",[function(){return{restrict:"E",replace:!0,require:["legend","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){var a=c.left?c.left:"10%",b=c.top?c.top:"4%",d=c.height?c.height:"10%",e=c.width?c.width:"90%",f=c.position?c.position:"left";g.addLegend(a,b,e,d,f)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.line",[]).directive("line",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["line","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){line=h.addSeries([d.field],dimple.plot.line),a.filter(line,b.data,d.field,d.value,d.filter),line.lineMarkers=!0,g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.p",[]).directive("p",[function(){return{restrict:"E",replace:!0,require:["p","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){p=g.addMeasureAxis("p",c.field),c.title&&"null"!==c.title?p.title=c.title:"null"==c.title&&(p.title=null)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.ring",[]).directive("ring",["angular-dimple.core",function(){return{restrict:"E",replace:!0,require:["ring","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){if(ring=g.addSeries([c.field],dimple.plot.pie),c.width&&!c.radius){var a=100-c.width+"%";ring.innerRadius=a,console.log(a)}else if(c.width&&c.radius){var a=c.radius-c.width+"%";ring.innerRadius=a}else ring.innerRadius="50%";c.radius&&(ring.outerRadius=c.radius+"%"),f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.scatter-plot",[]).directive("scatterPlot",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["scatterPlot","^graph"],controller:[function(){}],link:function(b,c,d,e){function f(){var c=[];d.series&&c.push(d.series),c.push(d.field),(d.label||""===d.label)&&c.push(d.label),scatterPlot=h.addSeries(c,dimple.plot.bubble),scatterPlot.aggregate=dimple.aggregateMethod.avg,a.filter(scatterPlot,b.data,d.field,d.value,d.filter),g.draw()}var g=e[1],h=g.getChart();b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.stacked-area",[]).directive("stackedArea",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["stackedArea","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){area=d.series?h.addSeries([d.series],dimple.plot.area):h.addSeries([d.field],dimple.plot.area),a.filter(area,b.data,d.field,d.value,d.filter),area.lineMarkers=!1,g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.stacked-bar",[]).directive("stackedBar",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["stackedBar","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){bar=d.series?h.addSeries([d.series],dimple.plot.bar):h.addSeries([d.field],dimple.plot.bar),a.filter(bar,b.data,d.field,d.value,d.filter),g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.x",[]).directive("x",[function(){return{restrict:"E",replace:!0,require:["x","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){c.groupBy?(x="Measure"==c.type?g.addMeasureAxis("x",[c.groupBy,c.field]):"Percent"==c.type?g.addPctAxis("x",c.field):g.addCategoryAxis("x",[c.groupBy,c.field]),c.orderBy&&x.addGroupOrderRule(c.orderBy)):(x="Measure"==c.type?g.addMeasureAxis("x",c.field):"Percent"==c.type?g.addPctAxis("x",c.field):g.addCategoryAxis("x",c.field),c.orderBy&&x.addOrderRule(c.orderBy)),c.title&&"null"!==c.title?x.title=c.title:"null"==c.title&&(x.title=null)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.y",[]).directive("y",[function(){return{restrict:"E",replace:!0,require:["y","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){c.groupBy?(y="Category"==c.type?g.addCategoryAxis("y",c.field):"Percent"==c.type?g.addPctAxis("y",c.field):g.addMeasureAxis("y",c.field),c.orderBy&&y.addGroupOrderRule(c.orderBy)):(y="Category"==c.type?g.addCategoryAxis("y",c.field):"Percent"==c.type?g.addPctAxis("y",c.field):g.addMeasureAxis("y",c.field),c.orderBy&&y.addOrderRule(c.orderBy)),c.title&&"null"!==c.title?y.title=c.title:"null"==c.title&&(y.title=null)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]); \ No newline at end of file +angular.module("angular-dimple.core",[]).service("angular-dimple.core",[function(){return{filter:function(a,b,c,d,e){if(null!==b){var f=this.filterData(b,e);a.data=f,void 0!==d&&(a.data=dimple.filterData(f,c,[d]))}},filterData:function(a,b){if(b){var c=b.split(":");return dimple.filterData(a,c[0],[c[1]])}return a}}}]),angular.module("angular-dimple",["angular-dimple.core","angular-dimple.graph","angular-dimple.legend","angular-dimple.x","angular-dimple.y","angular-dimple.p","angular-dimple.line","angular-dimple.bar","angular-dimple.stacked-bar","angular-dimple.area","angular-dimple.stacked-area","angular-dimple.scatter-plot","angular-dimple.ring"]).constant("MODULE_VERSION","0.0.1").value("defaults",{foo:"bar"}),angular.module("angular-dimple.area",[]).directive("area",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["area","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){if(d.value)area=h.addSeries([d.field],dimple.plot.area),a.filter(area,b.data,d.field,d.value,d.filter),area.lineMarkers=!0;else{var c=dimple.getUniqueValues(b.data,d.field);angular.forEach(c,function(c){area=h.addSeries([d.field],dimple.plot.area),a.filter(area,b.data,d.field,c,d.filter),area.lineMarkers=!0})}g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.bar",[]).directive("bar",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["bar","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){bar=h.addSeries([d.field],dimple.plot.bar),a.filter(bar,b.data,d.field,d.value,d.filter),g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.graph",[]).directive("graph",[function(){return{restrict:"E",replace:!0,scope:{data:"="},require:["graph"],transclude:!0,compile:function(a){var b=(1e9*Math.random()).toString(36).replace(".","_");return a.append('
    '),{post:function(a,c,d,e,f){var g=e[0];g._createChart(b),a.$watch("data",function(a){a&&g.setData()}),f(a,function(a){c.append(a)})}}},controller:["$scope","$element","$attrs",function(a,b,c){var d,e;this._createChart=function(a){e=a;var b=dimple.newSvg("#dng-"+e,c.width,c.height);d=new dimple.chart(b);var f="false"===c.autoStyle?!0:!1;d.noFormats=f},this.getChart=function(){return d},this.setData=function(){d.data=a.data},this.draw=function(){d.draw()},this.getID=function(){return e}}]}}]),angular.module("angular-dimple.legend",[]).directive("legend",[function(){return{restrict:"E",replace:!0,require:["legend","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){var a=c.left?c.left:"10%",b=c.top?c.top:"4%",d=c.height?c.height:"10%",e=c.width?c.width:"90%",f=c.position?c.position:"left";g.addLegend(a,b,e,d,f)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.line",[]).directive("line",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["line","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){line=h.addSeries([d.field],dimple.plot.line),a.filter(line,b.data,d.field,d.value,d.filter),line.lineMarkers=!0,g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.p",[]).directive("p",[function(){return{restrict:"E",replace:!0,require:["p","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){p=g.addMeasureAxis("p",c.field),c.title&&"null"!==c.title?p.title=c.title:"null"==c.title&&(p.title=null)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.ring",[]).directive("ring",["angular-dimple.core",function(){return{restrict:"E",replace:!0,require:["ring","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){var a;ring=g.addSeries([c.field],dimple.plot.pie),c.thickness&&!c.radius?(a=100-c.thickness+"%",ring.innerRadius=a,console.log(a)):c.thickness&&c.radius?(a=c.radius-c.thickness+"%",ring.innerRadius=a):ring.innerRadius="50%",c.radius&&(ring.outerRadius=c.radius+"%"),f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.scatter-plot",[]).directive("scatterPlot",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["scatterPlot","^graph"],controller:[function(){}],link:function(b,c,d,e){function f(){var c=[];d.series&&c.push(d.series),c.push(d.field),(d.label||""===d.label)&&c.push(d.label),scatterPlot=h.addSeries(c,dimple.plot.bubble),scatterPlot.aggregate=dimple.aggregateMethod.avg,a.filter(scatterPlot,b.data,d.field,d.value,d.filter),g.draw()}var g=e[1],h=g.getChart();b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.stacked-area",[]).directive("stackedArea",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["stackedArea","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){area=d.series?h.addSeries([d.series],dimple.plot.area):h.addSeries([d.field],dimple.plot.area),a.filter(area,b.data,d.field,d.value,d.filter),area.lineMarkers=!1,g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.stacked-bar",[]).directive("stackedBar",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["stackedBar","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){bar=d.series?h.addSeries([d.series],dimple.plot.bar):h.addSeries([d.field],dimple.plot.bar),a.filter(bar,b.data,d.field,d.value,d.filter),g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.x",[]).directive("x",[function(){return{restrict:"E",replace:!0,require:["x","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){c.groupBy?(x="Measure"==c.type?g.addMeasureAxis("x",[c.groupBy,c.field]):"Percent"==c.type?g.addPctAxis("x",c.field):g.addCategoryAxis("x",[c.groupBy,c.field]),c.orderBy&&x.addGroupOrderRule(c.orderBy)):(x="Measure"==c.type?g.addMeasureAxis("x",c.field):"Percent"==c.type?g.addPctAxis("x",c.field):g.addCategoryAxis("x",c.field),c.orderBy&&x.addOrderRule(c.orderBy)),c.title&&"null"!==c.title?x.title=c.title:"null"==c.title&&(x.title=null)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.y",[]).directive("y",[function(){return{restrict:"E",replace:!0,require:["y","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){c.groupBy?(y="Category"==c.type?g.addCategoryAxis("y",c.field):"Percent"==c.type?g.addPctAxis("y",c.field):g.addMeasureAxis("y",c.field),c.orderBy&&y.addGroupOrderRule(c.orderBy)):(y="Category"==c.type?g.addCategoryAxis("y",c.field):"Percent"==c.type?g.addPctAxis("y",c.field):g.addMeasureAxis("y",c.field),c.orderBy&&y.addOrderRule(c.orderBy)),c.title&&"null"!==c.title?y.title=c.title:"null"==c.title&&(y.title=null)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]); \ No newline at end of file diff --git a/source/ring.js b/source/ring.js index 6eacbcc..33228ae 100644 --- a/source/ring.js +++ b/source/ring.js @@ -17,13 +17,14 @@ angular.module('angular-dimple.ring', []) } function addRing () { + var width; ring = chart.addSeries([$attrs.field], dimple.plot.pie); - if ($attrs.width && !$attrs.radius) { - var width = (100 - $attrs.width) + '%'; + if ($attrs.thickness && !$attrs.radius) { + width = (100 - $attrs.thickness) + '%'; ring.innerRadius = width; console.log(width); - } else if ($attrs.width && $attrs.radius) { - var width = ($attrs.radius - $attrs.width) + '%'; + } else if ($attrs.thickness && $attrs.radius) { + width = ($attrs.radius - $attrs.thickness) + '%'; ring.innerRadius = width; } else { ring.innerRadius = "50%"; From cc22a81d41ea3d64852f6723faf03c63497f1b41 Mon Sep 17 00:00:00 2001 From: Nikolas Wise Date: Wed, 30 Jul 2014 10:46:52 -0700 Subject: [PATCH 10/29] change radius to diameter, adjust doc --- dist/angular-dimple.js | 21 ++++++++++----------- dist/angular-dimple.min.js | 2 +- documentation/index.md | 12 +++++++----- documentation/partials/ring.md | 4 ++-- site/documentation/index.html | 11 ++++++----- site/documentation/partials/ring.html | 4 ++-- site/js/lib/angular-dimple.js | 21 ++++++++++----------- site/js/lib/angular-dimple.min.js | 2 +- source/ring.js | 19 +++++++++---------- 9 files changed, 48 insertions(+), 48 deletions(-) diff --git a/dist/angular-dimple.js b/dist/angular-dimple.js index bd662a7..28eb1aa 100644 --- a/dist/angular-dimple.js +++ b/dist/angular-dimple.js @@ -1,4 +1,4 @@ -/*! Angular-Dimple - 1.0.2 - 2014-07-28 +/*! Angular-Dimple - 1.0.2 - 2014-07-30 * https://github.com/esripdx/angular-dimple * Licensed ISC */ angular.module('angular-dimple.core', []) @@ -289,21 +289,20 @@ angular.module('angular-dimple.ring', []) } function addRing () { - var width; + var thickness; ring = chart.addSeries([$attrs.field], dimple.plot.pie); - if ($attrs.thickness && !$attrs.radius) { - width = (100 - $attrs.thickness) + '%'; - ring.innerRadius = width; - console.log(width); - } else if ($attrs.thickness && $attrs.radius) { - width = ($attrs.radius - $attrs.thickness) + '%'; - ring.innerRadius = width; + if ($attrs.thickness && !$attrs.diameter) { + thickness = (100 - $attrs.thickness) + '%'; + ring.innerRadius = thickness; + } else if ($attrs.thickness && $attrs.diameter) { + thickness = ($attrs.diameter - $attrs.thickness) + '%'; + ring.innerRadius = thickness; } else { ring.innerRadius = "50%"; } - if ($attrs.radius) { - ring.outerRadius = ($attrs.radius) + '%'; + if ($attrs.diameter) { + ring.outerRadius = ($attrs.diameter) + '%'; } graphController.draw(); diff --git a/dist/angular-dimple.min.js b/dist/angular-dimple.min.js index 0a21a6f..372fdca 100644 --- a/dist/angular-dimple.min.js +++ b/dist/angular-dimple.min.js @@ -1 +1 @@ -angular.module("angular-dimple.core",[]).service("angular-dimple.core",[function(){return{filter:function(a,b,c,d,e){if(null!==b){var f=this.filterData(b,e);a.data=f,void 0!==d&&(a.data=dimple.filterData(f,c,[d]))}},filterData:function(a,b){if(b){var c=b.split(":");return dimple.filterData(a,c[0],[c[1]])}return a}}}]),angular.module("angular-dimple",["angular-dimple.core","angular-dimple.graph","angular-dimple.legend","angular-dimple.x","angular-dimple.y","angular-dimple.p","angular-dimple.line","angular-dimple.bar","angular-dimple.stacked-bar","angular-dimple.area","angular-dimple.stacked-area","angular-dimple.scatter-plot","angular-dimple.ring"]).constant("MODULE_VERSION","0.0.1").value("defaults",{foo:"bar"}),angular.module("angular-dimple.area",[]).directive("area",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["area","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){if(d.value)area=h.addSeries([d.field],dimple.plot.area),a.filter(area,b.data,d.field,d.value,d.filter),area.lineMarkers=!0;else{var c=dimple.getUniqueValues(b.data,d.field);angular.forEach(c,function(c){area=h.addSeries([d.field],dimple.plot.area),a.filter(area,b.data,d.field,c,d.filter),area.lineMarkers=!0})}g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.bar",[]).directive("bar",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["bar","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){bar=h.addSeries([d.field],dimple.plot.bar),a.filter(bar,b.data,d.field,d.value,d.filter),g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.graph",[]).directive("graph",[function(){return{restrict:"E",replace:!0,scope:{data:"="},require:["graph"],transclude:!0,compile:function(a){var b=(1e9*Math.random()).toString(36).replace(".","_");return a.append('
    '),{post:function(a,c,d,e,f){var g=e[0];g._createChart(b),a.$watch("data",function(a){a&&g.setData()}),f(a,function(a){c.append(a)})}}},controller:["$scope","$element","$attrs",function(a,b,c){var d,e;this._createChart=function(a){e=a;var b=dimple.newSvg("#dng-"+e,c.width,c.height);d=new dimple.chart(b);var f="false"===c.autoStyle?!0:!1;d.noFormats=f},this.getChart=function(){return d},this.setData=function(){d.data=a.data},this.draw=function(){d.draw()},this.getID=function(){return e}}]}}]),angular.module("angular-dimple.legend",[]).directive("legend",[function(){return{restrict:"E",replace:!0,require:["legend","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){var a=c.left?c.left:"10%",b=c.top?c.top:"4%",d=c.height?c.height:"10%",e=c.width?c.width:"90%",f=c.position?c.position:"left";g.addLegend(a,b,e,d,f)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.line",[]).directive("line",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["line","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){line=h.addSeries([d.field],dimple.plot.line),a.filter(line,b.data,d.field,d.value,d.filter),line.lineMarkers=!0,g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.p",[]).directive("p",[function(){return{restrict:"E",replace:!0,require:["p","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){p=g.addMeasureAxis("p",c.field),c.title&&"null"!==c.title?p.title=c.title:"null"==c.title&&(p.title=null)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.ring",[]).directive("ring",["angular-dimple.core",function(){return{restrict:"E",replace:!0,require:["ring","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){var a;ring=g.addSeries([c.field],dimple.plot.pie),c.thickness&&!c.radius?(a=100-c.thickness+"%",ring.innerRadius=a,console.log(a)):c.thickness&&c.radius?(a=c.radius-c.thickness+"%",ring.innerRadius=a):ring.innerRadius="50%",c.radius&&(ring.outerRadius=c.radius+"%"),f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.scatter-plot",[]).directive("scatterPlot",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["scatterPlot","^graph"],controller:[function(){}],link:function(b,c,d,e){function f(){var c=[];d.series&&c.push(d.series),c.push(d.field),(d.label||""===d.label)&&c.push(d.label),scatterPlot=h.addSeries(c,dimple.plot.bubble),scatterPlot.aggregate=dimple.aggregateMethod.avg,a.filter(scatterPlot,b.data,d.field,d.value,d.filter),g.draw()}var g=e[1],h=g.getChart();b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.stacked-area",[]).directive("stackedArea",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["stackedArea","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){area=d.series?h.addSeries([d.series],dimple.plot.area):h.addSeries([d.field],dimple.plot.area),a.filter(area,b.data,d.field,d.value,d.filter),area.lineMarkers=!1,g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.stacked-bar",[]).directive("stackedBar",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["stackedBar","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){bar=d.series?h.addSeries([d.series],dimple.plot.bar):h.addSeries([d.field],dimple.plot.bar),a.filter(bar,b.data,d.field,d.value,d.filter),g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.x",[]).directive("x",[function(){return{restrict:"E",replace:!0,require:["x","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){c.groupBy?(x="Measure"==c.type?g.addMeasureAxis("x",[c.groupBy,c.field]):"Percent"==c.type?g.addPctAxis("x",c.field):g.addCategoryAxis("x",[c.groupBy,c.field]),c.orderBy&&x.addGroupOrderRule(c.orderBy)):(x="Measure"==c.type?g.addMeasureAxis("x",c.field):"Percent"==c.type?g.addPctAxis("x",c.field):g.addCategoryAxis("x",c.field),c.orderBy&&x.addOrderRule(c.orderBy)),c.title&&"null"!==c.title?x.title=c.title:"null"==c.title&&(x.title=null)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.y",[]).directive("y",[function(){return{restrict:"E",replace:!0,require:["y","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){c.groupBy?(y="Category"==c.type?g.addCategoryAxis("y",c.field):"Percent"==c.type?g.addPctAxis("y",c.field):g.addMeasureAxis("y",c.field),c.orderBy&&y.addGroupOrderRule(c.orderBy)):(y="Category"==c.type?g.addCategoryAxis("y",c.field):"Percent"==c.type?g.addPctAxis("y",c.field):g.addMeasureAxis("y",c.field),c.orderBy&&y.addOrderRule(c.orderBy)),c.title&&"null"!==c.title?y.title=c.title:"null"==c.title&&(y.title=null)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]); \ No newline at end of file +angular.module("angular-dimple.core",[]).service("angular-dimple.core",[function(){return{filter:function(a,b,c,d,e){if(null!==b){var f=this.filterData(b,e);a.data=f,void 0!==d&&(a.data=dimple.filterData(f,c,[d]))}},filterData:function(a,b){if(b){var c=b.split(":");return dimple.filterData(a,c[0],[c[1]])}return a}}}]),angular.module("angular-dimple",["angular-dimple.core","angular-dimple.graph","angular-dimple.legend","angular-dimple.x","angular-dimple.y","angular-dimple.p","angular-dimple.line","angular-dimple.bar","angular-dimple.stacked-bar","angular-dimple.area","angular-dimple.stacked-area","angular-dimple.scatter-plot","angular-dimple.ring"]).constant("MODULE_VERSION","0.0.1").value("defaults",{foo:"bar"}),angular.module("angular-dimple.area",[]).directive("area",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["area","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){if(d.value)area=h.addSeries([d.field],dimple.plot.area),a.filter(area,b.data,d.field,d.value,d.filter),area.lineMarkers=!0;else{var c=dimple.getUniqueValues(b.data,d.field);angular.forEach(c,function(c){area=h.addSeries([d.field],dimple.plot.area),a.filter(area,b.data,d.field,c,d.filter),area.lineMarkers=!0})}g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.bar",[]).directive("bar",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["bar","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){bar=h.addSeries([d.field],dimple.plot.bar),a.filter(bar,b.data,d.field,d.value,d.filter),g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.graph",[]).directive("graph",[function(){return{restrict:"E",replace:!0,scope:{data:"="},require:["graph"],transclude:!0,compile:function(a){var b=(1e9*Math.random()).toString(36).replace(".","_");return a.append('
    '),{post:function(a,c,d,e,f){var g=e[0];g._createChart(b),a.$watch("data",function(a){a&&g.setData()}),f(a,function(a){c.append(a)})}}},controller:["$scope","$element","$attrs",function(a,b,c){var d,e;this._createChart=function(a){e=a;var b=dimple.newSvg("#dng-"+e,c.width,c.height);d=new dimple.chart(b);var f="false"===c.autoStyle?!0:!1;d.noFormats=f},this.getChart=function(){return d},this.setData=function(){d.data=a.data},this.draw=function(){d.draw()},this.getID=function(){return e}}]}}]),angular.module("angular-dimple.legend",[]).directive("legend",[function(){return{restrict:"E",replace:!0,require:["legend","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){var a=c.left?c.left:"10%",b=c.top?c.top:"4%",d=c.height?c.height:"10%",e=c.width?c.width:"90%",f=c.position?c.position:"left";g.addLegend(a,b,e,d,f)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.line",[]).directive("line",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["line","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){line=h.addSeries([d.field],dimple.plot.line),a.filter(line,b.data,d.field,d.value,d.filter),line.lineMarkers=!0,g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.p",[]).directive("p",[function(){return{restrict:"E",replace:!0,require:["p","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){p=g.addMeasureAxis("p",c.field),c.title&&"null"!==c.title?p.title=c.title:"null"==c.title&&(p.title=null)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.ring",[]).directive("ring",["angular-dimple.core",function(){return{restrict:"E",replace:!0,require:["ring","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){var a;ring=g.addSeries([c.field],dimple.plot.pie),c.thickness&&!c.diameter?(a=100-c.thickness+"%",ring.innerRadius=a):c.thickness&&c.diameter?(a=c.diameter-c.thickness+"%",ring.innerRadius=a):ring.innerRadius="50%",c.diameter&&(ring.outerRadius=c.diameter+"%"),f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.scatter-plot",[]).directive("scatterPlot",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["scatterPlot","^graph"],controller:[function(){}],link:function(b,c,d,e){function f(){var c=[];d.series&&c.push(d.series),c.push(d.field),(d.label||""===d.label)&&c.push(d.label),scatterPlot=h.addSeries(c,dimple.plot.bubble),scatterPlot.aggregate=dimple.aggregateMethod.avg,a.filter(scatterPlot,b.data,d.field,d.value,d.filter),g.draw()}var g=e[1],h=g.getChart();b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.stacked-area",[]).directive("stackedArea",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["stackedArea","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){area=d.series?h.addSeries([d.series],dimple.plot.area):h.addSeries([d.field],dimple.plot.area),a.filter(area,b.data,d.field,d.value,d.filter),area.lineMarkers=!1,g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.stacked-bar",[]).directive("stackedBar",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["stackedBar","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){bar=d.series?h.addSeries([d.series],dimple.plot.bar):h.addSeries([d.field],dimple.plot.bar),a.filter(bar,b.data,d.field,d.value,d.filter),g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.x",[]).directive("x",[function(){return{restrict:"E",replace:!0,require:["x","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){c.groupBy?(x="Measure"==c.type?g.addMeasureAxis("x",[c.groupBy,c.field]):"Percent"==c.type?g.addPctAxis("x",c.field):g.addCategoryAxis("x",[c.groupBy,c.field]),c.orderBy&&x.addGroupOrderRule(c.orderBy)):(x="Measure"==c.type?g.addMeasureAxis("x",c.field):"Percent"==c.type?g.addPctAxis("x",c.field):g.addCategoryAxis("x",c.field),c.orderBy&&x.addOrderRule(c.orderBy)),c.title&&"null"!==c.title?x.title=c.title:"null"==c.title&&(x.title=null)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.y",[]).directive("y",[function(){return{restrict:"E",replace:!0,require:["y","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){c.groupBy?(y="Category"==c.type?g.addCategoryAxis("y",c.field):"Percent"==c.type?g.addPctAxis("y",c.field):g.addMeasureAxis("y",c.field),c.orderBy&&y.addGroupOrderRule(c.orderBy)):(y="Category"==c.type?g.addCategoryAxis("y",c.field):"Percent"==c.type?g.addPctAxis("y",c.field):g.addMeasureAxis("y",c.field),c.orderBy&&y.addOrderRule(c.orderBy)),c.title&&"null"!==c.title?y.title=c.title:"null"==c.title&&(y.title=null)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]); \ No newline at end of file diff --git a/documentation/index.md b/documentation/index.md index 96ab4af..f6ddca6 100644 --- a/documentation/index.md +++ b/documentation/index.md @@ -243,9 +243,11 @@ Scatter Plots also use the `series` attribute. Series defines the categorical da --- ## Ring +example + The `ring` directive creates pie and donut charts - but require a seperate type of axis that the other charts in Angular Dimple. A ring chart uses a `

    ` axis to plot a single measure. Adding multiple series to a ring chart will create concentric circles within the chart. -You can define both the width of the ring (as a percentage) and the size of the ring (as a percentage). +You can define both the thickness of the ring (as a percentage) and the diameter of the ring (as a percentage). ```html

    @@ -254,8 +256,8 @@ You can define both the width of the ring (as a percentage) and the size of the

    - -> + +> ``` #### Attributes @@ -263,8 +265,8 @@ You can define both the width of the ring (as a percentage) and the size of the | attribute | description | | --------- | ----------- | | field | **Required.** Field to plot as a ring. | -| width | Accepts a number. Width of ring, as percent of circle size. | -| radius | Accepts a number. Size of ring, as percent of circle size. | +| thickness | Accepts a number. Width of ring, as percent of circle size. | +| diameter | Accepts a number. Size of ring, as percent of circle size. | diff --git a/documentation/partials/ring.md b/documentation/partials/ring.md index 2e90b1f..a91cfe4 100644 --- a/documentation/partials/ring.md +++ b/documentation/partials/ring.md @@ -34,7 +34,7 @@

    - +

    @@ -44,6 +44,6 @@

    - + ``` \ No newline at end of file diff --git a/site/documentation/index.html b/site/documentation/index.html index 4bc0e8a..1d0eed3 100644 --- a/site/documentation/index.html +++ b/site/documentation/index.html @@ -495,16 +495,17 @@

    Attributes

    Ring

    +

    example

    The ring directive creates pie and donut charts - but require a seperate type of axis that the other charts in Angular Dimple. A ring chart uses a <p></p> axis to plot a single measure. Adding multiple series to a ring chart will create concentric circles within the chart.

    -

    You can define both the width of the ring (as a percentage) and the size of the ring (as a percentage).

    +

    You can define both the thickness of the ring (as a percentage) and the diameter of the ring (as a percentage).

    <p field="Unit Sales"></p>
 <ring field="Owner"></ring>
 
 <!-- OR -->
 
 <p field="Unit Sales"></p>
-<ring field="Owner" width="20"></ring>
-<ring field="Price Tier" width="20" radius="75"></ring>>
    +<ring field="Owner" thickness="20"></ring> +<ring field="Price Tier" thickness="20" diameter="75"></ring>>

    Attributes

    @@ -519,11 +520,11 @@

    Attributes

    - + - + diff --git a/site/documentation/partials/ring.html b/site/documentation/partials/ring.html index 088dc4d..248fec3 100644 --- a/site/documentation/partials/ring.html +++ b/site/documentation/partials/ring.html @@ -31,7 +31,7 @@

    - + @@ -40,5 +40,5 @@

    <p field="Unit Sales"></p> <legend></legend> <ring field="Owner" thickness="20"></ring> - <ring field="Price Tier" thickness="20" radius="75"></ring> + <ring field="Price Tier" thickness="20" diameter="75"></ring> </graph> diff --git a/site/js/lib/angular-dimple.js b/site/js/lib/angular-dimple.js index bd662a7..28eb1aa 100644 --- a/site/js/lib/angular-dimple.js +++ b/site/js/lib/angular-dimple.js @@ -1,4 +1,4 @@ -/*! Angular-Dimple - 1.0.2 - 2014-07-28 +/*! Angular-Dimple - 1.0.2 - 2014-07-30 * https://github.com/esripdx/angular-dimple * Licensed ISC */ angular.module('angular-dimple.core', []) @@ -289,21 +289,20 @@ angular.module('angular-dimple.ring', []) } function addRing () { - var width; + var thickness; ring = chart.addSeries([$attrs.field], dimple.plot.pie); - if ($attrs.thickness && !$attrs.radius) { - width = (100 - $attrs.thickness) + '%'; - ring.innerRadius = width; - console.log(width); - } else if ($attrs.thickness && $attrs.radius) { - width = ($attrs.radius - $attrs.thickness) + '%'; - ring.innerRadius = width; + if ($attrs.thickness && !$attrs.diameter) { + thickness = (100 - $attrs.thickness) + '%'; + ring.innerRadius = thickness; + } else if ($attrs.thickness && $attrs.diameter) { + thickness = ($attrs.diameter - $attrs.thickness) + '%'; + ring.innerRadius = thickness; } else { ring.innerRadius = "50%"; } - if ($attrs.radius) { - ring.outerRadius = ($attrs.radius) + '%'; + if ($attrs.diameter) { + ring.outerRadius = ($attrs.diameter) + '%'; } graphController.draw(); diff --git a/site/js/lib/angular-dimple.min.js b/site/js/lib/angular-dimple.min.js index 0a21a6f..372fdca 100644 --- a/site/js/lib/angular-dimple.min.js +++ b/site/js/lib/angular-dimple.min.js @@ -1 +1 @@ -angular.module("angular-dimple.core",[]).service("angular-dimple.core",[function(){return{filter:function(a,b,c,d,e){if(null!==b){var f=this.filterData(b,e);a.data=f,void 0!==d&&(a.data=dimple.filterData(f,c,[d]))}},filterData:function(a,b){if(b){var c=b.split(":");return dimple.filterData(a,c[0],[c[1]])}return a}}}]),angular.module("angular-dimple",["angular-dimple.core","angular-dimple.graph","angular-dimple.legend","angular-dimple.x","angular-dimple.y","angular-dimple.p","angular-dimple.line","angular-dimple.bar","angular-dimple.stacked-bar","angular-dimple.area","angular-dimple.stacked-area","angular-dimple.scatter-plot","angular-dimple.ring"]).constant("MODULE_VERSION","0.0.1").value("defaults",{foo:"bar"}),angular.module("angular-dimple.area",[]).directive("area",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["area","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){if(d.value)area=h.addSeries([d.field],dimple.plot.area),a.filter(area,b.data,d.field,d.value,d.filter),area.lineMarkers=!0;else{var c=dimple.getUniqueValues(b.data,d.field);angular.forEach(c,function(c){area=h.addSeries([d.field],dimple.plot.area),a.filter(area,b.data,d.field,c,d.filter),area.lineMarkers=!0})}g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.bar",[]).directive("bar",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["bar","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){bar=h.addSeries([d.field],dimple.plot.bar),a.filter(bar,b.data,d.field,d.value,d.filter),g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.graph",[]).directive("graph",[function(){return{restrict:"E",replace:!0,scope:{data:"="},require:["graph"],transclude:!0,compile:function(a){var b=(1e9*Math.random()).toString(36).replace(".","_");return a.append('
    '),{post:function(a,c,d,e,f){var g=e[0];g._createChart(b),a.$watch("data",function(a){a&&g.setData()}),f(a,function(a){c.append(a)})}}},controller:["$scope","$element","$attrs",function(a,b,c){var d,e;this._createChart=function(a){e=a;var b=dimple.newSvg("#dng-"+e,c.width,c.height);d=new dimple.chart(b);var f="false"===c.autoStyle?!0:!1;d.noFormats=f},this.getChart=function(){return d},this.setData=function(){d.data=a.data},this.draw=function(){d.draw()},this.getID=function(){return e}}]}}]),angular.module("angular-dimple.legend",[]).directive("legend",[function(){return{restrict:"E",replace:!0,require:["legend","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){var a=c.left?c.left:"10%",b=c.top?c.top:"4%",d=c.height?c.height:"10%",e=c.width?c.width:"90%",f=c.position?c.position:"left";g.addLegend(a,b,e,d,f)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.line",[]).directive("line",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["line","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){line=h.addSeries([d.field],dimple.plot.line),a.filter(line,b.data,d.field,d.value,d.filter),line.lineMarkers=!0,g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.p",[]).directive("p",[function(){return{restrict:"E",replace:!0,require:["p","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){p=g.addMeasureAxis("p",c.field),c.title&&"null"!==c.title?p.title=c.title:"null"==c.title&&(p.title=null)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.ring",[]).directive("ring",["angular-dimple.core",function(){return{restrict:"E",replace:!0,require:["ring","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){var a;ring=g.addSeries([c.field],dimple.plot.pie),c.thickness&&!c.radius?(a=100-c.thickness+"%",ring.innerRadius=a,console.log(a)):c.thickness&&c.radius?(a=c.radius-c.thickness+"%",ring.innerRadius=a):ring.innerRadius="50%",c.radius&&(ring.outerRadius=c.radius+"%"),f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.scatter-plot",[]).directive("scatterPlot",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["scatterPlot","^graph"],controller:[function(){}],link:function(b,c,d,e){function f(){var c=[];d.series&&c.push(d.series),c.push(d.field),(d.label||""===d.label)&&c.push(d.label),scatterPlot=h.addSeries(c,dimple.plot.bubble),scatterPlot.aggregate=dimple.aggregateMethod.avg,a.filter(scatterPlot,b.data,d.field,d.value,d.filter),g.draw()}var g=e[1],h=g.getChart();b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.stacked-area",[]).directive("stackedArea",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["stackedArea","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){area=d.series?h.addSeries([d.series],dimple.plot.area):h.addSeries([d.field],dimple.plot.area),a.filter(area,b.data,d.field,d.value,d.filter),area.lineMarkers=!1,g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.stacked-bar",[]).directive("stackedBar",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["stackedBar","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){bar=d.series?h.addSeries([d.series],dimple.plot.bar):h.addSeries([d.field],dimple.plot.bar),a.filter(bar,b.data,d.field,d.value,d.filter),g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.x",[]).directive("x",[function(){return{restrict:"E",replace:!0,require:["x","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){c.groupBy?(x="Measure"==c.type?g.addMeasureAxis("x",[c.groupBy,c.field]):"Percent"==c.type?g.addPctAxis("x",c.field):g.addCategoryAxis("x",[c.groupBy,c.field]),c.orderBy&&x.addGroupOrderRule(c.orderBy)):(x="Measure"==c.type?g.addMeasureAxis("x",c.field):"Percent"==c.type?g.addPctAxis("x",c.field):g.addCategoryAxis("x",c.field),c.orderBy&&x.addOrderRule(c.orderBy)),c.title&&"null"!==c.title?x.title=c.title:"null"==c.title&&(x.title=null)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.y",[]).directive("y",[function(){return{restrict:"E",replace:!0,require:["y","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){c.groupBy?(y="Category"==c.type?g.addCategoryAxis("y",c.field):"Percent"==c.type?g.addPctAxis("y",c.field):g.addMeasureAxis("y",c.field),c.orderBy&&y.addGroupOrderRule(c.orderBy)):(y="Category"==c.type?g.addCategoryAxis("y",c.field):"Percent"==c.type?g.addPctAxis("y",c.field):g.addMeasureAxis("y",c.field),c.orderBy&&y.addOrderRule(c.orderBy)),c.title&&"null"!==c.title?y.title=c.title:"null"==c.title&&(y.title=null)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]); \ No newline at end of file +angular.module("angular-dimple.core",[]).service("angular-dimple.core",[function(){return{filter:function(a,b,c,d,e){if(null!==b){var f=this.filterData(b,e);a.data=f,void 0!==d&&(a.data=dimple.filterData(f,c,[d]))}},filterData:function(a,b){if(b){var c=b.split(":");return dimple.filterData(a,c[0],[c[1]])}return a}}}]),angular.module("angular-dimple",["angular-dimple.core","angular-dimple.graph","angular-dimple.legend","angular-dimple.x","angular-dimple.y","angular-dimple.p","angular-dimple.line","angular-dimple.bar","angular-dimple.stacked-bar","angular-dimple.area","angular-dimple.stacked-area","angular-dimple.scatter-plot","angular-dimple.ring"]).constant("MODULE_VERSION","0.0.1").value("defaults",{foo:"bar"}),angular.module("angular-dimple.area",[]).directive("area",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["area","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){if(d.value)area=h.addSeries([d.field],dimple.plot.area),a.filter(area,b.data,d.field,d.value,d.filter),area.lineMarkers=!0;else{var c=dimple.getUniqueValues(b.data,d.field);angular.forEach(c,function(c){area=h.addSeries([d.field],dimple.plot.area),a.filter(area,b.data,d.field,c,d.filter),area.lineMarkers=!0})}g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.bar",[]).directive("bar",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["bar","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){bar=h.addSeries([d.field],dimple.plot.bar),a.filter(bar,b.data,d.field,d.value,d.filter),g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.graph",[]).directive("graph",[function(){return{restrict:"E",replace:!0,scope:{data:"="},require:["graph"],transclude:!0,compile:function(a){var b=(1e9*Math.random()).toString(36).replace(".","_");return a.append('
    '),{post:function(a,c,d,e,f){var g=e[0];g._createChart(b),a.$watch("data",function(a){a&&g.setData()}),f(a,function(a){c.append(a)})}}},controller:["$scope","$element","$attrs",function(a,b,c){var d,e;this._createChart=function(a){e=a;var b=dimple.newSvg("#dng-"+e,c.width,c.height);d=new dimple.chart(b);var f="false"===c.autoStyle?!0:!1;d.noFormats=f},this.getChart=function(){return d},this.setData=function(){d.data=a.data},this.draw=function(){d.draw()},this.getID=function(){return e}}]}}]),angular.module("angular-dimple.legend",[]).directive("legend",[function(){return{restrict:"E",replace:!0,require:["legend","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){var a=c.left?c.left:"10%",b=c.top?c.top:"4%",d=c.height?c.height:"10%",e=c.width?c.width:"90%",f=c.position?c.position:"left";g.addLegend(a,b,e,d,f)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.line",[]).directive("line",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["line","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){line=h.addSeries([d.field],dimple.plot.line),a.filter(line,b.data,d.field,d.value,d.filter),line.lineMarkers=!0,g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.p",[]).directive("p",[function(){return{restrict:"E",replace:!0,require:["p","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){p=g.addMeasureAxis("p",c.field),c.title&&"null"!==c.title?p.title=c.title:"null"==c.title&&(p.title=null)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.ring",[]).directive("ring",["angular-dimple.core",function(){return{restrict:"E",replace:!0,require:["ring","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){var a;ring=g.addSeries([c.field],dimple.plot.pie),c.thickness&&!c.diameter?(a=100-c.thickness+"%",ring.innerRadius=a):c.thickness&&c.diameter?(a=c.diameter-c.thickness+"%",ring.innerRadius=a):ring.innerRadius="50%",c.diameter&&(ring.outerRadius=c.diameter+"%"),f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.scatter-plot",[]).directive("scatterPlot",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["scatterPlot","^graph"],controller:[function(){}],link:function(b,c,d,e){function f(){var c=[];d.series&&c.push(d.series),c.push(d.field),(d.label||""===d.label)&&c.push(d.label),scatterPlot=h.addSeries(c,dimple.plot.bubble),scatterPlot.aggregate=dimple.aggregateMethod.avg,a.filter(scatterPlot,b.data,d.field,d.value,d.filter),g.draw()}var g=e[1],h=g.getChart();b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.stacked-area",[]).directive("stackedArea",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["stackedArea","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){area=d.series?h.addSeries([d.series],dimple.plot.area):h.addSeries([d.field],dimple.plot.area),a.filter(area,b.data,d.field,d.value,d.filter),area.lineMarkers=!1,g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.stacked-bar",[]).directive("stackedBar",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["stackedBar","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){bar=d.series?h.addSeries([d.series],dimple.plot.bar):h.addSeries([d.field],dimple.plot.bar),a.filter(bar,b.data,d.field,d.value,d.filter),g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.x",[]).directive("x",[function(){return{restrict:"E",replace:!0,require:["x","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){c.groupBy?(x="Measure"==c.type?g.addMeasureAxis("x",[c.groupBy,c.field]):"Percent"==c.type?g.addPctAxis("x",c.field):g.addCategoryAxis("x",[c.groupBy,c.field]),c.orderBy&&x.addGroupOrderRule(c.orderBy)):(x="Measure"==c.type?g.addMeasureAxis("x",c.field):"Percent"==c.type?g.addPctAxis("x",c.field):g.addCategoryAxis("x",c.field),c.orderBy&&x.addOrderRule(c.orderBy)),c.title&&"null"!==c.title?x.title=c.title:"null"==c.title&&(x.title=null)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.y",[]).directive("y",[function(){return{restrict:"E",replace:!0,require:["y","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){c.groupBy?(y="Category"==c.type?g.addCategoryAxis("y",c.field):"Percent"==c.type?g.addPctAxis("y",c.field):g.addMeasureAxis("y",c.field),c.orderBy&&y.addGroupOrderRule(c.orderBy)):(y="Category"==c.type?g.addCategoryAxis("y",c.field):"Percent"==c.type?g.addPctAxis("y",c.field):g.addMeasureAxis("y",c.field),c.orderBy&&y.addOrderRule(c.orderBy)),c.title&&"null"!==c.title?y.title=c.title:"null"==c.title&&(y.title=null)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]); \ No newline at end of file diff --git a/source/ring.js b/source/ring.js index 33228ae..404be84 100644 --- a/source/ring.js +++ b/source/ring.js @@ -17,21 +17,20 @@ angular.module('angular-dimple.ring', []) } function addRing () { - var width; + var thickness; ring = chart.addSeries([$attrs.field], dimple.plot.pie); - if ($attrs.thickness && !$attrs.radius) { - width = (100 - $attrs.thickness) + '%'; - ring.innerRadius = width; - console.log(width); - } else if ($attrs.thickness && $attrs.radius) { - width = ($attrs.radius - $attrs.thickness) + '%'; - ring.innerRadius = width; + if ($attrs.thickness && !$attrs.diameter) { + thickness = (100 - $attrs.thickness) + '%'; + ring.innerRadius = thickness; + } else if ($attrs.thickness && $attrs.diameter) { + thickness = ($attrs.diameter - $attrs.thickness) + '%'; + ring.innerRadius = thickness; } else { ring.innerRadius = "50%"; } - if ($attrs.radius) { - ring.outerRadius = ($attrs.radius) + '%'; + if ($attrs.diameter) { + ring.outerRadius = ($attrs.diameter) + '%'; } graphController.draw(); From 62de072c9cd0053a8aab54be54c29e224acf03c6 Mon Sep 17 00:00:00 2001 From: Nikolas Wise Date: Wed, 30 Jul 2014 14:33:19 -0700 Subject: [PATCH 11/29] set graph to flag when data is ready --- source/graph.js | 24 ++++++++++++++++++++---- 1 file changed, 20 insertions(+), 4 deletions(-) diff --git a/source/graph.js b/source/graph.js index 8a9bd58..c44f719 100644 --- a/source/graph.js +++ b/source/graph.js @@ -5,10 +5,14 @@ angular.module('angular-dimple.graph', []) restrict: 'E', replace: true, scope: { - data: '=' + data: '=', }, require: ['graph'], transclude: true, + link: function($scope, $element, $attrs, $controllers) { + var graphController = $controllers[0]; + var chart = graphController.getChart(); + }, compile: function($element, $attrs) { var id = (Math.random() * 1e9).toString(36).replace(".", "_"); $element.append('
    '); @@ -16,11 +20,24 @@ angular.module('angular-dimple.graph', []) post: function postLink(scope, element, attrs, controllers, transclude) { var graphController = controllers[0]; graphController._createChart(id); + scope.dataReady = false; + + var chart = graphController.getChart(); + var transition; + if (attrs.transition) { + transition = attrs.transition; + } else { + transition = 750; + } + scope.$watch('data', function(newValue, oldValue) { if (newValue) { + scope.dataReady = true; graphController.setData(); + chart.draw(transition); } }); + transclude(scope, function(clone){ element.append(clone); }); @@ -34,8 +51,8 @@ angular.module('angular-dimple.graph', []) this._createChart = function (domId) { id = domId; var svg = dimple.newSvg('#dng-'+ id +'', $attrs.width, $attrs.height); - chart = new dimple.chart(svg); - + var data = $scope.data; + chart = new dimple.chart(svg, data); var autoStyle = $attrs.autoStyle === 'false' ? true : false; chart.noFormats = autoStyle; }; @@ -55,7 +72,6 @@ angular.module('angular-dimple.graph', []) this.getID = function () { return id; }; - }] }; }]); \ No newline at end of file From ab2301b7f653f32c313586bbb12e1eabcf8ad624 Mon Sep 17 00:00:00 2001 From: Nikolas Wise Date: Wed, 30 Jul 2014 14:33:42 -0700 Subject: [PATCH 12/29] draw axes only once when data is ready --- source/x.js | 6 +++--- source/y.js | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/source/x.js b/source/x.js index bbe2e23..ff989ef 100644 --- a/source/x.js +++ b/source/x.js @@ -23,7 +23,6 @@ angular.module('angular-dimple.x', []) if ($attrs.orderBy) { x.addGroupOrderRule($attrs.orderBy); } - } else { if ($attrs.type == 'Measure') { x = chart.addMeasureAxis('x', $attrs.field); @@ -43,8 +42,9 @@ angular.module('angular-dimple.x', []) x.title = null; } } - $scope.$watch('data', function(newValue, oldValue) { - if (newValue) { + + $scope.$watch('dataReady', function(newValue, oldValue) { + if (newValue === true) { addAxis(); } }); diff --git a/source/y.js b/source/y.js index d3f5089..3817c0b 100644 --- a/source/y.js +++ b/source/y.js @@ -43,8 +43,8 @@ angular.module('angular-dimple.y', []) } } - $scope.$watch('data', function(newValue, oldValue) { - if (newValue) { + $scope.$watch('dataReady', function(newValue, oldValue) { + if (newValue === true) { addAxis(); } }); From 9db8039294a1c2bd19d10fe2e8ddbb894c6ec135 Mon Sep 17 00:00:00 2001 From: Nikolas Wise Date: Wed, 30 Jul 2014 14:34:22 -0700 Subject: [PATCH 13/29] add random number controller --- site/js/controllers.js | 29 +++++++++++++++++++++++++++++ 1 file changed, 29 insertions(+) diff --git a/site/js/controllers.js b/site/js/controllers.js index f7d6cc7..0223c88 100644 --- a/site/js/controllers.js +++ b/site/js/controllers.js @@ -1,5 +1,34 @@ angular.module('myApp.controllers', []) + + +.controller('testController', ['$scope', 'dataService', function($scope, dataService) { + $scope.generate_data = function () { + var retary = []; + for (var i = 0; i < 5; i++) { + var date = new Date(Date.now() + i * 86400000); + var obj = { + 'Date': date, + 'Month': date.getMonth() + '-' + date.getDate(), + 'Owner': 'Aperture', + 'Unit Sales': (Math.random() * 1000) + 1000 + }; + retary[retary.length] = obj; + } + return {'data': retary}; + }; + + $scope.update_data = function () { + var newData = $scope.generate_data().data; + $scope.graphData = newData; + }; + + $scope.update_data(); + +}]) + + + .controller('lineGraphController', ['$scope', 'dataService', function($scope, dataService) { dataService.getData().then(function(response) { $scope.graphData = response.data; From f4efda23ff12d51d42ddea8887cda51927bcc57c Mon Sep 17 00:00:00 2001 From: Nikolas Wise Date: Wed, 30 Jul 2014 14:41:55 -0700 Subject: [PATCH 14/29] work with line directive to gs --- source/line.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/source/line.js b/source/line.js index 2817456..bde4d67 100644 --- a/source/line.js +++ b/source/line.js @@ -11,20 +11,24 @@ angular.module('angular-dimple.line', []) var graphController = $controllers[1]; var lineController = $controllers[0]; var chart = graphController.getChart(); + var drawn = false; function addLine () { var filteredData; line = chart.addSeries([$attrs.field], dimple.plot.line); - core.filter(line, $scope.data, $attrs.field, $attrs.value, $attrs.filter); + // core.filter(line, $scope.data, $attrs.field, $attrs.value, $attrs.filter); line.lineMarkers = true; graphController.draw(); } - $scope.$watch('data', function(newValue, oldValue) { - if (newValue) { + $scope.$watch('dataReady', function(newValue, oldValue) { + if (newValue === true) { + console.log(newValue); addLine(); } + }); + } }; }]); \ No newline at end of file From 7e557893f996280c1b23d38f61572285bb1def56 Mon Sep 17 00:00:00 2001 From: Nikolas Wise Date: Wed, 30 Jul 2014 16:40:24 -0700 Subject: [PATCH 15/29] neuter core --- source/angular-dimple-core.js | 36 +++++++++++++++++++++-------------- 1 file changed, 22 insertions(+), 14 deletions(-) diff --git a/source/angular-dimple-core.js b/source/angular-dimple-core.js index 28fe1fd..a64b26f 100644 --- a/source/angular-dimple-core.js +++ b/source/angular-dimple-core.js @@ -2,22 +2,30 @@ angular.module('angular-dimple.core', []) .service('angular-dimple.core', [function(){ return { - filter: function (chart, scopeData, field, value, filter) { - if (scopeData !== null) { - var data = this.filterData(scopeData, filter); - chart.data = data; - if (value !== undefined) { - chart.data = dimple.filterData(data, field, [value]); - } - } + filter: function (chart, scope, attrs) { + // chart; + // scope.filters + + // field + // value + + + + // if (scopeData !== null) { + // var data = this.filterData(scopeData, filter); + // chart.data = data; + // if (value !== undefined) { + // chart.data = dimple.filterData(data, field, [value]); + // } + // } }, filterData: function (data, filter) { - if (filter) { - var filters = filter.split(':'); - return dimple.filterData(data, filters[0], [filters[1]]); - } else { - return data; - } + // if (filter) { + // var filters = filter.split(':'); + // return dimple.filterData(data, filters[0], [filters[1]]); + // } else { + // return data; + // } } }; }]); From 0dac5b10806ac4050032a8291fbaeb9f44bb1ccd Mon Sep 17 00:00:00 2001 From: Nikolas Wise Date: Wed, 30 Jul 2014 16:40:41 -0700 Subject: [PATCH 16/29] move filter to graph --- source/graph.js | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/source/graph.js b/source/graph.js index c44f719..3082679 100644 --- a/source/graph.js +++ b/source/graph.js @@ -21,6 +21,7 @@ angular.module('angular-dimple.graph', []) var graphController = controllers[0]; graphController._createChart(id); scope.dataReady = false; + scope.filters = []; var chart = graphController.getChart(); var transition; @@ -72,6 +73,24 @@ angular.module('angular-dimple.graph', []) this.getID = function () { return id; }; + + this.filter = function (attrs) { + if (attrs.value !== undefined) { + $scope.filters.push(attrs.value); + } + if ($scope.filters.length) { + chart.data = dimple.filterData($scope.data, attrs.field, $scope.filters); + } + + if (attrs.filter !== undefined) { + console.log("i see a filter"); + var thisFilter = attrs.filter.split(':'); + var field = thisFilter[0]; + var value = [thisFilter[1]]; + chart.data = dimple.filterData($scope.data, field, value); + } + }; + }] }; }]); \ No newline at end of file From fdbaec8af5737fb54cc6de927a3bad47e2913a10 Mon Sep 17 00:00:00 2001 From: Nikolas Wise Date: Wed, 30 Jul 2014 16:53:14 -0700 Subject: [PATCH 17/29] update all directives to new structures --- dist/angular-dimple.js | 112 +++++++++++------- dist/angular-dimple.min.js | 2 +- documentation/partials/animation-test.md | 13 ++ .../partials/animation-test.html | 12 ++ site/js/app.js | 7 ++ site/js/controllers.js | 1 + site/js/lib/angular-dimple.js | 112 +++++++++++------- site/js/lib/angular-dimple.min.js | 2 +- source/angular-dimple-core.js | 26 +--- source/area.js | 6 +- source/bar.js | 6 +- source/legend.js | 4 +- source/line.js | 5 +- source/scatter-plot.js | 6 +- source/stacked-area.js | 6 +- source/stacked-bar.js | 6 +- 16 files changed, 186 insertions(+), 140 deletions(-) create mode 100644 documentation/partials/animation-test.md create mode 100644 site/documentation/partials/animation-test.html diff --git a/dist/angular-dimple.js b/dist/angular-dimple.js index 28eb1aa..4d7973b 100644 --- a/dist/angular-dimple.js +++ b/dist/angular-dimple.js @@ -5,23 +5,7 @@ angular.module('angular-dimple.core', []) .service('angular-dimple.core', [function(){ return { - filter: function (chart, scopeData, field, value, filter) { - if (scopeData !== null) { - var data = this.filterData(scopeData, filter); - chart.data = data; - if (value !== undefined) { - chart.data = dimple.filterData(data, field, [value]); - } - } - }, - filterData: function (data, filter) { - if (filter) { - var filters = filter.split(':'); - return dimple.filterData(data, filters[0], [filters[1]]); - } else { - return data; - } - } + // Nothing to see here. }; }]); @@ -70,15 +54,15 @@ angular.module('angular-dimple.area', []) var values = dimple.getUniqueValues($scope.data, $attrs.field); angular.forEach(values, function(value){ area = chart.addSeries([$attrs.field], dimple.plot.area); - core.filter(area, $scope.data, $attrs.field, value, $attrs.filter); + graphController.filter($attrs); area.lineMarkers = true; }); } graphController.draw(); } - $scope.$watch('data', function(newValue, oldValue) { - if (newValue) { + $scope.$watch('dataReady', function(newValue, oldValue) { + if (newValue === true) { addArea(); } }); @@ -104,14 +88,14 @@ angular.module('angular-dimple.bar', []) function addBar () { var filteredData; bar = chart.addSeries([$attrs.field], dimple.plot.bar); - core.filter(bar, $scope.data, $attrs.field, $attrs.value, $attrs.filter); + graphController.filter($attrs); graphController.draw(); } - $scope.$watch('data', function(newValue, oldValue) { - if (newValue) { + $scope.$watch('dataReady', function(newValue, oldValue) { + if (newValue === true) { addBar(); } }); @@ -125,10 +109,14 @@ angular.module('angular-dimple.graph', []) restrict: 'E', replace: true, scope: { - data: '=' + data: '=', }, require: ['graph'], transclude: true, + link: function($scope, $element, $attrs, $controllers) { + var graphController = $controllers[0]; + var chart = graphController.getChart(); + }, compile: function($element, $attrs) { var id = (Math.random() * 1e9).toString(36).replace(".", "_"); $element.append('
    '); @@ -136,11 +124,25 @@ angular.module('angular-dimple.graph', []) post: function postLink(scope, element, attrs, controllers, transclude) { var graphController = controllers[0]; graphController._createChart(id); + scope.dataReady = false; + scope.filters = []; + + var chart = graphController.getChart(); + var transition; + if (attrs.transition) { + transition = attrs.transition; + } else { + transition = 750; + } + scope.$watch('data', function(newValue, oldValue) { if (newValue) { + scope.dataReady = true; graphController.setData(); + chart.draw(transition); } }); + transclude(scope, function(clone){ element.append(clone); }); @@ -154,8 +156,8 @@ angular.module('angular-dimple.graph', []) this._createChart = function (domId) { id = domId; var svg = dimple.newSvg('#dng-'+ id +'', $attrs.width, $attrs.height); - chart = new dimple.chart(svg); - + var data = $scope.data; + chart = new dimple.chart(svg, data); var autoStyle = $attrs.autoStyle === 'false' ? true : false; chart.noFormats = autoStyle; }; @@ -176,6 +178,23 @@ angular.module('angular-dimple.graph', []) return id; }; + this.filter = function (attrs) { + if (attrs.value !== undefined) { + $scope.filters.push(attrs.value); + } + if ($scope.filters.length) { + chart.data = dimple.filterData($scope.data, attrs.field, $scope.filters); + } + + if (attrs.filter !== undefined) { + console.log("i see a filter"); + var thisFilter = attrs.filter.split(':'); + var field = thisFilter[0]; + var value = [thisFilter[1]]; + chart.data = dimple.filterData($scope.data, field, value); + } + }; + }] }; }]); @@ -201,8 +220,8 @@ angular.module('angular-dimple.legend', []) chart.addLegend(left, top, width, height, position); } - $scope.$watch('data', function(newValue, oldValue) { - if (newValue) { + $scope.$watch('dataReady', function(newValue, oldValue) { + if (newValue === true) { addLegend(); } }); @@ -220,22 +239,23 @@ angular.module('angular-dimple.line', []) }], link: function($scope, $element, $attrs, $controllers) { var graphController = $controllers[1]; - var lineController = $controllers[0]; var chart = graphController.getChart(); + var drawn = false; function addLine () { var filteredData; line = chart.addSeries([$attrs.field], dimple.plot.line); - core.filter(line, $scope.data, $attrs.field, $attrs.value, $attrs.filter); + graphController.filter($attrs); line.lineMarkers = true; graphController.draw(); } - $scope.$watch('data', function(newValue, oldValue) { - if (newValue) { + $scope.$watch('dataReady', function(newValue, oldValue) { + if (newValue === true) { addLine(); } }); + } }; }]); @@ -338,12 +358,12 @@ angular.module('angular-dimple.scatter-plot', []) 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, $attrs.field, $attrs.value, $attrs.filter); + graphController.filter($attrs); graphController.draw(); } - $scope.$watch('data', function(newValue, oldValue) { - if (newValue) { + $scope.$watch('dataReady', function(newValue, oldValue) { + if (newValue === true) { addScatterPlot(); } }); @@ -370,13 +390,13 @@ angular.module('angular-dimple.stacked-area', []) } else { area = chart.addSeries([$attrs.field], dimple.plot.area); } - core.filter(area, $scope.data, $attrs.field, $attrs.value, $attrs.filter); + graphController.filter($attrs); area.lineMarkers = false; graphController.draw(); } - $scope.$watch('data', function(newValue, oldValue) { - if (newValue) { + $scope.$watch('dataReady', function(newValue, oldValue) { + if (newValue === true) { addArea(); } }); @@ -403,12 +423,12 @@ angular.module('angular-dimple.stacked-bar', []) } else { bar = chart.addSeries([$attrs.field], dimple.plot.bar); } - core.filter(bar, $scope.data, $attrs.field, $attrs.value, $attrs.filter); + graphController.filter($attrs); graphController.draw(); } - $scope.$watch('data', function(newValue, oldValue) { - if (newValue) { + $scope.$watch('dataReady', function(newValue, oldValue) { + if (newValue === true) { addBar(); } }); @@ -440,7 +460,6 @@ angular.module('angular-dimple.x', []) if ($attrs.orderBy) { x.addGroupOrderRule($attrs.orderBy); } - } else { if ($attrs.type == 'Measure') { x = chart.addMeasureAxis('x', $attrs.field); @@ -460,8 +479,9 @@ angular.module('angular-dimple.x', []) x.title = null; } } - $scope.$watch('data', function(newValue, oldValue) { - if (newValue) { + + $scope.$watch('dataReady', function(newValue, oldValue) { + if (newValue === true) { addAxis(); } }); @@ -513,8 +533,8 @@ angular.module('angular-dimple.y', []) } } - $scope.$watch('data', function(newValue, oldValue) { - if (newValue) { + $scope.$watch('dataReady', function(newValue, oldValue) { + if (newValue === true) { addAxis(); } }); diff --git a/dist/angular-dimple.min.js b/dist/angular-dimple.min.js index 372fdca..252673b 100644 --- a/dist/angular-dimple.min.js +++ b/dist/angular-dimple.min.js @@ -1 +1 @@ -angular.module("angular-dimple.core",[]).service("angular-dimple.core",[function(){return{filter:function(a,b,c,d,e){if(null!==b){var f=this.filterData(b,e);a.data=f,void 0!==d&&(a.data=dimple.filterData(f,c,[d]))}},filterData:function(a,b){if(b){var c=b.split(":");return dimple.filterData(a,c[0],[c[1]])}return a}}}]),angular.module("angular-dimple",["angular-dimple.core","angular-dimple.graph","angular-dimple.legend","angular-dimple.x","angular-dimple.y","angular-dimple.p","angular-dimple.line","angular-dimple.bar","angular-dimple.stacked-bar","angular-dimple.area","angular-dimple.stacked-area","angular-dimple.scatter-plot","angular-dimple.ring"]).constant("MODULE_VERSION","0.0.1").value("defaults",{foo:"bar"}),angular.module("angular-dimple.area",[]).directive("area",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["area","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){if(d.value)area=h.addSeries([d.field],dimple.plot.area),a.filter(area,b.data,d.field,d.value,d.filter),area.lineMarkers=!0;else{var c=dimple.getUniqueValues(b.data,d.field);angular.forEach(c,function(c){area=h.addSeries([d.field],dimple.plot.area),a.filter(area,b.data,d.field,c,d.filter),area.lineMarkers=!0})}g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.bar",[]).directive("bar",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["bar","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){bar=h.addSeries([d.field],dimple.plot.bar),a.filter(bar,b.data,d.field,d.value,d.filter),g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.graph",[]).directive("graph",[function(){return{restrict:"E",replace:!0,scope:{data:"="},require:["graph"],transclude:!0,compile:function(a){var b=(1e9*Math.random()).toString(36).replace(".","_");return a.append('
    '),{post:function(a,c,d,e,f){var g=e[0];g._createChart(b),a.$watch("data",function(a){a&&g.setData()}),f(a,function(a){c.append(a)})}}},controller:["$scope","$element","$attrs",function(a,b,c){var d,e;this._createChart=function(a){e=a;var b=dimple.newSvg("#dng-"+e,c.width,c.height);d=new dimple.chart(b);var f="false"===c.autoStyle?!0:!1;d.noFormats=f},this.getChart=function(){return d},this.setData=function(){d.data=a.data},this.draw=function(){d.draw()},this.getID=function(){return e}}]}}]),angular.module("angular-dimple.legend",[]).directive("legend",[function(){return{restrict:"E",replace:!0,require:["legend","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){var a=c.left?c.left:"10%",b=c.top?c.top:"4%",d=c.height?c.height:"10%",e=c.width?c.width:"90%",f=c.position?c.position:"left";g.addLegend(a,b,e,d,f)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.line",[]).directive("line",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["line","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){line=h.addSeries([d.field],dimple.plot.line),a.filter(line,b.data,d.field,d.value,d.filter),line.lineMarkers=!0,g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.p",[]).directive("p",[function(){return{restrict:"E",replace:!0,require:["p","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){p=g.addMeasureAxis("p",c.field),c.title&&"null"!==c.title?p.title=c.title:"null"==c.title&&(p.title=null)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.ring",[]).directive("ring",["angular-dimple.core",function(){return{restrict:"E",replace:!0,require:["ring","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){var a;ring=g.addSeries([c.field],dimple.plot.pie),c.thickness&&!c.diameter?(a=100-c.thickness+"%",ring.innerRadius=a):c.thickness&&c.diameter?(a=c.diameter-c.thickness+"%",ring.innerRadius=a):ring.innerRadius="50%",c.diameter&&(ring.outerRadius=c.diameter+"%"),f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.scatter-plot",[]).directive("scatterPlot",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["scatterPlot","^graph"],controller:[function(){}],link:function(b,c,d,e){function f(){var c=[];d.series&&c.push(d.series),c.push(d.field),(d.label||""===d.label)&&c.push(d.label),scatterPlot=h.addSeries(c,dimple.plot.bubble),scatterPlot.aggregate=dimple.aggregateMethod.avg,a.filter(scatterPlot,b.data,d.field,d.value,d.filter),g.draw()}var g=e[1],h=g.getChart();b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.stacked-area",[]).directive("stackedArea",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["stackedArea","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){area=d.series?h.addSeries([d.series],dimple.plot.area):h.addSeries([d.field],dimple.plot.area),a.filter(area,b.data,d.field,d.value,d.filter),area.lineMarkers=!1,g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.stacked-bar",[]).directive("stackedBar",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["stackedBar","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){bar=d.series?h.addSeries([d.series],dimple.plot.bar):h.addSeries([d.field],dimple.plot.bar),a.filter(bar,b.data,d.field,d.value,d.filter),g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.x",[]).directive("x",[function(){return{restrict:"E",replace:!0,require:["x","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){c.groupBy?(x="Measure"==c.type?g.addMeasureAxis("x",[c.groupBy,c.field]):"Percent"==c.type?g.addPctAxis("x",c.field):g.addCategoryAxis("x",[c.groupBy,c.field]),c.orderBy&&x.addGroupOrderRule(c.orderBy)):(x="Measure"==c.type?g.addMeasureAxis("x",c.field):"Percent"==c.type?g.addPctAxis("x",c.field):g.addCategoryAxis("x",c.field),c.orderBy&&x.addOrderRule(c.orderBy)),c.title&&"null"!==c.title?x.title=c.title:"null"==c.title&&(x.title=null)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.y",[]).directive("y",[function(){return{restrict:"E",replace:!0,require:["y","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){c.groupBy?(y="Category"==c.type?g.addCategoryAxis("y",c.field):"Percent"==c.type?g.addPctAxis("y",c.field):g.addMeasureAxis("y",c.field),c.orderBy&&y.addGroupOrderRule(c.orderBy)):(y="Category"==c.type?g.addCategoryAxis("y",c.field):"Percent"==c.type?g.addPctAxis("y",c.field):g.addMeasureAxis("y",c.field),c.orderBy&&y.addOrderRule(c.orderBy)),c.title&&"null"!==c.title?y.title=c.title:"null"==c.title&&(y.title=null)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]); \ No newline at end of file +angular.module("angular-dimple.core",[]).service("angular-dimple.core",[function(){return{}}]),angular.module("angular-dimple",["angular-dimple.core","angular-dimple.graph","angular-dimple.legend","angular-dimple.x","angular-dimple.y","angular-dimple.p","angular-dimple.line","angular-dimple.bar","angular-dimple.stacked-bar","angular-dimple.area","angular-dimple.stacked-area","angular-dimple.scatter-plot","angular-dimple.ring"]).constant("MODULE_VERSION","0.0.1").value("defaults",{foo:"bar"}),angular.module("angular-dimple.area",[]).directive("area",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["area","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){if(d.value)area=h.addSeries([d.field],dimple.plot.area),a.filter(area,b.data,d.field,d.value,d.filter),area.lineMarkers=!0;else{var c=dimple.getUniqueValues(b.data,d.field);angular.forEach(c,function(){area=h.addSeries([d.field],dimple.plot.area),g.filter(d),area.lineMarkers=!0})}g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("dataReady",function(a){a===!0&&f()})}}}]),angular.module("angular-dimple.bar",[]).directive("bar",["angular-dimple.core",function(){return{restrict:"E",replace:!0,require:["bar","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){bar=g.addSeries([c.field],dimple.plot.bar),f.filter(c),f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.graph",[]).directive("graph",[function(){return{restrict:"E",replace:!0,scope:{data:"="},require:["graph"],transclude:!0,link:function(a,b,c,d){{var e=d[0];e.getChart()}},compile:function(a){var b=(1e9*Math.random()).toString(36).replace(".","_");return a.append('
    '),{post:function(a,c,d,e,f){var g=e[0];g._createChart(b),a.dataReady=!1,a.filters=[];var h,i=g.getChart();h=d.transition?d.transition:750,a.$watch("data",function(b){b&&(a.dataReady=!0,g.setData(),i.draw(h))}),f(a,function(a){c.append(a)})}}},controller:["$scope","$element","$attrs",function(a,b,c){var d,e;this._createChart=function(b){e=b;var f=dimple.newSvg("#dng-"+e,c.width,c.height),g=a.data;d=new dimple.chart(f,g);var h="false"===c.autoStyle?!0:!1;d.noFormats=h},this.getChart=function(){return d},this.setData=function(){d.data=a.data},this.draw=function(){d.draw()},this.getID=function(){return e},this.filter=function(b){if(void 0!==b.value&&a.filters.push(b.value),a.filters.length&&(d.data=dimple.filterData(a.data,b.field,a.filters)),void 0!==b.filter){console.log("i see a filter");var c=b.filter.split(":"),e=c[0],f=[c[1]];d.data=dimple.filterData(a.data,e,f)}}}]}}]),angular.module("angular-dimple.legend",[]).directive("legend",[function(){return{restrict:"E",replace:!0,require:["legend","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){var a=c.left?c.left:"10%",b=c.top?c.top:"4%",d=c.height?c.height:"10%",e=c.width?c.width:"90%",f=c.position?c.position:"left";g.addLegend(a,b,e,d,f)}var f=d[1],g=f.getChart();a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.line",[]).directive("line",["angular-dimple.core",function(){return{restrict:"E",replace:!0,require:["line","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){line=g.addSeries([c.field],dimple.plot.line),f.filter(c),line.lineMarkers=!0,f.draw()}var f=d[1],g=f.getChart();a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.p",[]).directive("p",[function(){return{restrict:"E",replace:!0,require:["p","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){p=g.addMeasureAxis("p",c.field),c.title&&"null"!==c.title?p.title=c.title:"null"==c.title&&(p.title=null)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.ring",[]).directive("ring",["angular-dimple.core",function(){return{restrict:"E",replace:!0,require:["ring","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){var a;ring=g.addSeries([c.field],dimple.plot.pie),c.thickness&&!c.diameter?(a=100-c.thickness+"%",ring.innerRadius=a):c.thickness&&c.diameter?(a=c.diameter-c.thickness+"%",ring.innerRadius=a):ring.innerRadius="50%",c.diameter&&(ring.outerRadius=c.diameter+"%"),f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.scatter-plot",[]).directive("scatterPlot",["angular-dimple.core",function(){return{restrict:"E",replace:!0,require:["scatterPlot","^graph"],controller:[function(){}],link:function(a,b,c,d){function e(){var a=[];c.series&&a.push(c.series),a.push(c.field),(c.label||""===c.label)&&a.push(c.label),scatterPlot=g.addSeries(a,dimple.plot.bubble),scatterPlot.aggregate=dimple.aggregateMethod.avg,f.filter(c),f.draw()}var f=d[1],g=f.getChart();a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.stacked-area",[]).directive("stackedArea",["angular-dimple.core",function(){return{restrict:"E",replace:!0,require:["stackedArea","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){area=c.series?g.addSeries([c.series],dimple.plot.area):g.addSeries([c.field],dimple.plot.area),f.filter(c),area.lineMarkers=!1,f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.stacked-bar",[]).directive("stackedBar",["angular-dimple.core",function(){return{restrict:"E",replace:!0,require:["stackedBar","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){bar=c.series?g.addSeries([c.series],dimple.plot.bar):g.addSeries([c.field],dimple.plot.bar),f.filter(c),f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.x",[]).directive("x",[function(){return{restrict:"E",replace:!0,require:["x","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){c.groupBy?(x="Measure"==c.type?g.addMeasureAxis("x",[c.groupBy,c.field]):"Percent"==c.type?g.addPctAxis("x",c.field):g.addCategoryAxis("x",[c.groupBy,c.field]),c.orderBy&&x.addGroupOrderRule(c.orderBy)):(x="Measure"==c.type?g.addMeasureAxis("x",c.field):"Percent"==c.type?g.addPctAxis("x",c.field):g.addCategoryAxis("x",c.field),c.orderBy&&x.addOrderRule(c.orderBy)),c.title&&"null"!==c.title?x.title=c.title:"null"==c.title&&(x.title=null)}var f=d[1],g=f.getChart();a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.y",[]).directive("y",[function(){return{restrict:"E",replace:!0,require:["y","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){c.groupBy?(y="Category"==c.type?g.addCategoryAxis("y",c.field):"Percent"==c.type?g.addPctAxis("y",c.field):g.addMeasureAxis("y",c.field),c.orderBy&&y.addGroupOrderRule(c.orderBy)):(y="Category"==c.type?g.addCategoryAxis("y",c.field):"Percent"==c.type?g.addPctAxis("y",c.field):g.addMeasureAxis("y",c.field),c.orderBy&&y.addOrderRule(c.orderBy)),c.title&&"null"!==c.title?y.title=c.title:"null"==c.title&&(y.title=null)}var f=d[1],g=f.getChart();a.$watch("dataReady",function(a){a===!0&&e()})}}}]); \ No newline at end of file diff --git a/documentation/partials/animation-test.md b/documentation/partials/animation-test.md new file mode 100644 index 0000000..31511d6 --- /dev/null +++ b/documentation/partials/animation-test.md @@ -0,0 +1,13 @@ + +
    + + + + + + +
    + + diff --git a/site/documentation/partials/animation-test.html b/site/documentation/partials/animation-test.html new file mode 100644 index 0000000..988b433 --- /dev/null +++ b/site/documentation/partials/animation-test.html @@ -0,0 +1,12 @@ +
    + + + + + + +
    + + diff --git a/site/js/app.js b/site/js/app.js index e9f3572..7fbc695 100644 --- a/site/js/app.js +++ b/site/js/app.js @@ -10,6 +10,12 @@ angular.module('myApp', [ .config(['$routeProvider', '$logProvider', function($routeProvider, $logProvider) { $routeProvider + .when('/animation-test', { + templateUrl: '../documentation/partials/animation-test.html', + controller: 'testController' + }) + + .when('/line-graph', { templateUrl: '../documentation/partials/line-graph.html', controller: 'lineGraphController' @@ -50,3 +56,4 @@ angular.module('myApp', [ $logProvider.debugEnabled(true); }]); + diff --git a/site/js/controllers.js b/site/js/controllers.js index 0223c88..673d6db 100644 --- a/site/js/controllers.js +++ b/site/js/controllers.js @@ -3,6 +3,7 @@ angular.module('myApp.controllers', []) .controller('testController', ['$scope', 'dataService', function($scope, dataService) { + $scope.line = true; $scope.generate_data = function () { var retary = []; for (var i = 0; i < 5; i++) { diff --git a/site/js/lib/angular-dimple.js b/site/js/lib/angular-dimple.js index 28eb1aa..4d7973b 100644 --- a/site/js/lib/angular-dimple.js +++ b/site/js/lib/angular-dimple.js @@ -5,23 +5,7 @@ angular.module('angular-dimple.core', []) .service('angular-dimple.core', [function(){ return { - filter: function (chart, scopeData, field, value, filter) { - if (scopeData !== null) { - var data = this.filterData(scopeData, filter); - chart.data = data; - if (value !== undefined) { - chart.data = dimple.filterData(data, field, [value]); - } - } - }, - filterData: function (data, filter) { - if (filter) { - var filters = filter.split(':'); - return dimple.filterData(data, filters[0], [filters[1]]); - } else { - return data; - } - } + // Nothing to see here. }; }]); @@ -70,15 +54,15 @@ angular.module('angular-dimple.area', []) var values = dimple.getUniqueValues($scope.data, $attrs.field); angular.forEach(values, function(value){ area = chart.addSeries([$attrs.field], dimple.plot.area); - core.filter(area, $scope.data, $attrs.field, value, $attrs.filter); + graphController.filter($attrs); area.lineMarkers = true; }); } graphController.draw(); } - $scope.$watch('data', function(newValue, oldValue) { - if (newValue) { + $scope.$watch('dataReady', function(newValue, oldValue) { + if (newValue === true) { addArea(); } }); @@ -104,14 +88,14 @@ angular.module('angular-dimple.bar', []) function addBar () { var filteredData; bar = chart.addSeries([$attrs.field], dimple.plot.bar); - core.filter(bar, $scope.data, $attrs.field, $attrs.value, $attrs.filter); + graphController.filter($attrs); graphController.draw(); } - $scope.$watch('data', function(newValue, oldValue) { - if (newValue) { + $scope.$watch('dataReady', function(newValue, oldValue) { + if (newValue === true) { addBar(); } }); @@ -125,10 +109,14 @@ angular.module('angular-dimple.graph', []) restrict: 'E', replace: true, scope: { - data: '=' + data: '=', }, require: ['graph'], transclude: true, + link: function($scope, $element, $attrs, $controllers) { + var graphController = $controllers[0]; + var chart = graphController.getChart(); + }, compile: function($element, $attrs) { var id = (Math.random() * 1e9).toString(36).replace(".", "_"); $element.append('
    '); @@ -136,11 +124,25 @@ angular.module('angular-dimple.graph', []) post: function postLink(scope, element, attrs, controllers, transclude) { var graphController = controllers[0]; graphController._createChart(id); + scope.dataReady = false; + scope.filters = []; + + var chart = graphController.getChart(); + var transition; + if (attrs.transition) { + transition = attrs.transition; + } else { + transition = 750; + } + scope.$watch('data', function(newValue, oldValue) { if (newValue) { + scope.dataReady = true; graphController.setData(); + chart.draw(transition); } }); + transclude(scope, function(clone){ element.append(clone); }); @@ -154,8 +156,8 @@ angular.module('angular-dimple.graph', []) this._createChart = function (domId) { id = domId; var svg = dimple.newSvg('#dng-'+ id +'', $attrs.width, $attrs.height); - chart = new dimple.chart(svg); - + var data = $scope.data; + chart = new dimple.chart(svg, data); var autoStyle = $attrs.autoStyle === 'false' ? true : false; chart.noFormats = autoStyle; }; @@ -176,6 +178,23 @@ angular.module('angular-dimple.graph', []) return id; }; + this.filter = function (attrs) { + if (attrs.value !== undefined) { + $scope.filters.push(attrs.value); + } + if ($scope.filters.length) { + chart.data = dimple.filterData($scope.data, attrs.field, $scope.filters); + } + + if (attrs.filter !== undefined) { + console.log("i see a filter"); + var thisFilter = attrs.filter.split(':'); + var field = thisFilter[0]; + var value = [thisFilter[1]]; + chart.data = dimple.filterData($scope.data, field, value); + } + }; + }] }; }]); @@ -201,8 +220,8 @@ angular.module('angular-dimple.legend', []) chart.addLegend(left, top, width, height, position); } - $scope.$watch('data', function(newValue, oldValue) { - if (newValue) { + $scope.$watch('dataReady', function(newValue, oldValue) { + if (newValue === true) { addLegend(); } }); @@ -220,22 +239,23 @@ angular.module('angular-dimple.line', []) }], link: function($scope, $element, $attrs, $controllers) { var graphController = $controllers[1]; - var lineController = $controllers[0]; var chart = graphController.getChart(); + var drawn = false; function addLine () { var filteredData; line = chart.addSeries([$attrs.field], dimple.plot.line); - core.filter(line, $scope.data, $attrs.field, $attrs.value, $attrs.filter); + graphController.filter($attrs); line.lineMarkers = true; graphController.draw(); } - $scope.$watch('data', function(newValue, oldValue) { - if (newValue) { + $scope.$watch('dataReady', function(newValue, oldValue) { + if (newValue === true) { addLine(); } }); + } }; }]); @@ -338,12 +358,12 @@ angular.module('angular-dimple.scatter-plot', []) 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, $attrs.field, $attrs.value, $attrs.filter); + graphController.filter($attrs); graphController.draw(); } - $scope.$watch('data', function(newValue, oldValue) { - if (newValue) { + $scope.$watch('dataReady', function(newValue, oldValue) { + if (newValue === true) { addScatterPlot(); } }); @@ -370,13 +390,13 @@ angular.module('angular-dimple.stacked-area', []) } else { area = chart.addSeries([$attrs.field], dimple.plot.area); } - core.filter(area, $scope.data, $attrs.field, $attrs.value, $attrs.filter); + graphController.filter($attrs); area.lineMarkers = false; graphController.draw(); } - $scope.$watch('data', function(newValue, oldValue) { - if (newValue) { + $scope.$watch('dataReady', function(newValue, oldValue) { + if (newValue === true) { addArea(); } }); @@ -403,12 +423,12 @@ angular.module('angular-dimple.stacked-bar', []) } else { bar = chart.addSeries([$attrs.field], dimple.plot.bar); } - core.filter(bar, $scope.data, $attrs.field, $attrs.value, $attrs.filter); + graphController.filter($attrs); graphController.draw(); } - $scope.$watch('data', function(newValue, oldValue) { - if (newValue) { + $scope.$watch('dataReady', function(newValue, oldValue) { + if (newValue === true) { addBar(); } }); @@ -440,7 +460,6 @@ angular.module('angular-dimple.x', []) if ($attrs.orderBy) { x.addGroupOrderRule($attrs.orderBy); } - } else { if ($attrs.type == 'Measure') { x = chart.addMeasureAxis('x', $attrs.field); @@ -460,8 +479,9 @@ angular.module('angular-dimple.x', []) x.title = null; } } - $scope.$watch('data', function(newValue, oldValue) { - if (newValue) { + + $scope.$watch('dataReady', function(newValue, oldValue) { + if (newValue === true) { addAxis(); } }); @@ -513,8 +533,8 @@ angular.module('angular-dimple.y', []) } } - $scope.$watch('data', function(newValue, oldValue) { - if (newValue) { + $scope.$watch('dataReady', function(newValue, oldValue) { + if (newValue === true) { addAxis(); } }); diff --git a/site/js/lib/angular-dimple.min.js b/site/js/lib/angular-dimple.min.js index 372fdca..252673b 100644 --- a/site/js/lib/angular-dimple.min.js +++ b/site/js/lib/angular-dimple.min.js @@ -1 +1 @@ -angular.module("angular-dimple.core",[]).service("angular-dimple.core",[function(){return{filter:function(a,b,c,d,e){if(null!==b){var f=this.filterData(b,e);a.data=f,void 0!==d&&(a.data=dimple.filterData(f,c,[d]))}},filterData:function(a,b){if(b){var c=b.split(":");return dimple.filterData(a,c[0],[c[1]])}return a}}}]),angular.module("angular-dimple",["angular-dimple.core","angular-dimple.graph","angular-dimple.legend","angular-dimple.x","angular-dimple.y","angular-dimple.p","angular-dimple.line","angular-dimple.bar","angular-dimple.stacked-bar","angular-dimple.area","angular-dimple.stacked-area","angular-dimple.scatter-plot","angular-dimple.ring"]).constant("MODULE_VERSION","0.0.1").value("defaults",{foo:"bar"}),angular.module("angular-dimple.area",[]).directive("area",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["area","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){if(d.value)area=h.addSeries([d.field],dimple.plot.area),a.filter(area,b.data,d.field,d.value,d.filter),area.lineMarkers=!0;else{var c=dimple.getUniqueValues(b.data,d.field);angular.forEach(c,function(c){area=h.addSeries([d.field],dimple.plot.area),a.filter(area,b.data,d.field,c,d.filter),area.lineMarkers=!0})}g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.bar",[]).directive("bar",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["bar","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){bar=h.addSeries([d.field],dimple.plot.bar),a.filter(bar,b.data,d.field,d.value,d.filter),g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.graph",[]).directive("graph",[function(){return{restrict:"E",replace:!0,scope:{data:"="},require:["graph"],transclude:!0,compile:function(a){var b=(1e9*Math.random()).toString(36).replace(".","_");return a.append('
    '),{post:function(a,c,d,e,f){var g=e[0];g._createChart(b),a.$watch("data",function(a){a&&g.setData()}),f(a,function(a){c.append(a)})}}},controller:["$scope","$element","$attrs",function(a,b,c){var d,e;this._createChart=function(a){e=a;var b=dimple.newSvg("#dng-"+e,c.width,c.height);d=new dimple.chart(b);var f="false"===c.autoStyle?!0:!1;d.noFormats=f},this.getChart=function(){return d},this.setData=function(){d.data=a.data},this.draw=function(){d.draw()},this.getID=function(){return e}}]}}]),angular.module("angular-dimple.legend",[]).directive("legend",[function(){return{restrict:"E",replace:!0,require:["legend","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){var a=c.left?c.left:"10%",b=c.top?c.top:"4%",d=c.height?c.height:"10%",e=c.width?c.width:"90%",f=c.position?c.position:"left";g.addLegend(a,b,e,d,f)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.line",[]).directive("line",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["line","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){line=h.addSeries([d.field],dimple.plot.line),a.filter(line,b.data,d.field,d.value,d.filter),line.lineMarkers=!0,g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.p",[]).directive("p",[function(){return{restrict:"E",replace:!0,require:["p","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){p=g.addMeasureAxis("p",c.field),c.title&&"null"!==c.title?p.title=c.title:"null"==c.title&&(p.title=null)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.ring",[]).directive("ring",["angular-dimple.core",function(){return{restrict:"E",replace:!0,require:["ring","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){var a;ring=g.addSeries([c.field],dimple.plot.pie),c.thickness&&!c.diameter?(a=100-c.thickness+"%",ring.innerRadius=a):c.thickness&&c.diameter?(a=c.diameter-c.thickness+"%",ring.innerRadius=a):ring.innerRadius="50%",c.diameter&&(ring.outerRadius=c.diameter+"%"),f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.scatter-plot",[]).directive("scatterPlot",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["scatterPlot","^graph"],controller:[function(){}],link:function(b,c,d,e){function f(){var c=[];d.series&&c.push(d.series),c.push(d.field),(d.label||""===d.label)&&c.push(d.label),scatterPlot=h.addSeries(c,dimple.plot.bubble),scatterPlot.aggregate=dimple.aggregateMethod.avg,a.filter(scatterPlot,b.data,d.field,d.value,d.filter),g.draw()}var g=e[1],h=g.getChart();b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.stacked-area",[]).directive("stackedArea",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["stackedArea","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){area=d.series?h.addSeries([d.series],dimple.plot.area):h.addSeries([d.field],dimple.plot.area),a.filter(area,b.data,d.field,d.value,d.filter),area.lineMarkers=!1,g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.stacked-bar",[]).directive("stackedBar",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["stackedBar","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){bar=d.series?h.addSeries([d.series],dimple.plot.bar):h.addSeries([d.field],dimple.plot.bar),a.filter(bar,b.data,d.field,d.value,d.filter),g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("data",function(a){a&&f()})}}}]),angular.module("angular-dimple.x",[]).directive("x",[function(){return{restrict:"E",replace:!0,require:["x","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){c.groupBy?(x="Measure"==c.type?g.addMeasureAxis("x",[c.groupBy,c.field]):"Percent"==c.type?g.addPctAxis("x",c.field):g.addCategoryAxis("x",[c.groupBy,c.field]),c.orderBy&&x.addGroupOrderRule(c.orderBy)):(x="Measure"==c.type?g.addMeasureAxis("x",c.field):"Percent"==c.type?g.addPctAxis("x",c.field):g.addCategoryAxis("x",c.field),c.orderBy&&x.addOrderRule(c.orderBy)),c.title&&"null"!==c.title?x.title=c.title:"null"==c.title&&(x.title=null)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.y",[]).directive("y",[function(){return{restrict:"E",replace:!0,require:["y","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){c.groupBy?(y="Category"==c.type?g.addCategoryAxis("y",c.field):"Percent"==c.type?g.addPctAxis("y",c.field):g.addMeasureAxis("y",c.field),c.orderBy&&y.addGroupOrderRule(c.orderBy)):(y="Category"==c.type?g.addCategoryAxis("y",c.field):"Percent"==c.type?g.addPctAxis("y",c.field):g.addMeasureAxis("y",c.field),c.orderBy&&y.addOrderRule(c.orderBy)),c.title&&"null"!==c.title?y.title=c.title:"null"==c.title&&(y.title=null)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]); \ No newline at end of file +angular.module("angular-dimple.core",[]).service("angular-dimple.core",[function(){return{}}]),angular.module("angular-dimple",["angular-dimple.core","angular-dimple.graph","angular-dimple.legend","angular-dimple.x","angular-dimple.y","angular-dimple.p","angular-dimple.line","angular-dimple.bar","angular-dimple.stacked-bar","angular-dimple.area","angular-dimple.stacked-area","angular-dimple.scatter-plot","angular-dimple.ring"]).constant("MODULE_VERSION","0.0.1").value("defaults",{foo:"bar"}),angular.module("angular-dimple.area",[]).directive("area",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["area","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){if(d.value)area=h.addSeries([d.field],dimple.plot.area),a.filter(area,b.data,d.field,d.value,d.filter),area.lineMarkers=!0;else{var c=dimple.getUniqueValues(b.data,d.field);angular.forEach(c,function(){area=h.addSeries([d.field],dimple.plot.area),g.filter(d),area.lineMarkers=!0})}g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("dataReady",function(a){a===!0&&f()})}}}]),angular.module("angular-dimple.bar",[]).directive("bar",["angular-dimple.core",function(){return{restrict:"E",replace:!0,require:["bar","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){bar=g.addSeries([c.field],dimple.plot.bar),f.filter(c),f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.graph",[]).directive("graph",[function(){return{restrict:"E",replace:!0,scope:{data:"="},require:["graph"],transclude:!0,link:function(a,b,c,d){{var e=d[0];e.getChart()}},compile:function(a){var b=(1e9*Math.random()).toString(36).replace(".","_");return a.append('
    '),{post:function(a,c,d,e,f){var g=e[0];g._createChart(b),a.dataReady=!1,a.filters=[];var h,i=g.getChart();h=d.transition?d.transition:750,a.$watch("data",function(b){b&&(a.dataReady=!0,g.setData(),i.draw(h))}),f(a,function(a){c.append(a)})}}},controller:["$scope","$element","$attrs",function(a,b,c){var d,e;this._createChart=function(b){e=b;var f=dimple.newSvg("#dng-"+e,c.width,c.height),g=a.data;d=new dimple.chart(f,g);var h="false"===c.autoStyle?!0:!1;d.noFormats=h},this.getChart=function(){return d},this.setData=function(){d.data=a.data},this.draw=function(){d.draw()},this.getID=function(){return e},this.filter=function(b){if(void 0!==b.value&&a.filters.push(b.value),a.filters.length&&(d.data=dimple.filterData(a.data,b.field,a.filters)),void 0!==b.filter){console.log("i see a filter");var c=b.filter.split(":"),e=c[0],f=[c[1]];d.data=dimple.filterData(a.data,e,f)}}}]}}]),angular.module("angular-dimple.legend",[]).directive("legend",[function(){return{restrict:"E",replace:!0,require:["legend","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){var a=c.left?c.left:"10%",b=c.top?c.top:"4%",d=c.height?c.height:"10%",e=c.width?c.width:"90%",f=c.position?c.position:"left";g.addLegend(a,b,e,d,f)}var f=d[1],g=f.getChart();a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.line",[]).directive("line",["angular-dimple.core",function(){return{restrict:"E",replace:!0,require:["line","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){line=g.addSeries([c.field],dimple.plot.line),f.filter(c),line.lineMarkers=!0,f.draw()}var f=d[1],g=f.getChart();a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.p",[]).directive("p",[function(){return{restrict:"E",replace:!0,require:["p","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){p=g.addMeasureAxis("p",c.field),c.title&&"null"!==c.title?p.title=c.title:"null"==c.title&&(p.title=null)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.ring",[]).directive("ring",["angular-dimple.core",function(){return{restrict:"E",replace:!0,require:["ring","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){var a;ring=g.addSeries([c.field],dimple.plot.pie),c.thickness&&!c.diameter?(a=100-c.thickness+"%",ring.innerRadius=a):c.thickness&&c.diameter?(a=c.diameter-c.thickness+"%",ring.innerRadius=a):ring.innerRadius="50%",c.diameter&&(ring.outerRadius=c.diameter+"%"),f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.scatter-plot",[]).directive("scatterPlot",["angular-dimple.core",function(){return{restrict:"E",replace:!0,require:["scatterPlot","^graph"],controller:[function(){}],link:function(a,b,c,d){function e(){var a=[];c.series&&a.push(c.series),a.push(c.field),(c.label||""===c.label)&&a.push(c.label),scatterPlot=g.addSeries(a,dimple.plot.bubble),scatterPlot.aggregate=dimple.aggregateMethod.avg,f.filter(c),f.draw()}var f=d[1],g=f.getChart();a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.stacked-area",[]).directive("stackedArea",["angular-dimple.core",function(){return{restrict:"E",replace:!0,require:["stackedArea","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){area=c.series?g.addSeries([c.series],dimple.plot.area):g.addSeries([c.field],dimple.plot.area),f.filter(c),area.lineMarkers=!1,f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.stacked-bar",[]).directive("stackedBar",["angular-dimple.core",function(){return{restrict:"E",replace:!0,require:["stackedBar","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){bar=c.series?g.addSeries([c.series],dimple.plot.bar):g.addSeries([c.field],dimple.plot.bar),f.filter(c),f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.x",[]).directive("x",[function(){return{restrict:"E",replace:!0,require:["x","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){c.groupBy?(x="Measure"==c.type?g.addMeasureAxis("x",[c.groupBy,c.field]):"Percent"==c.type?g.addPctAxis("x",c.field):g.addCategoryAxis("x",[c.groupBy,c.field]),c.orderBy&&x.addGroupOrderRule(c.orderBy)):(x="Measure"==c.type?g.addMeasureAxis("x",c.field):"Percent"==c.type?g.addPctAxis("x",c.field):g.addCategoryAxis("x",c.field),c.orderBy&&x.addOrderRule(c.orderBy)),c.title&&"null"!==c.title?x.title=c.title:"null"==c.title&&(x.title=null)}var f=d[1],g=f.getChart();a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.y",[]).directive("y",[function(){return{restrict:"E",replace:!0,require:["y","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){c.groupBy?(y="Category"==c.type?g.addCategoryAxis("y",c.field):"Percent"==c.type?g.addPctAxis("y",c.field):g.addMeasureAxis("y",c.field),c.orderBy&&y.addGroupOrderRule(c.orderBy)):(y="Category"==c.type?g.addCategoryAxis("y",c.field):"Percent"==c.type?g.addPctAxis("y",c.field):g.addMeasureAxis("y",c.field),c.orderBy&&y.addOrderRule(c.orderBy)),c.title&&"null"!==c.title?y.title=c.title:"null"==c.title&&(y.title=null)}var f=d[1],g=f.getChart();a.$watch("dataReady",function(a){a===!0&&e()})}}}]); \ No newline at end of file diff --git a/source/angular-dimple-core.js b/source/angular-dimple-core.js index a64b26f..9eb0ca6 100644 --- a/source/angular-dimple-core.js +++ b/source/angular-dimple-core.js @@ -2,31 +2,7 @@ angular.module('angular-dimple.core', []) .service('angular-dimple.core', [function(){ return { - filter: function (chart, scope, attrs) { - // chart; - // scope.filters - - // field - // value - - - - // if (scopeData !== null) { - // var data = this.filterData(scopeData, filter); - // chart.data = data; - // if (value !== undefined) { - // chart.data = dimple.filterData(data, field, [value]); - // } - // } - }, - filterData: function (data, filter) { - // if (filter) { - // var filters = filter.split(':'); - // return dimple.filterData(data, filters[0], [filters[1]]); - // } else { - // return data; - // } - } + // Nothing to see here. }; }]); diff --git a/source/area.js b/source/area.js index 57ca4b4..92dd6dc 100644 --- a/source/area.js +++ b/source/area.js @@ -21,15 +21,15 @@ angular.module('angular-dimple.area', []) var values = dimple.getUniqueValues($scope.data, $attrs.field); angular.forEach(values, function(value){ area = chart.addSeries([$attrs.field], dimple.plot.area); - core.filter(area, $scope.data, $attrs.field, value, $attrs.filter); + graphController.filter($attrs); area.lineMarkers = true; }); } graphController.draw(); } - $scope.$watch('data', function(newValue, oldValue) { - if (newValue) { + $scope.$watch('dataReady', function(newValue, oldValue) { + if (newValue === true) { addArea(); } }); diff --git a/source/bar.js b/source/bar.js index 9b63901..3a114b9 100644 --- a/source/bar.js +++ b/source/bar.js @@ -15,14 +15,14 @@ angular.module('angular-dimple.bar', []) function addBar () { var filteredData; bar = chart.addSeries([$attrs.field], dimple.plot.bar); - core.filter(bar, $scope.data, $attrs.field, $attrs.value, $attrs.filter); + graphController.filter($attrs); graphController.draw(); } - $scope.$watch('data', function(newValue, oldValue) { - if (newValue) { + $scope.$watch('dataReady', function(newValue, oldValue) { + if (newValue === true) { addBar(); } }); diff --git a/source/legend.js b/source/legend.js index 85e1d1a..e8d2523 100644 --- a/source/legend.js +++ b/source/legend.js @@ -20,8 +20,8 @@ angular.module('angular-dimple.legend', []) chart.addLegend(left, top, width, height, position); } - $scope.$watch('data', function(newValue, oldValue) { - if (newValue) { + $scope.$watch('dataReady', function(newValue, oldValue) { + if (newValue === true) { addLegend(); } }); diff --git a/source/line.js b/source/line.js index bde4d67..4eeb82b 100644 --- a/source/line.js +++ b/source/line.js @@ -9,24 +9,21 @@ angular.module('angular-dimple.line', []) }], link: function($scope, $element, $attrs, $controllers) { var graphController = $controllers[1]; - var lineController = $controllers[0]; var chart = graphController.getChart(); var drawn = false; function addLine () { var filteredData; line = chart.addSeries([$attrs.field], dimple.plot.line); - // core.filter(line, $scope.data, $attrs.field, $attrs.value, $attrs.filter); + graphController.filter($attrs); line.lineMarkers = true; graphController.draw(); } $scope.$watch('dataReady', function(newValue, oldValue) { if (newValue === true) { - console.log(newValue); addLine(); } - }); } diff --git a/source/scatter-plot.js b/source/scatter-plot.js index 6f4051d..b61153a 100644 --- a/source/scatter-plot.js +++ b/source/scatter-plot.js @@ -18,12 +18,12 @@ angular.module('angular-dimple.scatter-plot', []) 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, $attrs.field, $attrs.value, $attrs.filter); + graphController.filter($attrs); graphController.draw(); } - $scope.$watch('data', function(newValue, oldValue) { - if (newValue) { + $scope.$watch('dataReady', function(newValue, oldValue) { + if (newValue === true) { addScatterPlot(); } }); diff --git a/source/stacked-area.js b/source/stacked-area.js index 76289d4..1b860d5 100644 --- a/source/stacked-area.js +++ b/source/stacked-area.js @@ -18,13 +18,13 @@ angular.module('angular-dimple.stacked-area', []) } else { area = chart.addSeries([$attrs.field], dimple.plot.area); } - core.filter(area, $scope.data, $attrs.field, $attrs.value, $attrs.filter); + graphController.filter($attrs); area.lineMarkers = false; graphController.draw(); } - $scope.$watch('data', function(newValue, oldValue) { - if (newValue) { + $scope.$watch('dataReady', function(newValue, oldValue) { + if (newValue === true) { addArea(); } }); diff --git a/source/stacked-bar.js b/source/stacked-bar.js index 4f97d1f..3599e8f 100644 --- a/source/stacked-bar.js +++ b/source/stacked-bar.js @@ -18,12 +18,12 @@ angular.module('angular-dimple.stacked-bar', []) } else { bar = chart.addSeries([$attrs.field], dimple.plot.bar); } - core.filter(bar, $scope.data, $attrs.field, $attrs.value, $attrs.filter); + graphController.filter($attrs); graphController.draw(); } - $scope.$watch('data', function(newValue, oldValue) { - if (newValue) { + $scope.$watch('dataReady', function(newValue, oldValue) { + if (newValue === true) { addBar(); } }); From 29fdb66c6ea3232cd79f74b74bd38b9985d7d9d8 Mon Sep 17 00:00:00 2001 From: Nikolas Wise Date: Wed, 30 Jul 2014 16:53:25 -0700 Subject: [PATCH 18/29] clean partials --- site/documentation/partials/testerguy.html | 9 --------- 1 file changed, 9 deletions(-) delete mode 100644 site/documentation/partials/testerguy.html diff --git a/site/documentation/partials/testerguy.html b/site/documentation/partials/testerguy.html deleted file mode 100644 index 7c45e87..0000000 --- a/site/documentation/partials/testerguy.html +++ /dev/null @@ -1,9 +0,0 @@ -
    <!-- Default -->
-<div class="white-panel">
-  <graph data="graphData">
-    <x field="Month" order-by="Date"></x>
-    <y field="Unit Sales"></y>
-    <legend></legend>
-    <area field="Owner"></area>
-  </graph>
-</div>
    From 7a69fcafa934e8de594a9e9c970660574a861812 Mon Sep 17 00:00:00 2001 From: Nikolas Wise Date: Wed, 30 Jul 2014 17:02:42 -0700 Subject: [PATCH 19/29] style button --- documentation/partials/animation-test.md | 2 +- site/documentation/partials/animation-test.html | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/documentation/partials/animation-test.md b/documentation/partials/animation-test.md index 31511d6..ff28bd8 100644 --- a/documentation/partials/animation-test.md +++ b/documentation/partials/animation-test.md @@ -8,6 +8,6 @@ - diff --git a/site/documentation/partials/animation-test.html b/site/documentation/partials/animation-test.html index 988b433..ec6b134 100644 --- a/site/documentation/partials/animation-test.html +++ b/site/documentation/partials/animation-test.html @@ -7,6 +7,6 @@ - From 32a4dd91cc39ce81ee76dd22005be172d9625888 Mon Sep 17 00:00:00 2001 From: Nikolas Wise Date: Mon, 4 Aug 2014 17:01:40 -0700 Subject: [PATCH 20/29] change the p directive to a directive that is not also an html element --- dist/angular-dimple.js | 16 +++++++------- dist/angular-dimple.min.js | 2 +- documentation/index.md | 4 ++-- documentation/partials/ring.md | 8 +++---- site/documentation/index.html | 4 ++-- site/documentation/partials/ring.html | 8 +++---- site/js/lib/angular-dimple.js | 16 +++++++------- site/js/lib/angular-dimple.min.js | 2 +- source/angular-dimple.js | 2 +- source/r.js | 31 +++++++++++++++++++++++++++ 10 files changed, 62 insertions(+), 31 deletions(-) create mode 100644 source/r.js diff --git a/dist/angular-dimple.js b/dist/angular-dimple.js index 4d7973b..4dd5141 100644 --- a/dist/angular-dimple.js +++ b/dist/angular-dimple.js @@ -1,4 +1,4 @@ -/*! Angular-Dimple - 1.0.2 - 2014-07-30 +/*! Angular-Dimple - 1.0.2 - 2014-08-04 * https://github.com/esripdx/angular-dimple * Licensed ISC */ angular.module('angular-dimple.core', []) @@ -16,7 +16,7 @@ angular.module('angular-dimple', [ 'angular-dimple.legend', 'angular-dimple.x', 'angular-dimple.y', - 'angular-dimple.p', + 'angular-dimple.r', 'angular-dimple.line', 'angular-dimple.bar', 'angular-dimple.stacked-bar', @@ -259,13 +259,13 @@ angular.module('angular-dimple.line', []) } }; }]); -angular.module('angular-dimple.p', []) +angular.module('angular-dimple.r', []) -.directive('p', [function () { +.directive('r', [function () { return { restrict: 'E', replace: true, - require: ['p', '^graph'], + require: ['r', '^graph'], controller: ['$scope', '$element', '$attrs', function($scope, $element, $attrs) { }], link: function($scope, $element, $attrs, $controllers) { @@ -273,12 +273,12 @@ angular.module('angular-dimple.p', []) var chart = graphController.getChart(); function addAxis () { - p = chart.addMeasureAxis('p', $attrs.field); + r = chart.addMeasureAxis('p', $attrs.field); if ($attrs.title && $attrs.title !== "null") { - p.title = $attrs.title; + r.title = $attrs.title; } else if ($attrs.title == "null") { - p.title = null; + r.title = null; } } diff --git a/dist/angular-dimple.min.js b/dist/angular-dimple.min.js index 252673b..850e6fc 100644 --- a/dist/angular-dimple.min.js +++ b/dist/angular-dimple.min.js @@ -1 +1 @@ -angular.module("angular-dimple.core",[]).service("angular-dimple.core",[function(){return{}}]),angular.module("angular-dimple",["angular-dimple.core","angular-dimple.graph","angular-dimple.legend","angular-dimple.x","angular-dimple.y","angular-dimple.p","angular-dimple.line","angular-dimple.bar","angular-dimple.stacked-bar","angular-dimple.area","angular-dimple.stacked-area","angular-dimple.scatter-plot","angular-dimple.ring"]).constant("MODULE_VERSION","0.0.1").value("defaults",{foo:"bar"}),angular.module("angular-dimple.area",[]).directive("area",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["area","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){if(d.value)area=h.addSeries([d.field],dimple.plot.area),a.filter(area,b.data,d.field,d.value,d.filter),area.lineMarkers=!0;else{var c=dimple.getUniqueValues(b.data,d.field);angular.forEach(c,function(){area=h.addSeries([d.field],dimple.plot.area),g.filter(d),area.lineMarkers=!0})}g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("dataReady",function(a){a===!0&&f()})}}}]),angular.module("angular-dimple.bar",[]).directive("bar",["angular-dimple.core",function(){return{restrict:"E",replace:!0,require:["bar","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){bar=g.addSeries([c.field],dimple.plot.bar),f.filter(c),f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.graph",[]).directive("graph",[function(){return{restrict:"E",replace:!0,scope:{data:"="},require:["graph"],transclude:!0,link:function(a,b,c,d){{var e=d[0];e.getChart()}},compile:function(a){var b=(1e9*Math.random()).toString(36).replace(".","_");return a.append('
    '),{post:function(a,c,d,e,f){var g=e[0];g._createChart(b),a.dataReady=!1,a.filters=[];var h,i=g.getChart();h=d.transition?d.transition:750,a.$watch("data",function(b){b&&(a.dataReady=!0,g.setData(),i.draw(h))}),f(a,function(a){c.append(a)})}}},controller:["$scope","$element","$attrs",function(a,b,c){var d,e;this._createChart=function(b){e=b;var f=dimple.newSvg("#dng-"+e,c.width,c.height),g=a.data;d=new dimple.chart(f,g);var h="false"===c.autoStyle?!0:!1;d.noFormats=h},this.getChart=function(){return d},this.setData=function(){d.data=a.data},this.draw=function(){d.draw()},this.getID=function(){return e},this.filter=function(b){if(void 0!==b.value&&a.filters.push(b.value),a.filters.length&&(d.data=dimple.filterData(a.data,b.field,a.filters)),void 0!==b.filter){console.log("i see a filter");var c=b.filter.split(":"),e=c[0],f=[c[1]];d.data=dimple.filterData(a.data,e,f)}}}]}}]),angular.module("angular-dimple.legend",[]).directive("legend",[function(){return{restrict:"E",replace:!0,require:["legend","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){var a=c.left?c.left:"10%",b=c.top?c.top:"4%",d=c.height?c.height:"10%",e=c.width?c.width:"90%",f=c.position?c.position:"left";g.addLegend(a,b,e,d,f)}var f=d[1],g=f.getChart();a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.line",[]).directive("line",["angular-dimple.core",function(){return{restrict:"E",replace:!0,require:["line","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){line=g.addSeries([c.field],dimple.plot.line),f.filter(c),line.lineMarkers=!0,f.draw()}var f=d[1],g=f.getChart();a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.p",[]).directive("p",[function(){return{restrict:"E",replace:!0,require:["p","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){p=g.addMeasureAxis("p",c.field),c.title&&"null"!==c.title?p.title=c.title:"null"==c.title&&(p.title=null)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.ring",[]).directive("ring",["angular-dimple.core",function(){return{restrict:"E",replace:!0,require:["ring","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){var a;ring=g.addSeries([c.field],dimple.plot.pie),c.thickness&&!c.diameter?(a=100-c.thickness+"%",ring.innerRadius=a):c.thickness&&c.diameter?(a=c.diameter-c.thickness+"%",ring.innerRadius=a):ring.innerRadius="50%",c.diameter&&(ring.outerRadius=c.diameter+"%"),f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.scatter-plot",[]).directive("scatterPlot",["angular-dimple.core",function(){return{restrict:"E",replace:!0,require:["scatterPlot","^graph"],controller:[function(){}],link:function(a,b,c,d){function e(){var a=[];c.series&&a.push(c.series),a.push(c.field),(c.label||""===c.label)&&a.push(c.label),scatterPlot=g.addSeries(a,dimple.plot.bubble),scatterPlot.aggregate=dimple.aggregateMethod.avg,f.filter(c),f.draw()}var f=d[1],g=f.getChart();a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.stacked-area",[]).directive("stackedArea",["angular-dimple.core",function(){return{restrict:"E",replace:!0,require:["stackedArea","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){area=c.series?g.addSeries([c.series],dimple.plot.area):g.addSeries([c.field],dimple.plot.area),f.filter(c),area.lineMarkers=!1,f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.stacked-bar",[]).directive("stackedBar",["angular-dimple.core",function(){return{restrict:"E",replace:!0,require:["stackedBar","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){bar=c.series?g.addSeries([c.series],dimple.plot.bar):g.addSeries([c.field],dimple.plot.bar),f.filter(c),f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.x",[]).directive("x",[function(){return{restrict:"E",replace:!0,require:["x","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){c.groupBy?(x="Measure"==c.type?g.addMeasureAxis("x",[c.groupBy,c.field]):"Percent"==c.type?g.addPctAxis("x",c.field):g.addCategoryAxis("x",[c.groupBy,c.field]),c.orderBy&&x.addGroupOrderRule(c.orderBy)):(x="Measure"==c.type?g.addMeasureAxis("x",c.field):"Percent"==c.type?g.addPctAxis("x",c.field):g.addCategoryAxis("x",c.field),c.orderBy&&x.addOrderRule(c.orderBy)),c.title&&"null"!==c.title?x.title=c.title:"null"==c.title&&(x.title=null)}var f=d[1],g=f.getChart();a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.y",[]).directive("y",[function(){return{restrict:"E",replace:!0,require:["y","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){c.groupBy?(y="Category"==c.type?g.addCategoryAxis("y",c.field):"Percent"==c.type?g.addPctAxis("y",c.field):g.addMeasureAxis("y",c.field),c.orderBy&&y.addGroupOrderRule(c.orderBy)):(y="Category"==c.type?g.addCategoryAxis("y",c.field):"Percent"==c.type?g.addPctAxis("y",c.field):g.addMeasureAxis("y",c.field),c.orderBy&&y.addOrderRule(c.orderBy)),c.title&&"null"!==c.title?y.title=c.title:"null"==c.title&&(y.title=null)}var f=d[1],g=f.getChart();a.$watch("dataReady",function(a){a===!0&&e()})}}}]); \ No newline at end of file +angular.module("angular-dimple.core",[]).service("angular-dimple.core",[function(){return{}}]),angular.module("angular-dimple",["angular-dimple.core","angular-dimple.graph","angular-dimple.legend","angular-dimple.x","angular-dimple.y","angular-dimple.r","angular-dimple.line","angular-dimple.bar","angular-dimple.stacked-bar","angular-dimple.area","angular-dimple.stacked-area","angular-dimple.scatter-plot","angular-dimple.ring"]).constant("MODULE_VERSION","0.0.1").value("defaults",{foo:"bar"}),angular.module("angular-dimple.area",[]).directive("area",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["area","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){if(d.value)area=h.addSeries([d.field],dimple.plot.area),a.filter(area,b.data,d.field,d.value,d.filter),area.lineMarkers=!0;else{var c=dimple.getUniqueValues(b.data,d.field);angular.forEach(c,function(){area=h.addSeries([d.field],dimple.plot.area),g.filter(d),area.lineMarkers=!0})}g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("dataReady",function(a){a===!0&&f()})}}}]),angular.module("angular-dimple.bar",[]).directive("bar",["angular-dimple.core",function(){return{restrict:"E",replace:!0,require:["bar","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){bar=g.addSeries([c.field],dimple.plot.bar),f.filter(c),f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.graph",[]).directive("graph",[function(){return{restrict:"E",replace:!0,scope:{data:"="},require:["graph"],transclude:!0,link:function(a,b,c,d){{var e=d[0];e.getChart()}},compile:function(a){var b=(1e9*Math.random()).toString(36).replace(".","_");return a.append('
    '),{post:function(a,c,d,e,f){var g=e[0];g._createChart(b),a.dataReady=!1,a.filters=[];var h,i=g.getChart();h=d.transition?d.transition:750,a.$watch("data",function(b){b&&(a.dataReady=!0,g.setData(),i.draw(h))}),f(a,function(a){c.append(a)})}}},controller:["$scope","$element","$attrs",function(a,b,c){var d,e;this._createChart=function(b){e=b;var f=dimple.newSvg("#dng-"+e,c.width,c.height),g=a.data;d=new dimple.chart(f,g);var h="false"===c.autoStyle?!0:!1;d.noFormats=h},this.getChart=function(){return d},this.setData=function(){d.data=a.data},this.draw=function(){d.draw()},this.getID=function(){return e},this.filter=function(b){if(void 0!==b.value&&a.filters.push(b.value),a.filters.length&&(d.data=dimple.filterData(a.data,b.field,a.filters)),void 0!==b.filter){console.log("i see a filter");var c=b.filter.split(":"),e=c[0],f=[c[1]];d.data=dimple.filterData(a.data,e,f)}}}]}}]),angular.module("angular-dimple.legend",[]).directive("legend",[function(){return{restrict:"E",replace:!0,require:["legend","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){var a=c.left?c.left:"10%",b=c.top?c.top:"4%",d=c.height?c.height:"10%",e=c.width?c.width:"90%",f=c.position?c.position:"left";g.addLegend(a,b,e,d,f)}var f=d[1],g=f.getChart();a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.line",[]).directive("line",["angular-dimple.core",function(){return{restrict:"E",replace:!0,require:["line","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){line=g.addSeries([c.field],dimple.plot.line),f.filter(c),line.lineMarkers=!0,f.draw()}var f=d[1],g=f.getChart();a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.r",[]).directive("r",[function(){return{restrict:"E",replace:!0,require:["r","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){r=g.addMeasureAxis("p",c.field),c.title&&"null"!==c.title?r.title=c.title:"null"==c.title&&(r.title=null)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.ring",[]).directive("ring",["angular-dimple.core",function(){return{restrict:"E",replace:!0,require:["ring","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){var a;ring=g.addSeries([c.field],dimple.plot.pie),c.thickness&&!c.diameter?(a=100-c.thickness+"%",ring.innerRadius=a):c.thickness&&c.diameter?(a=c.diameter-c.thickness+"%",ring.innerRadius=a):ring.innerRadius="50%",c.diameter&&(ring.outerRadius=c.diameter+"%"),f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.scatter-plot",[]).directive("scatterPlot",["angular-dimple.core",function(){return{restrict:"E",replace:!0,require:["scatterPlot","^graph"],controller:[function(){}],link:function(a,b,c,d){function e(){var a=[];c.series&&a.push(c.series),a.push(c.field),(c.label||""===c.label)&&a.push(c.label),scatterPlot=g.addSeries(a,dimple.plot.bubble),scatterPlot.aggregate=dimple.aggregateMethod.avg,f.filter(c),f.draw()}var f=d[1],g=f.getChart();a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.stacked-area",[]).directive("stackedArea",["angular-dimple.core",function(){return{restrict:"E",replace:!0,require:["stackedArea","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){area=c.series?g.addSeries([c.series],dimple.plot.area):g.addSeries([c.field],dimple.plot.area),f.filter(c),area.lineMarkers=!1,f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.stacked-bar",[]).directive("stackedBar",["angular-dimple.core",function(){return{restrict:"E",replace:!0,require:["stackedBar","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){bar=c.series?g.addSeries([c.series],dimple.plot.bar):g.addSeries([c.field],dimple.plot.bar),f.filter(c),f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.x",[]).directive("x",[function(){return{restrict:"E",replace:!0,require:["x","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){c.groupBy?(x="Measure"==c.type?g.addMeasureAxis("x",[c.groupBy,c.field]):"Percent"==c.type?g.addPctAxis("x",c.field):g.addCategoryAxis("x",[c.groupBy,c.field]),c.orderBy&&x.addGroupOrderRule(c.orderBy)):(x="Measure"==c.type?g.addMeasureAxis("x",c.field):"Percent"==c.type?g.addPctAxis("x",c.field):g.addCategoryAxis("x",c.field),c.orderBy&&x.addOrderRule(c.orderBy)),c.title&&"null"!==c.title?x.title=c.title:"null"==c.title&&(x.title=null)}var f=d[1],g=f.getChart();a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.y",[]).directive("y",[function(){return{restrict:"E",replace:!0,require:["y","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){c.groupBy?(y="Category"==c.type?g.addCategoryAxis("y",c.field):"Percent"==c.type?g.addPctAxis("y",c.field):g.addMeasureAxis("y",c.field),c.orderBy&&y.addGroupOrderRule(c.orderBy)):(y="Category"==c.type?g.addCategoryAxis("y",c.field):"Percent"==c.type?g.addPctAxis("y",c.field):g.addMeasureAxis("y",c.field),c.orderBy&&y.addOrderRule(c.orderBy)),c.title&&"null"!==c.title?y.title=c.title:"null"==c.title&&(y.title=null)}var f=d[1],g=f.getChart();a.$watch("dataReady",function(a){a===!0&&e()})}}}]); \ No newline at end of file diff --git a/documentation/index.md b/documentation/index.md index f6ddca6..79c0d31 100644 --- a/documentation/index.md +++ b/documentation/index.md @@ -250,12 +250,12 @@ The `ring` directive creates pie and donut charts - but require a seperate type You can define both the thickness of the ring (as a percentage) and the diameter of the ring (as a percentage). ```html -

    + -

    + > ``` diff --git a/documentation/partials/ring.md b/documentation/partials/ring.md index a91cfe4..dd25b13 100644 --- a/documentation/partials/ring.md +++ b/documentation/partials/ring.md @@ -7,7 +7,7 @@
    -

    +     @@ -16,7 +16,7 @@ ```html -

    +     @@ -31,7 +31,7 @@
    -

    + @@ -41,7 +41,7 @@ ```html -

    + diff --git a/site/documentation/index.html b/site/documentation/index.html index 1d0eed3..d4919a1 100644 --- a/site/documentation/index.html +++ b/site/documentation/index.html @@ -498,12 +498,12 @@

    Ring

    example

    The ring directive creates pie and donut charts - but require a seperate type of axis that the other charts in Angular Dimple. A ring chart uses a <p></p> axis to plot a single measure. Adding multiple series to a ring chart will create concentric circles within the chart.

    You can define both the thickness of the ring (as a percentage) and the diameter of the ring (as a percentage).

    -
    <p field="Unit Sales"></p>
+
    <r field="Unit Sales"></r>
 <ring field="Owner"></ring>
 
 <!-- OR -->
 
-<p field="Unit Sales"></p>
+<r field="Unit Sales"></r>
 <ring field="Owner" thickness="20"></ring>
 <ring field="Price Tier" thickness="20" diameter="75"></ring>>
    
 
    Attributes
    
diff --git a/site/documentation/partials/ring.html b/site/documentation/partials/ring.html
index 248fec3..2134323 100644
--- a/site/documentation/partials/ring.html
+++ b/site/documentation/partials/ring.html
@@ -7,7 +7,7 @@ 
    
 
 
    
   
-    
    
+    
     
     
       
@@ -15,7 +15,7 @@ 
    
 
 
    <!-- Default Stacked -->
   <graph data="graphData" width="100%" height="600px">
-    <p field="Unit Sales"></p>
+    <r field="Unit Sales"></r>
     <legend></legend>
     <ring field="Owner" thickness="20"></ring>
   </graph>
    
@@ -28,7 +28,7 @@ 
    
 
 
    
   
-    
    
+    
     
     
       
@@ -37,7 +37,7 @@ 
    
 
 
    <!-- Default Stacked -->
   <graph data="graphData" width="100%" height="600px">
-    <p field="Unit Sales"></p>
+    <r field="Unit Sales"></r>
     <legend></legend>
     <ring field="Owner" thickness="20"></ring>
       <ring field="Price Tier" thickness="20" diameter="75"></ring>
diff --git a/site/js/lib/angular-dimple.js b/site/js/lib/angular-dimple.js
index 4d7973b..4dd5141 100644
--- a/site/js/lib/angular-dimple.js
+++ b/site/js/lib/angular-dimple.js
@@ -1,4 +1,4 @@
-/*! Angular-Dimple - 1.0.2 - 2014-07-30
+/*! Angular-Dimple - 1.0.2 - 2014-08-04
 *   https://github.com/esripdx/angular-dimple
 *   Licensed ISC */
 angular.module('angular-dimple.core', [])
@@ -16,7 +16,7 @@ angular.module('angular-dimple', [
   'angular-dimple.legend',
   'angular-dimple.x',
   'angular-dimple.y',
-  'angular-dimple.p',
+  'angular-dimple.r',
   'angular-dimple.line',
   'angular-dimple.bar',
   'angular-dimple.stacked-bar',
@@ -259,13 +259,13 @@ angular.module('angular-dimple.line', [])
     }
   };
 }]);
-angular.module('angular-dimple.p', [])
+angular.module('angular-dimple.r', [])
 
-.directive('p', [function () {
+.directive('r', [function () {
   return {
     restrict: 'E',
     replace: true,
-    require: ['p', '^graph'],
+    require: ['r', '^graph'],
     controller: ['$scope', '$element', '$attrs', function($scope, $element, $attrs) {
     }],
     link: function($scope, $element, $attrs, $controllers) {
@@ -273,12 +273,12 @@ angular.module('angular-dimple.p', [])
       var chart = graphController.getChart();
 
       function addAxis () {
-        p = chart.addMeasureAxis('p', $attrs.field);
+        r = chart.addMeasureAxis('p', $attrs.field);
 
         if ($attrs.title && $attrs.title !== "null") {
-          p.title = $attrs.title;
+          r.title = $attrs.title;
         } else if ($attrs.title == "null") {
-          p.title = null;
+          r.title = null;
         }
       }
 
diff --git a/site/js/lib/angular-dimple.min.js b/site/js/lib/angular-dimple.min.js
index 252673b..850e6fc 100644
--- a/site/js/lib/angular-dimple.min.js
+++ b/site/js/lib/angular-dimple.min.js
@@ -1 +1 @@
-angular.module("angular-dimple.core",[]).service("angular-dimple.core",[function(){return{}}]),angular.module("angular-dimple",["angular-dimple.core","angular-dimple.graph","angular-dimple.legend","angular-dimple.x","angular-dimple.y","angular-dimple.p","angular-dimple.line","angular-dimple.bar","angular-dimple.stacked-bar","angular-dimple.area","angular-dimple.stacked-area","angular-dimple.scatter-plot","angular-dimple.ring"]).constant("MODULE_VERSION","0.0.1").value("defaults",{foo:"bar"}),angular.module("angular-dimple.area",[]).directive("area",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["area","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){if(d.value)area=h.addSeries([d.field],dimple.plot.area),a.filter(area,b.data,d.field,d.value,d.filter),area.lineMarkers=!0;else{var c=dimple.getUniqueValues(b.data,d.field);angular.forEach(c,function(){area=h.addSeries([d.field],dimple.plot.area),g.filter(d),area.lineMarkers=!0})}g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("dataReady",function(a){a===!0&&f()})}}}]),angular.module("angular-dimple.bar",[]).directive("bar",["angular-dimple.core",function(){return{restrict:"E",replace:!0,require:["bar","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){bar=g.addSeries([c.field],dimple.plot.bar),f.filter(c),f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.graph",[]).directive("graph",[function(){return{restrict:"E",replace:!0,scope:{data:"="},require:["graph"],transclude:!0,link:function(a,b,c,d){{var e=d[0];e.getChart()}},compile:function(a){var b=(1e9*Math.random()).toString(36).replace(".","_");return a.append('
    '),{post:function(a,c,d,e,f){var g=e[0];g._createChart(b),a.dataReady=!1,a.filters=[];var h,i=g.getChart();h=d.transition?d.transition:750,a.$watch("data",function(b){b&&(a.dataReady=!0,g.setData(),i.draw(h))}),f(a,function(a){c.append(a)})}}},controller:["$scope","$element","$attrs",function(a,b,c){var d,e;this._createChart=function(b){e=b;var f=dimple.newSvg("#dng-"+e,c.width,c.height),g=a.data;d=new dimple.chart(f,g);var h="false"===c.autoStyle?!0:!1;d.noFormats=h},this.getChart=function(){return d},this.setData=function(){d.data=a.data},this.draw=function(){d.draw()},this.getID=function(){return e},this.filter=function(b){if(void 0!==b.value&&a.filters.push(b.value),a.filters.length&&(d.data=dimple.filterData(a.data,b.field,a.filters)),void 0!==b.filter){console.log("i see a filter");var c=b.filter.split(":"),e=c[0],f=[c[1]];d.data=dimple.filterData(a.data,e,f)}}}]}}]),angular.module("angular-dimple.legend",[]).directive("legend",[function(){return{restrict:"E",replace:!0,require:["legend","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){var a=c.left?c.left:"10%",b=c.top?c.top:"4%",d=c.height?c.height:"10%",e=c.width?c.width:"90%",f=c.position?c.position:"left";g.addLegend(a,b,e,d,f)}var f=d[1],g=f.getChart();a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.line",[]).directive("line",["angular-dimple.core",function(){return{restrict:"E",replace:!0,require:["line","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){line=g.addSeries([c.field],dimple.plot.line),f.filter(c),line.lineMarkers=!0,f.draw()}var f=d[1],g=f.getChart();a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.p",[]).directive("p",[function(){return{restrict:"E",replace:!0,require:["p","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){p=g.addMeasureAxis("p",c.field),c.title&&"null"!==c.title?p.title=c.title:"null"==c.title&&(p.title=null)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.ring",[]).directive("ring",["angular-dimple.core",function(){return{restrict:"E",replace:!0,require:["ring","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){var a;ring=g.addSeries([c.field],dimple.plot.pie),c.thickness&&!c.diameter?(a=100-c.thickness+"%",ring.innerRadius=a):c.thickness&&c.diameter?(a=c.diameter-c.thickness+"%",ring.innerRadius=a):ring.innerRadius="50%",c.diameter&&(ring.outerRadius=c.diameter+"%"),f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.scatter-plot",[]).directive("scatterPlot",["angular-dimple.core",function(){return{restrict:"E",replace:!0,require:["scatterPlot","^graph"],controller:[function(){}],link:function(a,b,c,d){function e(){var a=[];c.series&&a.push(c.series),a.push(c.field),(c.label||""===c.label)&&a.push(c.label),scatterPlot=g.addSeries(a,dimple.plot.bubble),scatterPlot.aggregate=dimple.aggregateMethod.avg,f.filter(c),f.draw()}var f=d[1],g=f.getChart();a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.stacked-area",[]).directive("stackedArea",["angular-dimple.core",function(){return{restrict:"E",replace:!0,require:["stackedArea","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){area=c.series?g.addSeries([c.series],dimple.plot.area):g.addSeries([c.field],dimple.plot.area),f.filter(c),area.lineMarkers=!1,f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.stacked-bar",[]).directive("stackedBar",["angular-dimple.core",function(){return{restrict:"E",replace:!0,require:["stackedBar","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){bar=c.series?g.addSeries([c.series],dimple.plot.bar):g.addSeries([c.field],dimple.plot.bar),f.filter(c),f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.x",[]).directive("x",[function(){return{restrict:"E",replace:!0,require:["x","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){c.groupBy?(x="Measure"==c.type?g.addMeasureAxis("x",[c.groupBy,c.field]):"Percent"==c.type?g.addPctAxis("x",c.field):g.addCategoryAxis("x",[c.groupBy,c.field]),c.orderBy&&x.addGroupOrderRule(c.orderBy)):(x="Measure"==c.type?g.addMeasureAxis("x",c.field):"Percent"==c.type?g.addPctAxis("x",c.field):g.addCategoryAxis("x",c.field),c.orderBy&&x.addOrderRule(c.orderBy)),c.title&&"null"!==c.title?x.title=c.title:"null"==c.title&&(x.title=null)}var f=d[1],g=f.getChart();a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.y",[]).directive("y",[function(){return{restrict:"E",replace:!0,require:["y","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){c.groupBy?(y="Category"==c.type?g.addCategoryAxis("y",c.field):"Percent"==c.type?g.addPctAxis("y",c.field):g.addMeasureAxis("y",c.field),c.orderBy&&y.addGroupOrderRule(c.orderBy)):(y="Category"==c.type?g.addCategoryAxis("y",c.field):"Percent"==c.type?g.addPctAxis("y",c.field):g.addMeasureAxis("y",c.field),c.orderBy&&y.addOrderRule(c.orderBy)),c.title&&"null"!==c.title?y.title=c.title:"null"==c.title&&(y.title=null)}var f=d[1],g=f.getChart();a.$watch("dataReady",function(a){a===!0&&e()})}}}]);
\ No newline at end of file
+angular.module("angular-dimple.core",[]).service("angular-dimple.core",[function(){return{}}]),angular.module("angular-dimple",["angular-dimple.core","angular-dimple.graph","angular-dimple.legend","angular-dimple.x","angular-dimple.y","angular-dimple.r","angular-dimple.line","angular-dimple.bar","angular-dimple.stacked-bar","angular-dimple.area","angular-dimple.stacked-area","angular-dimple.scatter-plot","angular-dimple.ring"]).constant("MODULE_VERSION","0.0.1").value("defaults",{foo:"bar"}),angular.module("angular-dimple.area",[]).directive("area",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["area","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){if(d.value)area=h.addSeries([d.field],dimple.plot.area),a.filter(area,b.data,d.field,d.value,d.filter),area.lineMarkers=!0;else{var c=dimple.getUniqueValues(b.data,d.field);angular.forEach(c,function(){area=h.addSeries([d.field],dimple.plot.area),g.filter(d),area.lineMarkers=!0})}g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("dataReady",function(a){a===!0&&f()})}}}]),angular.module("angular-dimple.bar",[]).directive("bar",["angular-dimple.core",function(){return{restrict:"E",replace:!0,require:["bar","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){bar=g.addSeries([c.field],dimple.plot.bar),f.filter(c),f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.graph",[]).directive("graph",[function(){return{restrict:"E",replace:!0,scope:{data:"="},require:["graph"],transclude:!0,link:function(a,b,c,d){{var e=d[0];e.getChart()}},compile:function(a){var b=(1e9*Math.random()).toString(36).replace(".","_");return a.append('
    '),{post:function(a,c,d,e,f){var g=e[0];g._createChart(b),a.dataReady=!1,a.filters=[];var h,i=g.getChart();h=d.transition?d.transition:750,a.$watch("data",function(b){b&&(a.dataReady=!0,g.setData(),i.draw(h))}),f(a,function(a){c.append(a)})}}},controller:["$scope","$element","$attrs",function(a,b,c){var d,e;this._createChart=function(b){e=b;var f=dimple.newSvg("#dng-"+e,c.width,c.height),g=a.data;d=new dimple.chart(f,g);var h="false"===c.autoStyle?!0:!1;d.noFormats=h},this.getChart=function(){return d},this.setData=function(){d.data=a.data},this.draw=function(){d.draw()},this.getID=function(){return e},this.filter=function(b){if(void 0!==b.value&&a.filters.push(b.value),a.filters.length&&(d.data=dimple.filterData(a.data,b.field,a.filters)),void 0!==b.filter){console.log("i see a filter");var c=b.filter.split(":"),e=c[0],f=[c[1]];d.data=dimple.filterData(a.data,e,f)}}}]}}]),angular.module("angular-dimple.legend",[]).directive("legend",[function(){return{restrict:"E",replace:!0,require:["legend","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){var a=c.left?c.left:"10%",b=c.top?c.top:"4%",d=c.height?c.height:"10%",e=c.width?c.width:"90%",f=c.position?c.position:"left";g.addLegend(a,b,e,d,f)}var f=d[1],g=f.getChart();a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.line",[]).directive("line",["angular-dimple.core",function(){return{restrict:"E",replace:!0,require:["line","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){line=g.addSeries([c.field],dimple.plot.line),f.filter(c),line.lineMarkers=!0,f.draw()}var f=d[1],g=f.getChart();a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.r",[]).directive("r",[function(){return{restrict:"E",replace:!0,require:["r","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){r=g.addMeasureAxis("p",c.field),c.title&&"null"!==c.title?r.title=c.title:"null"==c.title&&(r.title=null)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.ring",[]).directive("ring",["angular-dimple.core",function(){return{restrict:"E",replace:!0,require:["ring","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){var a;ring=g.addSeries([c.field],dimple.plot.pie),c.thickness&&!c.diameter?(a=100-c.thickness+"%",ring.innerRadius=a):c.thickness&&c.diameter?(a=c.diameter-c.thickness+"%",ring.innerRadius=a):ring.innerRadius="50%",c.diameter&&(ring.outerRadius=c.diameter+"%"),f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.scatter-plot",[]).directive("scatterPlot",["angular-dimple.core",function(){return{restrict:"E",replace:!0,require:["scatterPlot","^graph"],controller:[function(){}],link:function(a,b,c,d){function e(){var a=[];c.series&&a.push(c.series),a.push(c.field),(c.label||""===c.label)&&a.push(c.label),scatterPlot=g.addSeries(a,dimple.plot.bubble),scatterPlot.aggregate=dimple.aggregateMethod.avg,f.filter(c),f.draw()}var f=d[1],g=f.getChart();a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.stacked-area",[]).directive("stackedArea",["angular-dimple.core",function(){return{restrict:"E",replace:!0,require:["stackedArea","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){area=c.series?g.addSeries([c.series],dimple.plot.area):g.addSeries([c.field],dimple.plot.area),f.filter(c),area.lineMarkers=!1,f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.stacked-bar",[]).directive("stackedBar",["angular-dimple.core",function(){return{restrict:"E",replace:!0,require:["stackedBar","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){bar=c.series?g.addSeries([c.series],dimple.plot.bar):g.addSeries([c.field],dimple.plot.bar),f.filter(c),f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.x",[]).directive("x",[function(){return{restrict:"E",replace:!0,require:["x","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){c.groupBy?(x="Measure"==c.type?g.addMeasureAxis("x",[c.groupBy,c.field]):"Percent"==c.type?g.addPctAxis("x",c.field):g.addCategoryAxis("x",[c.groupBy,c.field]),c.orderBy&&x.addGroupOrderRule(c.orderBy)):(x="Measure"==c.type?g.addMeasureAxis("x",c.field):"Percent"==c.type?g.addPctAxis("x",c.field):g.addCategoryAxis("x",c.field),c.orderBy&&x.addOrderRule(c.orderBy)),c.title&&"null"!==c.title?x.title=c.title:"null"==c.title&&(x.title=null)}var f=d[1],g=f.getChart();a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.y",[]).directive("y",[function(){return{restrict:"E",replace:!0,require:["y","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){c.groupBy?(y="Category"==c.type?g.addCategoryAxis("y",c.field):"Percent"==c.type?g.addPctAxis("y",c.field):g.addMeasureAxis("y",c.field),c.orderBy&&y.addGroupOrderRule(c.orderBy)):(y="Category"==c.type?g.addCategoryAxis("y",c.field):"Percent"==c.type?g.addPctAxis("y",c.field):g.addMeasureAxis("y",c.field),c.orderBy&&y.addOrderRule(c.orderBy)),c.title&&"null"!==c.title?y.title=c.title:"null"==c.title&&(y.title=null)}var f=d[1],g=f.getChart();a.$watch("dataReady",function(a){a===!0&&e()})}}}]);
\ No newline at end of file
diff --git a/source/angular-dimple.js b/source/angular-dimple.js
index a7ac723..448ee8f 100644
--- a/source/angular-dimple.js
+++ b/source/angular-dimple.js
@@ -4,7 +4,7 @@ angular.module('angular-dimple', [
   'angular-dimple.legend',
   'angular-dimple.x',
   'angular-dimple.y',
-  'angular-dimple.p',
+  'angular-dimple.r',
   'angular-dimple.line',
   'angular-dimple.bar',
   'angular-dimple.stacked-bar',
diff --git a/source/r.js b/source/r.js
new file mode 100644
index 0000000..1aa04d1
--- /dev/null
+++ b/source/r.js
@@ -0,0 +1,31 @@
+angular.module('angular-dimple.r', [])
+
+.directive('r', [function () {
+  return {
+    restrict: 'E',
+    replace: true,
+    require: ['r', '^graph'],
+    controller: ['$scope', '$element', '$attrs', function($scope, $element, $attrs) {
+    }],
+    link: function($scope, $element, $attrs, $controllers) {
+      var graphController = $controllers[1];
+      var chart = graphController.getChart();
+
+      function addAxis () {
+        r = chart.addMeasureAxis('p', $attrs.field);
+
+        if ($attrs.title && $attrs.title !== "null") {
+          r.title = $attrs.title;
+        } else if ($attrs.title == "null") {
+          r.title = null;
+        }
+      }
+
+      $scope.$watch('data', function(newValue, oldValue) {
+        if (newValue) {
+          addAxis();
+        }
+      });
+    }
+  };
+}]);
\ No newline at end of file

From 4656908b087055747a78803eff60f802ea045abd Mon Sep 17 00:00:00 2001
From: Nikolas Wise 
Date: Mon, 4 Aug 2014 17:37:53 -0700
Subject: [PATCH 21/29] add filtering to rings

---
 source/ring.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/source/ring.js b/source/ring.js
index 404be84..033acff 100644
--- a/source/ring.js
+++ b/source/ring.js
@@ -32,7 +32,7 @@ angular.module('angular-dimple.ring', [])
         if ($attrs.diameter) {
           ring.outerRadius = ($attrs.diameter) + '%';
         }
-
+        graphController.filter($attrs);
         graphController.draw();
       }
 

From 61acbebd357536b722fd4a9da4a21e981ed1f62e Mon Sep 17 00:00:00 2001
From: Nikolas Wise 
Date: Mon, 4 Aug 2014 17:38:03 -0700
Subject: [PATCH 22/29] remove p.js

---
 source/p.js | 31 -------------------------------
 1 file changed, 31 deletions(-)
 delete mode 100644 source/p.js

diff --git a/source/p.js b/source/p.js
deleted file mode 100644
index f1fe837..0000000
--- a/source/p.js
+++ /dev/null
@@ -1,31 +0,0 @@
-angular.module('angular-dimple.p', [])
-
-.directive('p', [function () {
-  return {
-    restrict: 'E',
-    replace: true,
-    require: ['p', '^graph'],
-    controller: ['$scope', '$element', '$attrs', function($scope, $element, $attrs) {
-    }],
-    link: function($scope, $element, $attrs, $controllers) {
-      var graphController = $controllers[1];
-      var chart = graphController.getChart();
-
-      function addAxis () {
-        p = chart.addMeasureAxis('p', $attrs.field);
-
-        if ($attrs.title && $attrs.title !== "null") {
-          p.title = $attrs.title;
-        } else if ($attrs.title == "null") {
-          p.title = null;
-        }
-      }
-
-      $scope.$watch('data', function(newValue, oldValue) {
-        if (newValue) {
-          addAxis();
-        }
-      });
-    }
-  };
-}]);
\ No newline at end of file

From 182e4a84948d68d357b7997c69b50401042e9fd5 Mon Sep 17 00:00:00 2001
From: Nikolas Wise 
Date: Fri, 29 Aug 2014 13:43:02 -0700
Subject: [PATCH 23/29] fix unique graph id problem for ng-repeat bug

---
 source/graph.js | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/source/graph.js b/source/graph.js
index 3082679..d707bcf 100644
--- a/source/graph.js
+++ b/source/graph.js
@@ -14,12 +14,10 @@ angular.module('angular-dimple.graph', [])
       var chart = graphController.getChart();
     },
     compile: function($element, $attrs) {
-      var id = (Math.random() * 1e9).toString(36).replace(".", "_");
-      $element.append('
    ');
       return {
         post: function postLink(scope, element, attrs, controllers, transclude) {
           var graphController = controllers[0];
-          graphController._createChart(id);
+          graphController._createChart();
           scope.dataReady = false;
           scope.filters = [];
 
@@ -47,10 +45,11 @@ angular.module('angular-dimple.graph', [])
     },
     controller: ['$scope', '$element', '$attrs', function($scope, $element, $attrs) {
       var chart;
-      var id;
 
-      this._createChart = function (domId) {
-        id = domId;
+      var id = (Math.random() * 1e9).toString(36).replace(".", "_");
+      $element.append('
    ');
+
+      this._createChart = function () {
         var svg = dimple.newSvg('#dng-'+ id +'', $attrs.width, $attrs.height);
         var data = $scope.data;
         chart = new dimple.chart(svg, data);

From b73987f46541ec82f286b29e02868df1a27b98e9 Mon Sep 17 00:00:00 2001
From: Nikolas Wise 
Date: Fri, 29 Aug 2014 13:45:19 -0700
Subject: [PATCH 24/29] remove core

---
 dist/angular-dimple.js            |  39 +++---
 dist/angular-dimple.min.js        |   2 +-
 site/css/examples.css             |  12 +-
 site/css/home.css                 |  12 +-
 site/css/style.css                | 197 +++++++++++++-----------------
 site/js/lib/angular-dimple.js     |  39 +++---
 site/js/lib/angular-dimple.min.js |   2 +-
 source/angular-dimple-core.js     |   8 --
 source/angular-dimple.js          |   1 -
 source/area.js                    |   2 +-
 source/bar.js                     |   2 +-
 source/line.js                    |   2 +-
 source/ring.js                    |   2 +-
 source/scatter-plot.js            |   2 +-
 source/stacked-area.js            |   2 +-
 source/stacked-bar.js             |   2 +-
 16 files changed, 136 insertions(+), 190 deletions(-)
 delete mode 100644 source/angular-dimple-core.js

diff --git a/dist/angular-dimple.js b/dist/angular-dimple.js
index 4dd5141..bf59ab8 100644
--- a/dist/angular-dimple.js
+++ b/dist/angular-dimple.js
@@ -1,17 +1,7 @@
-/*! Angular-Dimple - 1.0.2 - 2014-08-04
+/*! Angular-Dimple - 1.0.2 - 2014-08-29
 *   https://github.com/esripdx/angular-dimple
 *   Licensed ISC */
-angular.module('angular-dimple.core', [])
-
-.service('angular-dimple.core', [function(){
-  return {
-    // Nothing to see here.
-  };
-}]);
-
-
 angular.module('angular-dimple', [
-  'angular-dimple.core',
   'angular-dimple.graph',
   'angular-dimple.legend',
   'angular-dimple.x',
@@ -33,7 +23,7 @@ angular.module('angular-dimple', [
 });
 angular.module('angular-dimple.area', [])
 
-.directive('area', ['angular-dimple.core', function (core) {
+.directive('area', [function () {
   return {
     restrict: 'E',
     replace: true,
@@ -73,7 +63,7 @@ angular.module('angular-dimple.area', [])
 
 angular.module('angular-dimple.bar', [])
 
-.directive('bar', ['angular-dimple.core', function (core) {
+.directive('bar', [function () {
   return {
     restrict: 'E',
     replace: true,
@@ -118,12 +108,10 @@ angular.module('angular-dimple.graph', [])
       var chart = graphController.getChart();
     },
     compile: function($element, $attrs) {
-      var id = (Math.random() * 1e9).toString(36).replace(".", "_");
-      $element.append('
    ');
       return {
         post: function postLink(scope, element, attrs, controllers, transclude) {
           var graphController = controllers[0];
-          graphController._createChart(id);
+          graphController._createChart();
           scope.dataReady = false;
           scope.filters = [];
 
@@ -151,10 +139,11 @@ angular.module('angular-dimple.graph', [])
     },
     controller: ['$scope', '$element', '$attrs', function($scope, $element, $attrs) {
       var chart;
-      var id;
 
-      this._createChart = function (domId) {
-        id = domId;
+      var id = (Math.random() * 1e9).toString(36).replace(".", "_");
+      $element.append('
    ');
+
+      this._createChart = function () {
         var svg = dimple.newSvg('#dng-'+ id +'', $attrs.width, $attrs.height);
         var data = $scope.data;
         chart = new dimple.chart(svg, data);
@@ -230,7 +219,7 @@ angular.module('angular-dimple.legend', [])
 }]);
 angular.module('angular-dimple.line', [])
 
-.directive('line', ['angular-dimple.core', function (core) {
+.directive('line', [function () {
   return {
     restrict: 'E',
     replace: true,
@@ -292,7 +281,7 @@ angular.module('angular-dimple.r', [])
 }]);
 angular.module('angular-dimple.ring', [])
 
-.directive('ring', ['angular-dimple.core', function (core) {
+.directive('ring', [function () {
   return {
     restrict: 'E',
     replace: true,
@@ -324,7 +313,7 @@ angular.module('angular-dimple.ring', [])
         if ($attrs.diameter) {
           ring.outerRadius = ($attrs.diameter) + '%';
         }
-
+        graphController.filter($attrs);
         graphController.draw();
       }
 
@@ -340,7 +329,7 @@ angular.module('angular-dimple.ring', [])
 
 angular.module('angular-dimple.scatter-plot', [])
 
-.directive('scatterPlot', ['angular-dimple.core', function (core) {
+.directive('scatterPlot', [function () {
   return {
     restrict: 'E',
     replace: true,
@@ -372,7 +361,7 @@ angular.module('angular-dimple.scatter-plot', [])
 }]);
 angular.module('angular-dimple.stacked-area', [])
 
-.directive('stackedArea', ['angular-dimple.core', function (core) {
+.directive('stackedArea', [function () {
   return {
     restrict: 'E',
     replace: true,
@@ -405,7 +394,7 @@ angular.module('angular-dimple.stacked-area', [])
 }]);
 angular.module('angular-dimple.stacked-bar', [])
 
-.directive('stackedBar', ['angular-dimple.core', function (core) {
+.directive('stackedBar', [function () {
   return {
     restrict: 'E',
     replace: true,
diff --git a/dist/angular-dimple.min.js b/dist/angular-dimple.min.js
index 850e6fc..3d77c79 100644
--- a/dist/angular-dimple.min.js
+++ b/dist/angular-dimple.min.js
@@ -1 +1 @@
-angular.module("angular-dimple.core",[]).service("angular-dimple.core",[function(){return{}}]),angular.module("angular-dimple",["angular-dimple.core","angular-dimple.graph","angular-dimple.legend","angular-dimple.x","angular-dimple.y","angular-dimple.r","angular-dimple.line","angular-dimple.bar","angular-dimple.stacked-bar","angular-dimple.area","angular-dimple.stacked-area","angular-dimple.scatter-plot","angular-dimple.ring"]).constant("MODULE_VERSION","0.0.1").value("defaults",{foo:"bar"}),angular.module("angular-dimple.area",[]).directive("area",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["area","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){if(d.value)area=h.addSeries([d.field],dimple.plot.area),a.filter(area,b.data,d.field,d.value,d.filter),area.lineMarkers=!0;else{var c=dimple.getUniqueValues(b.data,d.field);angular.forEach(c,function(){area=h.addSeries([d.field],dimple.plot.area),g.filter(d),area.lineMarkers=!0})}g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("dataReady",function(a){a===!0&&f()})}}}]),angular.module("angular-dimple.bar",[]).directive("bar",["angular-dimple.core",function(){return{restrict:"E",replace:!0,require:["bar","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){bar=g.addSeries([c.field],dimple.plot.bar),f.filter(c),f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.graph",[]).directive("graph",[function(){return{restrict:"E",replace:!0,scope:{data:"="},require:["graph"],transclude:!0,link:function(a,b,c,d){{var e=d[0];e.getChart()}},compile:function(a){var b=(1e9*Math.random()).toString(36).replace(".","_");return a.append('
    '),{post:function(a,c,d,e,f){var g=e[0];g._createChart(b),a.dataReady=!1,a.filters=[];var h,i=g.getChart();h=d.transition?d.transition:750,a.$watch("data",function(b){b&&(a.dataReady=!0,g.setData(),i.draw(h))}),f(a,function(a){c.append(a)})}}},controller:["$scope","$element","$attrs",function(a,b,c){var d,e;this._createChart=function(b){e=b;var f=dimple.newSvg("#dng-"+e,c.width,c.height),g=a.data;d=new dimple.chart(f,g);var h="false"===c.autoStyle?!0:!1;d.noFormats=h},this.getChart=function(){return d},this.setData=function(){d.data=a.data},this.draw=function(){d.draw()},this.getID=function(){return e},this.filter=function(b){if(void 0!==b.value&&a.filters.push(b.value),a.filters.length&&(d.data=dimple.filterData(a.data,b.field,a.filters)),void 0!==b.filter){console.log("i see a filter");var c=b.filter.split(":"),e=c[0],f=[c[1]];d.data=dimple.filterData(a.data,e,f)}}}]}}]),angular.module("angular-dimple.legend",[]).directive("legend",[function(){return{restrict:"E",replace:!0,require:["legend","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){var a=c.left?c.left:"10%",b=c.top?c.top:"4%",d=c.height?c.height:"10%",e=c.width?c.width:"90%",f=c.position?c.position:"left";g.addLegend(a,b,e,d,f)}var f=d[1],g=f.getChart();a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.line",[]).directive("line",["angular-dimple.core",function(){return{restrict:"E",replace:!0,require:["line","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){line=g.addSeries([c.field],dimple.plot.line),f.filter(c),line.lineMarkers=!0,f.draw()}var f=d[1],g=f.getChart();a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.r",[]).directive("r",[function(){return{restrict:"E",replace:!0,require:["r","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){r=g.addMeasureAxis("p",c.field),c.title&&"null"!==c.title?r.title=c.title:"null"==c.title&&(r.title=null)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.ring",[]).directive("ring",["angular-dimple.core",function(){return{restrict:"E",replace:!0,require:["ring","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){var a;ring=g.addSeries([c.field],dimple.plot.pie),c.thickness&&!c.diameter?(a=100-c.thickness+"%",ring.innerRadius=a):c.thickness&&c.diameter?(a=c.diameter-c.thickness+"%",ring.innerRadius=a):ring.innerRadius="50%",c.diameter&&(ring.outerRadius=c.diameter+"%"),f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.scatter-plot",[]).directive("scatterPlot",["angular-dimple.core",function(){return{restrict:"E",replace:!0,require:["scatterPlot","^graph"],controller:[function(){}],link:function(a,b,c,d){function e(){var a=[];c.series&&a.push(c.series),a.push(c.field),(c.label||""===c.label)&&a.push(c.label),scatterPlot=g.addSeries(a,dimple.plot.bubble),scatterPlot.aggregate=dimple.aggregateMethod.avg,f.filter(c),f.draw()}var f=d[1],g=f.getChart();a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.stacked-area",[]).directive("stackedArea",["angular-dimple.core",function(){return{restrict:"E",replace:!0,require:["stackedArea","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){area=c.series?g.addSeries([c.series],dimple.plot.area):g.addSeries([c.field],dimple.plot.area),f.filter(c),area.lineMarkers=!1,f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.stacked-bar",[]).directive("stackedBar",["angular-dimple.core",function(){return{restrict:"E",replace:!0,require:["stackedBar","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){bar=c.series?g.addSeries([c.series],dimple.plot.bar):g.addSeries([c.field],dimple.plot.bar),f.filter(c),f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.x",[]).directive("x",[function(){return{restrict:"E",replace:!0,require:["x","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){c.groupBy?(x="Measure"==c.type?g.addMeasureAxis("x",[c.groupBy,c.field]):"Percent"==c.type?g.addPctAxis("x",c.field):g.addCategoryAxis("x",[c.groupBy,c.field]),c.orderBy&&x.addGroupOrderRule(c.orderBy)):(x="Measure"==c.type?g.addMeasureAxis("x",c.field):"Percent"==c.type?g.addPctAxis("x",c.field):g.addCategoryAxis("x",c.field),c.orderBy&&x.addOrderRule(c.orderBy)),c.title&&"null"!==c.title?x.title=c.title:"null"==c.title&&(x.title=null)}var f=d[1],g=f.getChart();a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.y",[]).directive("y",[function(){return{restrict:"E",replace:!0,require:["y","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){c.groupBy?(y="Category"==c.type?g.addCategoryAxis("y",c.field):"Percent"==c.type?g.addPctAxis("y",c.field):g.addMeasureAxis("y",c.field),c.orderBy&&y.addGroupOrderRule(c.orderBy)):(y="Category"==c.type?g.addCategoryAxis("y",c.field):"Percent"==c.type?g.addPctAxis("y",c.field):g.addMeasureAxis("y",c.field),c.orderBy&&y.addOrderRule(c.orderBy)),c.title&&"null"!==c.title?y.title=c.title:"null"==c.title&&(y.title=null)}var f=d[1],g=f.getChart();a.$watch("dataReady",function(a){a===!0&&e()})}}}]);
\ No newline at end of file
+angular.module("angular-dimple",["angular-dimple.graph","angular-dimple.legend","angular-dimple.x","angular-dimple.y","angular-dimple.r","angular-dimple.line","angular-dimple.bar","angular-dimple.stacked-bar","angular-dimple.area","angular-dimple.stacked-area","angular-dimple.scatter-plot","angular-dimple.ring"]).constant("MODULE_VERSION","0.0.1").value("defaults",{foo:"bar"}),angular.module("angular-dimple.area",[]).directive("area",[function(){return{restrict:"E",replace:!0,require:["area","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){if(c.value)area=g.addSeries([c.field],dimple.plot.area),core.filter(area,a.data,c.field,c.value,c.filter),area.lineMarkers=!0;else{var b=dimple.getUniqueValues(a.data,c.field);angular.forEach(b,function(){area=g.addSeries([c.field],dimple.plot.area),f.filter(c),area.lineMarkers=!0})}f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.bar",[]).directive("bar",[function(){return{restrict:"E",replace:!0,require:["bar","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){bar=g.addSeries([c.field],dimple.plot.bar),f.filter(c),f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.graph",[]).directive("graph",[function(){return{restrict:"E",replace:!0,scope:{data:"="},require:["graph"],transclude:!0,link:function(a,b,c,d){{var e=d[0];e.getChart()}},compile:function(){return{post:function(a,b,c,d,e){var f=d[0];f._createChart(),a.dataReady=!1,a.filters=[];var g,h=f.getChart();g=c.transition?c.transition:750,a.$watch("data",function(b){b&&(a.dataReady=!0,f.setData(),h.draw(g))}),e(a,function(a){b.append(a)})}}},controller:["$scope","$element","$attrs",function(a,b,c){var d,e=(1e9*Math.random()).toString(36).replace(".","_");b.append('
    '),this._createChart=function(){var b=dimple.newSvg("#dng-"+e,c.width,c.height),f=a.data;d=new dimple.chart(b,f);var g="false"===c.autoStyle?!0:!1;d.noFormats=g},this.getChart=function(){return d},this.setData=function(){d.data=a.data},this.draw=function(){d.draw()},this.getID=function(){return e},this.filter=function(b){if(void 0!==b.value&&a.filters.push(b.value),a.filters.length&&(d.data=dimple.filterData(a.data,b.field,a.filters)),void 0!==b.filter){console.log("i see a filter");var c=b.filter.split(":"),e=c[0],f=[c[1]];d.data=dimple.filterData(a.data,e,f)}}}]}}]),angular.module("angular-dimple.legend",[]).directive("legend",[function(){return{restrict:"E",replace:!0,require:["legend","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){var a=c.left?c.left:"10%",b=c.top?c.top:"4%",d=c.height?c.height:"10%",e=c.width?c.width:"90%",f=c.position?c.position:"left";g.addLegend(a,b,e,d,f)}var f=d[1],g=f.getChart();a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.line",[]).directive("line",[function(){return{restrict:"E",replace:!0,require:["line","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){line=g.addSeries([c.field],dimple.plot.line),f.filter(c),line.lineMarkers=!0,f.draw()}var f=d[1],g=f.getChart();a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.r",[]).directive("r",[function(){return{restrict:"E",replace:!0,require:["r","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){r=g.addMeasureAxis("p",c.field),c.title&&"null"!==c.title?r.title=c.title:"null"==c.title&&(r.title=null)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.ring",[]).directive("ring",[function(){return{restrict:"E",replace:!0,require:["ring","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){var a;ring=g.addSeries([c.field],dimple.plot.pie),c.thickness&&!c.diameter?(a=100-c.thickness+"%",ring.innerRadius=a):c.thickness&&c.diameter?(a=c.diameter-c.thickness+"%",ring.innerRadius=a):ring.innerRadius="50%",c.diameter&&(ring.outerRadius=c.diameter+"%"),f.filter(c),f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.scatter-plot",[]).directive("scatterPlot",[function(){return{restrict:"E",replace:!0,require:["scatterPlot","^graph"],controller:[function(){}],link:function(a,b,c,d){function e(){var a=[];c.series&&a.push(c.series),a.push(c.field),(c.label||""===c.label)&&a.push(c.label),scatterPlot=g.addSeries(a,dimple.plot.bubble),scatterPlot.aggregate=dimple.aggregateMethod.avg,f.filter(c),f.draw()}var f=d[1],g=f.getChart();a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.stacked-area",[]).directive("stackedArea",[function(){return{restrict:"E",replace:!0,require:["stackedArea","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){area=c.series?g.addSeries([c.series],dimple.plot.area):g.addSeries([c.field],dimple.plot.area),f.filter(c),area.lineMarkers=!1,f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.stacked-bar",[]).directive("stackedBar",[function(){return{restrict:"E",replace:!0,require:["stackedBar","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){bar=c.series?g.addSeries([c.series],dimple.plot.bar):g.addSeries([c.field],dimple.plot.bar),f.filter(c),f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.x",[]).directive("x",[function(){return{restrict:"E",replace:!0,require:["x","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){c.groupBy?(x="Measure"==c.type?g.addMeasureAxis("x",[c.groupBy,c.field]):"Percent"==c.type?g.addPctAxis("x",c.field):g.addCategoryAxis("x",[c.groupBy,c.field]),c.orderBy&&x.addGroupOrderRule(c.orderBy)):(x="Measure"==c.type?g.addMeasureAxis("x",c.field):"Percent"==c.type?g.addPctAxis("x",c.field):g.addCategoryAxis("x",c.field),c.orderBy&&x.addOrderRule(c.orderBy)),c.title&&"null"!==c.title?x.title=c.title:"null"==c.title&&(x.title=null)}var f=d[1],g=f.getChart();a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.y",[]).directive("y",[function(){return{restrict:"E",replace:!0,require:["y","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){c.groupBy?(y="Category"==c.type?g.addCategoryAxis("y",c.field):"Percent"==c.type?g.addPctAxis("y",c.field):g.addMeasureAxis("y",c.field),c.orderBy&&y.addGroupOrderRule(c.orderBy)):(y="Category"==c.type?g.addCategoryAxis("y",c.field):"Percent"==c.type?g.addPctAxis("y",c.field):g.addMeasureAxis("y",c.field),c.orderBy&&y.addOrderRule(c.orderBy)),c.title&&"null"!==c.title?y.title=c.title:"null"==c.title&&(y.title=null)}var f=d[1],g=f.getChart();a.$watch("dataReady",function(a){a===!0&&e()})}}}]);
\ No newline at end of file
diff --git a/site/css/examples.css b/site/css/examples.css
index d67204a..9d2a982 100644
--- a/site/css/examples.css
+++ b/site/css/examples.css
@@ -98,15 +98,13 @@
 /* line 5, ../scss/examples.scss */
 .white-panel {
   margin-bottom: 1rem;
-  background-color: white;
-  border: 1px solid #ecf0f3;
-  -webkit-box-sizing: border-box;
+  background-color: #FFFFFF;
+  border: 1px solid #ECF0F3;
   -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
   box-sizing: border-box;
-  -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
-  -ms-border-radius: 3px;
-  -o-border-radius: 3px;
+  -webkit-border-radius: 3px;
   border-radius: 3px;
 }
 /* line 11, ../scss/examples.scss */
@@ -141,7 +139,7 @@
 }
 
 @media screen and (max-width: 662px) {
-  /* line 43, ../scss/examples.scss */
+  /* line 42, ../scss/examples.scss */
   .example-link,
   .api-link {
     width: 100%;
diff --git a/site/css/home.css b/site/css/home.css
index 2a09726..03a54c1 100644
--- a/site/css/home.css
+++ b/site/css/home.css
@@ -7,11 +7,11 @@
 }
 /* line 9, ../scss/home.scss */
 .homepage-navigation a {
-  color: #fafbfe;
+  color: #FAFBFE;
 }
 /* line 11, ../scss/home.scss */
 .homepage-navigation a:hover {
-  color: white;
+  color: #FFFFFF;
 }
 
 /* line 17, ../scss/home.scss */
@@ -22,15 +22,15 @@ pre {
 
 /* line 22, ../scss/home.scss */
 code {
-  background-color: white;
-  border-color: #ecf0f3;
+  background-color: #FFFFFF;
+  border-color: #ECF0F3;
 }
 
 /* line 27, ../scss/home.scss */
 .banner {
   position: relative;
   overflow: hidden;
-  color: white;
+  color: #FFFFFF;
   background: url(../img/dots.svg) #245070;
   z-index: 20;
 }
@@ -79,5 +79,5 @@ code {
 
 /* line 71, ../scss/home.scss */
 .charts-list a {
-  color: #76899b;
+  color: #76899B;
 }
diff --git a/site/css/style.css b/site/css/style.css
index 129c4a5..0ab0c0c 100644
--- a/site/css/style.css
+++ b/site/css/style.css
@@ -12,7 +12,7 @@ body {
   margin: 0;
 }
 
-/* line 25, ../scss/base/_reset.scss */
+/* line 15, ../scss/base/_reset.scss */
 article,
 aside,
 details,
@@ -27,7 +27,7 @@ summary {
   display: block;
 }
 
-/* line 31, ../scss/base/_reset.scss */
+/* line 29, ../scss/base/_reset.scss */
 audio,
 canvas,
 video {
@@ -50,7 +50,7 @@ svg:not(:root) {
   overflow: hidden;
 }
 
-/* line 4, ../scss/base/_mixins.scss */
+/* line 3, ../scss/base/_mixins.scss */
 .container:before, .row:before, .tab-group .tab-nav:before, .chart-icon:before, .container:after, .row:after, .tab-group .tab-nav:after, .chart-icon:after {
   content: " ";
   display: table;
@@ -62,8 +62,8 @@ svg:not(:root) {
 
 /* line 52, ../scss/base/_mixins.scss */
 .column-1, .column-2, .column-3, .column-4, .column-5, .column-6, .column-7, .column-8, .column-9, .column-10, .column-11, .column-12, .column-13, .column-14, .column-15, .column-16, .column-17, .column-18, .column-19, .column-20, .column-21, .column-22, .column-23, .column-24 {
-  -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
   box-sizing: border-box;
   float: left;
   padding: 0 0.5em;
@@ -168,8 +168,8 @@ svg:not(:root) {
 }
 /* line 2, ../scss/base/_grid.scss */
 .container {
-  -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
   box-sizing: border-box;
   width: 100%;
   max-width: 1280px;
@@ -1420,7 +1420,7 @@ img {
 
 /* line 3, ../scss/base/_type.scss */
 body {
-  color: #4c5156;
+  color: #4C5156;
   font-family: "Clear Sans", "Helvetica", "Arial", sans-serif;
 }
 
@@ -1476,7 +1476,7 @@ blockquote {
   font-style: italic;
   font-weight: 400;
   font-size: 1.75rem;
-  color: #dde3e8;
+  color: #DDE3E8;
 }
 
 /* line 32, ../scss/base/_type.scss */
@@ -1504,16 +1504,16 @@ b, strong {
 /* line 50, ../scss/base/_type.scss */
 small {
   font-size: .875rem;
-  color: #76899b;
+  color: #76899B;
 }
 
 /* line 55, ../scss/base/_type.scss */
 a {
-  color: #1f85c4;
+  color: #1F85C4;
   text-decoration: none;
-  -webkit-transition: color 200ms linear;
   -moz-transition: color 200ms linear;
   -o-transition: color 200ms linear;
+  -webkit-transition: color 200ms linear;
   transition: color 200ms linear;
 }
 /* line 59, ../scss/base/_type.scss */
@@ -1549,12 +1549,10 @@ code, kbd, pre, samp {
 
 /* line 90, ../scss/base/_type.scss */
 code {
-  -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
-  -ms-border-radius: 2px;
-  -o-border-radius: 2px;
+  -webkit-border-radius: 2px;
   border-radius: 2px;
-  background: #fafbfe;
+  background: #FAFBFE;
   padding: .2em;
   border: 1px solid #e5eafa;
   white-space: pre;
@@ -1573,13 +1571,13 @@ pre {
   -ms-tab-size: 4;
   -o-tab-size: 4;
   tab-size: 4;
-  background: #fafbfe;
-  border: 1px solid #ecf0f3;
+  background: #FAFBFE;
+  border: 1px solid #ECF0F3;
   max-width: 100%;
 }
 /* line 109, ../scss/base/_type.scss */
 pre code {
-  background-color: #fafbfe;
+  background-color: #FAFBFE;
   display: block;
   overflow: auto;
   word-wrap: normal;
@@ -1591,7 +1589,7 @@ hr {
   display: none;
   margin-top: 2rem;
   border: none;
-  border-top: 2rem solid #1f85c4;
+  border-top: 2rem solid #1F85C4;
 }
 
 /* line 125, ../scss/base/_type.scss */
@@ -1612,7 +1610,7 @@ img::moz-selection {
 /* line 137, ../scss/base/_type.scss */
 table {
   width: 100%;
-  background-color: white;
+  background-color: #FFFFFF;
   border-collapse: collapse;
   border-spacing: 0;
   border: 1px solid #e4e9ed;
@@ -1640,11 +1638,11 @@ table tr:last-child {
 }
 /* line 159, ../scss/base/_type.scss */
 table tr:nth-child(even) {
-  background-color: #fafbfe;
+  background-color: #FAFBFE;
 }
 /* line 161, ../scss/base/_type.scss */
 table tr:nth-child(even) td {
-  background-color: #fafbfe;
+  background-color: #FAFBFE;
 }
 
 /*
@@ -1668,7 +1666,7 @@ pre {
 pre code {
   background: #002b36;
 }
-/* line 21, ../scss/base/_code.scss */
+/* line 15, ../scss/base/_code.scss */
 pre .comment,
 pre .template_comment,
 pre .diff .header,
@@ -1678,7 +1676,7 @@ pre .lisp .string,
 pre .javadoc {
   color: #586e75;
 }
-/* line 33, ../scss/base/_code.scss */
+/* line 26, ../scss/base/_code.scss */
 pre .keyword,
 pre .winutils,
 pre .method,
@@ -1689,7 +1687,7 @@ pre .status,
 pre .nginx .title {
   color: #859900;
 }
-/* line 47, ../scss/base/_code.scss */
+/* line 38, ../scss/base/_code.scss */
 pre .number,
 pre .command,
 pre .string,
@@ -1702,7 +1700,7 @@ pre .hexcolor,
 pre .link_url {
   color: #2aa198;
 }
-/* line 60, ../scss/base/_code.scss */
+/* line 52, ../scss/base/_code.scss */
 pre .title,
 pre .localvars,
 pre .chunk,
@@ -1714,7 +1712,7 @@ pre .id,
 pre .css .function {
   color: #268bd2;
 }
-/* line 73, ../scss/base/_code.scss */
+/* line 65, ../scss/base/_code.scss */
 pre .attribute,
 pre .variable,
 pre .lisp .body,
@@ -1726,7 +1724,7 @@ pre .haskell .type,
 pre .link_reference {
   color: #b58900;
 }
-/* line 91, ../scss/base/_code.scss */
+/* line 78, ../scss/base/_code.scss */
 pre .preprocessor,
 pre .preprocessor .keyword,
 pre .pragma,
@@ -1743,7 +1741,7 @@ pre .css .pseudo,
 pre .header {
   color: #cb4b16;
 }
-/* line 97, ../scss/base/_code.scss */
+/* line 96, ../scss/base/_code.scss */
 pre .deletion,
 pre .important {
   color: #dc322f;
@@ -1769,38 +1767,32 @@ pre .tex .formula {
 /* line 8, ../scss/base/_tabs.scss */
 .tab-group .tab-nav .tab {
   float: left;
-  -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
   box-sizing: border-box;
   padding: 0.5em 1em;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  background-color: #fafbfe;
-  border: 1px solid #ecf0f3;
+  background-color: #FAFBFE;
+  border: 1px solid #ECF0F3;
   border-left: none;
-  -webkit-border-radius: 0;
   -moz-border-radius: 0;
-  -ms-border-radius: 0;
-  -o-border-radius: 0;
+  -webkit-border-radius: 0;
   border-radius: 0;
   background-image: none;
 }
 /* line 20, ../scss/base/_tabs.scss */
 .tab-group .tab-nav .tab:first-child {
-  -webkit-border-radius: 3px 0 0 0;
   -moz-border-radius: 3px 0 0 0;
-  -ms-border-radius: 3px 0 0 0;
-  -o-border-radius: 3px 0 0 0;
+  -webkit-border-radius: 3px;
   border-radius: 3px 0 0 0;
-  border-left: 1px solid #ecf0f3;
+  border-left: 1px solid #ECF0F3;
 }
 /* line 24, ../scss/base/_tabs.scss */
 .tab-group .tab-nav .tab:last-child {
-  -webkit-border-radius: 0 3px 0 0;
   -moz-border-radius: 0 3px 0 0;
-  -ms-border-radius: 0 3px 0 0;
-  -o-border-radius: 0 3px 0 0;
+  -webkit-border-radius: 0;
   border-radius: 0 3px 0 0;
 }
 /* line 27, ../scss/base/_tabs.scss */
@@ -1810,38 +1802,34 @@ pre .tex .formula {
 /* line 30, ../scss/base/_tabs.scss */
 .tab-group .tab-nav .tab.active {
   border-bottom: 1px solid transparent;
-  background-color: white;
+  background-color: #FFFFFF;
 }
 /* line 33, ../scss/base/_tabs.scss */
 .tab-group .tab-nav .tab.active:hover {
-  background-color: white;
+  background-color: #FFFFFF;
 }
 /* line 39, ../scss/base/_tabs.scss */
 .tab-group .tab-contents {
   width: 100%;
-  border: 1px solid #ecf0f3;
-  -webkit-border-radius: 0 0 3px 3px;
+  border: 1px solid #ECF0F3;
   -moz-border-radius: 0 0 3px 3px;
-  -ms-border-radius: 0 0 3px 3px;
-  -o-border-radius: 0 0 3px 3px;
+  -webkit-border-radius: 0;
   border-radius: 0 0 3px 3px;
   margin-top: -1px;
-  -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
   box-sizing: border-box;
 }
 /* line 45, ../scss/base/_tabs.scss */
 .tab-group .tab-contents .tab-content {
-  background-color: white;
+  background-color: #FFFFFF;
   display: none;
   width: 100%;
-  -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
   box-sizing: border-box;
-  -webkit-border-radius: 0 0 3px 3px;
   -moz-border-radius: 0 0 3px 3px;
-  -ms-border-radius: 0 0 3px 3px;
-  -o-border-radius: 0 0 3px 3px;
+  -webkit-border-radius: 0;
   border-radius: 0 0 3px 3px;
   padding: 1em;
   overflow: auto;
@@ -1866,64 +1854,63 @@ pre .tex .formula {
 .btn {
   display: inline-block;
   padding: 1em;
-  background-color: #1f85c4;
-  color: #ecf0f3;
+  background-color: #1F85C4;
+  color: #ECF0F3;
   border: none;
-  -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
-  -ms-border-radius: 3px;
-  -o-border-radius: 3px;
+  -webkit-border-radius: 3px;
   border-radius: 3px;
   text-decoration: none;
   font-family: "Source Code Pro", "Inconsolata", "Consolas", "Courier New", monospace;
   font-size: 0.75em;
   font-weight: 300;
   cursor: pointer;
+  -moz-user-select: -moz-none;
+  -ms-user-select: none;
   -webkit-user-select: none;
-  -moz-user-select: none;
   user-select: none;
-  -webkit-transition: background-color 75ms linear, color 75ms linear;
   -moz-transition: background-color 75ms linear, color 75ms linear;
   -o-transition: background-color 75ms linear, color 75ms linear;
+  -webkit-transition: background-color 75ms linear, color 75ms linear;
   transition: background-color 75ms linear, color 75ms linear;
 }
 /* line 16, ../scss/base/_buttons.scss */
 .btn:hover, .btn:focus {
   background-color: #379fdf;
-  color: white;
+  color: #FFFFFF;
   outline: none;
 }
 /* line 21, ../scss/base/_buttons.scss */
 .btn.outline {
   background: transparent;
-  color: #1f85c4;
-  border: 1px solid #1f85c4;
+  color: #1F85C4;
+  border: 1px solid #1F85C4;
 }
 /* line 25, ../scss/base/_buttons.scss */
 .btn.outline:hover {
   background-color: #379fdf;
-  color: white;
+  color: #FFFFFF;
   border: 1px solid #379fdf;
 }
 /* line 31, ../scss/base/_buttons.scss */
 .btn.dark-blue {
   background: #245070;
-  color: #dde3e8;
+  color: #DDE3E8;
 }
 /* line 34, ../scss/base/_buttons.scss */
 .btn.dark-blue:hover {
   background-color: #306c97;
-  color: #ecf0f3;
+  color: #ECF0F3;
 }
 /* line 39, ../scss/base/_buttons.scss */
 .btn.white {
-  background: #fafbfe;
+  background: #FAFBFE;
   color: #245070;
 }
 /* line 42, ../scss/base/_buttons.scss */
 .btn.white:hover {
-  background-color: white;
-  color: #1f85c4;
+  background-color: #FFFFFF;
+  color: #1F85C4;
 }
 
 /* line 12, ../scss/style.scss */
@@ -1942,7 +1929,7 @@ pre .tex .formula {
 
 /* line 21, ../scss/style.scss */
 .darker-blue {
-  color: #76899b;
+  color: #76899B;
   background-color: #234052;
 }
 /* line 24, ../scss/style.scss */
@@ -1956,8 +1943,8 @@ pre .tex .formula {
 
 /* line 32, ../scss/style.scss */
 .off-white {
-  color: #4c5156;
-  background-color: #fafbfe;
+  color: #4C5156;
+  background-color: #FAFBFE;
 }
 
 /* line 37, ../scss/style.scss */
@@ -1967,8 +1954,8 @@ pre .tex .formula {
   top: 0;
   left: 0;
   right: 0;
-  background-color: white;
-  border-bottom: 1px solid #dde3e8;
+  background-color: #FFFFFF;
+  border-bottom: 1px solid #DDE3E8;
   padding: 1rem 0;
   z-index: 10;
 }
@@ -2012,16 +1999,14 @@ pre .tex .formula {
   height: 2em;
   margin-right: 1em;
   display: inline-block;
-  color: white;
+  color: #FFFFFF;
   font-family: "Source Code Pro", "Inconsolata", "Consolas", "Courier New", monospace;
   font-size: .75rem;
   line-height: 2em;
   vertical-align: .25em;
-  background-color: #1f85c4;
-  -webkit-border-radius: 50%;
+  background-color: #1F85C4;
   -moz-border-radius: 50%;
-  -ms-border-radius: 50%;
-  -o-border-radius: 50%;
+  -webkit-border-radius: 50%;
   border-radius: 50%;
 }
 
@@ -2038,7 +2023,7 @@ pre .tex .formula {
 .sidebar {
   position: absolute;
   overflow: auto;
-  background-color: #fafbfe;
+  background-color: #FAFBFE;
   z-index: 2;
 }
 /* line 99, ../scss/style.scss */
@@ -2056,26 +2041,24 @@ pre .tex .formula {
   height: 3rem;
   width: 3rem;
   margin-right: 1rem;
-  background-color: white;
-  border: 2px solid #dde3e8;
-  -webkit-border-radius: 50%;
+  background-color: #FFFFFF;
+  border: 2px solid #DDE3E8;
   -moz-border-radius: 50%;
-  -ms-border-radius: 50%;
-  -o-border-radius: 50%;
+  -webkit-border-radius: 50%;
   border-radius: 50%;
-  -webkit-box-shadow: 0 0 0 0 #dde3e8;
-  -moz-box-shadow: 0 0 0 0 #dde3e8;
-  box-shadow: 0 0 0 0 #dde3e8;
-  -webkit-transition: all 200ms linear;
+  -moz-box-shadow: 0 0 0 0 #DDE3E8;
+  -webkit-box-shadow: 0 0 0 0 #DDE3E8;
+  box-shadow: 0 0 0 0 #DDE3E8;
   -moz-transition: all 200ms linear;
   -o-transition: all 200ms linear;
+  -webkit-transition: all 200ms linear;
   transition: all 200ms linear;
 }
 /* line 117, ../scss/style.scss */
 .sidebar a:hover img {
-  -webkit-box-shadow: 0 0 0 4px #dde3e8;
-  -moz-box-shadow: 0 0 0 4px #dde3e8;
-  box-shadow: 0 0 0 4px #dde3e8;
+  -moz-box-shadow: 0 0 0 4px #DDE3E8;
+  -webkit-box-shadow: 0 0 0 4px #DDE3E8;
+  box-shadow: 0 0 0 4px #DDE3E8;
 }
 /* line 122, ../scss/style.scss */
 .sidebar span {
@@ -2122,25 +2105,23 @@ pre .tex .formula {
 .chart-icon {
   display: inline-block;
   margin-bottom: 1rem;
-  background-color: white;
+  background-color: #FFFFFF;
   height: 6rem;
   width: 6rem;
   position: relative;
-  -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
-  -ms-border-radius: 50%;
-  -o-border-radius: 50%;
+  -webkit-border-radius: 50%;
   border-radius: 50%;
   cursor: pointer;
-  -webkit-transition: all 200ms linear;
   -moz-transition: all 200ms linear;
   -o-transition: all 200ms linear;
+  -webkit-transition: all 200ms linear;
   transition: all 200ms linear;
-  border: 1px solid #dde3e8;
+  border: 1px solid #DDE3E8;
 }
 /* line 167, ../scss/style.scss */
 .chart-icon:hover {
-  background-color: #fafbfe;
+  background-color: #FAFBFE;
 }
 /* line 170, ../scss/style.scss */
 .chart-icon:before {
@@ -2151,24 +2132,22 @@ pre .tex .formula {
   bottom: 0;
   left: 0;
   display: block;
-  -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
-  -ms-border-radius: 50%;
-  -o-border-radius: 50%;
+  -webkit-border-radius: 50%;
   border-radius: 50%;
-  -webkit-box-shadow: 0 0 0 6px #dde3e8;
-  -moz-box-shadow: 0 0 0 6px #dde3e8;
-  box-shadow: 0 0 0 6px #dde3e8;
-  -webkit-transition: all 200ms linear;
+  -moz-box-shadow: 0 0 0 6px #DDE3E8;
+  -webkit-box-shadow: 0 0 0 6px #DDE3E8;
+  box-shadow: 0 0 0 6px #DDE3E8;
   -moz-transition: all 200ms linear;
   -o-transition: all 200ms linear;
+  -webkit-transition: all 200ms linear;
   transition: all 200ms linear;
 }
 /* line 183, ../scss/style.scss */
 .chart-icon:hover:before {
-  -webkit-box-shadow: 0 0 0 12px #dde3e8;
-  -moz-box-shadow: 0 0 0 12px #dde3e8;
-  box-shadow: 0 0 0 12px #dde3e8;
+  -moz-box-shadow: 0 0 0 12px #DDE3E8;
+  -webkit-box-shadow: 0 0 0 12px #DDE3E8;
+  box-shadow: 0 0 0 12px #DDE3E8;
 }
 /* line 187, ../scss/style.scss */
 .chart-icon img {
diff --git a/site/js/lib/angular-dimple.js b/site/js/lib/angular-dimple.js
index 4dd5141..bf59ab8 100644
--- a/site/js/lib/angular-dimple.js
+++ b/site/js/lib/angular-dimple.js
@@ -1,17 +1,7 @@
-/*! Angular-Dimple - 1.0.2 - 2014-08-04
+/*! Angular-Dimple - 1.0.2 - 2014-08-29
 *   https://github.com/esripdx/angular-dimple
 *   Licensed ISC */
-angular.module('angular-dimple.core', [])
-
-.service('angular-dimple.core', [function(){
-  return {
-    // Nothing to see here.
-  };
-}]);
-
-
 angular.module('angular-dimple', [
-  'angular-dimple.core',
   'angular-dimple.graph',
   'angular-dimple.legend',
   'angular-dimple.x',
@@ -33,7 +23,7 @@ angular.module('angular-dimple', [
 });
 angular.module('angular-dimple.area', [])
 
-.directive('area', ['angular-dimple.core', function (core) {
+.directive('area', [function () {
   return {
     restrict: 'E',
     replace: true,
@@ -73,7 +63,7 @@ angular.module('angular-dimple.area', [])
 
 angular.module('angular-dimple.bar', [])
 
-.directive('bar', ['angular-dimple.core', function (core) {
+.directive('bar', [function () {
   return {
     restrict: 'E',
     replace: true,
@@ -118,12 +108,10 @@ angular.module('angular-dimple.graph', [])
       var chart = graphController.getChart();
     },
     compile: function($element, $attrs) {
-      var id = (Math.random() * 1e9).toString(36).replace(".", "_");
-      $element.append('
    ');
       return {
         post: function postLink(scope, element, attrs, controllers, transclude) {
           var graphController = controllers[0];
-          graphController._createChart(id);
+          graphController._createChart();
           scope.dataReady = false;
           scope.filters = [];
 
@@ -151,10 +139,11 @@ angular.module('angular-dimple.graph', [])
     },
     controller: ['$scope', '$element', '$attrs', function($scope, $element, $attrs) {
       var chart;
-      var id;
 
-      this._createChart = function (domId) {
-        id = domId;
+      var id = (Math.random() * 1e9).toString(36).replace(".", "_");
+      $element.append('
    ');
+
+      this._createChart = function () {
         var svg = dimple.newSvg('#dng-'+ id +'', $attrs.width, $attrs.height);
         var data = $scope.data;
         chart = new dimple.chart(svg, data);
@@ -230,7 +219,7 @@ angular.module('angular-dimple.legend', [])
 }]);
 angular.module('angular-dimple.line', [])
 
-.directive('line', ['angular-dimple.core', function (core) {
+.directive('line', [function () {
   return {
     restrict: 'E',
     replace: true,
@@ -292,7 +281,7 @@ angular.module('angular-dimple.r', [])
 }]);
 angular.module('angular-dimple.ring', [])
 
-.directive('ring', ['angular-dimple.core', function (core) {
+.directive('ring', [function () {
   return {
     restrict: 'E',
     replace: true,
@@ -324,7 +313,7 @@ angular.module('angular-dimple.ring', [])
         if ($attrs.diameter) {
           ring.outerRadius = ($attrs.diameter) + '%';
         }
-
+        graphController.filter($attrs);
         graphController.draw();
       }
 
@@ -340,7 +329,7 @@ angular.module('angular-dimple.ring', [])
 
 angular.module('angular-dimple.scatter-plot', [])
 
-.directive('scatterPlot', ['angular-dimple.core', function (core) {
+.directive('scatterPlot', [function () {
   return {
     restrict: 'E',
     replace: true,
@@ -372,7 +361,7 @@ angular.module('angular-dimple.scatter-plot', [])
 }]);
 angular.module('angular-dimple.stacked-area', [])
 
-.directive('stackedArea', ['angular-dimple.core', function (core) {
+.directive('stackedArea', [function () {
   return {
     restrict: 'E',
     replace: true,
@@ -405,7 +394,7 @@ angular.module('angular-dimple.stacked-area', [])
 }]);
 angular.module('angular-dimple.stacked-bar', [])
 
-.directive('stackedBar', ['angular-dimple.core', function (core) {
+.directive('stackedBar', [function () {
   return {
     restrict: 'E',
     replace: true,
diff --git a/site/js/lib/angular-dimple.min.js b/site/js/lib/angular-dimple.min.js
index 850e6fc..3d77c79 100644
--- a/site/js/lib/angular-dimple.min.js
+++ b/site/js/lib/angular-dimple.min.js
@@ -1 +1 @@
-angular.module("angular-dimple.core",[]).service("angular-dimple.core",[function(){return{}}]),angular.module("angular-dimple",["angular-dimple.core","angular-dimple.graph","angular-dimple.legend","angular-dimple.x","angular-dimple.y","angular-dimple.r","angular-dimple.line","angular-dimple.bar","angular-dimple.stacked-bar","angular-dimple.area","angular-dimple.stacked-area","angular-dimple.scatter-plot","angular-dimple.ring"]).constant("MODULE_VERSION","0.0.1").value("defaults",{foo:"bar"}),angular.module("angular-dimple.area",[]).directive("area",["angular-dimple.core",function(a){return{restrict:"E",replace:!0,require:["area","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(b,c,d,e){function f(){if(d.value)area=h.addSeries([d.field],dimple.plot.area),a.filter(area,b.data,d.field,d.value,d.filter),area.lineMarkers=!0;else{var c=dimple.getUniqueValues(b.data,d.field);angular.forEach(c,function(){area=h.addSeries([d.field],dimple.plot.area),g.filter(d),area.lineMarkers=!0})}g.draw()}var g=e[1],h=(e[0],g.getChart());b.$watch("dataReady",function(a){a===!0&&f()})}}}]),angular.module("angular-dimple.bar",[]).directive("bar",["angular-dimple.core",function(){return{restrict:"E",replace:!0,require:["bar","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){bar=g.addSeries([c.field],dimple.plot.bar),f.filter(c),f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.graph",[]).directive("graph",[function(){return{restrict:"E",replace:!0,scope:{data:"="},require:["graph"],transclude:!0,link:function(a,b,c,d){{var e=d[0];e.getChart()}},compile:function(a){var b=(1e9*Math.random()).toString(36).replace(".","_");return a.append('
    '),{post:function(a,c,d,e,f){var g=e[0];g._createChart(b),a.dataReady=!1,a.filters=[];var h,i=g.getChart();h=d.transition?d.transition:750,a.$watch("data",function(b){b&&(a.dataReady=!0,g.setData(),i.draw(h))}),f(a,function(a){c.append(a)})}}},controller:["$scope","$element","$attrs",function(a,b,c){var d,e;this._createChart=function(b){e=b;var f=dimple.newSvg("#dng-"+e,c.width,c.height),g=a.data;d=new dimple.chart(f,g);var h="false"===c.autoStyle?!0:!1;d.noFormats=h},this.getChart=function(){return d},this.setData=function(){d.data=a.data},this.draw=function(){d.draw()},this.getID=function(){return e},this.filter=function(b){if(void 0!==b.value&&a.filters.push(b.value),a.filters.length&&(d.data=dimple.filterData(a.data,b.field,a.filters)),void 0!==b.filter){console.log("i see a filter");var c=b.filter.split(":"),e=c[0],f=[c[1]];d.data=dimple.filterData(a.data,e,f)}}}]}}]),angular.module("angular-dimple.legend",[]).directive("legend",[function(){return{restrict:"E",replace:!0,require:["legend","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){var a=c.left?c.left:"10%",b=c.top?c.top:"4%",d=c.height?c.height:"10%",e=c.width?c.width:"90%",f=c.position?c.position:"left";g.addLegend(a,b,e,d,f)}var f=d[1],g=f.getChart();a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.line",[]).directive("line",["angular-dimple.core",function(){return{restrict:"E",replace:!0,require:["line","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){line=g.addSeries([c.field],dimple.plot.line),f.filter(c),line.lineMarkers=!0,f.draw()}var f=d[1],g=f.getChart();a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.r",[]).directive("r",[function(){return{restrict:"E",replace:!0,require:["r","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){r=g.addMeasureAxis("p",c.field),c.title&&"null"!==c.title?r.title=c.title:"null"==c.title&&(r.title=null)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.ring",[]).directive("ring",["angular-dimple.core",function(){return{restrict:"E",replace:!0,require:["ring","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){var a;ring=g.addSeries([c.field],dimple.plot.pie),c.thickness&&!c.diameter?(a=100-c.thickness+"%",ring.innerRadius=a):c.thickness&&c.diameter?(a=c.diameter-c.thickness+"%",ring.innerRadius=a):ring.innerRadius="50%",c.diameter&&(ring.outerRadius=c.diameter+"%"),f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.scatter-plot",[]).directive("scatterPlot",["angular-dimple.core",function(){return{restrict:"E",replace:!0,require:["scatterPlot","^graph"],controller:[function(){}],link:function(a,b,c,d){function e(){var a=[];c.series&&a.push(c.series),a.push(c.field),(c.label||""===c.label)&&a.push(c.label),scatterPlot=g.addSeries(a,dimple.plot.bubble),scatterPlot.aggregate=dimple.aggregateMethod.avg,f.filter(c),f.draw()}var f=d[1],g=f.getChart();a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.stacked-area",[]).directive("stackedArea",["angular-dimple.core",function(){return{restrict:"E",replace:!0,require:["stackedArea","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){area=c.series?g.addSeries([c.series],dimple.plot.area):g.addSeries([c.field],dimple.plot.area),f.filter(c),area.lineMarkers=!1,f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.stacked-bar",[]).directive("stackedBar",["angular-dimple.core",function(){return{restrict:"E",replace:!0,require:["stackedBar","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){bar=c.series?g.addSeries([c.series],dimple.plot.bar):g.addSeries([c.field],dimple.plot.bar),f.filter(c),f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.x",[]).directive("x",[function(){return{restrict:"E",replace:!0,require:["x","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){c.groupBy?(x="Measure"==c.type?g.addMeasureAxis("x",[c.groupBy,c.field]):"Percent"==c.type?g.addPctAxis("x",c.field):g.addCategoryAxis("x",[c.groupBy,c.field]),c.orderBy&&x.addGroupOrderRule(c.orderBy)):(x="Measure"==c.type?g.addMeasureAxis("x",c.field):"Percent"==c.type?g.addPctAxis("x",c.field):g.addCategoryAxis("x",c.field),c.orderBy&&x.addOrderRule(c.orderBy)),c.title&&"null"!==c.title?x.title=c.title:"null"==c.title&&(x.title=null)}var f=d[1],g=f.getChart();a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.y",[]).directive("y",[function(){return{restrict:"E",replace:!0,require:["y","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){c.groupBy?(y="Category"==c.type?g.addCategoryAxis("y",c.field):"Percent"==c.type?g.addPctAxis("y",c.field):g.addMeasureAxis("y",c.field),c.orderBy&&y.addGroupOrderRule(c.orderBy)):(y="Category"==c.type?g.addCategoryAxis("y",c.field):"Percent"==c.type?g.addPctAxis("y",c.field):g.addMeasureAxis("y",c.field),c.orderBy&&y.addOrderRule(c.orderBy)),c.title&&"null"!==c.title?y.title=c.title:"null"==c.title&&(y.title=null)}var f=d[1],g=f.getChart();a.$watch("dataReady",function(a){a===!0&&e()})}}}]);
\ No newline at end of file
+angular.module("angular-dimple",["angular-dimple.graph","angular-dimple.legend","angular-dimple.x","angular-dimple.y","angular-dimple.r","angular-dimple.line","angular-dimple.bar","angular-dimple.stacked-bar","angular-dimple.area","angular-dimple.stacked-area","angular-dimple.scatter-plot","angular-dimple.ring"]).constant("MODULE_VERSION","0.0.1").value("defaults",{foo:"bar"}),angular.module("angular-dimple.area",[]).directive("area",[function(){return{restrict:"E",replace:!0,require:["area","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){if(c.value)area=g.addSeries([c.field],dimple.plot.area),core.filter(area,a.data,c.field,c.value,c.filter),area.lineMarkers=!0;else{var b=dimple.getUniqueValues(a.data,c.field);angular.forEach(b,function(){area=g.addSeries([c.field],dimple.plot.area),f.filter(c),area.lineMarkers=!0})}f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.bar",[]).directive("bar",[function(){return{restrict:"E",replace:!0,require:["bar","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){bar=g.addSeries([c.field],dimple.plot.bar),f.filter(c),f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.graph",[]).directive("graph",[function(){return{restrict:"E",replace:!0,scope:{data:"="},require:["graph"],transclude:!0,link:function(a,b,c,d){{var e=d[0];e.getChart()}},compile:function(){return{post:function(a,b,c,d,e){var f=d[0];f._createChart(),a.dataReady=!1,a.filters=[];var g,h=f.getChart();g=c.transition?c.transition:750,a.$watch("data",function(b){b&&(a.dataReady=!0,f.setData(),h.draw(g))}),e(a,function(a){b.append(a)})}}},controller:["$scope","$element","$attrs",function(a,b,c){var d,e=(1e9*Math.random()).toString(36).replace(".","_");b.append('
    '),this._createChart=function(){var b=dimple.newSvg("#dng-"+e,c.width,c.height),f=a.data;d=new dimple.chart(b,f);var g="false"===c.autoStyle?!0:!1;d.noFormats=g},this.getChart=function(){return d},this.setData=function(){d.data=a.data},this.draw=function(){d.draw()},this.getID=function(){return e},this.filter=function(b){if(void 0!==b.value&&a.filters.push(b.value),a.filters.length&&(d.data=dimple.filterData(a.data,b.field,a.filters)),void 0!==b.filter){console.log("i see a filter");var c=b.filter.split(":"),e=c[0],f=[c[1]];d.data=dimple.filterData(a.data,e,f)}}}]}}]),angular.module("angular-dimple.legend",[]).directive("legend",[function(){return{restrict:"E",replace:!0,require:["legend","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){var a=c.left?c.left:"10%",b=c.top?c.top:"4%",d=c.height?c.height:"10%",e=c.width?c.width:"90%",f=c.position?c.position:"left";g.addLegend(a,b,e,d,f)}var f=d[1],g=f.getChart();a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.line",[]).directive("line",[function(){return{restrict:"E",replace:!0,require:["line","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){line=g.addSeries([c.field],dimple.plot.line),f.filter(c),line.lineMarkers=!0,f.draw()}var f=d[1],g=f.getChart();a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.r",[]).directive("r",[function(){return{restrict:"E",replace:!0,require:["r","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){r=g.addMeasureAxis("p",c.field),c.title&&"null"!==c.title?r.title=c.title:"null"==c.title&&(r.title=null)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.ring",[]).directive("ring",[function(){return{restrict:"E",replace:!0,require:["ring","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){var a;ring=g.addSeries([c.field],dimple.plot.pie),c.thickness&&!c.diameter?(a=100-c.thickness+"%",ring.innerRadius=a):c.thickness&&c.diameter?(a=c.diameter-c.thickness+"%",ring.innerRadius=a):ring.innerRadius="50%",c.diameter&&(ring.outerRadius=c.diameter+"%"),f.filter(c),f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.scatter-plot",[]).directive("scatterPlot",[function(){return{restrict:"E",replace:!0,require:["scatterPlot","^graph"],controller:[function(){}],link:function(a,b,c,d){function e(){var a=[];c.series&&a.push(c.series),a.push(c.field),(c.label||""===c.label)&&a.push(c.label),scatterPlot=g.addSeries(a,dimple.plot.bubble),scatterPlot.aggregate=dimple.aggregateMethod.avg,f.filter(c),f.draw()}var f=d[1],g=f.getChart();a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.stacked-area",[]).directive("stackedArea",[function(){return{restrict:"E",replace:!0,require:["stackedArea","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){area=c.series?g.addSeries([c.series],dimple.plot.area):g.addSeries([c.field],dimple.plot.area),f.filter(c),area.lineMarkers=!1,f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.stacked-bar",[]).directive("stackedBar",[function(){return{restrict:"E",replace:!0,require:["stackedBar","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){bar=c.series?g.addSeries([c.series],dimple.plot.bar):g.addSeries([c.field],dimple.plot.bar),f.filter(c),f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.x",[]).directive("x",[function(){return{restrict:"E",replace:!0,require:["x","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){c.groupBy?(x="Measure"==c.type?g.addMeasureAxis("x",[c.groupBy,c.field]):"Percent"==c.type?g.addPctAxis("x",c.field):g.addCategoryAxis("x",[c.groupBy,c.field]),c.orderBy&&x.addGroupOrderRule(c.orderBy)):(x="Measure"==c.type?g.addMeasureAxis("x",c.field):"Percent"==c.type?g.addPctAxis("x",c.field):g.addCategoryAxis("x",c.field),c.orderBy&&x.addOrderRule(c.orderBy)),c.title&&"null"!==c.title?x.title=c.title:"null"==c.title&&(x.title=null)}var f=d[1],g=f.getChart();a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.y",[]).directive("y",[function(){return{restrict:"E",replace:!0,require:["y","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){c.groupBy?(y="Category"==c.type?g.addCategoryAxis("y",c.field):"Percent"==c.type?g.addPctAxis("y",c.field):g.addMeasureAxis("y",c.field),c.orderBy&&y.addGroupOrderRule(c.orderBy)):(y="Category"==c.type?g.addCategoryAxis("y",c.field):"Percent"==c.type?g.addPctAxis("y",c.field):g.addMeasureAxis("y",c.field),c.orderBy&&y.addOrderRule(c.orderBy)),c.title&&"null"!==c.title?y.title=c.title:"null"==c.title&&(y.title=null)}var f=d[1],g=f.getChart();a.$watch("dataReady",function(a){a===!0&&e()})}}}]);
\ No newline at end of file
diff --git a/source/angular-dimple-core.js b/source/angular-dimple-core.js
deleted file mode 100644
index 9eb0ca6..0000000
--- a/source/angular-dimple-core.js
+++ /dev/null
@@ -1,8 +0,0 @@
-angular.module('angular-dimple.core', [])
-
-.service('angular-dimple.core', [function(){
-  return {
-    // Nothing to see here.
-  };
-}]);
-
diff --git a/source/angular-dimple.js b/source/angular-dimple.js
index 448ee8f..d1d24b4 100644
--- a/source/angular-dimple.js
+++ b/source/angular-dimple.js
@@ -1,5 +1,4 @@
 angular.module('angular-dimple', [
-  'angular-dimple.core',
   'angular-dimple.graph',
   'angular-dimple.legend',
   'angular-dimple.x',
diff --git a/source/area.js b/source/area.js
index 92dd6dc..1fe84fa 100644
--- a/source/area.js
+++ b/source/area.js
@@ -1,6 +1,6 @@
 angular.module('angular-dimple.area', [])
 
-.directive('area', ['angular-dimple.core', function (core) {
+.directive('area', [function () {
   return {
     restrict: 'E',
     replace: true,
diff --git a/source/bar.js b/source/bar.js
index 3a114b9..424cf6b 100644
--- a/source/bar.js
+++ b/source/bar.js
@@ -1,6 +1,6 @@
 angular.module('angular-dimple.bar', [])
 
-.directive('bar', ['angular-dimple.core', function (core) {
+.directive('bar', [function () {
   return {
     restrict: 'E',
     replace: true,
diff --git a/source/line.js b/source/line.js
index 4eeb82b..c858372 100644
--- a/source/line.js
+++ b/source/line.js
@@ -1,6 +1,6 @@
 angular.module('angular-dimple.line', [])
 
-.directive('line', ['angular-dimple.core', function (core) {
+.directive('line', [function () {
   return {
     restrict: 'E',
     replace: true,
diff --git a/source/ring.js b/source/ring.js
index 033acff..dbbb998 100644
--- a/source/ring.js
+++ b/source/ring.js
@@ -1,6 +1,6 @@
 angular.module('angular-dimple.ring', [])
 
-.directive('ring', ['angular-dimple.core', function (core) {
+.directive('ring', [function () {
   return {
     restrict: 'E',
     replace: true,
diff --git a/source/scatter-plot.js b/source/scatter-plot.js
index b61153a..3f594ba 100644
--- a/source/scatter-plot.js
+++ b/source/scatter-plot.js
@@ -1,6 +1,6 @@
 angular.module('angular-dimple.scatter-plot', [])
 
-.directive('scatterPlot', ['angular-dimple.core', function (core) {
+.directive('scatterPlot', [function () {
   return {
     restrict: 'E',
     replace: true,
diff --git a/source/stacked-area.js b/source/stacked-area.js
index 1b860d5..d94dc8f 100644
--- a/source/stacked-area.js
+++ b/source/stacked-area.js
@@ -1,6 +1,6 @@
 angular.module('angular-dimple.stacked-area', [])
 
-.directive('stackedArea', ['angular-dimple.core', function (core) {
+.directive('stackedArea', [function () {
   return {
     restrict: 'E',
     replace: true,
diff --git a/source/stacked-bar.js b/source/stacked-bar.js
index 3599e8f..d791402 100644
--- a/source/stacked-bar.js
+++ b/source/stacked-bar.js
@@ -1,6 +1,6 @@
 angular.module('angular-dimple.stacked-bar', [])
 
-.directive('stackedBar', ['angular-dimple.core', function (core) {
+.directive('stackedBar', [function () {
   return {
     restrict: 'E',
     replace: true,

From ce8c5612a6150ce19f8df37350e3922550eceaaa Mon Sep 17 00:00:00 2001
From: Patrick Arlt 
Date: Fri, 29 Aug 2014 14:12:23 -0700
Subject: [PATCH 25/29] no more random ids

---
 dist/angular-dimple.js            | 70 +++++++++++++++----------------
 dist/angular-dimple.min.js        |  2 +-
 site/js/lib/angular-dimple.js     | 70 +++++++++++++++----------------
 site/js/lib/angular-dimple.min.js |  2 +-
 source/graph.js                   | 70 +++++++++++++++----------------
 5 files changed, 104 insertions(+), 110 deletions(-)

diff --git a/dist/angular-dimple.js b/dist/angular-dimple.js
index bf59ab8..024f5f6 100644
--- a/dist/angular-dimple.js
+++ b/dist/angular-dimple.js
@@ -103,50 +103,48 @@ angular.module('angular-dimple.graph', [])
     },
     require: ['graph'],
     transclude: true,
-    link: function($scope, $element, $attrs, $controllers) {
-      var graphController = $controllers[0];
-      var chart = graphController.getChart();
-    },
-    compile: function($element, $attrs) {
-      return {
-        post: function postLink(scope, element, attrs, controllers, transclude) {
-          var graphController = controllers[0];
-          graphController._createChart();
-          scope.dataReady = false;
-          scope.filters = [];
-
-          var chart = graphController.getChart();
-          var transition;
-          if (attrs.transition) {
-            transition = attrs.transition;
-          } else {
-            transition = 750;
-          }
+    link: function (scope, element, attrs, controllers, transclude) {
+      var graphController = controllers[0];
+      graphController._createChart();
+      scope.dataReady = false;
+      scope.filters = [];
 
-          scope.$watch('data', function(newValue, oldValue) {
-            if (newValue) {
-              scope.dataReady = true;
-              graphController.setData();
-              chart.draw(transition);
-            }
-          });
+      var chart = graphController.getChart();
+      var transition;
+      if (attrs.transition) {
+        transition = attrs.transition;
+      } else {
+        transition = 750;
+      }
 
-          transclude(scope, function(clone){
-            element.append(clone);
-          });
+      scope.$watch('data', function(newValue, oldValue) {
+        if (newValue) {
+          scope.dataReady = true;
+          graphController.setData();
+          chart.draw(transition);
         }
-      };
+      });
+
+      transclude(scope, function(clone){
+        element.append(clone);
+      });
     },
     controller: ['$scope', '$element', '$attrs', function($scope, $element, $attrs) {
       var chart;
 
-      var id = (Math.random() * 1e9).toString(36).replace(".", "_");
-      $element.append('
    ');
-
       this._createChart = function () {
-        var svg = dimple.newSvg('#dng-'+ id +'', $attrs.width, $attrs.height);
-        var data = $scope.data;
-        chart = new dimple.chart(svg, data);
+        // create an svg element
+        var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        svg.setAttribute('width', $attrs.width);
+        svg.setAttribute('height', $attrs.height);
+
+        // end the svg to this 
+        $element.append(svg);
+
+        // create the dimple chart using the d3 selection of our  element
+        chart = new dimple.chart(d3.select(svg));
+
+        // auto style
         var autoStyle = $attrs.autoStyle === 'false' ? true : false;
         chart.noFormats = autoStyle;
       };
diff --git a/dist/angular-dimple.min.js b/dist/angular-dimple.min.js
index 3d77c79..0dfa461 100644
--- a/dist/angular-dimple.min.js
+++ b/dist/angular-dimple.min.js
@@ -1 +1 @@
-angular.module("angular-dimple",["angular-dimple.graph","angular-dimple.legend","angular-dimple.x","angular-dimple.y","angular-dimple.r","angular-dimple.line","angular-dimple.bar","angular-dimple.stacked-bar","angular-dimple.area","angular-dimple.stacked-area","angular-dimple.scatter-plot","angular-dimple.ring"]).constant("MODULE_VERSION","0.0.1").value("defaults",{foo:"bar"}),angular.module("angular-dimple.area",[]).directive("area",[function(){return{restrict:"E",replace:!0,require:["area","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){if(c.value)area=g.addSeries([c.field],dimple.plot.area),core.filter(area,a.data,c.field,c.value,c.filter),area.lineMarkers=!0;else{var b=dimple.getUniqueValues(a.data,c.field);angular.forEach(b,function(){area=g.addSeries([c.field],dimple.plot.area),f.filter(c),area.lineMarkers=!0})}f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.bar",[]).directive("bar",[function(){return{restrict:"E",replace:!0,require:["bar","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){bar=g.addSeries([c.field],dimple.plot.bar),f.filter(c),f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.graph",[]).directive("graph",[function(){return{restrict:"E",replace:!0,scope:{data:"="},require:["graph"],transclude:!0,link:function(a,b,c,d){{var e=d[0];e.getChart()}},compile:function(){return{post:function(a,b,c,d,e){var f=d[0];f._createChart(),a.dataReady=!1,a.filters=[];var g,h=f.getChart();g=c.transition?c.transition:750,a.$watch("data",function(b){b&&(a.dataReady=!0,f.setData(),h.draw(g))}),e(a,function(a){b.append(a)})}}},controller:["$scope","$element","$attrs",function(a,b,c){var d,e=(1e9*Math.random()).toString(36).replace(".","_");b.append('
    '),this._createChart=function(){var b=dimple.newSvg("#dng-"+e,c.width,c.height),f=a.data;d=new dimple.chart(b,f);var g="false"===c.autoStyle?!0:!1;d.noFormats=g},this.getChart=function(){return d},this.setData=function(){d.data=a.data},this.draw=function(){d.draw()},this.getID=function(){return e},this.filter=function(b){if(void 0!==b.value&&a.filters.push(b.value),a.filters.length&&(d.data=dimple.filterData(a.data,b.field,a.filters)),void 0!==b.filter){console.log("i see a filter");var c=b.filter.split(":"),e=c[0],f=[c[1]];d.data=dimple.filterData(a.data,e,f)}}}]}}]),angular.module("angular-dimple.legend",[]).directive("legend",[function(){return{restrict:"E",replace:!0,require:["legend","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){var a=c.left?c.left:"10%",b=c.top?c.top:"4%",d=c.height?c.height:"10%",e=c.width?c.width:"90%",f=c.position?c.position:"left";g.addLegend(a,b,e,d,f)}var f=d[1],g=f.getChart();a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.line",[]).directive("line",[function(){return{restrict:"E",replace:!0,require:["line","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){line=g.addSeries([c.field],dimple.plot.line),f.filter(c),line.lineMarkers=!0,f.draw()}var f=d[1],g=f.getChart();a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.r",[]).directive("r",[function(){return{restrict:"E",replace:!0,require:["r","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){r=g.addMeasureAxis("p",c.field),c.title&&"null"!==c.title?r.title=c.title:"null"==c.title&&(r.title=null)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.ring",[]).directive("ring",[function(){return{restrict:"E",replace:!0,require:["ring","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){var a;ring=g.addSeries([c.field],dimple.plot.pie),c.thickness&&!c.diameter?(a=100-c.thickness+"%",ring.innerRadius=a):c.thickness&&c.diameter?(a=c.diameter-c.thickness+"%",ring.innerRadius=a):ring.innerRadius="50%",c.diameter&&(ring.outerRadius=c.diameter+"%"),f.filter(c),f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.scatter-plot",[]).directive("scatterPlot",[function(){return{restrict:"E",replace:!0,require:["scatterPlot","^graph"],controller:[function(){}],link:function(a,b,c,d){function e(){var a=[];c.series&&a.push(c.series),a.push(c.field),(c.label||""===c.label)&&a.push(c.label),scatterPlot=g.addSeries(a,dimple.plot.bubble),scatterPlot.aggregate=dimple.aggregateMethod.avg,f.filter(c),f.draw()}var f=d[1],g=f.getChart();a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.stacked-area",[]).directive("stackedArea",[function(){return{restrict:"E",replace:!0,require:["stackedArea","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){area=c.series?g.addSeries([c.series],dimple.plot.area):g.addSeries([c.field],dimple.plot.area),f.filter(c),area.lineMarkers=!1,f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.stacked-bar",[]).directive("stackedBar",[function(){return{restrict:"E",replace:!0,require:["stackedBar","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){bar=c.series?g.addSeries([c.series],dimple.plot.bar):g.addSeries([c.field],dimple.plot.bar),f.filter(c),f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.x",[]).directive("x",[function(){return{restrict:"E",replace:!0,require:["x","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){c.groupBy?(x="Measure"==c.type?g.addMeasureAxis("x",[c.groupBy,c.field]):"Percent"==c.type?g.addPctAxis("x",c.field):g.addCategoryAxis("x",[c.groupBy,c.field]),c.orderBy&&x.addGroupOrderRule(c.orderBy)):(x="Measure"==c.type?g.addMeasureAxis("x",c.field):"Percent"==c.type?g.addPctAxis("x",c.field):g.addCategoryAxis("x",c.field),c.orderBy&&x.addOrderRule(c.orderBy)),c.title&&"null"!==c.title?x.title=c.title:"null"==c.title&&(x.title=null)}var f=d[1],g=f.getChart();a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.y",[]).directive("y",[function(){return{restrict:"E",replace:!0,require:["y","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){c.groupBy?(y="Category"==c.type?g.addCategoryAxis("y",c.field):"Percent"==c.type?g.addPctAxis("y",c.field):g.addMeasureAxis("y",c.field),c.orderBy&&y.addGroupOrderRule(c.orderBy)):(y="Category"==c.type?g.addCategoryAxis("y",c.field):"Percent"==c.type?g.addPctAxis("y",c.field):g.addMeasureAxis("y",c.field),c.orderBy&&y.addOrderRule(c.orderBy)),c.title&&"null"!==c.title?y.title=c.title:"null"==c.title&&(y.title=null)}var f=d[1],g=f.getChart();a.$watch("dataReady",function(a){a===!0&&e()})}}}]);
\ No newline at end of file
+angular.module("angular-dimple",["angular-dimple.graph","angular-dimple.legend","angular-dimple.x","angular-dimple.y","angular-dimple.r","angular-dimple.line","angular-dimple.bar","angular-dimple.stacked-bar","angular-dimple.area","angular-dimple.stacked-area","angular-dimple.scatter-plot","angular-dimple.ring"]).constant("MODULE_VERSION","0.0.1").value("defaults",{foo:"bar"}),angular.module("angular-dimple.area",[]).directive("area",[function(){return{restrict:"E",replace:!0,require:["area","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){if(c.value)area=g.addSeries([c.field],dimple.plot.area),core.filter(area,a.data,c.field,c.value,c.filter),area.lineMarkers=!0;else{var b=dimple.getUniqueValues(a.data,c.field);angular.forEach(b,function(){area=g.addSeries([c.field],dimple.plot.area),f.filter(c),area.lineMarkers=!0})}f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.bar",[]).directive("bar",[function(){return{restrict:"E",replace:!0,require:["bar","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){bar=g.addSeries([c.field],dimple.plot.bar),f.filter(c),f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.graph",[]).directive("graph",[function(){return{restrict:"E",replace:!0,scope:{data:"="},require:["graph"],transclude:!0,link:function(a,b,c,d,e){var f=d[0];f._createChart(),a.dataReady=!1,a.filters=[];var g,h=f.getChart();g=c.transition?c.transition:750,a.$watch("data",function(b){b&&(a.dataReady=!0,f.setData(),h.draw(g))}),e(a,function(a){b.append(a)})},controller:["$scope","$element","$attrs",function(a,b,c){var d;this._createChart=function(){var a=document.createElementNS("http://www.w3.org/2000/svg","svg");a.setAttribute("width",c.width),a.setAttribute("height",c.height),b.append(a),d=new dimple.chart(d3.select(a));var e="false"===c.autoStyle?!0:!1;d.noFormats=e},this.getChart=function(){return d},this.setData=function(){d.data=a.data},this.draw=function(){d.draw()},this.getID=function(){return id},this.filter=function(b){if(void 0!==b.value&&a.filters.push(b.value),a.filters.length&&(d.data=dimple.filterData(a.data,b.field,a.filters)),void 0!==b.filter){console.log("i see a filter");var c=b.filter.split(":"),e=c[0],f=[c[1]];d.data=dimple.filterData(a.data,e,f)}}}]}}]),angular.module("angular-dimple.legend",[]).directive("legend",[function(){return{restrict:"E",replace:!0,require:["legend","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){var a=c.left?c.left:"10%",b=c.top?c.top:"4%",d=c.height?c.height:"10%",e=c.width?c.width:"90%",f=c.position?c.position:"left";g.addLegend(a,b,e,d,f)}var f=d[1],g=f.getChart();a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.line",[]).directive("line",[function(){return{restrict:"E",replace:!0,require:["line","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){line=g.addSeries([c.field],dimple.plot.line),f.filter(c),line.lineMarkers=!0,f.draw()}var f=d[1],g=f.getChart();a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.r",[]).directive("r",[function(){return{restrict:"E",replace:!0,require:["r","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){r=g.addMeasureAxis("p",c.field),c.title&&"null"!==c.title?r.title=c.title:"null"==c.title&&(r.title=null)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.ring",[]).directive("ring",[function(){return{restrict:"E",replace:!0,require:["ring","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){var a;ring=g.addSeries([c.field],dimple.plot.pie),c.thickness&&!c.diameter?(a=100-c.thickness+"%",ring.innerRadius=a):c.thickness&&c.diameter?(a=c.diameter-c.thickness+"%",ring.innerRadius=a):ring.innerRadius="50%",c.diameter&&(ring.outerRadius=c.diameter+"%"),f.filter(c),f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.scatter-plot",[]).directive("scatterPlot",[function(){return{restrict:"E",replace:!0,require:["scatterPlot","^graph"],controller:[function(){}],link:function(a,b,c,d){function e(){var a=[];c.series&&a.push(c.series),a.push(c.field),(c.label||""===c.label)&&a.push(c.label),scatterPlot=g.addSeries(a,dimple.plot.bubble),scatterPlot.aggregate=dimple.aggregateMethod.avg,f.filter(c),f.draw()}var f=d[1],g=f.getChart();a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.stacked-area",[]).directive("stackedArea",[function(){return{restrict:"E",replace:!0,require:["stackedArea","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){area=c.series?g.addSeries([c.series],dimple.plot.area):g.addSeries([c.field],dimple.plot.area),f.filter(c),area.lineMarkers=!1,f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.stacked-bar",[]).directive("stackedBar",[function(){return{restrict:"E",replace:!0,require:["stackedBar","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){bar=c.series?g.addSeries([c.series],dimple.plot.bar):g.addSeries([c.field],dimple.plot.bar),f.filter(c),f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.x",[]).directive("x",[function(){return{restrict:"E",replace:!0,require:["x","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){c.groupBy?(x="Measure"==c.type?g.addMeasureAxis("x",[c.groupBy,c.field]):"Percent"==c.type?g.addPctAxis("x",c.field):g.addCategoryAxis("x",[c.groupBy,c.field]),c.orderBy&&x.addGroupOrderRule(c.orderBy)):(x="Measure"==c.type?g.addMeasureAxis("x",c.field):"Percent"==c.type?g.addPctAxis("x",c.field):g.addCategoryAxis("x",c.field),c.orderBy&&x.addOrderRule(c.orderBy)),c.title&&"null"!==c.title?x.title=c.title:"null"==c.title&&(x.title=null)}var f=d[1],g=f.getChart();a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.y",[]).directive("y",[function(){return{restrict:"E",replace:!0,require:["y","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){c.groupBy?(y="Category"==c.type?g.addCategoryAxis("y",c.field):"Percent"==c.type?g.addPctAxis("y",c.field):g.addMeasureAxis("y",c.field),c.orderBy&&y.addGroupOrderRule(c.orderBy)):(y="Category"==c.type?g.addCategoryAxis("y",c.field):"Percent"==c.type?g.addPctAxis("y",c.field):g.addMeasureAxis("y",c.field),c.orderBy&&y.addOrderRule(c.orderBy)),c.title&&"null"!==c.title?y.title=c.title:"null"==c.title&&(y.title=null)}var f=d[1],g=f.getChart();a.$watch("dataReady",function(a){a===!0&&e()})}}}]);
\ No newline at end of file
diff --git a/site/js/lib/angular-dimple.js b/site/js/lib/angular-dimple.js
index bf59ab8..024f5f6 100644
--- a/site/js/lib/angular-dimple.js
+++ b/site/js/lib/angular-dimple.js
@@ -103,50 +103,48 @@ angular.module('angular-dimple.graph', [])
     },
     require: ['graph'],
     transclude: true,
-    link: function($scope, $element, $attrs, $controllers) {
-      var graphController = $controllers[0];
-      var chart = graphController.getChart();
-    },
-    compile: function($element, $attrs) {
-      return {
-        post: function postLink(scope, element, attrs, controllers, transclude) {
-          var graphController = controllers[0];
-          graphController._createChart();
-          scope.dataReady = false;
-          scope.filters = [];
-
-          var chart = graphController.getChart();
-          var transition;
-          if (attrs.transition) {
-            transition = attrs.transition;
-          } else {
-            transition = 750;
-          }
+    link: function (scope, element, attrs, controllers, transclude) {
+      var graphController = controllers[0];
+      graphController._createChart();
+      scope.dataReady = false;
+      scope.filters = [];
 
-          scope.$watch('data', function(newValue, oldValue) {
-            if (newValue) {
-              scope.dataReady = true;
-              graphController.setData();
-              chart.draw(transition);
-            }
-          });
+      var chart = graphController.getChart();
+      var transition;
+      if (attrs.transition) {
+        transition = attrs.transition;
+      } else {
+        transition = 750;
+      }
 
-          transclude(scope, function(clone){
-            element.append(clone);
-          });
+      scope.$watch('data', function(newValue, oldValue) {
+        if (newValue) {
+          scope.dataReady = true;
+          graphController.setData();
+          chart.draw(transition);
         }
-      };
+      });
+
+      transclude(scope, function(clone){
+        element.append(clone);
+      });
     },
     controller: ['$scope', '$element', '$attrs', function($scope, $element, $attrs) {
       var chart;
 
-      var id = (Math.random() * 1e9).toString(36).replace(".", "_");
-      $element.append('
    ');
-
       this._createChart = function () {
-        var svg = dimple.newSvg('#dng-'+ id +'', $attrs.width, $attrs.height);
-        var data = $scope.data;
-        chart = new dimple.chart(svg, data);
+        // create an svg element
+        var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        svg.setAttribute('width', $attrs.width);
+        svg.setAttribute('height', $attrs.height);
+
+        // end the svg to this 
+        $element.append(svg);
+
+        // create the dimple chart using the d3 selection of our  element
+        chart = new dimple.chart(d3.select(svg));
+
+        // auto style
         var autoStyle = $attrs.autoStyle === 'false' ? true : false;
         chart.noFormats = autoStyle;
       };
diff --git a/site/js/lib/angular-dimple.min.js b/site/js/lib/angular-dimple.min.js
index 3d77c79..0dfa461 100644
--- a/site/js/lib/angular-dimple.min.js
+++ b/site/js/lib/angular-dimple.min.js
@@ -1 +1 @@
-angular.module("angular-dimple",["angular-dimple.graph","angular-dimple.legend","angular-dimple.x","angular-dimple.y","angular-dimple.r","angular-dimple.line","angular-dimple.bar","angular-dimple.stacked-bar","angular-dimple.area","angular-dimple.stacked-area","angular-dimple.scatter-plot","angular-dimple.ring"]).constant("MODULE_VERSION","0.0.1").value("defaults",{foo:"bar"}),angular.module("angular-dimple.area",[]).directive("area",[function(){return{restrict:"E",replace:!0,require:["area","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){if(c.value)area=g.addSeries([c.field],dimple.plot.area),core.filter(area,a.data,c.field,c.value,c.filter),area.lineMarkers=!0;else{var b=dimple.getUniqueValues(a.data,c.field);angular.forEach(b,function(){area=g.addSeries([c.field],dimple.plot.area),f.filter(c),area.lineMarkers=!0})}f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.bar",[]).directive("bar",[function(){return{restrict:"E",replace:!0,require:["bar","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){bar=g.addSeries([c.field],dimple.plot.bar),f.filter(c),f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.graph",[]).directive("graph",[function(){return{restrict:"E",replace:!0,scope:{data:"="},require:["graph"],transclude:!0,link:function(a,b,c,d){{var e=d[0];e.getChart()}},compile:function(){return{post:function(a,b,c,d,e){var f=d[0];f._createChart(),a.dataReady=!1,a.filters=[];var g,h=f.getChart();g=c.transition?c.transition:750,a.$watch("data",function(b){b&&(a.dataReady=!0,f.setData(),h.draw(g))}),e(a,function(a){b.append(a)})}}},controller:["$scope","$element","$attrs",function(a,b,c){var d,e=(1e9*Math.random()).toString(36).replace(".","_");b.append('
    '),this._createChart=function(){var b=dimple.newSvg("#dng-"+e,c.width,c.height),f=a.data;d=new dimple.chart(b,f);var g="false"===c.autoStyle?!0:!1;d.noFormats=g},this.getChart=function(){return d},this.setData=function(){d.data=a.data},this.draw=function(){d.draw()},this.getID=function(){return e},this.filter=function(b){if(void 0!==b.value&&a.filters.push(b.value),a.filters.length&&(d.data=dimple.filterData(a.data,b.field,a.filters)),void 0!==b.filter){console.log("i see a filter");var c=b.filter.split(":"),e=c[0],f=[c[1]];d.data=dimple.filterData(a.data,e,f)}}}]}}]),angular.module("angular-dimple.legend",[]).directive("legend",[function(){return{restrict:"E",replace:!0,require:["legend","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){var a=c.left?c.left:"10%",b=c.top?c.top:"4%",d=c.height?c.height:"10%",e=c.width?c.width:"90%",f=c.position?c.position:"left";g.addLegend(a,b,e,d,f)}var f=d[1],g=f.getChart();a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.line",[]).directive("line",[function(){return{restrict:"E",replace:!0,require:["line","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){line=g.addSeries([c.field],dimple.plot.line),f.filter(c),line.lineMarkers=!0,f.draw()}var f=d[1],g=f.getChart();a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.r",[]).directive("r",[function(){return{restrict:"E",replace:!0,require:["r","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){r=g.addMeasureAxis("p",c.field),c.title&&"null"!==c.title?r.title=c.title:"null"==c.title&&(r.title=null)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.ring",[]).directive("ring",[function(){return{restrict:"E",replace:!0,require:["ring","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){var a;ring=g.addSeries([c.field],dimple.plot.pie),c.thickness&&!c.diameter?(a=100-c.thickness+"%",ring.innerRadius=a):c.thickness&&c.diameter?(a=c.diameter-c.thickness+"%",ring.innerRadius=a):ring.innerRadius="50%",c.diameter&&(ring.outerRadius=c.diameter+"%"),f.filter(c),f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.scatter-plot",[]).directive("scatterPlot",[function(){return{restrict:"E",replace:!0,require:["scatterPlot","^graph"],controller:[function(){}],link:function(a,b,c,d){function e(){var a=[];c.series&&a.push(c.series),a.push(c.field),(c.label||""===c.label)&&a.push(c.label),scatterPlot=g.addSeries(a,dimple.plot.bubble),scatterPlot.aggregate=dimple.aggregateMethod.avg,f.filter(c),f.draw()}var f=d[1],g=f.getChart();a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.stacked-area",[]).directive("stackedArea",[function(){return{restrict:"E",replace:!0,require:["stackedArea","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){area=c.series?g.addSeries([c.series],dimple.plot.area):g.addSeries([c.field],dimple.plot.area),f.filter(c),area.lineMarkers=!1,f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.stacked-bar",[]).directive("stackedBar",[function(){return{restrict:"E",replace:!0,require:["stackedBar","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){bar=c.series?g.addSeries([c.series],dimple.plot.bar):g.addSeries([c.field],dimple.plot.bar),f.filter(c),f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.x",[]).directive("x",[function(){return{restrict:"E",replace:!0,require:["x","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){c.groupBy?(x="Measure"==c.type?g.addMeasureAxis("x",[c.groupBy,c.field]):"Percent"==c.type?g.addPctAxis("x",c.field):g.addCategoryAxis("x",[c.groupBy,c.field]),c.orderBy&&x.addGroupOrderRule(c.orderBy)):(x="Measure"==c.type?g.addMeasureAxis("x",c.field):"Percent"==c.type?g.addPctAxis("x",c.field):g.addCategoryAxis("x",c.field),c.orderBy&&x.addOrderRule(c.orderBy)),c.title&&"null"!==c.title?x.title=c.title:"null"==c.title&&(x.title=null)}var f=d[1],g=f.getChart();a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.y",[]).directive("y",[function(){return{restrict:"E",replace:!0,require:["y","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){c.groupBy?(y="Category"==c.type?g.addCategoryAxis("y",c.field):"Percent"==c.type?g.addPctAxis("y",c.field):g.addMeasureAxis("y",c.field),c.orderBy&&y.addGroupOrderRule(c.orderBy)):(y="Category"==c.type?g.addCategoryAxis("y",c.field):"Percent"==c.type?g.addPctAxis("y",c.field):g.addMeasureAxis("y",c.field),c.orderBy&&y.addOrderRule(c.orderBy)),c.title&&"null"!==c.title?y.title=c.title:"null"==c.title&&(y.title=null)}var f=d[1],g=f.getChart();a.$watch("dataReady",function(a){a===!0&&e()})}}}]);
\ No newline at end of file
+angular.module("angular-dimple",["angular-dimple.graph","angular-dimple.legend","angular-dimple.x","angular-dimple.y","angular-dimple.r","angular-dimple.line","angular-dimple.bar","angular-dimple.stacked-bar","angular-dimple.area","angular-dimple.stacked-area","angular-dimple.scatter-plot","angular-dimple.ring"]).constant("MODULE_VERSION","0.0.1").value("defaults",{foo:"bar"}),angular.module("angular-dimple.area",[]).directive("area",[function(){return{restrict:"E",replace:!0,require:["area","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){if(c.value)area=g.addSeries([c.field],dimple.plot.area),core.filter(area,a.data,c.field,c.value,c.filter),area.lineMarkers=!0;else{var b=dimple.getUniqueValues(a.data,c.field);angular.forEach(b,function(){area=g.addSeries([c.field],dimple.plot.area),f.filter(c),area.lineMarkers=!0})}f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.bar",[]).directive("bar",[function(){return{restrict:"E",replace:!0,require:["bar","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){bar=g.addSeries([c.field],dimple.plot.bar),f.filter(c),f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.graph",[]).directive("graph",[function(){return{restrict:"E",replace:!0,scope:{data:"="},require:["graph"],transclude:!0,link:function(a,b,c,d,e){var f=d[0];f._createChart(),a.dataReady=!1,a.filters=[];var g,h=f.getChart();g=c.transition?c.transition:750,a.$watch("data",function(b){b&&(a.dataReady=!0,f.setData(),h.draw(g))}),e(a,function(a){b.append(a)})},controller:["$scope","$element","$attrs",function(a,b,c){var d;this._createChart=function(){var a=document.createElementNS("http://www.w3.org/2000/svg","svg");a.setAttribute("width",c.width),a.setAttribute("height",c.height),b.append(a),d=new dimple.chart(d3.select(a));var e="false"===c.autoStyle?!0:!1;d.noFormats=e},this.getChart=function(){return d},this.setData=function(){d.data=a.data},this.draw=function(){d.draw()},this.getID=function(){return id},this.filter=function(b){if(void 0!==b.value&&a.filters.push(b.value),a.filters.length&&(d.data=dimple.filterData(a.data,b.field,a.filters)),void 0!==b.filter){console.log("i see a filter");var c=b.filter.split(":"),e=c[0],f=[c[1]];d.data=dimple.filterData(a.data,e,f)}}}]}}]),angular.module("angular-dimple.legend",[]).directive("legend",[function(){return{restrict:"E",replace:!0,require:["legend","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){var a=c.left?c.left:"10%",b=c.top?c.top:"4%",d=c.height?c.height:"10%",e=c.width?c.width:"90%",f=c.position?c.position:"left";g.addLegend(a,b,e,d,f)}var f=d[1],g=f.getChart();a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.line",[]).directive("line",[function(){return{restrict:"E",replace:!0,require:["line","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){line=g.addSeries([c.field],dimple.plot.line),f.filter(c),line.lineMarkers=!0,f.draw()}var f=d[1],g=f.getChart();a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.r",[]).directive("r",[function(){return{restrict:"E",replace:!0,require:["r","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){r=g.addMeasureAxis("p",c.field),c.title&&"null"!==c.title?r.title=c.title:"null"==c.title&&(r.title=null)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.ring",[]).directive("ring",[function(){return{restrict:"E",replace:!0,require:["ring","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){var a;ring=g.addSeries([c.field],dimple.plot.pie),c.thickness&&!c.diameter?(a=100-c.thickness+"%",ring.innerRadius=a):c.thickness&&c.diameter?(a=c.diameter-c.thickness+"%",ring.innerRadius=a):ring.innerRadius="50%",c.diameter&&(ring.outerRadius=c.diameter+"%"),f.filter(c),f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.scatter-plot",[]).directive("scatterPlot",[function(){return{restrict:"E",replace:!0,require:["scatterPlot","^graph"],controller:[function(){}],link:function(a,b,c,d){function e(){var a=[];c.series&&a.push(c.series),a.push(c.field),(c.label||""===c.label)&&a.push(c.label),scatterPlot=g.addSeries(a,dimple.plot.bubble),scatterPlot.aggregate=dimple.aggregateMethod.avg,f.filter(c),f.draw()}var f=d[1],g=f.getChart();a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.stacked-area",[]).directive("stackedArea",[function(){return{restrict:"E",replace:!0,require:["stackedArea","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){area=c.series?g.addSeries([c.series],dimple.plot.area):g.addSeries([c.field],dimple.plot.area),f.filter(c),area.lineMarkers=!1,f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.stacked-bar",[]).directive("stackedBar",[function(){return{restrict:"E",replace:!0,require:["stackedBar","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){bar=c.series?g.addSeries([c.series],dimple.plot.bar):g.addSeries([c.field],dimple.plot.bar),f.filter(c),f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.x",[]).directive("x",[function(){return{restrict:"E",replace:!0,require:["x","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){c.groupBy?(x="Measure"==c.type?g.addMeasureAxis("x",[c.groupBy,c.field]):"Percent"==c.type?g.addPctAxis("x",c.field):g.addCategoryAxis("x",[c.groupBy,c.field]),c.orderBy&&x.addGroupOrderRule(c.orderBy)):(x="Measure"==c.type?g.addMeasureAxis("x",c.field):"Percent"==c.type?g.addPctAxis("x",c.field):g.addCategoryAxis("x",c.field),c.orderBy&&x.addOrderRule(c.orderBy)),c.title&&"null"!==c.title?x.title=c.title:"null"==c.title&&(x.title=null)}var f=d[1],g=f.getChart();a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.y",[]).directive("y",[function(){return{restrict:"E",replace:!0,require:["y","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){c.groupBy?(y="Category"==c.type?g.addCategoryAxis("y",c.field):"Percent"==c.type?g.addPctAxis("y",c.field):g.addMeasureAxis("y",c.field),c.orderBy&&y.addGroupOrderRule(c.orderBy)):(y="Category"==c.type?g.addCategoryAxis("y",c.field):"Percent"==c.type?g.addPctAxis("y",c.field):g.addMeasureAxis("y",c.field),c.orderBy&&y.addOrderRule(c.orderBy)),c.title&&"null"!==c.title?y.title=c.title:"null"==c.title&&(y.title=null)}var f=d[1],g=f.getChart();a.$watch("dataReady",function(a){a===!0&&e()})}}}]);
\ No newline at end of file
diff --git a/source/graph.js b/source/graph.js
index d707bcf..279ea4f 100644
--- a/source/graph.js
+++ b/source/graph.js
@@ -9,50 +9,48 @@ angular.module('angular-dimple.graph', [])
     },
     require: ['graph'],
     transclude: true,
-    link: function($scope, $element, $attrs, $controllers) {
-      var graphController = $controllers[0];
-      var chart = graphController.getChart();
-    },
-    compile: function($element, $attrs) {
-      return {
-        post: function postLink(scope, element, attrs, controllers, transclude) {
-          var graphController = controllers[0];
-          graphController._createChart();
-          scope.dataReady = false;
-          scope.filters = [];
-
-          var chart = graphController.getChart();
-          var transition;
-          if (attrs.transition) {
-            transition = attrs.transition;
-          } else {
-            transition = 750;
-          }
+    link: function (scope, element, attrs, controllers, transclude) {
+      var graphController = controllers[0];
+      graphController._createChart();
+      scope.dataReady = false;
+      scope.filters = [];
 
-          scope.$watch('data', function(newValue, oldValue) {
-            if (newValue) {
-              scope.dataReady = true;
-              graphController.setData();
-              chart.draw(transition);
-            }
-          });
+      var chart = graphController.getChart();
+      var transition;
+      if (attrs.transition) {
+        transition = attrs.transition;
+      } else {
+        transition = 750;
+      }
 
-          transclude(scope, function(clone){
-            element.append(clone);
-          });
+      scope.$watch('data', function(newValue, oldValue) {
+        if (newValue) {
+          scope.dataReady = true;
+          graphController.setData();
+          chart.draw(transition);
         }
-      };
+      });
+
+      transclude(scope, function(clone){
+        element.append(clone);
+      });
     },
     controller: ['$scope', '$element', '$attrs', function($scope, $element, $attrs) {
       var chart;
 
-      var id = (Math.random() * 1e9).toString(36).replace(".", "_");
-      $element.append('
    ');
-
       this._createChart = function () {
-        var svg = dimple.newSvg('#dng-'+ id +'', $attrs.width, $attrs.height);
-        var data = $scope.data;
-        chart = new dimple.chart(svg, data);
+        // create an svg element
+        var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        svg.setAttribute('width', $attrs.width);
+        svg.setAttribute('height', $attrs.height);
+
+        // end the svg to this 
+        $element.append(svg);
+
+        // create the dimple chart using the d3 selection of our  element
+        chart = new dimple.chart(d3.select(svg));
+
+        // auto style
         var autoStyle = $attrs.autoStyle === 'false' ? true : false;
         chart.noFormats = autoStyle;
       };

From fb67f74770ac6b1a3ce92e9c3c17ac8dbddeda84 Mon Sep 17 00:00:00 2001
From: Paul C Pederson 
Date: Wed, 17 Sep 2014 14:17:22 -0700
Subject: [PATCH 26/29] update changelog

---
 CHANGELOG.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0aa4897..7592b6a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Angular-Dimple Changelog
 
+# v1.1.0
+* add functionality inside ng-repeat
+* graphs update live when scope changes
+
 # v1.0.2
 * add bower dependencies
 

From e608b534da5e6a01e764fb597e3f01b22f8c4f0c Mon Sep 17 00:00:00 2001
From: Paul C Pederson 
Date: Wed, 17 Sep 2014 14:17:29 -0700
Subject: [PATCH 27/29] new build of js

---
 dist/angular-dimple.js        | 2 +-
 site/js/lib/angular-dimple.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/dist/angular-dimple.js b/dist/angular-dimple.js
index 024f5f6..f4e6200 100644
--- a/dist/angular-dimple.js
+++ b/dist/angular-dimple.js
@@ -1,4 +1,4 @@
-/*! Angular-Dimple - 1.0.2 - 2014-08-29
+/*! Angular-Dimple - 1.0.2 - 2014-09-17
 *   https://github.com/esripdx/angular-dimple
 *   Licensed ISC */
 angular.module('angular-dimple', [
diff --git a/site/js/lib/angular-dimple.js b/site/js/lib/angular-dimple.js
index 024f5f6..f4e6200 100644
--- a/site/js/lib/angular-dimple.js
+++ b/site/js/lib/angular-dimple.js
@@ -1,4 +1,4 @@
-/*! Angular-Dimple - 1.0.2 - 2014-08-29
+/*! Angular-Dimple - 1.0.2 - 2014-09-17
 *   https://github.com/esripdx/angular-dimple
 *   Licensed ISC */
 angular.module('angular-dimple', [

From d59b7cceed7de5bbe9d84e416b53b8aba9ec7180 Mon Sep 17 00:00:00 2001
From: Paul C Pederson 
Date: Wed, 17 Sep 2014 14:41:16 -0700
Subject: [PATCH 28/29] fix banner graphic, example of ng-repeat

---
 documentation/partials/line-graph.md        | 20 ++++++++++++++++++++
 site/css/home.css                           |  2 +-
 site/documentation/partials/line-graph.html | 17 +++++++++++++++++
 site/index.html                             | 13 ++++++++-----
 site/js/controllers.js                      |  1 +
 site/scss/home.scss                         |  2 +-
 6 files changed, 48 insertions(+), 7 deletions(-)

diff --git a/documentation/partials/line-graph.md b/documentation/partials/line-graph.md
index 3189c05..ec3e847 100644
--- a/documentation/partials/line-graph.md
+++ b/documentation/partials/line-graph.md
@@ -46,4 +46,24 @@
   
   
 
+```
+
+## Inside ng-repeat
+
    
+  
+    
+    
+    
+    
+  
+
    
+
+```html
+
+
+  
+  
+  
+  
+
 ```
\ No newline at end of file
diff --git a/site/css/home.css b/site/css/home.css
index 03a54c1..0935b24 100644
--- a/site/css/home.css
+++ b/site/css/home.css
@@ -42,7 +42,7 @@ code {
   font-weight: 200;
 }
 /* line 39, ../scss/home.scss */
-.banner .dimple-graph {
+.banner .banner-graphic {
   position: absolute;
   top: -260px;
   bottom: 0;
diff --git a/site/documentation/partials/line-graph.html b/site/documentation/partials/line-graph.html
index 3c5d521..c8f190d 100644
--- a/site/documentation/partials/line-graph.html
+++ b/site/documentation/partials/line-graph.html
@@ -41,3 +41,20 @@ 
    
   <line field="Owner" value="Black Mesa"></line>
   <line field="Owner" value="Tyrell Corp"></line>
 </graph>
    
+
    Inside ng-repeat
    
+
    
+  
+    
+    
+    
+    
+  
+
    
+
+
    <!-- Default -->
+<graph data="graphData" width="100%" height="600px">
+  <x field="Month" order-by="Date"></x>
+  <y field="Unit Sales"></y>
+  <legend></legend>
+  <line field="Owner"></line>
+</graph>
    
diff --git a/site/index.html b/site/index.html
index f3d602b..d43b30d 100644
--- a/site/index.html
+++ b/site/index.html
@@ -70,11 +70,14 @@
         
    
       
 
-      
-        
-        
-        
-      
+      
+

    Required. Field to plot as a ring.
    widththickness Accepts a number. Width of ring, as percent of circle size.
    radiusdiameter Accepts a number. Size of ring, as percent of circle size.