Skip to content

C
c3-closed
Commit 2fa9ce38 authored by mikhail samoilov's avatar mikhail samoilov
Browse files
Options

'area' and 'area-spline' chart types

parent b4661964
Show whitespace changes
Inline Side-by-side
Showing with 39 additions and 5 deletions
c3.css
View file @ 2fa9ce38
......@@ -125,3 +125,8 @@ text {
.-tooltip td.value{
text-align: right;
}
.-area {
stroke-width: 0;
opacity: 0.2;
}
c3.js
View file @ 2fa9ce38
......@@ -565,6 +565,7 @@
function classLine(d) { return classShapes(d) + " -line -line-" + d.id; }
function classCircles(d) { return classShapes(d) + " -circles -circles-" + d.id; }
function classBars(d) { return classShapes(d) + " -bars -bars-" + d.id; }
function classArea(d) { return classShapes(d) + " -area -area-" + d.id; }
function classShape(d, i) { return "-shape -shape-" + i; }
function classCircle(d, i) { return classShape(d, i) + " -circle -circle-" + i; }
function classBar(d, i) { return classShape(d, i) + " -bar -bar-" + i; }
......@@ -673,11 +674,11 @@
}
function isLineType(d) {
var id = (typeof d === 'string') ? d : d.id;
return !(id in __data_types) || __data_types[id] === 'line' || __data_types[id] === 'spline';
return !(id in __data_types) || __data_types[id] === 'line' || __data_types[id] === 'spline' || __data_types[id] === 'area' || __data_types[id] === 'area-spline';
}
function isSplineType(d) {
var id = (typeof d === 'string') ? d : d.id;
return __data_types[id] === 'spline';
return __data_types[id] === 'spline' || __data_types[id] === 'area-spline';
}
function isBarType(d) {
var id = (typeof d === 'string') ? d : d.id;
......@@ -789,6 +790,25 @@
};
})();
var areaOnMain = (function () {
var area = d3.svg.area()
.x(__axis_rotated ? function (d) { return getYScale(d.id)(d.value); } : xx)
.y0(__axis_rotated ? getCurrentWidth() : getCurrentHeight())
.y1(__axis_rotated ? xx : function (d) { return getYScale(d.id)(d.value); });
return function (d) {
var data = filterRemoveNull(d.values), x0, y0;
if (hasType([d], 'area') || hasType([d], 'area-spline')) {
isSplineType(d) ? area.interpolate("cardinal") : area.interpolate("linear");
return area(data);
} else {
x0 = x(data[0].x);
y0 = getYScale(d.id)(data[0].value);
return __axis_rotated ? "M " + y0 + " " + x0 : "M " + x0 + " " + y0;
}
};
})();
// For brush region
var lineOnSub = (function () {
var line = d3.svg.line()
......@@ -1473,6 +1493,9 @@
main.selectAll('.-line')
.transition().duration(duration)
.attr("d", lineOnMain);
main.selectAll('.-area')
.transition().duration(duration)
.attr("d", areaOnMain);
mainCircle = main.selectAll('.-circles').selectAll('.-circle')
.data(lineData);
mainCircle.transition().duration(duration)
......@@ -1664,6 +1687,10 @@
mainLineEnter.append("path")
.attr("class", classLine)
.style("stroke", function (d) { return color(d.id); });
// Areas
mainLineEnter.append("path")
.attr("class", classArea)
.style("fill", function (d) { return color(d.id); });
// Circles for each data point on lines
mainLineEnter.append('g')
.attr("class", function (d) { return "selected-circles selected-circles-" + d.id; });
......
htdocs/samples/chart_combination.html
View file @ 2fa9ce38
<html>
<head>
<link href="/css/c3.css" rel="stylesheet" type="text/css">
<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.min.js"></script>
<script src="../js/c3.js"></script>
<script>
var chart = c3.generate({
data: {
......@@ -15,7 +15,8 @@
['data2', 200, 130, 90, 240, 130, 220],
['data3', 300, 200, 160, 400, 250, 250],
['data4', 200, 130, 90, 240, 130, 220],
['data5', 130, 120, 150, 140, 160, 150]
['data5', 130, 120, 150, 140, 160, 150],
['data6', 90, 70, 20, 50, 60, 120],
],
types: {
data1: 'bar',
......@@ -23,6 +24,7 @@
data3: 'spline',
data4: 'line',
data5: 'bar',
data6: 'area'
},
groups: [
['data1','data2']
......
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