Skip to content

Commit 15ee49a

Browse files
jtblinjtblin
committed
#376 - Horizontal bar chart support
* Originally implemented in #379 by @kriand but in the wrong place * Added example, tests and updated readme
1 parent 6ef96ca commit 15ee49a

10 files changed

Lines changed: 172 additions & 29 deletions

‎README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -55,8 +55,8 @@ adding the dependencies for Angular and Chart.js first:
5555

5656
# Utilisation
5757

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

6161
- `chart-data`: series data
6262
- `chart-labels`: x axis labels (line, bar, radar) or series labels (pie, doughnut, polar area)

‎angular-chart.js‎

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -31,18 +31,19 @@
3131
'#4D5360' // dark grey
3232
];
3333

34-
var usingExcanvas = typeof window.G_vmlCanvasManager === 'object' &&
34+
var useExcanvas = typeof window.G_vmlCanvasManager === 'object' &&
3535
window.G_vmlCanvasManager !== null &&
3636
typeof window.G_vmlCanvasManager.initElement === 'function';
3737

38-
if (usingExcanvas) Chart.defaults.global.animation = false;
38+
if (useExcanvas) Chart.defaults.global.animation = false;
3939

4040
return angular.module('chart.js', [])
4141
.provider('ChartJs', ChartJsProvider)
4242
.factory('ChartJsFactory', ['ChartJs', '$timeout', ChartJsFactory])
4343
.directive('chartBase', ['ChartJsFactory', function (ChartJsFactory) { return new ChartJsFactory(); }])
4444
.directive('chartLine', ['ChartJsFactory', function (ChartJsFactory) { return new ChartJsFactory('line'); }])
4545
.directive('chartBar', ['ChartJsFactory', function (ChartJsFactory) { return new ChartJsFactory('bar'); }])
46+
.directive('chartHorizontalBar', ['ChartJsFactory', function (ChartJsFactory) { return new ChartJsFactory('horizontalBar'); }])
4647
.directive('chartRadar', ['ChartJsFactory', function (ChartJsFactory) { return new ChartJsFactory('radar'); }])
4748
.directive('chartDoughnut', ['ChartJsFactory', function (ChartJsFactory) { return new ChartJsFactory('doughnut'); }])
4849
.directive('chartPie', ['ChartJsFactory', function (ChartJsFactory) { return new ChartJsFactory('pie'); }])
@@ -105,7 +106,7 @@
105106
link: function (scope, elem/*, attrs */) {
106107
var chart;
107108

108-
if (usingExcanvas) window.G_vmlCanvasManager.initElement(elem[0]);
109+
if (useExcanvas) window.G_vmlCanvasManager.initElement(elem[0]);
109110

110111
// Order of setting "watch" matter
111112

@@ -254,12 +255,8 @@
254255
}
255256

256257
function rgba (color, alpha) {
257-
if (usingExcanvas) {
258-
// rgba not supported by IE8
259-
return 'rgb(' + color.join(',') + ')';
260-
} else {
261-
return 'rgba(' + color.concat(alpha).join(',') + ')';
262-
}
258+
// rgba not supported by IE8
259+
return useExcanvas ? 'rgb(' + color.join(',') + ')' : 'rgba(' + color.concat(alpha).join(',') + ')';
263260
}
264261

265262
// Credit: http://stackoverflow.com/a/11508164/1190235

‎examples/charts.html‎

