Skip to content

Commit

Permalink
Dataset override chartjs 2.0 (#418)
Browse files Browse the repository at this point in the history 
* add attribute `chart-dataset-overload`
* complete support for `dataset-override`
* rename `datasetOverload` to `datasetOverride`
* use `datasetOverride` for pie and doughnut charts as well
* add unit and integration tests
* add examples
* fix #370, #336, #391
* remove `y-axis` attribute as it can now be implemented using the `dataset-override` attribute
* compile assets and minor fixes for jshint
  • Loading branch information
@jtblin
jtblin authored Jun 19, 2016
1 parent d58886f commit 9eef198
Show file tree
Hide file tree
Showing 17 changed files with 448 additions and 117 deletions.
14 changes: 11 additions & 3 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@

Beautiful, reactive, responsive charts for Angular.JS using [Chart.js](http://www.chartjs.org/).

[Demo](http://jtblin.github.io/angular-chart.js/)
Have a look at the [demo site](http://jtblin.github.io/angular-chart.js/) to see examples with detailed markup,
script and options.

# Installation

Expand All @@ -34,6 +35,10 @@ there are numerous breaking changes in this version notably:

//cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.min.js

### bower

bower install --save angular-chart.js

### manually

or copy the files from `dist/`.
Expand All @@ -55,7 +60,7 @@ adding the dependencies for Angular and Chart.js first:

# Utilisation

There are 6 types of charts so 6 directives: `chart-line`, `chart-bar`, `chart-horizontal-bar`, `chart-radar`,
There are 7 types of charts so 7 directives: `chart-line`, `chart-bar`, `chart-horizontal-bar`, `chart-radar`,
`chart-pie`, `chart-polar-area`, `chart-doughnut`.

- `chart-data`: series data
Expand All @@ -66,10 +71,13 @@ There are 6 types of charts so 6 directives: `chart-line`, `chart-bar`, `chart-h
- `chart-get-color`: function that returns a color in case there are not enough (will use random colors if not specified)
- `chart-click`: onclick event handler
- `chart-hover`: onmousemove event handler
- `chart-dataset-override`: override individual datasets to allow per dataset configuration e.g. y-axis, mixed type chart

There is another directive `chart-base` that takes an extra attribute `chart-type` to define the type
dynamically, see [stacked bar example](http://jtblin.github.io/angular-chart.js/examples/stacked-bars.html).

You can create mixed type chart using the `chart-dataset-override`, see [example](examples/dataset-override.html).

# Example

## Markup
Expand All @@ -92,7 +100,7 @@ angular.module("app", ["chart.js"])
});
// Configure all line charts
ChartJsProvider.setOptions('line', {
datasetFill: false
showLines: false
});
}])
.controller("LineCtrl", ['$scope', '$timeout', function ($scope, $timeout) {
Expand Down
28 changes: 19 additions & 9 deletions angular-chart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@
chartColors: '=?',
chartClick: '=?',
chartHover: '=?',
chartYAxes: '=?'
chartDatasetOverride: '=?'
},
link: function (scope, elem/*, attrs */) {
var chart;
Expand All @@ -129,6 +129,7 @@
scope.$watch('chartLabels', resetChart, true);
scope.$watch('chartOptions', resetChart, true);
scope.$watch('chartColors', resetChart, true);
scope.$watch('chartDatasetOverride', resetChart, true);

scope.$watch('chartType', function (newVal, oldVal) {
if (isEmpty(newVal)) return;
Expand Down Expand Up @@ -162,13 +163,13 @@
createChart(type);
}, 50, false);
}
if (! scope.chartData || ! scope.chartData.length) return;
if (! hasData(scope)) return;
scope.chartGetColor = typeof scope.chartGetColor === 'function' ? scope.chartGetColor : getRandomColor;
var colors = getColors(type, scope);
var cvs = elem[0], ctx = cvs.getContext('2d');
var data = Array.isArray(scope.chartData[0]) ?
getDataSets(scope.chartLabels, scope.chartData, scope.chartSeries || [], colors, scope.chartYAxes) :
getData(scope.chartLabels, scope.chartData, colors);
getDataSets(scope.chartLabels, scope.chartData, scope.chartSeries || [], colors, scope.chartDatasetOverride) :
getData(scope.chartLabels, scope.chartData, colors, scope.chartDatasetOverride);

var options = angular.extend({}, ChartJs.getOptions(type), scope.chartOptions);
// Destroy old chart if it exists to avoid ghost charts issue
Expand Down Expand Up @@ -274,24 +275,29 @@
return [r, g, b];
}

function getDataSets (labels, data, series, colors, yaxis) {
function hasData (scope) {
return scope.chartData && scope.chartData.length &&
scope.chartLabels && scope.chartLabels.length;
}

function getDataSets (labels, data, series, colors, datasetOverride) {
return {
labels: labels,
datasets: data.map(function (item, i) {
var dataset = angular.extend({}, colors[i], {
label: series[i],
data: item
});
if (yaxis) {
dataset.yAxisID = yaxis[i];
if (datasetOverride && datasetOverride.length >= i) {
angular.merge(dataset, datasetOverride[i]);
}
return dataset;
})
};
}

function getData (labels, data, colors) {
return {
function getData (labels, data, colors, datasetOverride) {
var dataset = {
labels: labels,
datasets: [{
data: data,
Expand All @@ -303,6 +309,10 @@
})
}]
};
if (datasetOverride) {
angular.merge(dataset.datasets[0], datasetOverride);
}
return dataset;
}

function updateChart (chart, values, scope) {
Expand Down
28 changes: 19 additions & 9 deletions dist/angular-chart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@
chartColors: '=?',
chartClick: '=?',
chartHover: '=?',
chartYAxes: '=?'
chartDatasetOverride: '=?'
},
link: function (scope, elem/*, attrs */) {
var chart;
Expand All @@ -129,6 +129,7 @@
scope.$watch('chartLabels', resetChart, true);
scope.$watch('chartOptions', resetChart, true);
scope.$watch('chartColors', resetChart, true);
scope.$watch('chartDatasetOverride', resetChart, true);

scope.$watch('chartType', function (newVal, oldVal) {
if (isEmpty(newVal)) return;
Expand Down Expand Up @@ -162,13 +163,13 @@
createChart(type);
}, 50, false);
}
if (! scope.chartData || ! scope.chartData.length) return;
if (! hasData(scope)) return;
scope.chartGetColor = typeof scope.chartGetColor === 'function' ? scope.chartGetColor : getRandomColor;
var colors = getColors(type, scope);
var cvs = elem[0], ctx = cvs.getContext('2d');
var data = Array.isArray(scope.chartData[0]) ?
getDataSets(scope.chartLabels, scope.chartData, scope.chartSeries || [], colors, scope.chartYAxes) :
getData(scope.chartLabels, scope.chartData, colors);
getDataSets(scope.chartLabels, scope.chartData, scope.chartSeries || [], colors, scope.chartDatasetOverride) :
getData(scope.chartLabels, scope.chartData, colors, scope.chartDatasetOverride);

var options = angular.extend({}, ChartJs.getOptions(type), scope.chartOptions);
// Destroy old chart if it exists to avoid ghost charts issue
Expand Down Expand Up @@ -274,24 +275,29 @@
return [r, g, b];
}

function getDataSets (labels, data, series, colors, yaxis) {
function hasData (scope) {
return scope.chartData && scope.chartData.length &&
scope.chartLabels && scope.chartLabels.length;
}

function getDataSets (labels, data, series, colors, datasetOverride) {
return {
labels: labels,
datasets: data.map(function (item, i) {
var dataset = angular.extend({}, colors[i], {
label: series[i],
data: item
});
if (yaxis) {
dataset.yAxisID = yaxis[i];
if (datasetOverride && datasetOverride.length >= i) {
angular.merge(dataset, datasetOverride[i]);
}
return dataset;
})
};
}

function getData (labels, data, colors) {
return {
function getData (labels, data, colors, datasetOverride) {
var dataset = {
labels: labels,
datasets: [{
data: data,
Expand All @@ -303,6 +309,10 @@
})
}]
};
if (datasetOverride) {
angular.merge(dataset.datasets[0], datasetOverride);
}
return dataset;
}

function updateChart (chart, values, scope) {
Expand Down
2 changes: 1 addition & 1 deletion dist/angular-chart.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion dist/angular-chart.min.js.map
View file

Large diffs are not rendered by default.

30 changes: 27 additions & 3 deletions examples/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@
colors: ['#97BBCD', '#DCDCDC', '#F7464A', '#46BFBD', '#FDB45C', '#949FB1', '#4D5360']
});
// Configure all doughnut charts
ChartJsProvider.setOptions('Doughnut', {
animateScale: true
ChartJsProvider.setOptions('doughnut', {
cutoutPercentage: 60
});
});

Expand All @@ -36,7 +36,7 @@
console.log('No point');
}
};
$scope.multiAxis = ['y-axis-1', 'y-axis-2'];
$scope.datasetOverride = [{ yAxisID: 'y-axis-1' }, { yAxisID: 'y-axis-2' }];

$scope.options = {
scales: {
Expand Down Expand Up @@ -143,6 +143,30 @@
];
});

app.controller('MixedChartCtrl', ['$scope', function ($scope) {
$scope.colors = ['#45b7cd', '#ff6384', '#ff8e72'];

$scope.labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
$scope.data = [
[65, -59, 80, 81, -56, 55, -40],
[28, 48, -40, 19, 86, 27, 90]
];
$scope.datasetOverride = [
{
label: 'Bar chart',
borderWidth: 1,
type: 'bar'
},
{
label: 'Line chart',
borderWidth: 3,
hoverBackgroundColor: 'rgba(255,99,132,0.4)',
hoverBorderColor: 'rgba(255,99,132,1)',
type: 'line'
}
];
}]);

app.controller('DataTablesCtrl', function ($scope) {
$scope.labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
$scope.data = [
Expand Down
Loading

0 comments on commit 9eef198

Please sign in to comment.