Thank you in advance for your help.

I have a page that renders a handful of charts but I seem to be experiencing a scope issue only once in a while.

I have a series of jQuery functions I made to render specific types of charts based on options passed in, each one contains an AJAX call to request the proper data-set based on the options submitted when calling the chart function on the chart container.

Some of the charts are paired with a second chart whose options are determined by the JSON response of the first charts AJAX call response. The paired chart is rendered in a callback in the first chart, after the AJAX success: is triggered.

Most of the time this works perfectly fine but occasionally I get the error "TypeError: $(...).lineChart is not a function". The first barChart renders every time, but once in a while the lineChart function that is defined in the same file as barChart is no longer accessible.

Any delay I add into the code seems to fix the issue. The issue does not exist when I use the debugger and I can catch the error and re-call the lineChart function after a timeout which seems to work as well.

I'm at a loss as to why the function would no longer be available sometimes and what seems randomly.

I apologize for not pasting in the exact code. There are a fair bit of comments and variable/function names I cannot post here.

Thanks.

$.fn.barChart = function (options, callback) {
    $.ajax(options["url"], {
        method: "POST",
        type: "json",
        data: options.data,
        success: function (response) {

            // ..render this chart ..

            var optionsForNewChart = {}; // ..generate new options to respond with base on response JSON
            callback(optionsForNewChart);
        }
    });
};

$.fn.lineChart = function (options) {
    $.ajax(options["url"], {
        method: "POST",
        type: "json",
        data: options.data,
        success: function (response) {
            // ..render this chart ..
        }
    });
}


$("#barChart1").barChart({
    url: "https://...",
    data: {
        //post data
    }
}, function (response) {
    $('#lineChart1').lineChart(response);
});

$("#barChart2").barChart({
    url: "https://...",
    data: {
        //post data
    }
}, function (response) {
    $('#lineChart2').lineChart(response);
});

$("#barChart3").barChart({
    url: "https://...",
    data: {
        //post data
    }
}, function (response) {
    $('#lineChart3').lineChart(response);
});