How to make highcharts default to 0 for missing data

后端 未结 4 1965
南笙
南笙 2020-12-14 05:56

I have a time series at a 1 minute interval. I would like to display that in a chart with missing points as 0.

I\'ve found xAxis.ordinal and turned that off which di

相关标签:
4条回答
  • 2020-12-14 06:06

    I've thorougly searched the API reference of HighCharts, but they don't offer that option. What they do offer is the option to disable the connection of points when null data is in between (only line and area charts):

    var chart = new Highcharts.Chart({
        plotOptions: {
            line: {
                connectNulls: false
            }
        }
    });
    

    This is the default setting according to the API, so I'm not sure why your data does connect with null values in between. Maybe they have changed the defaults lately?

    Example of HighChart with missing data

    I feel this is a good representation of your data, because defaulting null to 0 seems misleading.

    0 讨论(0)
  • 2020-12-14 06:14

    One way is by pre-processing the data, replacing null with 0:

    var withNulls = [null, 12, 23, 45, 3.44, null, 0];
    var noNulls = withNulls.map(function (item) {
        return (item === null) ? 0 : item;
    });
    

    Example saved on jsfiddle: http://jsfiddle.net/7mhMP/

    0 讨论(0)
  • 2020-12-14 06:25

    I have the same problem and what i understand is that you should set your data structure in database as VARCHAR and set the default value to null so where you don't have data it becomes NULL. Then it accept null values and highchart don't display and connect missing areas with null values.
    In addition you have to receive data as NULL and don't change them to ''.
    see this working example:

    var chart = new Highcharts.Chart({
    
        chart: {
            defaultSeriesType: 'spline', // use line or spline
            renderTo: 'container1'
        },
    
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
    
        series: [{
            data: [9, 4,null, 2, 1, 0, 6, 5, 4, 1, 6, 4]
        }]
    
    });
    

    here is the fiddle with two different chart using null and ''

    UPDATE:
    If you are using parseINT to push data you should remember that parseINT(NULL) gives you NAN so for this bug try to manually push NULL with something like this:

    var val = parseInt(rows[i]);
    if (isNaN(val))
    {
      val = null;
      result.push(val);
    }
    
    0 讨论(0)
  • 2020-12-14 06:27

    You hava to fill the missed data as 0. Because highchart don't konw xAxis interval.

    If you have a time series at a 1 minute interval, you should set every missing minute data to 0; If you have a time series at a 1 day interval, you should set every missing day data to 0.

    0 讨论(0)
提交回复
热议问题