0

I want to improve this C3 chart. The problem is that the interval between two points is big and I want to compress or break this, while also displaying a line to indicate there is a break in the x-axis. Can I do this with C3 or maybe D3?

 var chart = c3.generate({
   data: {
     x: 'x',
     columns: [
       ['x', '2010-01-01', '2010-01-02', '2013-01-03', '2013-01-04', '2013-01-05', '2013-01-06'],
       ['data1', 30, 200, 100, 400, 150, 250],
     ]
   },
   axis: {
     x: {
       type: 'timeseries',
       tick: {
         format: '%Y-%m-%d'
       }
     }
   }
 });
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.css'>
<div id="chart"></div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js'></script>

1

1 Answer 1

1

This is a drift into 'nasty hack' territory, but if you set your axis to be a category rather than a timeseries the values will distribute themselves evenly. Then you can add at the appropriate points (either eyeball your known data, or use a function to analyse and insert them) dummy data points with category names such as '//' that resemble breaks in the axis. Then shift these values up to the axis in the onRendered function, and set the connectNull setting to keep the line continuous.

Of course this doesn't do all kinds of stuff like preserve the local distributions of timepoints you may be interested in, and now your points are in-between ticks rather than slap bang above a tick, but it's an option...

 var chart = c3.generate({
   data: {
     x: 'x',
     columns: [
       ['x', '2010-01-01', '2010-01-02', '//', '2013-01-03', '2013-01-04', '2013-01-05', '2013-01-06'],
       ['data1', 30, 200, null, 100, 400, 150, 250],
     ]
   },
   axis: {
     x: {
       type: 'category',
       tick: {
         format: '%Y-%m-%d'
       }
     }
   },
 line: {
     connectNull: true,
    },
 onrendered: function () {
    d3.selectAll("tspan")
        .filter (function(d) { return d.splitted === "//"; })
        .attr ("dy", "0em")
        .style ("font-size", "2.5em")
    ;
 }
});
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.css'>
<div id="chart"></div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js'></script>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.