onClick takes two clicks to populate results, HighCharts

Question

My issue revolves around having to click a button twice to populate the results desired. I am using HighCharts to draw a chart, but the updateTime3Period() function must be called twice before the chart is properly displayed. Below I have included all my code, except for the updateTime6Period() function, since it is the same as updateTime3Period() in most ways. They both have the same issue. I would like to have the button be clicked once, and then populate the desired chart. I apologize for the lengthy post. Thank you in advance! Note: This does work if updateTime3Period() is clicked twice.

HTML:

<div id="timelinePeriods">
    <ul class="timeSelection">
        <li><a href="#" onclick="updateTime6Period();" > Past 6 Periods</a></li>
        <li><a href="#" onclick="updateTime3Period();"> Past 3 Periods</a></li>
    </ul>
</div>

JS/AJAX for updateTime3Period:

function updateTime3Period() {
    timeFrameUpdate = 'Past 3 Periods';
    displayParam();

    $.ajax({
        url: 'PHP/getValues.php',
        type: 'post',
        data: {
            type: "A",
            type2: B,
            type3: C,
            type4: D,
            type5: E,
            type6: F,
            type7: "getChartCurr"
        },

        success: function(response2) {
            obj2 = JSON.parse(response2);

        }

    });

    $.ajax({
        url: 'PHP/getValues.php',
        type: 'post',
        data: {
            type: "A",
            type2: B,
            type3: C,
            type4: D,
            type5: E,
            type6: F,
            type7: "getChartPrev"
        },

        success: function(response3) {
            obj3 = JSON.parse(response3);

        }

    });

    updateCharts(obj2, obj3, measureUpdate);
}

Functions that are called above (same file):

function displayParam() {
    document.getElementById("params").innerHTML = timeFrameUpdate;
}

function updateCharts(data1, data2, measureData) {

} else if (timeFrameUpdate == 'Past 6 Periods') {
    updateSixMonthPeriodChart(data1, data2, measureData);
} else if (timeFrameUpdate == 'Past 3 Periods') {
    updateThreeMonthPeriodChart(data1, data2, measureData);
}

HighCharts Graph:

function updateThreeMonthPeriodChart(data1, data2, measureData) {

    var measureValue = data1["graph"];
    var measureValuePrev = data2["graphPrev"];
    var changeValue = new Array();

    for (i = 0; i < 3; i++) {
        measureValue[i] = parseInt(measureValue[i]);
        changeValue[i] = (parseInt(measureValue[i]) - parseInt(measureValuePrev[i])) / parseInt(measureValuePrev[i])
    }
    var chart1; // globally available
    $(document).ready(function() {
        chart1 = new Highcharts.Chart({
            chart: {
                renderTo: 'myChart',
            },
            title: {
                text: 'Sales and Percent Change vs. Last Year - Past 3 Periods'
            },
            xAxis: {
                categories: [1, 2, 3],
                title: {
                    text: 'Period'
                },
            },
            yAxis: [{
                labels: { //Right y-axis
                    formatter: function() {
                        return Highcharts.numberFormat(this.value, 1, '.', ',') + '%';
                    }
                },
                title: {
                    text: '% Change'
                },
                opposite: true
            },
            { //Left y-axis
                labels: {
                    formatter: function() {
                        return '$' + Highcharts.numberFormat(this.value, 0, '', ',');
                    }
                },
                title: {
                    text: 'Sales ($)'
                }
            },
            ],
            series: [{
                name: 'Sales',
                data: [measureValue[0], measureValue[1], measureValue[2]],
                color: '#363534',
                //Charcoal
                yAxis: 1,
                type: 'column'
            },
            {
                name: '% Change',
                data: [changeValue[0], changeValue[1], changeValue[2]],
                color: '#E17000',
                //Pumpkin
                //yAxis: 2,
                type: 'spline'
            }]
        });
    });
}

score 0 · Accepted Answer · answered Jan 08 '12 at 04:38

It might be cause of your ajax request, it didn't complete at first click.in the next click it get the result from the catch and runs faster.

try this :

function updateTime3Period() {
    timeFrameUpdate = 'Past 3 Periods';
    displayParam();

        $.ajax({
        url : 'PHP/getValues.php',
        type : 'post',
        data : {
            type : "A",
            type2 : B,
            type3 : C,
            type4 : D,
            type5 : E,
            type6 : F,
            type7 : "getChartCurr"
        },

        success : function (response2) {
            obj2 = JSON.parse(response2);
                     $.ajax({
                           url : 'PHP/getValues.php',
                           type : 'post',
                           data : {
                        type : "A",
                        type2 : B,
                        type3 : C,
                        type4 : D,
                        type5 : E,
                        type6 : F,
                        type7 : "getChartPrev"
                        },
                           success : function (response3) {
                        obj3 = JSON.parse(response3);
                        updateCharts(obj2,obj3,measureUpdate);  
                           }
                    });
        }

    });
}

onClick takes two clicks to populate results, HighCharts

1 Answers1