1. Chris Leonello
  2. jqplot
Issue #581 new

fillBetween option doesn't work correctly if there are gaps (nulls) in data and breakOnNull is set

serg2409
created an issue

To reproduce the issues, please modify fillBetweenLines.html example as follows. {{{ ... seriesDefaults: { breakOnNull:true, ... }}} * Incorrect fill if there's a null value in one of the series

{{{ var l1 = [3, 6, null, 7, 5, 3]; }}} *Missing fill if both series contain a null at the same position

{{{ var l1 = [3, 6, null, 7, 5, 3]; ... var l3 = [9, 13, null, 16, 17, 19]; }}} *Wrong fill if a null value is at the end (either in both series or in just one)

{{{ var l1 = [3, 6, 7, 7, 5, null]; ... var l3 = [9, 13, 14, 16, 17, 19]; }}}

Comments (2)

  1. Braian Iván Monnier

    This also happens when you are usings groups, with either breakOnNull equal to true or false. For example:

    jQuery(document).ready(function() {
        var grouped_chart = jQuery.jqplot('grouped_chart', [[null, 52128.3685, 73000.1779, 72981.7569, 31273.5709, null, 41684.7041, 72976.2787, 72985.5035, 72976.6531, 62539.4861, null, 10423.8017, 72965.5368, 73000.5367, 72952.5238, 56336.1305, null], [null, 41701.5183, 72979.7939, 20850.2268, 52119.3439, null, 73013.0115, 72984.4531, 70162.6341, 37653.1467, 26747.5845, null, 72985.0615, 72965.1, 73011.6946, 73000.9488, 20857.1636, null]], {
            title: 'Savings from 07/10/2012 to 09/30/2012 (83 days period)',
            animate: true,
            animateReplot: true,
            seriesDefaults: {
                breakOnNull: false,
                renderer: jQuery.jqplot.LineRenderer,
                rendererOptions: {
                    smooth: true,
                    groups: 3
                },
                pointLabels: {
                    show: false
                }
            },
            axes: {
                xaxis: {
                    renderer: jQuery.jqplot.CategoryAxisRenderer,
                    rendererOptions: {
                        groupLabels: ['July, 2012', 'August, 2012', 'September, 2012']
                    },
                    tickOptions: [],
                    ticks: ['Week 27', 'Week 28', 'Week 29', 'Week 30', 'Week 31', 'N/A', 'Week 31', 'Week 32', 'Week 33', 'Week 34', 'Week 35', 'N/A', 'Week 35', 'Week 36', 'Week 37', 'Week 38', 'Week 39', 'Week 40']
                },
                yaxis: {
                    renderer: jQuery.jqplot.LinearAxisRenderer,
                    ticks: [],
                    tickOptions: {
                        formatString: '$ %.2f',
                        fontFamily: 'Tahoma',
                        fontSize: '9pt'
                    }
                }
            },
            legend: {
                renderer: jQuery.jqplot.EnhancedLegendRenderer,
                show: true,
                location: 'ne',
                placement: 'inside',
                labels: ['Current Cost', 'Past Cost']
            },
            cursor: {
                show: true,
                zoom: true,
                showTooltip: true,
                useAxesFormatters: false,
                tooltipAxisGroups: [['yaxis']],
                tooltipFormatString: '$ %.2f'
            },
            highlighter: {
                show: true,
                showMarker: true,
                showTooltip: true,
                tooltipLocation: 'n',
                tooltipAxes: 'y'
            },
            fillBetween: {
                fill: true,
                series1: 0,
                series2: 1,
                baseSeries: 0,
                color: 'rgba(227, 167, 111, 0.7)'
            }
        })
    });
    
  2. Log in to comment