Lines changed: 52 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@ <h1>
9494
<p>
9595
<a class="btn btn-default btn-lg" href="https://github.com/jtblin/angular-chart"><i class="icon-github"></i>Code on Github</a>
9696
<a class="btn btn-success btn-lg" href="../dist/angular-chart.js.tar.gz" download="angular-chart.js.tar.gz">
97-
<i class="fa fa-download"></i> Download <small>(1.0.0-alpha5)</small>
97+
<i class="fa fa-download"></i> Download <small>(1.0.0-alpha6)</small>
9898
</a>
9999
</p>
100100
</div>
@@ -436,16 +436,53 @@ <h1>Directives</h1>
436436
</div>
437437
</div>
438438
<div class="row">
439-
<div class="col-lg-6 col-sm-12" id="base-chart" ng-controller="BaseCtrl">
439+
<div class="col-lg-6 col-sm-12" id="horizontal-chart" ng-controller="BarCtrl">
440440
<div class="panel panel-default">
441-
<div class="panel-heading">Dynamic Chart</div>
441+
<div class="panel-heading">Horizontal Bar Chart</div>
442442
<div class="panel-body">
443-
<canvas id="base" class="chart chart-base" chart-type="type" chart-data="data"
443+
<canvas id="horizontal" class="chart chart-horizontal-bar" chart-data="data"
444444
chart-labels="labels"></canvas>
445445
</div>
446446
</div>
447-
<button type="button" class="btn btn-primary pull-right" ng-click="toggle()">Toggle</button>
448447
</div>
448+
<div class="col-lg-6 col-sm-12 code">
449+
<tabset>
450+
<tab heading="Settings" class="settings">
451+
<div class="settings">
452+
<code>.chart-horizontal-bar</code>
453+
<ul>
454+
<li><code>chart-data</code>: series data</li>
455+
<li><code>chart-labels</code>: x axis labels</li>
456+
<li><code>chart-options</code> (default: <code>{}</code>): Chart.js options</li>
457+
<li><code>chart-series</code> (default: <code>[]</code>): series labels</li>
458+
<li><code>chart-click</code> (optional): onclick event handler</li>
459+
<li><code>chart-hover</code> (optional): onmousemove event handler</li>
460+
<li><code>chart-colors</code> (default to global colors): colors for the chart</li>
461+
<li><code>chart-y-axes</code> (optional): if true add multiple axis, <strong>required:</strong>: ids y-axis-{n} in the options</li>
462+
</ul>
463+
</div>
464+
</tab>
465+
<tab heading="Markup">
466+
<pre><code data-language="html">&lt;canvas id=&quot;base&quot; class=&quot;chart-horizontal-bar&quot;
467+
chart-data=&quot;data&quot; chart-labels=&quot;labels&quot; &gt;
468+
&lt;/canvas&gt; </code></pre>
469+
</tab>
470+
<tab heading="Javascript">
471+
<pre><code data-language="javascript">angular.module("app", ["chart.js"]).controller("BarCtrl",
472+
$scope.labels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
473+
$scope.series = ['Series A', 'Series B'];
474+
475+
$scope.data = [
476+
[65, 59, 80, 81, 56, 55, 40],
477+
[28, 48, 40, 19, 86, 27, 90]
478+
];
479+
});
480+
</code></pre>
481+
</tab>
482+
</tabset>
483+
</div>
484+
</div>
485+
<div class="row">
449486
<div class="col-lg-6 col-sm-12 code">
450487
<tabset>
451488
<tab heading="Settings" class="settings">
@@ -478,6 +515,16 @@ <h1>Directives</h1>
478515
</tab>
479516
</tabset>
480517
</div>
518+
<div class="col-lg-6 col-sm-12" id="base-chart" ng-controller="BaseCtrl">
519+
<div class="panel panel-default">
520+
<div class="panel-heading">Dynamic Chart</div>
521+
<div class="panel-body">
522+
<canvas id="base" class="chart chart-base" chart-type="type" chart-data="data"
523+
chart-labels="labels"></canvas>
524+
</div>
525+
</div>
526+
<button type="button" class="btn btn-primary pull-right" ng-click="toggle()">Toggle</button>
527+
</div>
481528
</div>
482529
</section>
483530
<section id="reactive">

‎examples/charts.template.html‎

