playground
/
c3
mirror of https://github.com/masayuki0812/c3.git
1
0
Fork 0
Code Issues Releases Activity
Browse Source

Fix conflict

pull/264/head
Masayuki Tanaka 11 years ago
parent
cc95d59189 5b8f2554c8
commit
3ddaa7b543
4 changed files with 313 additions and 142 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 306
      c3.js
  2. 2
      c3.min.js
  3. 7
      htdocs/index.html
  4. 140
      htdocs/samples/chart_arc_gauge.html

306
c3.js
Unescape View File

@ -507,7 +507,7 @@
function updateRadius() { function updateRadius() {
radiusExpanded = Math.min(arcWidth, arcHeight) / 2; radiusExpanded = Math.min(arcWidth, arcHeight) / 2;
radius = radiusExpanded * 0.95; radius = radiusExpanded * 0.95;
var innerRadiusRatio = __gauge_width ? ((radius-__gauge_width)/radius) : 0.6; var innerRadiusRatio = __gauge_width ? ((radius - __gauge_width) / radius) : 0.6;
innerRadius = hasDonutType(c3.data.targets) || hasGaugeType(c3.data.targets) ? radius * innerRadiusRatio : 0; innerRadius = hasDonutType(c3.data.targets) || hasGaugeType(c3.data.targets) ? radius * innerRadiusRatio : 0;
} }
function getSvgLeft() { function getSvgLeft() {
@ -983,14 +983,15 @@
d = t; d = t;
} }
}); });
if (isNaN(d.endAngle)) d.endAngle = d.startAngle; if (isNaN(d.endAngle)) {
d.endAngle = d.startAngle;
}
if (isGaugeType(d.data)) { if (isGaugeType(d.data)) {
var sA = d.startAngle, eA = d.endAngle; var gMin = __gauge_min, gMax = __gauge_max,
var gMin = __gauge_min, gMax = __gauge_max, gF = Math.abs(gMin) + gMax,
gF = Math.abs(gMin)+gMax, fA = Math.abs(sA)+eA, aTic = (Math.PI) / gF;
aTic = (Math.PI)/gF; d.startAngle = (-1 * (Math.PI / 2)) + (aTic * Math.abs(gMin));
d.startAngle = (-1*(Math.PI/2))+(aTic*Math.abs(gMin)); d.endAngle = d.startAngle + (aTic * ((d.value > gMax) ? gMax : d.value));
d.endAngle = d.startAngle+(aTic*( (d.value > gMax) ? gMax : d.value ));
} }
return found ? d : null; return found ? d : null;
} }
@ -1026,12 +1027,12 @@
h = Math.sqrt(x * x + y * y); h = Math.sqrt(x * x + y * y);
// TODO: ratio should be an option? // TODO: ratio should be an option?
ratio = (36 / radius > 0.375 ? 1.175 - 36 / radius : 0.8) * radius / h; ratio = (36 / radius > 0.375 ? 1.175 - 36 / radius : 0.8) * radius / h;
translate = __gauge_style == 'arc' ? "translate(1,1)" : "translate(" + (x * ratio) + ',' + (y * ratio) + ")"; translate = __gauge_style === 'arc' ? "translate(1,1)" : "translate(" + (x * ratio) + ',' + (y * ratio) + ")";
} }
return translate; return translate;
} }
function getArcRatio(d) { function getArcRatio(d) {
var whole = __gauge_style == 'arc' ? Math.PI : (Math.PI * 2); var whole = __gauge_style === 'arc' ? Math.PI : (Math.PI * 2);
return d ? (d.endAngle - d.startAngle) / whole : null; return d ? (d.endAngle - d.startAngle) / whole : null;
} }
function convertToArcData(d) { function convertToArcData(d) {
@ -1081,13 +1082,13 @@
} }
function shouldShowArcLable() { function shouldShowArcLable() {
if (hasGaugeType(c3.data.targets)) { if (hasGaugeType(c3.data.targets)) {
return true; return true;
} }
return hasDonutType(c3.data.targets) ? __donut_label_show : __pie_label_show; return hasDonutType(c3.data.targets) ? __donut_label_show : __pie_label_show;
} }
function getArcLabelFormat() { function getArcLabelFormat() {
if (hasGaugeType(c3.data.targets)) { if (hasGaugeType(c3.data.targets)) {
return __gauge_label_format; return __gauge_label_format;
} }
return hasDonutType(c3.data.targets) ? __donut_label_format : __pie_label_format; return hasDonutType(c3.data.targets) ? __donut_label_format : __pie_label_format;
} }
@ -1096,21 +1097,21 @@
} }
function getArcOnClick() { function getArcOnClick() {
if (hasGaugeType(c3.data.targets)) { if (hasGaugeType(c3.data.targets)) {
return typeof __gauge_onclick === 'function' ? __gauge_onclick : function () {}; return typeof __gauge_onclick === 'function' ? __gauge_onclick : function () {};
} }
var callback = hasDonutType(c3.data.targets) ? __donut_onclick : __pie_onclick; var callback = hasDonutType(c3.data.targets) ? __donut_onclick : __pie_onclick;
return typeof callback === 'function' ? callback : function () {}; return typeof callback === 'function' ? callback : function () {};
} }
function getArcOnMouseOver() { function getArcOnMouseOver() {
if (hasGaugeType(c3.data.targets)) { if (hasGaugeType(c3.data.targets)) {
return typeof __gauge_onmouseover === 'function' ? __gauge_onmouseover : function () {}; return typeof __gauge_onmouseover === 'function' ? __gauge_onmouseover : function () {};
} }
var callback = hasDonutType(c3.data.targets) ? __donut_onmouseover : __pie_onmouseover; var callback = hasDonutType(c3.data.targets) ? __donut_onmouseover : __pie_onmouseover;
return typeof callback === 'function' ? callback : function () {}; return typeof callback === 'function' ? callback : function () {};
} }
function getArcOnMouseOut() { function getArcOnMouseOut() {
if (hasGaugeType(c3.data.targets)) { if (hasGaugeType(c3.data.targets)) {
return typeof __gauge_onmouseout === 'function' ? __gauge_onmouseout : function () {}; return typeof __gauge_onmouseout === 'function' ? __gauge_onmouseout : function () {};
} }
var callback = hasDonutType(c3.data.targets) ? __donut_onmouseout : __pie_onmouseout; var callback = hasDonutType(c3.data.targets) ? __donut_onmouseout : __pie_onmouseout;
return typeof callback === 'function' ? callback : function () {}; return typeof callback === 'function' ? callback : function () {};
@ -1944,9 +1945,9 @@
function circleX(d) { function circleX(d) {
return d.x || d.x === 0 ? x(d.x) : null; return d.x || d.x === 0 ? x(d.x) : null;
} }
function circleY(d,i) { function circleY(d, i) {
var lineIndices = getLineIndices(), getPoint = generateGetLinePoint(lineIndices); var lineIndices = getLineIndices(), getPoint = generateGetLinePoint(lineIndices);
if (__data_groups.length > 0) { var point = getPoint(d,i); return point[0][1]; } if (__data_groups.length > 0) { var point = getPoint(d, i); return point[0][1]; }
return getYScale(d.id)(d.value); return getYScale(d.id)(d.value);
} }
@ -2230,20 +2231,20 @@
} }
function generateLevelColor(_colors, _values) { function generateLevelColor(_colors, _values) {
var colors = _colors, var colors = _colors,
levels = _values; levels = _values;
return function (value) { return function (value) {
for (var a=1; a<levels.length; a++) { for (var a = 1; a < levels.length; a++) {
if (levels[0] === 'percentage' && ((value/__gauge_max)*100) < levels[a]) { if (levels[0] === 'percentage' && ((value / __gauge_max) * 100) < levels[a]) {
return colors[a-1]; return colors[a - 1];
} }
if (levels[0] === 'whole' && value < levels[a]) { if (levels[0] === 'whole' && value < levels[a]) {
return colors[a-1]; return colors[a - 1];
} }
} }
return colors[colors.length-1]; return colors[colors.length - 1];
}; };
} }
//-- Date --// //-- Date --//
@ -2419,44 +2420,44 @@
} }
function generateDrawArea(areaIndices, isSub) { function generateDrawArea(areaIndices, isSub) {
var area, var area,
getPoint = generateGetAreaPoint(areaIndices, isSub), getPoint = generateGetAreaPoint(areaIndices, isSub),
yScaleGetter = isSub ? getSubYScale : getYScale; yScaleGetter = isSub ? getSubYScale : getYScale;
if (__axis_rotated) { if (__axis_rotated) {
area = d3.svg.area() area = d3.svg.area()
.x0(function (d, i) { return yScaleGetter(d.id)(0); }) .x0(function (d) { return yScaleGetter(d.id)(0); })
.x1(function (d, i) { return yScaleGetter(d.id)(d.value); }) .x1(function (d) { return yScaleGetter(d.id)(d.value); })
.y(xx); .y(xx);
} else { } else {
area = d3.svg.area() area = d3.svg.area()
.x(xx) .x(xx)
.y0(function (d, i) { if (__data_groups.length > 0) { var point = getPoint(d,i); return point[0][1]; } return yScaleGetter(d.id)(0); }) .y0(function (d, i) { if (__data_groups.length > 0) { var point = getPoint(d, i); return point[0][1]; } return yScaleGetter(d.id)(0); })
.y1(function (d, i) { if (__data_groups.length > 0) { var point = getPoint(d,i); return point[1][1]; } return yScaleGetter(d.id)(d.value); }); .y1(function (d, i) { if (__data_groups.length > 0) { var point = getPoint(d, i); return point[1][1]; } return yScaleGetter(d.id)(d.value); });
} }
return function (d, i) { return function (d) {
var data = filterRemoveNull(d.values), x0, y0; var data = filterRemoveNull(d.values), x0, y0;
if (hasType([d], 'area') || hasType([d], 'area-spline')) { if (hasType([d], 'area') || hasType([d], 'area-spline')) {
isSplineType(d) ? area.interpolate("cardinal") : area.interpolate("linear"); isSplineType(d) ? area.interpolate("cardinal") : area.interpolate("linear");
return area(data); return area(data);
} else if (hasType([d], 'area-step')) { } else if (hasType([d], 'area-step')) {
isStepType(d) ? area.interpolate("step-after") : area.interpolate("linear"); isStepType(d) ? area.interpolate("step-after") : area.interpolate("linear");
return area(data); return area(data);
} else { } else {
x0 = x(data[0].x); x0 = x(data[0].x);
y0 = getYScale(d.id)(data[0].value); y0 = getYScale(d.id)(data[0].value);
return __axis_rotated ? "M " + y0 + " " + x0 : "M " + x0 + " " + y0; return __axis_rotated ? "M " + y0 + " " + x0 : "M " + x0 + " " + y0;
} }
}; };
} }
function generateDrawLine(lineIndices, isSub) { function generateDrawLine(lineIndices, isSub) {
var getPoint = generateGetLinePoint(lineIndices, isSub), var getPoint = generateGetLinePoint(lineIndices, isSub),
yScaleGetter = isSub ? getSubYScale : getYScale, yScaleGetter = isSub ? getSubYScale : getYScale,
xValue = isSub ? subxx : xx, xValue = isSub ? subxx : xx,
yValue = function (d,i) { if (__data_groups.length > 0) { var point = getPoint(d,i); return point[0][1]; } return yScaleGetter(d.id)(d.value); }, yValue = function (d, i) { if (__data_groups.length > 0) { var point = getPoint(d, i); return point[0][1]; } return yScaleGetter(d.id)(d.value); },
line = d3.svg.line() line = d3.svg.line()
.x(__axis_rotated ? yValue : xValue) .x(__axis_rotated ? yValue : xValue)
.y(__axis_rotated ? xValue : yValue); .y(__axis_rotated ? xValue : yValue);
@ -2526,25 +2527,25 @@
} }
function generateGetAreaPoint(areaIndices, isSub) { // partial duplication of generateGetBarPoints function generateGetAreaPoint(areaIndices, isSub) { // partial duplication of generateGetBarPoints
var areaTargetsNum = areaIndices.__max__ + 1, var areaTargetsNum = areaIndices.__max__ + 1,
x = getAreaX(areaTargetsNum, areaIndices, !!isSub), x = getAreaX(areaTargetsNum, areaIndices, !!isSub),
y = getAreaY(!!isSub), y = getAreaY(!!isSub),
areaOffset = getAreaOffset(areaIndices, !!isSub), areaOffset = getAreaOffset(areaIndices, !!isSub),
yScale = isSub ? getSubYScale : getYScale; yScale = isSub ? getSubYScale : getYScale;
return function (d, i) { return function (d, i) {
var y0 = yScale(d.id)(0), var y0 = yScale(d.id)(0),
offset = areaOffset(d, i) || y0, // offset is for stacked area chart offset = areaOffset(d, i) || y0, // offset is for stacked area chart
posX = x(d), posY = y(d); posX = x(d), posY = y(d);
// fix posY not to overflow opposite quadrant // fix posY not to overflow opposite quadrant
if (__axis_rotated) { if (__axis_rotated) {
if ((d.value > 0 && posY < offset) || (d.value < 0 && posY > offset)) { posY = offset; } if ((d.value > 0 && posY < offset) || (d.value < 0 && posY > offset)) { posY = offset; }
} }
// 1 point that marks the area position // 1 point that marks the area position
return [ return [
[posX, offset], [posX, offset],
[posX, posY - (y0 - offset)] [posX, posY - (y0 - offset)]
]; ];
}; };
} }
function generateGetBarPoints(barIndices, isSub) { function generateGetBarPoints(barIndices, isSub) {
@ -2573,24 +2574,24 @@
} }
function generateGetLinePoint(lineIndices, isSub) { // partial duplication of generateGetBarPoints function generateGetLinePoint(lineIndices, isSub) { // partial duplication of generateGetBarPoints
var lineTargetsNum = lineIndices.__max__ + 1, var lineTargetsNum = lineIndices.__max__ + 1,
x = getLineX(lineTargetsNum, lineIndices, !!isSub), x = getLineX(lineTargetsNum, lineIndices, !!isSub),
y = getLineY(!!isSub), y = getLineY(!!isSub),
lineOffset = getLineOffset(lineIndices, !!isSub), lineOffset = getLineOffset(lineIndices, !!isSub),
yScale = isSub ? getSubYScale : getYScale; yScale = isSub ? getSubYScale : getYScale;
return function (d, i) { return function (d, i) {
var y0 = yScale(d.id)(0), var y0 = yScale(d.id)(0),
offset = lineOffset(d, i) || y0, // offset is for stacked area chart offset = lineOffset(d, i) || y0, // offset is for stacked area chart
posX = x(d), posY = y(d); posX = x(d), posY = y(d);
// fix posY not to overflow opposite quadrant // fix posY not to overflow opposite quadrant
if (__axis_rotated) { if (__axis_rotated) {
if ((d.value > 0 && posY < offset) || (d.value < 0 && posY > offset)) { posY = offset; } if ((d.value > 0 && posY < offset) || (d.value < 0 && posY > offset)) { posY = offset; }
} }
// 1 point that marks the line position // 1 point that marks the line position
return [ return [
[posX, posY - (y0 - offset)] [posX, posY - (y0 - offset)]
]; ];
}; };
} }
function lineWithRegions(d, x, y, _regions) { function lineWithRegions(d, x, y, _regions) {
@ -3578,7 +3579,7 @@
.data(barData); .data(barData);
mainBar.enter().append('path') mainBar.enter().append('path')
.attr("class", classBar) .attr("class", classBar)
.style("stroke", function (d) { return color(d.id); })//'none') .style("stroke", function (d) { return color(d.id); })
.style("stroke-width", 2) .style("stroke-width", 2)
.style("opacity", 0) .style("opacity", 0)
.style("fill", function (d) { return color(d.id); }) .style("fill", function (d) { return color(d.id); })
@ -3618,7 +3619,7 @@
mainArea mainArea
.style("opacity", 0) .style("opacity", 0)
.transition().duration(duration) .transition().duration(duration)
.attr("d", drawArea)//areaOnMain) .attr("d", drawArea)
.style("fill", color) .style("fill", color)
.style("opacity", orgAreaOpacity); .style("opacity", orgAreaOpacity);
mainArea.exit().transition().duration(durationForExit) mainArea.exit().transition().duration(durationForExit)
@ -3669,21 +3670,21 @@
mainArc = main.selectAll('.' + CLASS.arcs).selectAll('.' + CLASS.arc) mainArc = main.selectAll('.' + CLASS.arcs).selectAll('.' + CLASS.arc)
.data(arcData); .data(arcData);
if (__gauge_style === "arc") { if (__gauge_style === "arc") {
mainArc.enter().append("path") mainArc.enter().append("path")
.attr("class", "") .attr("class", "")
.style("opacity", 1) .style("opacity", 1)
.style("fill", __gauge_color) // Where background color would receive customization. .style("fill", __gauge_color) // Where background color would receive customization.
.style("cursor", "pointer") .style("cursor", "pointer")
.attr("transform", "scale(1,1)") .attr("transform", "scale(1,1)")
.attr("d", function (d) { .attr("d", function (d) {
d.value = __gauge_max; d.value = __gauge_max;
d.startAngle = -1*(Math.PI/2); d.startAngle = -1 * (Math.PI / 2);
d.endAngle = Math.PI/2; d.endAngle = Math.PI / 2;
return getArc(d, true); return getArc(d, true);
}); });
mainArc.exit().transition().duration(durationForExit) mainArc.exit().transition().duration(durationForExit)
.style('opacity', 0) .style('opacity', 0)
.remove(); .remove();
} }
mainArc.enter().append('path') mainArc.enter().append('path')
.attr("class", classArc) .attr("class", classArc)
@ -3745,14 +3746,18 @@
}; };
} }
*/ */
if (isNaN(this._current.endAngle)) this._current.endAngle = this._current.startAngle; if (isNaN(this._current.endAngle)) {
this._current.endAngle = this._current.startAngle;
}
interpolate = d3.interpolate(this._current, updated); interpolate = d3.interpolate(this._current, updated);
this._current = interpolate(0); this._current = interpolate(0);
return function (t) { return getArc(interpolate(t), true); }; return function (t) { return getArc(interpolate(t), true); };
}) })
.attr("transform", withTransform ? "scale(1)" : "") .attr("transform", withTransform ? "scale(1)" : "")
.style("fill", function (d) { return (__gauge_style === 'arc' && __color_values) ? levelColor(d.data.values[0].value) : color(d.data.id); }) // Where gauge reading color would receive customization.//color(d.data); }) .style("fill", function (d) {
.style("opacity", (__color_opacity) ? __color_opacity : 1)//1) return (__gauge_style === 'arc' && __color_values) ? levelColor(d.data.values[0].value) : color(d.data.id);
}) // Where gauge reading color would receive customization.
.style("opacity", (__color_opacity) ? __color_opacity : 1)
.call(endall, function () { .call(endall, function () {
transiting = false; transiting = false;
}); });
@ -3766,24 +3771,24 @@
.transition().duration(duration) .transition().duration(duration)
.style("opacity", function (d) { return isTargetToShow(d.data.id) && isArcType(d.data) ? 1 : 0; }); .style("opacity", function (d) { return isTargetToShow(d.data.id) && isArcType(d.data) ? 1 : 0; });
if (__gauge_style === "arc") { if (__gauge_style === "arc") {
main.selectAll('.' + CLASS.chartArc).select('text.units') main.selectAll('.' + CLASS.chartArc).select('text.units')
.attr("transform", transformForArcLabel) .attr("transform", transformForArcLabel)
.style("opacity", 0) .style("opacity", 0)
.transition().duration(duration) .transition().duration(duration)
.text((__gauge_label_show) ? __gauge_units : '') .text((__gauge_label_show) ? __gauge_units : '')
.style("opacity", function (d) { return isTargetToShow(d.data.id) && isArcType(d.data) ? 1 : 0; }); .style("opacity", function (d) { return isTargetToShow(d.data.id) && isArcType(d.data) ? 1 : 0; });
main.selectAll('.' + CLASS.chartArc).select('text.min') main.selectAll('.' + CLASS.chartArc).select('text.min')
.attr("transform", transformForArcLabel) .attr("transform", transformForArcLabel)
.style("opacity", 0) .style("opacity", 0)
.transition().duration(duration) .transition().duration(duration)
.text((__gauge_label_show) ? __gauge_min : '') .text((__gauge_label_show) ? __gauge_min : '')
.style("opacity", function (d) { return isTargetToShow(d.data.id) && isArcType(d.data) ? 1 : 0; }); .style("opacity", function (d) { return isTargetToShow(d.data.id) && isArcType(d.data) ? 1 : 0; });
main.selectAll('.' + CLASS.chartArc).select('text.max') main.selectAll('.' + CLASS.chartArc).select('text.max')
.attr("transform", transformForArcLabel) .attr("transform", transformForArcLabel)
.style("opacity", 0) .style("opacity", 0)
.transition().duration(duration) .transition().duration(duration)
.text((__gauge_label_show) ? __gauge_max : '') .text((__gauge_label_show) ? __gauge_max : '')
.style("opacity", function (d) { return isTargetToShow(d.data.id) && isArcType(d.data) ? 1 : 0; }); .style("opacity", function (d) { return isTargetToShow(d.data.id) && isArcType(d.data) ? 1 : 0; });
} }
main.select('.' + CLASS.chartArcsTitle) main.select('.' + CLASS.chartArcsTitle)
.style("opacity", hasDonutType(c3.data.targets) || hasGaugeType(c3.data.targets) ? 1 : 0); .style("opacity", hasDonutType(c3.data.targets) || hasGaugeType(c3.data.targets) ? 1 : 0);
@ -4122,7 +4127,7 @@
.style('fill', '#000') .style('fill', '#000')
.style("font-size", width / 15 + "px"); .style("font-size", width / 15 + "px");
mainPieEnter.append("text") mainPieEnter.append("text")
.attr("dx", -1*(innerRadius+((radius-innerRadius)/2)) + "px") .attr("dx", -1 * (innerRadius + ((radius - innerRadius) / 2)) + "px")
.attr("dy", "1em") .attr("dy", "1em")
.attr("class", "min") .attr("class", "min")
.style("opacity", 0) .style("opacity", 0)
@ -4131,7 +4136,7 @@
.style('fill', '#777') .style('fill', '#777')
.style("font-size", width / 20 + "px"); .style("font-size", width / 20 + "px");
mainPieEnter.append("text") mainPieEnter.append("text")
.attr("dx", innerRadius+((radius-innerRadius)/2) + "px") .attr("dx", innerRadius + ((radius - innerRadius) / 2) + "px")
.attr("dy", "1em") .attr("dy", "1em")
.attr("class", "max") .attr("class", "max")
.style("opacity", 0) .style("opacity", 0)
@ -4598,6 +4603,27 @@
redraw({withUpdateXDomain: true}); redraw({withUpdateXDomain: true});
}; };
// For passing the configuration you want to update.
c3.update = function (keys, value) {
var target = config, i, isLast, nextTarget;
for (i = 0; i < keys.length; i++) {
isLast = (i === keys.length - 1);
nextTarget = target[keys[i]];
if (isLast) {
if (target[keys[i]] === undefined) {
target[keys[i]] = '';
}
target[keys[i]] = value;
} else {
target = nextTarget;
}
}
// Don't have a way to set the __variables without regenerating.
return parent.c3.generate(config);
};
c3.load = function (args) { c3.load = function (args) {
// update xs if specified // update xs if specified
if (args.xs) { if (args.xs) {
@ -4976,7 +5002,7 @@
} }
function generateTicks(scale) { function generateTicks(scale) {
var i, domain, ticks = []; var i, domain, ticks = [];
if (scale.ticks && tickArguments != undefined) { if (scale.ticks && tickArguments !== undefined) {
return scale.ticks.apply(scale, tickArguments); return scale.ticks.apply(scale, tickArguments);
} }
domain = scale.domain(); domain = scale.domain();

2
c3.min.js vendored
View File

File diff suppressed because one or more lines are too long

7
htdocs/index.html
Unescape View File

@ -44,7 +44,7 @@
<h3>Specify Axis Min/Max Values</h3> <h3>Specify Axis Min/Max Values</h3>
<p>You can specify your own min/max values for each axis.</p> <p>You can specify your own min/max values for each axis.</p>
<p><a class="btn btn-default" href="./samples/axes_minmax.html" role="button">View details &raquo;</a></p> <p><a class="btn btn-default" href="./samples/axes_minmax.html" role="button">View details &raquo;</a></p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
@ -108,6 +108,11 @@
<p>Display as Bar Chart</p> <p>Display as Bar Chart</p>
<p><a class="btn btn-default" href="./samples/chart_combination.html" role="button">View details &raquo;</a></p> <p><a class="btn btn-default" href="./samples/chart_combination.html" role="button">View details &raquo;</a></p>
</div> </div>
<div class="col-md-4">
<h3>Arc Gauge</h3>
<p>Display as Arc Gauge</p>
<p><a class="btn btn-default" href="./samples/chart_arc_gauge.html" role="button">View details &raquo;</a></p>
</div>
</div> </div>
</div> </div>
</div> </div>

140
htdocs/samples/chart_arc_gauge.html
Unescape View File

@ -0,0 +1,140 @@
<html>
<head>
<link href="/css/c3.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="chart"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="/js/c3.js"></script>
<script>
var chart = c3.generate({
data: {
columns: [
[ '%', 91.4 ]
],
type: 'gauge'
},
gauge: {
// color: '', // default value is #e0e0e0 (gray). "color: '', " removes background color (transparent).
label: {
format: function(value, ratio) {
return value;
},
// show: false // to turn off the min/max labels.
},
min: 0,//can handle negative min e.g. vacuum / voltage / current flow / rate of change
max: 100,
style: 'arc', // Only style currently.
units: ' %',
// width: 39 // for adjusting arc thickness
},
legend: {
show: false
},
size: {
height: 240,
width: 240
},
color: {
pattern: ['#FF0000', '#F6C600', '#60B044'], // the three color levels for the percentage values.
values: ['percentage', 30, 60, 90] // alternate first value is 'value'
}
});
var cycleDemo = function () {
setTimeout(function () {
chart = chart.update(['gauge', 'color'], '');
}, 2000);
setTimeout(function () {
chart.load({
columns: [[ '%', 0 ]]
});
}, 4000);
setTimeout(function () {
chart.load({
columns: [[ '%', 50 ]]
});
}, 5000);
setTimeout(function () {
chart.load({
columns: [[ '%', 91.4 ]]
});
}, 6000);
setTimeout(function () {
chart = chart.update(['gauge', 'color'], '#e0e0e0');
}, 8000);
setTimeout(function () {
chart.load({
columns: [[ '%', 0 ]]
});
}, 10000);
setTimeout(function () {
chart.load({
columns: [[ '%', 50 ]]
});
}, 11000);
setTimeout(function () {
chart.load({
columns: [[ '%', 91.4 ]]
});
}, 12000);
setTimeout(function () {
chart = chart.update(['gauge', 'width'], 10);
}, 14000);
setTimeout(function () {
chart.load({
columns: [[ '%', 0 ]]
});
}, 16000);
setTimeout(function () {
chart.load({
columns: [[ '%', 50 ]]
});
}, 15000);
setTimeout(function () {
chart.load({
columns: [[ '%', 91.4 ]]
});
}, 18000);
setTimeout(function () {
chart = chart.update(['gauge', 'width'], 39);
}, 20000);
setTimeout(function () {
chart.load({
columns: [[ '%', 0 ]]
});
}, 22000);
setTimeout(function () {
chart.load({
columns: [[ '%', 50 ]]
});
}, 23000);
setTimeout(function () {
chart.load({
columns: [[ '%', 91.4 ]]
});
}, 24000);
}
cycleDemo();
setInterval(cycleDemo, 30000);
</script>
</body>
</html>
Write Preview
Loading…
Cancel
Save