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

'area' and 'area-spline' chart types

pull/22/head
mikhail samoilov 11 years ago
parent
b466196446
commit
2fa9ce38b3
3 changed files with 39 additions and 5 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. 5
      c3.css
  2. 31
      c3.js
  3. 8
      htdocs/samples/chart_combination.html

5
c3.css
Unescape View File

@ -125,3 +125,8 @@ text {
.-tooltip td.value{ .-tooltip td.value{
text-align: right; text-align: right;
} }
.-area {
stroke-width: 0;
opacity: 0.2;
}

31
c3.js
Unescape View File

@ -565,6 +565,7 @@
function classLine(d) { return classShapes(d) + " -line -line-" + d.id; } function classLine(d) { return classShapes(d) + " -line -line-" + d.id; }
function classCircles(d) { return classShapes(d) + " -circles -circles-" + d.id; } function classCircles(d) { return classShapes(d) + " -circles -circles-" + d.id; }
function classBars(d) { return classShapes(d) + " -bars -bars-" + 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 classShape(d, i) { return "-shape -shape-" + i; }
function classCircle(d, i) { return classShape(d, i) + " -circle -circle-" + i; } function classCircle(d, i) { return classShape(d, i) + " -circle -circle-" + i; }
function classBar(d, i) { return classShape(d, i) + " -bar -bar-" + i; } function classBar(d, i) { return classShape(d, i) + " -bar -bar-" + i; }
@ -673,11 +674,11 @@
} }
function isLineType(d) { function isLineType(d) {
var id = (typeof d === 'string') ? d : d.id; 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) { function isSplineType(d) {
var id = (typeof d === 'string') ? d : d.id; 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) { function isBarType(d) {
var id = (typeof d === 'string') ? d : d.id; 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 // For brush region
var lineOnSub = (function () { var lineOnSub = (function () {
var line = d3.svg.line() var line = d3.svg.line()
@ -1473,6 +1493,9 @@
main.selectAll('.-line') main.selectAll('.-line')
.transition().duration(duration) .transition().duration(duration)
.attr("d", lineOnMain); .attr("d", lineOnMain);
main.selectAll('.-area')
.transition().duration(duration)
.attr("d", areaOnMain);
mainCircle = main.selectAll('.-circles').selectAll('.-circle') mainCircle = main.selectAll('.-circles').selectAll('.-circle')
.data(lineData); .data(lineData);
mainCircle.transition().duration(duration) mainCircle.transition().duration(duration)
@ -1664,6 +1687,10 @@
mainLineEnter.append("path") mainLineEnter.append("path")
.attr("class", classLine) .attr("class", classLine)
.style("stroke", function (d) { return color(d.id); }); .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 // Circles for each data point on lines
mainLineEnter.append('g') mainLineEnter.append('g')
.attr("class", function (d) { return "selected-circles selected-circles-" + d.id; }); .attr("class", function (d) { return "selected-circles selected-circles-" + d.id; });

8
htdocs/samples/chart_combination.html
Unescape View File

@ -1,12 +1,12 @@
<html> <html>
<head> <head>
<link href="/css/c3.css" rel="stylesheet" type="text/css"> <link href="../css/c3.css" rel="stylesheet" type="text/css">
</head> </head>
<body> <body>
<div id="chart"></div> <div id="chart"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> <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> <script>
var chart = c3.generate({ var chart = c3.generate({
data: { data: {
@ -15,7 +15,8 @@
['data2', 200, 130, 90, 240, 130, 220], ['data2', 200, 130, 90, 240, 130, 220],
['data3', 300, 200, 160, 400, 250, 250], ['data3', 300, 200, 160, 400, 250, 250],
['data4', 200, 130, 90, 240, 130, 220], ['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: { types: {
data1: 'bar', data1: 'bar',
@ -23,6 +24,7 @@
data3: 'spline', data3: 'spline',
data4: 'line', data4: 'line',
data5: 'bar', data5: 'bar',
data6: 'area'
}, },
groups: [ groups: [
['data1','data2'] ['data1','data2']

Write Preview
Loading…
Cancel
Save