13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/D3RadialGauge/radial-gauge-ctrl.js:
--------------------------------------------------------------------------------
1 | app.controller('RadialGaugeCtrl', ['$scope', function ($scope) {
2 | $scope.value = 1.5;
3 | $scope.upperLimit = 6;
4 | $scope.lowerLimit = 0;
5 | $scope.unit = "kW";
6 | $scope.precision = 2;
7 | $scope.ranges = [
8 | {
9 | min: 0,
10 | max: 1.5,
11 | color: '#DEDEDE'
12 | },
13 | {
14 | min: 1.5,
15 | max: 2.5,
16 | color: '#8DCA2F'
17 | },
18 | {
19 | min: 2.5,
20 | max: 3.5,
21 | color: '#FDC702'
22 | },
23 | {
24 | min: 3.5,
25 | max: 4.5,
26 | color: '#FF7700'
27 | },
28 | {
29 | min: 4.5,
30 | max: 6.0,
31 | color: '#C50200'
32 | }
33 | ];
34 |
35 | $scope.increase = function() {
36 | $scope.value = $scope.value * 1.1;
37 | }
38 | }]);
39 |
--------------------------------------------------------------------------------
/D3RadialGauge/d3-serv.js:
--------------------------------------------------------------------------------
1 | app.factory('d3Service', ['$document', '$window', '$q', '$rootScope',
2 | function ($document, $window, $q, $rootScope) {
3 | var d = $q.defer(),
4 | d3service = {
5 | d3: function () { return d.promise; }
6 | };
7 | function onScriptLoad() {
8 | // Load client in the browser
9 | $rootScope.$apply(function () { d.resolve($window.d3); });
10 | }
11 | var scriptTag = $document[0].createElement('script');
12 | scriptTag.type = 'text/javascript';
13 | scriptTag.async = true;
14 | scriptTag.src = '//cdnjs.cloudflare.com/ajax/libs/d3/3.4.1/d3.min.js';
15 | scriptTag.onreadystatechange = function () {
16 | if (this.readyState == 'complete') onScriptLoad();
17 | };
18 | scriptTag.onload = onScriptLoad;
19 |
20 | var s = $document[0].getElementsByTagName('body')[0];
21 | s.appendChild(scriptTag);
22 |
23 | return d3service;
24 | }]);
25 |
--------------------------------------------------------------------------------
/D3RadialGauge/LICENSE.txt:
--------------------------------------------------------------------------------
1 | Copyright (c) 2013, Stephane Therrien
2 | All rights reserved.
3 |
4 | Redistribution and use in source and binary forms, with or without
5 | modification, are permitted provided that the following conditions are met:
6 |
7 | * Redistributions of source code must retain the above copyright notice, this
8 | list of conditions and the following disclaimer.
9 |
10 | * Redistributions in binary form must reproduce the above copyright notice,
11 | this list of conditions and the following disclaimer in the documentation
12 | and/or other materials provided with the distribution.
13 |
14 | * The name Michael Bostock may not be used to endorse or promote products
15 | derived from this software without specific prior written permission.
16 |
17 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
18 | AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
19 | IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
20 | DISCLAIMED. IN NO EVENT SHALL MICHAEL BOSTOCK BE LIABLE FOR ANY DIRECT,
21 | INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING,
22 | BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
23 | DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
24 | OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
25 | NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE,
26 | EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
27 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | D3-Radial-Gauge
2 | ===============
3 |
4 | D3.JS Radial Gauge
5 |
6 | 
7 |
8 | Here is the list of properties with their default value that can be changed according to your needs:
9 |
10 | var settings = $.extend({
11 | width: 300,
12 | innerRadius: 130,
13 | outterRadius: 145,
14 | majorGraduations: 6,
15 | minorGraduations: 10,
16 | majorGraduationLenght: 16,
17 | minorGraduationLenght: 10,
18 | majorGraduationMarginTop: 7,
19 | majorGraduationColor: "#EAEAEA",
20 | minorGraduationColor: "#EAEAEA",
21 | majorGraduationTextColor: "#6C6C6C",
22 | majorGraduationDecimals: 2,
23 | needleColor: "#2DABC1",
24 | valueVerticalOffset:40,
25 | data: [],
26 | value:0
27 | }, options);
28 |
29 | Here is a usage sample:
30 |
31 |