CODEWITHSUNDEEP
javascripthtmlhighcharts
eamon1234
eamon1234

Reputation: 1585

Delete button when it's clicked javascript

I have some code which is creating a button when a line is added to a chart. When the button is clicked, I want to remove the line from the chart and delete the button. The example can be viewed here.

To wit, the code that successfully adds the button is:

function getChartData(option){
    var category = $('#category').val();
    var option = option.value;
    var seriesTitle = category+option;
    $.ajax({
        url: "getData.php?action=getChartData",
        type: "GET",
        dataType:"json",
        data: {
            category:category,
            option:option
        },
        success: function(json){
            chart.addSeries({
                name: seriesTitle,
                data : []
            });
            $.each(json.Data,function(){   
                chart.series[chart.series.length-1].addPoint([parseFloat(this.Year), parseFloat(this[option])]);
            });
        }

    });
    var series = document.createElement('button');   
    series.onclick = function(){
        removeLine(seriesTitle);
    }
    series.setAttribute('id',seriesTitle);
    series.innerHTML=seriesTitle;
    $('#removeLine').append(series);

}

Then when the button is clicked, this code does not do anything:

function removeLine(seriesTitle){
    chart.series[seriesTitle].remove();
    $(seriesTitle).remove();
}

The error is:

Uncaught TypeError: Cannot call method 'remove' of undefined
removeLine    oil.js:172
series.onclick

Bonus points for anyone who knows how I call a particular line in highcharts based on a variable e.g. this works:

chart.series[chart.series.length-1].remove();

This doesn't:

chart.series[seriesTitle].remove();

Upvotes: 2

Views: 2691

Answers (2)

Ricardo Lohmann
Ricardo Lohmann

Reputation: 26320

When you use chart.series[something].remove(); 'something' have to be the serie position as you can see here. So you have to pass the position thrue the parameter. That's why chart.series[0].remove(); works.

So if you want to fix this problem you can found the serie position according to the title before remove it, like the following.

function removeLine(seriesTitle){
    for(var postion = 0; position < chart.options.series.length; position++) {
        if(chart.options.series[position].name == seriesTitle) {
            chart.options.series[position].remove();
            break;
        }
    }
}

or

function removeLine(seriesTitle){
    $.each(chart.options.series, function(pos, serie){
        if(serie.name == seriesTitle) {
            chart.series[pos].remove();
        }
    });
}

To solve the problem when you remove the button you have to do add a hash tag, like the following:

$('#' + seriesTitle).remove();

So, your function will be the following:

function removeLine(seriesTitle){
    for(var postion = 0; position < chart.options.series.length; position++) {
        if(chart.options.series[position].name == seriesTitle) {
            chart.options.series[position].remove();
            break;
        }
    }
    $('#' + seriesTitle).remove();
}

Upvotes: 2

bkconrad
bkconrad

Reputation: 2650

I think the problem is in the lines

        seriesTitle = chart.addSeries({
            name: seriesTitle,
            data : []
        });

seriesTitle here refers to the the seriesTitle created by 

var seriesTitle = category+option;

and overwrites its value. I would guess that addSeries is returning an object or undefined. seriesTitle is passed to removeLine with this value, and you're using it as a key to the array chart.series.

Try removing the assignment there (it really looks like you don't want it), or just prefix it with var (it will become local to the anonymous function).

If you're unsure about the key-value pairs of chart.series then pass it to console.log() and you can inspect it to see what your keys should look like (and also what the values are).

Upvotes: 1

Related Questions