CODEWITHSUNDEEP
javascripthighcharts
Ryan Quinn
Ryan Quinn

Reputation: 1205

Highcharts - show only selected points

I want to have a line that only shows points that are selected (they will actually be pre-selected).

In this example - http://jsfiddle.net/jhG8j/ - you can show selected points when you click the button, but I can only get it to work if all the other points are already shown (marker:enabled). Is there a way to start off with just a plain line, and then only show the selected points?

Here is the relevant code from jsfiddle:

$(function () {
$('#container').highcharts({
    plotOptions: {
        line: {
            marker: {
                enabled: true
            }  
        }
    },
    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }]
});

// button handler
var chart = $('#container').highcharts(),
    i = 0;
$('#button').click(function() {

    if (i == chart.series[0].data.length) {
        i = 0;
    }
    chart.series[0].data[i].select(true, true);
    i++;
});

});

Upvotes: 2

Views: 4081

Answers (1)

Duniyadnd
Duniyadnd

Reputation: 4043

You can get away with this by creating two separate series. In order to align your series to look like they are one line chart, you'd need to add a few nulls into your data, and ensure that the last data point of the first series is the first data point of the following series.

Using the jsfiddle you provided, updated code is below:

$(function () {
    $('#container').highcharts({
        plotOptions: {
            line: {

            }
        },
        series: [{
            data: [29.9, 71.5, 106.4] ,
            marker: {
                enabled: true
            } ,
            color: '#000000'
        },{
            data: [null, null , 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]  ,
            marker: {
                enabled: false ,
                states: {
                    hover: {
                        enabled: false   
                    } ,
                    states: {
                        select: false   
                    }
                }
            },
            color: '#000000'
        }]
    });

    // button handler
    var chart = $('#container').highcharts(),
        i = 0;
    $('#button').click(function() {

        if (i == chart.series[0].data.length) {
            i = 0;
        }
        chart.series[0].data[i].select(true, true);
        i++;
    });
});

Upvotes: 3

Related Questions