'area' and 'area-spline' chart types

11 years ago · 2fa9ce38b3
3 changed files with 39 additions and 5 deletions
--- a/c3.css
+++ b/c3.css
@ -125,3 +125,8 @@ text {
 .-tooltip td.value{
  text-align: right;
 }
+
+.-area {
+  stroke-width: 0;
+  opacity: 0.2;
+}
--- a/c3.js
+++ b/c3.js
@ -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; });
--- a/htdocs/samples/chart_combination.html
+++ b/htdocs/samples/chart_combination.html
@ -1,12 +1,12 @@
 <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']