Lines changed: 51 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -436,16 +436,53 @@ <h1>Directives</h1>
436436
</div>
437437
</div>
438438
<div class="row">
439-
<div class="col-lg-6 col-sm-12" id="base-chart" ng-controller="BaseCtrl">
439+
<div class="col-lg-6 col-sm-12" id="horizontal-chart" ng-controller="BarCtrl">
440440
<div class="panel panel-default">
441-
<div class="panel-heading">Dynamic Chart</div>
441+
<div class="panel-heading">Horizontal Bar Chart</div>
442442
<div class="panel-body">
443-
<canvas id="base" class="chart chart-base" chart-type="type" chart-data="data"
443+
<canvas id="horizontal" class="chart chart-horizontal-bar" chart-data="data"
444444
chart-labels="labels"></canvas>
445445
</div>
446446
</div>
447-
<button type="button" class="btn btn-primary pull-right" ng-click="toggle()">Toggle</button>
448447
</div>
448+
<div class="col-lg-6 col-sm-12 code">
449+
<tabset>
450+
<tab heading="Settings" class="settings">
451+
<div class="settings">
452+
<code>.chart-horizontal-bar</code>
453+
<ul>
454+
<li><code>chart-data</code>: series data</li>
455+
<li><code>chart-labels</code>: x axis labels</li>
456+
<li><code>chart-options</code> (default: <code>{}</code>): Chart.js options</li>
457+
<li><code>chart-series</code> (default: <code>[]</code>): series labels</li>
458+
<li><code>chart-click</code> (optional): onclick event handler</li>
459+
<li><code>chart-hover</code> (optional): onmousemove event handler</li>
460+
<li><code>chart-colors</code> (default to global colors): colors for the chart</li>
461+
<li><code>chart-y-axes</code> (optional): if true add multiple axis, <strong>required:</strong>: ids y-axis-{n} in the options</li>
462+
</ul>
463+
</div>
464+
</tab>
465+
<tab heading="Markup">
466+
<pre><code data-language="html">&lt;canvas id=&quot;base&quot; class=&quot;chart-horizontal-bar&quot;
467+
chart-data=&quot;data&quot; chart-labels=&quot;labels&quot; &gt;
468+
&lt;/canvas&gt; </code></pre>
469+
</tab>
470+
<tab heading="Javascript">
471+
<pre><code data-language="javascript">angular.module("app", ["chart.js"]).controller("BarCtrl",
472+
$scope.labels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
473+
$scope.series = ['Series A', 'Series B'];
474+
475+
$scope.data = [
476+
[65, 59, 80, 81, 56, 55, 40],
477+
[28, 48, 40, 19, 86, 27, 90]
478+
];
479+
});
480+
</code></pre>
481+
</tab>
482+
</tabset>
483+
</div>
484+
</div>
485+
<div class="row">
449486
<div class="col-lg-6 col-sm-12 code">
450487
<tabset>
451488
<tab heading="Settings" class="settings">
@@ -478,6 +515,16 @@ <h1>Directives</h1>
478515
</tab>
479516
</tabset>
480517
</div>
518+
<div class="col-lg-6 col-sm-12" id="base-chart" ng-controller="BaseCtrl">
519+
<div class="panel panel-default">
520+
<div class="panel-heading">Dynamic Chart</div>
521+
<div class="panel-body">
522+
<canvas id="base" class="chart chart-base" chart-type="type" chart-data="data"
523+
chart-labels="labels"></canvas>
524+
</div>
525+
</div>
526+
<button type="button" class="btn btn-primary pull-right" ng-click="toggle()">Toggle</button>
527+
</div>
481528
</div>
482529
</section>
483530
<section id="reactive">

