Question 240480 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Highcharts setData maximum call stack exceed

I am using highcharts, and I want to click a point and have a model popup and be able to change a dropdown and change the color and symbol of the point. I can change one point, but then when I click on the next point. I get Uncaught RangeError: Maximum call stack size exceeded. Any help would be great!

var update;
// point click event function
function showModal(p) {  
    update = p;
    var d = moment(p.point.x).format('M/D/YYYY H:mm');
    $('#point-date').html(d);
    $('#point-value').html(p.point.y);
    $('#point-flag').val(p.point.flag);
    $('#pointModal').modal('show');
}

// Clicking save on modal
function saveFlag() {

    var newData = update.point.series.data;
    var dataPoint = newData.filter(function (r) {
        return r.SiteID == update.point.SiteID && r.Date_Time == update.point.Date_Time
    });
    if (dataPoint != null && dataPoint.length > 0) {
        var size = 2;
        if (data.length < 50)
            size = 4;

        var value = $('#point-flag').val();
        dataPoint[0].marker.radius = size;
        dataPoint[0].marker.symbol = getSymbol(value);
        dataPoint[0].colorIndex = getColorIndex(value);
        dataPoint[0].flag = value;

        for (var index in timeseries.series) {
            if (timeseries.series[index].name == update.point.series.name) {
                timeseries.series[index].setData(newData);
            }
        }
    }
    $('#pointModal').modal('hide');
}
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I figured out how to update a point, and this is working for me.

    var newData = update.point.series.data;
for (var index in timeseries.series) {
    if (timeseries.series[index].name == update.point.series.name) {
        for (var pointIndex in timeseries.series[index].data) {
            if (timeseries.series[index].data[pointIndex].SiteID == update.point.SiteID
                && timeseries.series[index].data[pointIndex].Date_Time == update.point.Date_Time) {
                    var value = $('#point-flag').val();
                    timeseries.series[index].data[pointIndex].update({
                        marker: { radius: 4, symbol: getSymbol(value) },
                        colorIndex: getColorIndex(value)
                    });
            }
        }
    }
}

  2. 0

    My understanding is that in this example timeseries.series refers to this API and is an array. To loop over an array, I don’t want to use for...in, but for...of, which returns each element:

            for (var series of timeseries.series) {
            if (series.name == update.point.series.name) {
                series.setData(newData);
            }
        }

    See:
    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for…of
    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for…in

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search