简体   繁体   中英

Highcharts fill in scatter plot data with 0s

I have a scatter plot as shown below (edited to show what I want). I have data over time (blue dots) but the days not containing data I would like to fill in with 0s (black dots). It does not seem that there is a function to do this in high charts docs . What would be the best way to go about filling in the data? My charts are made using JSON.

My JSON is in the format {x:value,y:value} , x being the date in milliseconds, y being the actual value.

[{"x":1398952144380,"y":3},{"x":1401976144380,"y":30},{"x":1402062544380,"y":9},{"x":1402148944380,"y":11},{"x":1402235344380,"y":30},{"x":1402321744380,"y":23},{"x":1402408144380,"y":1},{"x":1402580944380,"y":28},{"x":1402667344380,"y":32},{"x":1402753744380,"y":17},{"x":1402840144380,"y":35},{"x":1402926544380,"y":39},{"x":1403012944380,"y":6},{"x":1403185744380,"y":30},{"x":1403272144380,"y":27},{"x":1403358544380,"y":14},{"x":1403444944380,"y":24},{"x":1403531344380,"y":16},{"x":1403617744380,"y":9},{"x":1403790544380,"y":2},{"x":1403876944380,"y":21},{"x":1403963344380,"y":46},{"x":1404049744380,"y":33},{"x":1404136144380,"y":38},{"x":1404222544380,"y":6},{"x":1404308944380,"y":28},{"x":1404395344380,"y":34},{"x":1404481744380,"y":28},{"x":1404568144380,"y":16},{"x":1404654544380,"y":25},{"x":1404740944380,"y":9},{"x":1404913744380,"y":13},{"x":1405000144380,"y":19},{"x":1405086544380,"y":28},{"x":1405172944380,"y":20},{"x":1405259344380,"y":23},{"x":1405345744380,"y":12},{"x":1405518544380,"y":20},{"x":1405604944380,"y":22},{"x":1405691344380,"y":30},{"x":1405777744380,"y":27},{"x":1405864144380,"y":25},{"x":1405950544380,"y":16},{"x":1406123344380,"y":13},{"x":1406209744380,"y":23},{"x":1406296144380,"y":20},{"x":1406382544380,"y":31},{"x":1406468944380,"y":31},{"x":1406555344380,"y":3},{"x":1406728144380,"y":12},{"x":1406900944380,"y":13},{"x":1406987344380,"y":22},{"x":1407073744380,"y":22},{"x":1407246544380,"y":8}]

I would prefer to do this server side in Java.

在此处输入图片说明

You can extend array of points this way: http://jsfiddle.net/7VNwk/4/

    var interval = 172800000, //interval between two points - two days?
        dataLength = data.length, 
        startingPoint = data[dataLength-1].x - 162 * 24 * 3600 * 1000, // half year from last point
        extendedData = [],
        i = 0;

    while(i < dataLength) {
        var actual = data[i];
        if(startingPoint < actual.x) {
            extendedData.push({x: startingPoint, y: 0});  
        } else {
            extendedData.push(actual); 
            i++;
        }
        startingPoint += interval;
    }

    $('#container').highcharts({
        xAxis: {
            type: 'datetime'   
        },
        series: [{
            type: 'scatter',
            data: extendedData
        }]
    });

Of course, it depends on your interval between points. As I can see from your data, it's about 2days.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM