CODEWITHSUNDEEP
highcharts
geomajor56
geomajor56

Reputation: 282

Highcharts don't connect points between years

Is it possible not to connect points between years? See screenshot of graph below. I've been told it's misleading. My only solution so far is to create year end nulls for each sample year of each station. That's about 750 entries in SQL table. Seems crude. Can anyone come up with a more elegant and programmatic solution.

Data is retrieved via json from Postgresql.

Any suggestions or references would be greatly appreciated,

enter image description here

Upvotes: 0

Views: 1203

Answers (3)

geomajor56
geomajor56

Reputation: 282

It's ugly but it works for now. I got the year range of existing data then appended records with all year end('12/31/20xx')null values to existing data. connectNulls: false prevented any points connecting to them.Then sorted the array by date which was unnecessarily difficult.

I know my JavaScript skills suck, so if anyone sees a way to tighten it up, please respond. I need all the help i can get. Here's my jsfiddle I was working from

Thanks to all for help and suggestions,

Michael 

var cruiseDate = [];

for (var i = 0; i < data.length; i++) {
    sampleDate = data[i][1];
    thisDate = moment(sampleDate).format('MM/DD/YYYY');
    cruiseDate.push([thisDate]);
}

var minDate = moment(cruiseDate[0], "MM/DD/YYYY").year();
var maxDate = moment(cruiseDate[cruiseDate.length - 1], "MM/DD/YYYY").year();
console.log('first year: ' + minDate + '  last year:  ' + maxDate);

for (var i = minDate; i <= maxDate; i++) {
    temp = null;
    insertDate = moment('12/31/' + i).valueOf();
    console.log('epoch: ' + insertDate + '  ' + moment(insertDate).format("MM/DD/YYYY"));
    data.push(["year-end-null", insertDate, 0, temp, temp, temp, temp, temp, temp, temp, temp, temp, temp, temp, temp, temp])
}

function compare(a, b) { // from stackoverflow
    var aDate = new Date(a[1]);
    var bDate = new Date(b[1]);
    if (aDate < bDate) return -1;
    if (aDate > bDate) return 1;
    return 0;
}

data.sort(compare);

Upvotes: 0

Kacper Madej
Kacper Madej

Reputation: 7886

Gaps in series can be created through null value points.

Other option is to place data for each year in different series that will be linked together and have same color options and names.

Example: http://jsfiddle.net/kcccL6vw/1/

$(function () {
    $('#container').highcharts({
        xAxis: {
            type: 'datetime'
        },
        series: [{
            pointStart: Date.UTC(2013, 11, 30),
            pointInterval: 3,
            pointIntervalUnit: 'month',
            data: [1,2,3,4,5],
            name: 'Series',
            id: 'S1',
            color: '#fa0'
        },{
            pointStart: Date.UTC(2015, 0, 15),
            pointInterval: 3,
            pointIntervalUnit: 'month',
            data: [1,2,3,4,5],
            name: 'Series',
            linkedTo: 'S1',
            color: '#fa0'
        }]
    });
});

Upvotes: 2

Nishith Kant Chaturvedi
Nishith Kant Chaturvedi

Reputation: 4769

Use scatter plot instead of line chart if you dont want to connect points.

type:'scatter'

Upvotes: 0

Related Questions