Created
May 21, 2015 13:55
-
-
Save dirkteucher/85584739e1a53db3bb34 to your computer and use it in GitHub Desktop.
Radial dial // source http://jsbin.com/gitane
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <meta charset="utf-8"> | |
| <title>Radial dial</title> | |
| </head> | |
| <body> | |
| <div class="arc-gauge-7" data-height="180" data-value="25"> | |
| <div class="arc-gauge-text"> | |
| <span class="value">0</span>% | |
| <p class="small">CPU2</p> | |
| </div> | |
| </div> | |
| <script id="jsbin-javascript"> | |
| (function ($) { | |
| $.fn.arcGauge = function (config) { | |
| this.each(function () { | |
| var gauge = {}; | |
| // set container | |
| gauge.container = $(this); | |
| // get size | |
| var size = Math.max(gauge.container.outerWidth(), gauge.container.outerHeight()); | |
| // settings | |
| gauge.settings = $.extend({}, { | |
| class: 'arc-gauge', | |
| width: size, | |
| height: size, | |
| startAngle: -120, | |
| endAngle: +120, | |
| thickness: 5, | |
| value: 0, | |
| minValue: 0, | |
| maxValue: 100, | |
| transition: 1000, | |
| colors: '#08c', | |
| bgColor: '#eee', | |
| onchange: function(value){} | |
| }, gauge.container.data(), config); | |
| // convert degrees to radians | |
| gauge.degToRad = function (degree) { | |
| return degree * Math.PI / 180; | |
| }; | |
| // setup radius | |
| gauge.settings.radius = Math.min(gauge.settings.width, gauge.settings.height) / 2; | |
| // convenience method to map data to start/end angles | |
| gauge.pie = d3.layout.pie() | |
| .startAngle(gauge.degToRad(gauge.settings.startAngle)) | |
| .endAngle(gauge.degToRad(gauge.settings.endAngle)); | |
| // setup the arc | |
| gauge.arc = d3.svg.arc() | |
| .innerRadius(gauge.settings.radius - gauge.settings.thickness) | |
| .outerRadius(gauge.settings.radius) | |
| .cornerRadius(gauge.settings.thickness); | |
| // get data to draw in the right format | |
| gauge.getData = function (data) { | |
| var value = Math.max(Math.min(data, gauge.settings.maxValue), gauge.settings.minValue); | |
| // compute the start angle | |
| var start = gauge.degToRad(gauge.settings.startAngle); | |
| // compute the end angle | |
| var end = start + value * (gauge.degToRad(gauge.settings.endAngle) - start) / gauge.settings.maxValue; | |
| // return data | |
| return [{ | |
| startAngle: start, | |
| endAngle: end, | |
| value: value | |
| }]; | |
| }; | |
| // get the value of the gauge | |
| gauge.get = function () { | |
| return gauge.svg.selectAll('path.arc-value').data()[0].value; | |
| }; | |
| // set a new value of the gauge | |
| gauge.set = function (data) { | |
| // animate chart | |
| gauge.svg.selectAll('path.arc-value') | |
| .data(gauge.getData(data)) | |
| .transition() | |
| .duration(gauge.settings.transition) | |
| .attrTween('d', gauge.arcTween) | |
| .style('fill', gauge.getColor); | |
| // trigger change | |
| if (gauge.settings.onchange) | |
| gauge.settings.onchange.call(this, data); | |
| }; | |
| // draw | |
| gauge.arcTween = function (d, i) { | |
| var isOuter = this == gauge.svg.select('path.arc-background')[0][0]; | |
| // compute the start angle | |
| var start = gauge.degToRad(gauge.settings.startAngle); | |
| // compute the end angle | |
| var end = gauge.degToRad(gauge.settings.endAngle); | |
| // interpolation | |
| var interpolate = d3.interpolate(this.previous || gauge.getData(gauge.settings[isOuter ? 'maxValue' : 'minValue'])[0], d); | |
| // cache value | |
| if (!isOuter) this.previous = d; | |
| // return | |
| return function (t) { | |
| return gauge.arc(interpolate(t)); | |
| }; | |
| }; | |
| // gradient color based | |
| gauge.getColor = function (d, i) { | |
| if (!$.isPlainObject(gauge.settings.colors)) | |
| return gauge.settings.colors; | |
| var color = gauge.settings.bgColor, percent = d.value / gauge.settings.maxValue; | |
| // looking for the color with the highest value in range | |
| for (var ab in gauge.settings.colors) { | |
| if (percent < parseFloat(ab)) break; | |
| color = gauge.settings.colors[ab]; | |
| } | |
| return color; | |
| }; | |
| // initialization | |
| gauge.init = function () { | |
| // create the svg | |
| gauge.svg = d3.select(gauge.container[0]) | |
| .append('svg') | |
| .attr('class', gauge.settings.class) | |
| .attr('width', gauge.settings.width) | |
| .attr('height', gauge.settings.height) | |
| .append('g') | |
| .attr('transform', 'translate(' + gauge.settings.width / 2 + ',' + gauge.settings.height / 2 + ')'); | |
| // append the outer arc | |
| gauge.svg.append('path') | |
| .data(gauge.getData(gauge.settings.maxValue)) | |
| .attr('class', 'arc-background') | |
| .attr('fill', gauge.settings.bgColor) | |
| .transition() | |
| .attrTween('d', gauge.arcTween); | |
| // append the inner arc | |
| gauge.svg.append('path') | |
| .data(gauge.getData(gauge.settings.minValue)) | |
| .attr('class', 'arc-value') | |
| .attr('fill', gauge.settings.bgColor); | |
| // set first value | |
| gauge.set(gauge.settings.value); | |
| // export get function | |
| gauge.container[0].get = gauge.get; | |
| // export set function | |
| gauge.container[0].set = gauge.set; | |
| }; | |
| // start | |
| gauge.init(); | |
| }); | |
| // return | |
| return this; | |
| }; | |
| }(jQuery)); | |
| $('.arc-gauge-7').arcGauge({ | |
| colors: { | |
| 0: '#003366', // 0% | |
| 0.25: '#33cc00', // 25% | |
| 0.5: '#ffff66', // 50% | |
| 0.75: '#ff9966', // 75% | |
| 0.9: '#ff3333' // 90% | |
| }, | |
| onchange: function (value) { | |
| $('.arc-gauge-text .value').text(value); | |
| } | |
| }); | |
| setInterval(function () { | |
| var gauge = $('.arc-gauge-7')[0]; | |
| // get current value + 25 | |
| var value = gauge.get() + 25; | |
| // overflow check | |
| if (value > 100) value = 0; | |
| // set the value | |
| gauge.set(value); | |
| }, 2000); | |
| </script> | |
| <script id="jsbin-source-javascript" type="text/javascript">(function ($) { | |
| $.fn.arcGauge = function (config) { | |
| this.each(function () { | |
| var gauge = {}; | |
| // set container | |
| gauge.container = $(this); | |
| // get size | |
| var size = Math.max(gauge.container.outerWidth(), gauge.container.outerHeight()); | |
| // settings | |
| gauge.settings = $.extend({}, { | |
| class: 'arc-gauge', | |
| width: size, | |
| height: size, | |
| startAngle: -120, | |
| endAngle: +120, | |
| thickness: 5, | |
| value: 0, | |
| minValue: 0, | |
| maxValue: 100, | |
| transition: 1000, | |
| colors: '#08c', | |
| bgColor: '#eee', | |
| onchange: function(value){} | |
| }, gauge.container.data(), config); | |
| // convert degrees to radians | |
| gauge.degToRad = function (degree) { | |
| return degree * Math.PI / 180; | |
| }; | |
| // setup radius | |
| gauge.settings.radius = Math.min(gauge.settings.width, gauge.settings.height) / 2; | |
| // convenience method to map data to start/end angles | |
| gauge.pie = d3.layout.pie() | |
| .startAngle(gauge.degToRad(gauge.settings.startAngle)) | |
| .endAngle(gauge.degToRad(gauge.settings.endAngle)); | |
| // setup the arc | |
| gauge.arc = d3.svg.arc() | |
| .innerRadius(gauge.settings.radius - gauge.settings.thickness) | |
| .outerRadius(gauge.settings.radius) | |
| .cornerRadius(gauge.settings.thickness); | |
| // get data to draw in the right format | |
| gauge.getData = function (data) { | |
| var value = Math.max(Math.min(data, gauge.settings.maxValue), gauge.settings.minValue); | |
| // compute the start angle | |
| var start = gauge.degToRad(gauge.settings.startAngle); | |
| // compute the end angle | |
| var end = start + value * (gauge.degToRad(gauge.settings.endAngle) - start) / gauge.settings.maxValue; | |
| // return data | |
| return [{ | |
| startAngle: start, | |
| endAngle: end, | |
| value: value | |
| }]; | |
| }; | |
| // get the value of the gauge | |
| gauge.get = function () { | |
| return gauge.svg.selectAll('path.arc-value').data()[0].value; | |
| }; | |
| // set a new value of the gauge | |
| gauge.set = function (data) { | |
| // animate chart | |
| gauge.svg.selectAll('path.arc-value') | |
| .data(gauge.getData(data)) | |
| .transition() | |
| .duration(gauge.settings.transition) | |
| .attrTween('d', gauge.arcTween) | |
| .style('fill', gauge.getColor); | |
| // trigger change | |
| if (gauge.settings.onchange) | |
| gauge.settings.onchange.call(this, data); | |
| }; | |
| // draw | |
| gauge.arcTween = function (d, i) { | |
| var isOuter = this == gauge.svg.select('path.arc-background')[0][0]; | |
| // compute the start angle | |
| var start = gauge.degToRad(gauge.settings.startAngle); | |
| // compute the end angle | |
| var end = gauge.degToRad(gauge.settings.endAngle); | |
| // interpolation | |
| var interpolate = d3.interpolate(this.previous || gauge.getData(gauge.settings[isOuter ? 'maxValue' : 'minValue'])[0], d); | |
| // cache value | |
| if (!isOuter) this.previous = d; | |
| // return | |
| return function (t) { | |
| return gauge.arc(interpolate(t)); | |
| }; | |
| }; | |
| // gradient color based | |
| gauge.getColor = function (d, i) { | |
| if (!$.isPlainObject(gauge.settings.colors)) | |
| return gauge.settings.colors; | |
| var color = gauge.settings.bgColor, percent = d.value / gauge.settings.maxValue; | |
| // looking for the color with the highest value in range | |
| for (var ab in gauge.settings.colors) { | |
| if (percent < parseFloat(ab)) break; | |
| color = gauge.settings.colors[ab]; | |
| } | |
| return color; | |
| }; | |
| // initialization | |
| gauge.init = function () { | |
| // create the svg | |
| gauge.svg = d3.select(gauge.container[0]) | |
| .append('svg') | |
| .attr('class', gauge.settings.class) | |
| .attr('width', gauge.settings.width) | |
| .attr('height', gauge.settings.height) | |
| .append('g') | |
| .attr('transform', 'translate(' + gauge.settings.width / 2 + ',' + gauge.settings.height / 2 + ')'); | |
| // append the outer arc | |
| gauge.svg.append('path') | |
| .data(gauge.getData(gauge.settings.maxValue)) | |
| .attr('class', 'arc-background') | |
| .attr('fill', gauge.settings.bgColor) | |
| .transition() | |
| .attrTween('d', gauge.arcTween); | |
| // append the inner arc | |
| gauge.svg.append('path') | |
| .data(gauge.getData(gauge.settings.minValue)) | |
| .attr('class', 'arc-value') | |
| .attr('fill', gauge.settings.bgColor); | |
| // set first value | |
| gauge.set(gauge.settings.value); | |
| // export get function | |
| gauge.container[0].get = gauge.get; | |
| // export set function | |
| gauge.container[0].set = gauge.set; | |
| }; | |
| // start | |
| gauge.init(); | |
| }); | |
| // return | |
| return this; | |
| }; | |
| }(jQuery)); | |
| $('.arc-gauge-7').arcGauge({ | |
| colors: { | |
| 0: '#003366', // 0% | |
| 0.25: '#33cc00', // 25% | |
| 0.5: '#ffff66', // 50% | |
| 0.75: '#ff9966', // 75% | |
| 0.9: '#ff3333' // 90% | |
| }, | |
| onchange: function (value) { | |
| $('.arc-gauge-text .value').text(value); | |
| } | |
| }); | |
| setInterval(function () { | |
| var gauge = $('.arc-gauge-7')[0]; | |
| // get current value + 25 | |
| var value = gauge.get() + 25; | |
| // overflow check | |
| if (value > 100) value = 0; | |
| // set the value | |
| gauge.set(value); | |
| }, 2000); | |
| </script></body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function ($) { | |
| $.fn.arcGauge = function (config) { | |
| this.each(function () { | |
| var gauge = {}; | |
| // set container | |
| gauge.container = $(this); | |
| // get size | |
| var size = Math.max(gauge.container.outerWidth(), gauge.container.outerHeight()); | |
| // settings | |
| gauge.settings = $.extend({}, { | |
| class: 'arc-gauge', | |
| width: size, | |
| height: size, | |
| startAngle: -120, | |
| endAngle: +120, | |
| thickness: 5, | |
| value: 0, | |
| minValue: 0, | |
| maxValue: 100, | |
| transition: 1000, | |
| colors: '#08c', | |
| bgColor: '#eee', | |
| onchange: function(value){} | |
| }, gauge.container.data(), config); | |
| // convert degrees to radians | |
| gauge.degToRad = function (degree) { | |
| return degree * Math.PI / 180; | |
| }; | |
| // setup radius | |
| gauge.settings.radius = Math.min(gauge.settings.width, gauge.settings.height) / 2; | |
| // convenience method to map data to start/end angles | |
| gauge.pie = d3.layout.pie() | |
| .startAngle(gauge.degToRad(gauge.settings.startAngle)) | |
| .endAngle(gauge.degToRad(gauge.settings.endAngle)); | |
| // setup the arc | |
| gauge.arc = d3.svg.arc() | |
| .innerRadius(gauge.settings.radius - gauge.settings.thickness) | |
| .outerRadius(gauge.settings.radius) | |
| .cornerRadius(gauge.settings.thickness); | |
| // get data to draw in the right format | |
| gauge.getData = function (data) { | |
| var value = Math.max(Math.min(data, gauge.settings.maxValue), gauge.settings.minValue); | |
| // compute the start angle | |
| var start = gauge.degToRad(gauge.settings.startAngle); | |
| // compute the end angle | |
| var end = start + value * (gauge.degToRad(gauge.settings.endAngle) - start) / gauge.settings.maxValue; | |
| // return data | |
| return [{ | |
| startAngle: start, | |
| endAngle: end, | |
| value: value | |
| }]; | |
| }; | |
| // get the value of the gauge | |
| gauge.get = function () { | |
| return gauge.svg.selectAll('path.arc-value').data()[0].value; | |
| }; | |
| // set a new value of the gauge | |
| gauge.set = function (data) { | |
| // animate chart | |
| gauge.svg.selectAll('path.arc-value') | |
| .data(gauge.getData(data)) | |
| .transition() | |
| .duration(gauge.settings.transition) | |
| .attrTween('d', gauge.arcTween) | |
| .style('fill', gauge.getColor); | |
| // trigger change | |
| if (gauge.settings.onchange) | |
| gauge.settings.onchange.call(this, data); | |
| }; | |
| // draw | |
| gauge.arcTween = function (d, i) { | |
| var isOuter = this == gauge.svg.select('path.arc-background')[0][0]; | |
| // compute the start angle | |
| var start = gauge.degToRad(gauge.settings.startAngle); | |
| // compute the end angle | |
| var end = gauge.degToRad(gauge.settings.endAngle); | |
| // interpolation | |
| var interpolate = d3.interpolate(this.previous || gauge.getData(gauge.settings[isOuter ? 'maxValue' : 'minValue'])[0], d); | |
| // cache value | |
| if (!isOuter) this.previous = d; | |
| // return | |
| return function (t) { | |
| return gauge.arc(interpolate(t)); | |
| }; | |
| }; | |
| // gradient color based | |
| gauge.getColor = function (d, i) { | |
| if (!$.isPlainObject(gauge.settings.colors)) | |
| return gauge.settings.colors; | |
| var color = gauge.settings.bgColor, percent = d.value / gauge.settings.maxValue; | |
| // looking for the color with the highest value in range | |
| for (var ab in gauge.settings.colors) { | |
| if (percent < parseFloat(ab)) break; | |
| color = gauge.settings.colors[ab]; | |
| } | |
| return color; | |
| }; | |
| // initialization | |
| gauge.init = function () { | |
| // create the svg | |
| gauge.svg = d3.select(gauge.container[0]) | |
| .append('svg') | |
| .attr('class', gauge.settings.class) | |
| .attr('width', gauge.settings.width) | |
| .attr('height', gauge.settings.height) | |
| .append('g') | |
| .attr('transform', 'translate(' + gauge.settings.width / 2 + ',' + gauge.settings.height / 2 + ')'); | |
| // append the outer arc | |
| gauge.svg.append('path') | |
| .data(gauge.getData(gauge.settings.maxValue)) | |
| .attr('class', 'arc-background') | |
| .attr('fill', gauge.settings.bgColor) | |
| .transition() | |
| .attrTween('d', gauge.arcTween); | |
| // append the inner arc | |
| gauge.svg.append('path') | |
| .data(gauge.getData(gauge.settings.minValue)) | |
| .attr('class', 'arc-value') | |
| .attr('fill', gauge.settings.bgColor); | |
| // set first value | |
| gauge.set(gauge.settings.value); | |
| // export get function | |
| gauge.container[0].get = gauge.get; | |
| // export set function | |
| gauge.container[0].set = gauge.set; | |
| }; | |
| // start | |
| gauge.init(); | |
| }); | |
| // return | |
| return this; | |
| }; | |
| }(jQuery)); | |
| $('.arc-gauge-7').arcGauge({ | |
| colors: { | |
| 0: '#003366', // 0% | |
| 0.25: '#33cc00', // 25% | |
| 0.5: '#ffff66', // 50% | |
| 0.75: '#ff9966', // 75% | |
| 0.9: '#ff3333' // 90% | |
| }, | |
| onchange: function (value) { | |
| $('.arc-gauge-text .value').text(value); | |
| } | |
| }); | |
| setInterval(function () { | |
| var gauge = $('.arc-gauge-7')[0]; | |
| // get current value + 25 | |
| var value = gauge.get() + 25; | |
| // overflow check | |
| if (value > 100) value = 0; | |
| // set the value | |
| gauge.set(value); | |
| }, 2000); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
The gitane.js is a plugin from indrimuska
https://github.com/indrimuska/jquery-d3-arc-gauge
+
https://rawgit.com/indrimuska/jquery-d3-arc-gauge/master/index.html
The code which handles the updating of the radial dial is from line 139-160