‎test/fixtures/coverage.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎test/fixtures/horizontal-bar-chart.html‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head lang="en">
4+
<meta charset="UTF-8">
5+
<title>Horizontal Bar Chart</title>
6+
<link href="../../examples/bootstrap.css" rel="stylesheet">
7+
</head>
8+
<body ng-app="horizontal" id="top">
9+
<div class="container">
10+
<section id="charts">
11+
<div class="page-header">
12+
<h1>Horizontal Bar Chart</h1>
13+
</div>
14+
<div class="row">
15+
<div class="col-lg-6 col-sm-12" ng-controller="HorizontalBarCtrl">
16+
<div class="panel panel-default">
17+
<div class="panel-heading">Horizontal Bar Chart</div>
18+
<div class="panel-body">
19+
<canvas class="chart chart-horizontal-bar " chart-options="options" chart-data="data"
20+
chart-labels="labels" chart-colors="colors"></canvas>
21+
</div>
22+
</div>
23+
</div>
24+
</div>
25+
</section>
26+
</div>
27+
28+
<script src="../../node_modules/angular/angular.min.js"></script>
29+
<script src="../../node_modules/chart.js/dist/Chart.min.js"></script>
30+
<script src="../../angular-chart.js"></script>
31+
<script src="horizontal-bar-chart.js"></script>
32+
</body>
33+
</html>

‎test/fixtures/horizontal-bar-chart.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
(function () {
2+
'use strict';
3+
4+
var app = angular.module('horizontal', ['chart.js']);
5+
Chart.defaults.global.legend = {
6+
display: false
7+
};
8+
9+
app.controller('HorizontalBarCtrl', function ($scope) {
10+
$scope.labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
11+
$scope.active = true;
12+
$scope.data = [
13+
[65, 59, 90, 81, 56, 55, 40],
14+
[28, 48, 40, 19, 96, 27, 100]
15+
];
16+
});
17+
18+
})();

‎test/fixtures/horizontal-bar-chart.png‎

38.7 KB
Loading

‎test/test.integration.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ describe('integration', function () {
3232
mkdirp(WEBSHOT_FAILED_DIR);
3333

3434
[
35+
'horizontal-bar-chart',
3536
'29-tabs',
3637
'57-hex-colours',
3738
'54-not-enough-colours',

‎test/test.unit.js‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -29,13 +29,13 @@ describe('Unit testing', function () {
2929

3030
describe('base', function () {
3131
describe('chart types', function () {
32-
['line', 'bar', 'radar', 'pie', 'doughnut', 'polarArea'].forEach(function (type) {
32+
['line', 'bar', 'horizontalBar', 'radar', 'pie', 'doughnut', 'polarArea'].forEach(function (type) {
3333
it('creates a ' + type + ' chart using the directive', function () {
34-
var markup = '<div style="width: 250px; height:120px"><canvas class="chart chart-' +
35-
(type === 'polarArea' ? 'polar-area' : type) +
36-
'" chart-data="data" chart-labels="labels"></canvas></div>';
34+
var markup = '<canvas class="chart chart-' +
35+
(type === 'polarArea' ? 'polar-area' : type === 'horizontalBar' ? 'horizontal-bar' : type) +
36+
'" chart-data="data" chart-labels="labels"></canvas>';
3737

38-
if (['line', 'bar', 'radar'].indexOf(type) > - 1) {
38+
if (['line', 'bar', 'horizontalBar', 'radar'].indexOf(type) > - 1) {
3939
scope.labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
4040
scope.data = [
4141
[65, 59, 80, 81, 56, 55, 40],
@@ -62,14 +62,14 @@ describe('Unit testing', function () {
6262
);
6363
});
6464

65-
it('creates a ' + type + ' chart using the "chart-type" attribute"', function () {
65+
it('creates a ' + type + ' chart using the "chart-type" attribute', function () {
6666
var markup = '<div style="width: 250px; height:120px">' +
6767
'<canvas class="chart chart-base" chart-data="data" chart-labels="labels" ' +
6868
'chart-type="type"></canvas></div>';
6969

7070
scope.type = type;
7171

72-
if (['line', 'bar', 'radar'].indexOf(type) > - 1) {
72+
if (['line', 'bar', 'horizontalBar', 'radar'].indexOf(type) > - 1) {
7373
scope.labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
7474
scope.data = [
7575
[65, 59, 80, 81, 56, 55, 40],

0 commit comments

Comments
 (0)