diff --git a/Readme.md b/Readme.md
index 8237863..82d8b60 100644
--- a/Readme.md
+++ b/Readme.md
@@ -1,7 +1,7 @@
-Angles.js
+Angles2
=========
-An angular.js wrapper for the Chart.js library.
+An angular.js wrapper for the Chart.js v2 library.
[Chart.js Documentation](http://www.chartjs.org/docs/)
@@ -14,8 +14,8 @@ Basic Usage
To Use, make sure to include the following .js files above your app:
```html
-
-
+
+
```
@@ -51,30 +51,6 @@ the legend attribute auto generate a legend after canvas container
```
-The template for this legend is a legendTemplate in the chart options
-
-```javascript
-$scope.chart = {
- labels : ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"],
- datasets : [
- {
- fillColor : "rgba(151,187,205,0)",
- strokeColor : "#e67e22",
- pointColor : "rgba(151,187,205,0)",
- pointStrokeColor : "#e67e22",
- data : [4, 3, 5, 4, 6]
- },
- {
- fillColor : "rgba(151,187,205,0)",
- strokeColor : "#f1c40f",
- pointColor : "rgba(151,187,205,0)",
- pointStrokeColor : "#f1c40f",
- data : [8, 3, 2, 5, 4]
- }
- ],
-};
-```
-
That's it. You can change the values of the chart just as you would with any other angular model.
Directives
@@ -143,7 +119,8 @@ OR
Options and Data
----------------
-You can provide options and data to all charts via the options and data attributes on the canvas elements.
+You can provide options and data to all charts via the options and data attributes on the canvas elements.
+#### Note: this version works with Chartjs v2, The following code my not works in cubicwork/angles.
```html
diff --git a/angles.js b/angles.js
index 34e54eb..cbcf99b 100644
--- a/angles.js
+++ b/angles.js
@@ -9,12 +9,12 @@ angles.chart = function (type) {
id: "@",
width: "=",
height: "=",
+ heightwithlabel: "=",
resize: "=",
chart: "@",
segments: "@",
responsive: "=",
- tooltip: "=",
- legend: "="
+ tooltip: "="
},
link: function ($scope, $elem) {
var ctx = $elem[0].getContext("2d");
@@ -29,10 +29,33 @@ angles.chart = function (type) {
autosize = true;
}
- if($scope.height <= 0){
+ if ( $scope.heightwithlabel) {
+ var lineWidth = 0;
+ var lines = 1;
+ var maxWidth = $elem.parent().width();
+ for( var il = 0; il < $scope.data.labels.length ; il ++) {
+ var charWidth = 0;
+ for( var ic = 0; ic < $scope.data.labels[il].length ; ic ++) {
+ if( $scope.data.labels[il].charCodeAt(ic) < 255) {
+ charWidth += 6;
+ } else {
+ charWidth += 12;
+ }
+ }
+ var itemWidth = 27 + charWidth;
+ lineWidth += itemWidth;
+ if( lineWidth <= maxWidth ) {
+ continue;
+ } else {
+ lines ++;
+ lineWidth = itemWidth;
+ }
+ }
+ ctx.canvas.height = ( maxWidth + 23 * lines + 5 ) * ( $scope.width / maxWidth );
+ } else if($scope.height <= 0) {
$elem.height($elem.parent().height());
- ctx.canvas.height = ctx.canvas.width / 2;
- } else {
+ ctx.canvas.height = ctx.canvas.width;
+ } else {
ctx.canvas.height = $scope.height || ctx.canvas.height;
autosize = true;
}
@@ -40,11 +63,11 @@ angles.chart = function (type) {
$scope.$watch("data", function (newVal, oldVal) {
if(chartCreated)
- chartCreated.destroy();
+ chart.destroy();
var options = $scope.options || {};
- // if data not defined, exit
+ // if data not defined, exit
if (!newVal) {
return;
}
@@ -52,7 +75,6 @@ angles.chart = function (type) {
if(autosize){
$scope.size();
- chart = new Chart(ctx);
};
if($scope.responsive || $scope.resize)
@@ -61,29 +83,13 @@ angles.chart = function (type) {
if($scope.responsive !== undefined)
options.responsive = $scope.responsive;
- chartCreated = chart[type]($scope.data, options);
- chartCreated.update();
- if($scope.legend)
- angular.element($elem[0]).parent().after( chartCreated.generateLegend() );
- }, true);
-
- $scope.$watch("tooltip", function (newVal, oldVal) {
- if (chartCreated)
- chartCreated.draw();
- if(newVal===undefined || !chartCreated.segments)
- return;
- if(!isFinite(newVal) || newVal >= chartCreated.segments.length || newVal < 0)
- return;
- var activeSegment = chartCreated.segments[newVal];
- activeSegment.save();
- activeSegment.fillColor = activeSegment.highlightColor;
- chartCreated.showTooltip([activeSegment]);
- activeSegment.restore();
- }, true);
+ $scope.size();
+ chart = new Chart(ctx, { type:type, data:$scope.data, options:$scope.options});
+ }, false);
$scope.size();
- var chart = new Chart(ctx);
- var chartCreated;
+ var chart = new Chart(ctx, { type:type, data:$scope.data, options:$scope.options});
+ var chartCreated = true;
}
}
}
@@ -91,10 +97,10 @@ angles.chart = function (type) {
/* Aliases for various chart types */
angles.directive("chart", function () { return angles.chart(); });
-angles.directive("linechart", function () { return angles.chart("Line"); });
-angles.directive("barchart", function () { return angles.chart("Bar"); });
-angles.directive("radarchart", function () { return angles.chart("Radar"); });
-angles.directive("polarchart", function () { return angles.chart("PolarArea"); });
-angles.directive("piechart", function () { return angles.chart("Pie"); });
-angles.directive("doughnutchart", function () { return angles.chart("Doughnut"); });
-angles.directive("donutchart", function () { return angles.chart("Doughnut"); });
+angles.directive("linechart", function () { return angles.chart("line"); });
+angles.directive("barchart", function () { return angles.chart("bar"); });
+angles.directive("horizontalbarchart", function () { return angles.chart("horizontalBar"); });
+angles.directive("radarchart", function () { return angles.chart("radar"); });
+angles.directive("polarchart", function () { return angles.chart("polarArea"); });
+angles.directive("piechart", function () { return angles.chart("pie"); });
+angles.directive("doughnutchart", function () { return angles.chart("doughnut"); });
diff --git a/bower.json b/bower.json
index a3640e8..f781087 100644
--- a/bower.json
+++ b/bower.json
@@ -1,9 +1,10 @@
{
- "name": "angles",
- "version": "1.0.1-beta",
+ "name": "angles2",
+ "version": "2.0.0-alpha",
"authors": [
"Lindsay Silver",
- "Jesus Torres"
+ "Jesus Torres",
+ "Carney Wu"
],
"main": "angles.js",
"ignore": [
@@ -17,6 +18,6 @@
"libs/Chart.js"
],
"dependencies": {
- "chartjs": "1.0.1"
+ "chartjs": "2.1.6"
}
}