Skip to content

C
c3-closed
You need to sign in or sign up before continuing.
Commit 3ddaa7b5 authored by Masayuki Tanaka's avatar Masayuki Tanaka
Browse files
Options

Fix conflict

parents cc95d591 5b8f2554
Hide whitespace changes
Inline Side-by-side
Showing with 312 additions and 141 deletions
c3.js
View file @ 3ddaa7b5
...@@ -507,7 +507,7 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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();
......
c3.min.js
View file @ 3ddaa7b5
This source diff could not be displayed because it is too large. You can view the blob instead.
htdocs/index.html
View file @ 3ddaa7b5
...@@ -44,7 +44,7 @@ ...@@ -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 @@ ...@@ -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>
......
htdocs/samples/chart_arc_gauge.html 0 → 100644
View file @ 3ddaa7b5
<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>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment