CODEWITHSUNDEEP
javascriptjqueryhighcharts
blah
blah

Reputation: 65

Hiding points in HighCharts on click

I got a HighChart with several 2 series. Now I want certain points in series 1 to be disabled when I click a link.

This is my code so far:

$('.remove').click(function () {
    var chart = $('#plot').highcharts(),
        series = chart.series[0];
    if (series.data.length) {

        chart.series[0].data[0].remove();
    }
});

The problem is, that after removing this point, [0] changes to another value and after clicking it again, it goes on and on with deleting. I just want the points to disappear, this is possible with visible:

visible Since 1.2.0 Read only. The series' visibility state as set by series.show(), series.hide(), or the initial configuration.

But I just don't manage to implement it the right way in my onClick event.

Upvotes: 0

Views: 2259

Answers (2)

blah
blah

Reputation: 65

I solved clicks on a link to delete points like this:

$('.remove').click(function () {

    var series = chart.series[0];
    var id = $(this).data('id');

    if (series.data.length) {

        // disable point in graph
        chart.series[0].data[id-1].update(
        {
            y:null
        });

    }

    // delete used tablerow
    $(this).closest("tr").fadeOut(50);
});

And I managed to expulse points onClick on the graph with an event, it's working like this:

    series: [{
        name: 'time',
        data: data: [[1, 129386],[2, 123966],[3, 123162],[4, 123245],[5, 124314],[6, 123946],[7, 124156],[8, 123367],[9, 124460],[10, 123366],[11, 123182],[12, 123915],[13, 124627],[14, 123142],[15, 124044],[16, 124346],[17, 123156],[18, 124356],[19, 123511],[20, 124239],[21, 123252],[22, 125169],[23, 125027],[24, 123508],[25, 124065],[26, 122719],[27, 124199],[28, 122968],[29, 124132],[30, 124052],[31, 124383],[32, 123265],[33, 124083],[34, 123855],[35, 124284],[36, 123719],[37, 123213],[38, 124245],[39, 123079],[40, 123721]],
        events: {

            // if point gets clicked, it'll be deleted
            click: function(event) {
                console.log(event.point);

                var pointId = event.point.x;

                $("#hidden-points-table").fadeIn(1000);
                $('#hidden-elements').append(pointId + ", ");

                event.point.update(
                {
                    y: null
                });

                // deleting the table row
                $("[data-id='"+pointId+"']").closest("tr").fadeOut(50);
            }

        }
    }

Since it was hard to find solutions, I hope this will help some people with it. This page was really helpful, too.

Upvotes: 1

Sebastian Bochan
Sebastian Bochan

Reputation: 37578

If I understand you well, you need to keep "place" where the point was? If yes, you can try to use point.update() function and set null value.

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

Upvotes: 1

Related Questions