C3: NULL value on line chart

[panubear]

Dear Masayuki,
I have some suggestion on presenting 'null' values on line chart. Currently, it working well if 'null' values is the first or the last of data set. Considering null as the missing value, it could be in the middle of data set and my opinion is line should break into two part separately. I would be great if you could make improve on null value on line chart.
Thanks,
Panuwat

Excel

C3

[masayuki0812]

Hi,

Thank you for suggestion. I think it depends on the situation weather line should be splitted or not, so I'd like to add this feature as a option. I'll work on this later and this might be implemented in next version.

[nathancole]

This feature would also be very useful for our application. There are definitely scenarios where we have no data at a specific point and being able to be transparent about that with our customers is very important. Perhaps this could be on option at either the chart or series level?

[masayuki0812]

I think this should be an option that can be set for each series, but I might add an option for the chart too.

[Sivitas]

We needed this as well. As a hack into the c3 library to enable this by default I made the following 2 changes (The version of c3 I'm using has this on line 1988):

// For main region
var lineOnMain = (function () {
    var line = d3.svg.line()
        .defined(function(d) { return d.value != null;}) // added to not draw line connecting null points
        .x(__axis_rotated ? function (d) { return getYScale(d.id)(d.value); } : xx)
        .y(__axis_rotated ? xx : function (d) { return getYScale(d.id)(d.value); });
    return function (d) {
        var data = d.values, x0, y0;
        // var data = filterRemoveNull(d.values), x0, y0; // commented out to skip filtering of null points
        if (isLineType(d)) {
            isSplineType(d) ? line.interpolate("cardinal") : line.interpolate("linear");
            return __data_regions[d.id] ? lineWithRegions(data, x, getYScale(d.id), __data_regions[d.id]) : line(data);
        } else {
            x0 = x(data[0].x);
            y0 = getYScale(d.id)(data[0].value);
            return __axis_rotated ? "M " + y0 + " " + x0 : "M " + x0 + " " + y0;
        }
    };
})();

[masayuki0812]

@Sivitas Thank you so much for the code. I added line.connect_null option with this code. The default of this option is false, so by this commit lines will be drawn as @panubear shows an example as default. If line.connect_null = true, lines will be connected on null values.

Please try the latest code that includes the commit above.

[Sivitas]

Looked at the code and tested it, looks good.

[panubear]

Supper thanks to all of you to make this option happen, it working well now.

var chart = c3.generate({
    data: {
        columns: [
            ['data1', 30, 200, 100, 400, 150, 250, 60, 95, null],
            ['data2', 50, 20, null, 40, 100, null, 25, 80, 120]
        ]
    },
    line: {
        connect_null: false
    }
});

[deaquino]

It's not working when the connect_null parameter is set to true.

It doesn't connect the points: http://jsfiddle.net/7kYJu/145/

[idubinskiy]

Looks like the property works if set as

line: {
    connect: {
        null: true
    }
}

[himanshugo]

Can anyone please tell me, What is the syntax of connectNull for c3-angular directive ?
I want to use that property in angularjs

[aendrew]

@himanshugo This really isn't the right place to ask; please try either at c3-angular-directive, or in Gitter, or on the Google Group.

[freiit]

Maybe I'm late to the party, but this thread has still a high ranking on google, so: the answer is

line: {
    connectNull: true,
}

[ytzelf]

Any chance of having this implemented for area and area-spline charts?

Thanks a lot