Skip to content

Commit 9eef198

Browse files
jtblinjtblin
authored
Dataset override chartjs 2.0 (#418)
* 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
1 parent d58886f commit 9eef198

17 files changed

Lines changed: 448 additions & 117 deletions

‎README.md‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@
99

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

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

1415
# Installation
1516

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

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

38+
### bower
39+
40+
bower install --save angular-chart.js
41+
3742
### manually
3843

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

5661
# Utilisation
5762

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

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

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

79+
You can create mixed type chart using the `chart-dataset-override`, see [example](examples/dataset-override.html).
80+
7381
# Example
7482

7583
## Markup
@@ -92,7 +100,7 @@ angular.module("app", ["chart.js"])
92100
});
93101
// Configure all line charts
94102
ChartJsProvider.setOptions('line', {
95-
datasetFill: false
103+
showLines: false
96104
});
97105
}])
98106
.controller("LineCtrl", ['$scope', '$timeout', function ($scope, $timeout) {

‎angular-chart.js‎

Lines changed: 19 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,7 @@
102102
chartColors: '=?',
103103
chartClick: '=?',
104104
chartHover: '=?',
105-
chartYAxes: '=?'
105+
chartDatasetOverride: '=?'
106106
},
107107
link: function (scope, elem/*, attrs */) {
108108
var chart;
@@ -129,6 +129,7 @@
129129
scope.$watch('chartLabels', resetChart, true);
130130
scope.$watch('chartOptions', resetChart, true);
131131
scope.$watch('chartColors', resetChart, true);
132+
scope.$watch('chartDatasetOverride', resetChart, true);
132133

133134
scope.$watch('chartType', function (newVal, oldVal) {
134135
if (isEmpty(newVal)) return;
@@ -162,13 +163,13 @@
162163
createChart(type);
163164
}, 50, false);
164165
}
165-
if (! scope.chartData || ! scope.chartData.length) return;
166+
if (! hasData(scope)) return;
166167
scope.chartGetColor = typeof scope.chartGetColor === 'function' ? scope.chartGetColor : getRandomColor;
167168
var colors = getColors(type, scope);
168169
var cvs = elem[0], ctx = cvs.getContext('2d');
169170
var data = Array.isArray(scope.chartData[0]) ?
170-
getDataSets(scope.chartLabels, scope.chartData, scope.chartSeries || [], colors, scope.chartYAxes) :
171-
getData(scope.chartLabels, scope.chartData, colors);
171+
getDataSets(scope.chartLabels, scope.chartData, scope.chartSeries || [], colors, scope.chartDatasetOverride) :
172+
getData(scope.chartLabels, scope.chartData, colors, scope.chartDatasetOverride);
172173

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

277-
function getDataSets (labels, data, series, colors, yaxis) {
278+
function hasData (scope) {
279+
return scope.chartData && scope.chartData.length &&
280+
scope.chartLabels && scope.chartLabels.length;
281+
}
282+
283+
function getDataSets (labels, data, series, colors, datasetOverride) {
278284
return {
279285
labels: labels,
280286
datasets: data.map(function (item, i) {
281287
var dataset = angular.extend({}, colors[i], {
282288
label: series[i],
283289
data: item
284290
});
285-
if (yaxis) {
286-
dataset.yAxisID = yaxis[i];
291+
if (datasetOverride && datasetOverride.length >= i) {
292+
angular.merge(dataset, datasetOverride[i]);
287293
}
288294
return dataset;
289295
})
290296
};
291297
}
292298

293-
function getData (labels, data, colors) {
294-
return {
299+
function getData (labels, data, colors, datasetOverride) {
300+
var dataset = {
295301
labels: labels,
296302
datasets: [{
297303
data: data,
@@ -303,6 +309,10 @@
303309
})
304310
}]
305311
};
312+
if (datasetOverride) {
313+
angular.merge(dataset.datasets[0], datasetOverride);
314+
}
315+
return dataset;
306316
}
307317

308318
function updateChart (chart, values, scope) {

‎dist/angular-chart.js‎

Lines changed: 19 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,7 @@
102102
chartColors: '=?',
103103
chartClick: '=?',
104104
chartHover: '=?',
105-
chartYAxes: '=?'
105+
chartDatasetOverride: '=?'
106106
},
107107
link: function (scope, elem/*, attrs */) {
108108
var chart;
@@ -129,6 +129,7 @@
129129
scope.$watch('chartLabels', resetChart, true);
130130
scope.$watch('chartOptions', resetChart, true);
131131
scope.$watch('chartColors', resetChart, true);
132+
scope.$watch('chartDatasetOverride', resetChart, true);
132133

133134
scope.$watch('chartType', function (newVal, oldVal) {
134135
if (isEmpty(newVal)) return;
@@ -162,13 +163,13 @@
162163
createChart(type);
163164
}, 50, false);
164165
}
165-
if (! scope.chartData || ! scope.chartData.length) return;
166+
if (! hasData(scope)) return;
166167
scope.chartGetColor = typeof scope.chartGetColor === 'function' ? scope.chartGetColor : getRandomColor;
167168
var colors = getColors(type, scope);
168169
var cvs = elem[0], ctx = cvs.getContext('2d');
169170
var data = Array.isArray(scope.chartData[0]) ?
170-
getDataSets(scope.chartLabels, scope.chartData, scope.chartSeries || [], colors, scope.chartYAxes) :
171-
getData(scope.chartLabels, scope.chartData, colors);
171+
getDataSets(scope.chartLabels, scope.chartData, scope.chartSeries || [], colors, scope.chartDatasetOverride) :
172+
getData(scope.chartLabels, scope.chartData, colors, scope.chartDatasetOverride);
172173

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

277-
function getDataSets (labels, data, series, colors, yaxis) {
278+
function hasData (scope) {
279+
return scope.chartData && scope.chartData.length &&
280+
scope.chartLabels && scope.chartLabels.length;
281+
}
282+
283+
function getDataSets (labels, data, series, colors, datasetOverride) {
278284
return {
279285
labels: labels,
280286
datasets: data.map(function (item, i) {
281287
var dataset = angular.extend({}, colors[i], {
282288
label: series[i],
283289
data: item
284290
});
285-
if (yaxis) {
286-
dataset.yAxisID = yaxis[i];
291+
if (datasetOverride && datasetOverride.length >= i) {
292+
angular.merge(dataset, datasetOverride[i]);
287293
}
288294
return dataset;
289295
})
290296
};
291297
}
292298

293-
function getData (labels, data, colors) {
294-
return {
299+
function getData (labels, data, colors, datasetOverride) {
300+
var dataset = {
295301
labels: labels,
296302
datasets: [{
297303
data: data,
@@ -303,6 +309,10 @@
303309
})
304310
}]
305311
};
312+
if (datasetOverride) {
313+
angular.merge(dataset.datasets[0], datasetOverride);
314+
}
315+
return dataset;
306316
}
307317

308318
function updateChart (chart, values, scope) {

‎dist/angular-chart.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/angular-chart.min.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/app.js‎

Lines changed: 27 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@
99
colors: ['#97BBCD', '#DCDCDC', '#F7464A', '#46BFBD', '#FDB45C', '#949FB1', '#4D5360']
1010
});
1111
// Configure all doughnut charts
12-
ChartJsProvider.setOptions('Doughnut', {
13-
animateScale: true
12+
ChartJsProvider.setOptions('doughnut', {
13+
cutoutPercentage: 60
1414
});
1515
});
1616

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

4141
$scope.options = {
4242
scales: {
@@ -143,6 +143,30 @@
143143
];
144144
});
145145

146+
app.controller('MixedChartCtrl', ['$scope', function ($scope) {
147+
$scope.colors = ['#45b7cd', '#ff6384', '#ff8e72'];
148+
149+
$scope.labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
150+
$scope.data = [
151+
[65, -59, 80, 81, -56, 55, -40],
152+
[28, 48, -40, 19, 86, 27, 90]
153+
];
154+
$scope.datasetOverride = [
155+
{
156+
label: 'Bar chart',
157+
borderWidth: 1,
158+
type: 'bar'
159+
},
160+
{
161+
label: 'Line chart',
162+
borderWidth: 3,
163+
hoverBackgroundColor: 'rgba(255,99,132,0.4)',
164+
hoverBorderColor: 'rgba(255,99,132,1)',
165+
type: 'line'
166+
}
167+
];
168+
}]);
169+
146170
app.controller('DataTablesCtrl', function ($scope) {
147171
$scope.labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
148172
$scope.data = [

0 commit comments

Comments
 (0)