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
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 54
      c3.js
  2. 2
      c3.min.js
  3. 5
      htdocs/index.html
  4. 140
      htdocs/samples/chart_arc_gauge.html

54
c3.js
Unescape View File

@ -983,11 +983,12 @@
d = t;
}
});
if (isNaN(d.endAngle)) d.endAngle = d.startAngle;
if (isNaN(d.endAngle)) {
d.endAngle = d.startAngle;
}
if (isGaugeType(d.data)) {
var sA = d.startAngle, eA = d.endAngle;
var gMin = __gauge_min, gMax = __gauge_max,
gF = Math.abs(gMin)+gMax, fA = Math.abs(sA)+eA,
gF = Math.abs(gMin) + gMax,
aTic = (Math.PI) / gF;
d.startAngle = (-1 * (Math.PI / 2)) + (aTic * Math.abs(gMin));
d.endAngle = d.startAngle + (aTic * ((d.value > gMax) ? gMax : d.value));
@ -1026,12 +1027,12 @@
h = Math.sqrt(x * x + y * y);
// TODO: ratio should be an option?
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;
}
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;
}
function convertToArcData(d) {
@ -2425,8 +2426,8 @@
if (__axis_rotated) {
area = d3.svg.area()
.x0(function (d, i) { return yScaleGetter(d.id)(0); })
.x1(function (d, i) { return yScaleGetter(d.id)(d.value); })
.x0(function (d) { return yScaleGetter(d.id)(0); })
.x1(function (d) { return yScaleGetter(d.id)(d.value); })
.y(xx);
} else {
area = d3.svg.area()
@ -2435,7 +2436,7 @@
.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;
if (hasType([d], 'area') || hasType([d], 'area-spline')) {
@ -3578,7 +3579,7 @@
.data(barData);
mainBar.enter().append('path')
.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("opacity", 0)
.style("fill", function (d) { return color(d.id); })
@ -3618,7 +3619,7 @@
mainArea
.style("opacity", 0)
.transition().duration(duration)
.attr("d", drawArea)//areaOnMain)
.attr("d", drawArea)
.style("fill", color)
.style("opacity", orgAreaOpacity);
mainArea.exit().transition().duration(durationForExit)
@ -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);
this._current = interpolate(0);
return function (t) { return getArc(interpolate(t), true); };
})
.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("opacity", (__color_opacity) ? __color_opacity : 1)//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.
.style("opacity", (__color_opacity) ? __color_opacity : 1)
.call(endall, function () {
transiting = false;
});
@ -4598,6 +4603,27 @@
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) {
// update xs if specified
if (args.xs) {
@ -4976,7 +5002,7 @@
}
function generateTicks(scale) {
var i, domain, ticks = [];
if (scale.ticks && tickArguments != undefined) {
if (scale.ticks && tickArguments !== undefined) {
return scale.ticks.apply(scale, tickArguments);
}
domain = scale.domain();

2
c3.min.js vendored
View File

File diff suppressed because one or more lines are too long

5
htdocs/index.html
Unescape View File

@ -108,6 +108,11 @@
<p>Display as Bar Chart</p>
<p><a class="btn btn-default" href="./samples/chart_combination.html" role="button">View details &raquo;</a></p>
</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>

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