Javascript function parameter problem in ASP.NET (null parameter)

See more:

ASP.NET

Javascript

jQuery

chart

, +

I had written this function

<<pre lang="JavaScript">script type="text/javascript">
        // Call DropDownList Fill function
        $(document).ready(function () {
            LoadBankCashList();
        });
        // DropDownList Fill function
        function LoadBankCashList() {
            var cashflowpaytype = $("[id*=drpbankcashflowchartpaytype]").val();
            $.ajax({
                type: "POST",
                url: "home.aspx/GetBankCashList",
                data: "{cashflowpaytype: '" + cashflowpaytype + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (r) {
                    var drpbankcashflowchartpayid = $("[id*=drpbankcashflowchartpayid]");
                    drpbankcashflowchartpayid.empty().append('');
                    $.each(r.d, function () {
                        drpbankcashflowchartpayid.append($("<option></option>").val(this['Value']).html(this['Text']));
                    });
                }
            });
        };
        // Call DropDownList Fill function and fill chart function on dropdown payment type change
        $(function () {
            LoadBankCashList();
            $("[id*=drpbankcashflowchartpaytype]").bind("change", function () {
                LoadBankCashList(),
                LoadBankCashFlowBarChart(); ret
            });
        });
        // Call fill chart function on any one dropdown change
        $(function () {
            LoadBankCashList(),
            LoadBankCashFlowBarChart();
            $("[id*=drpbankcashflowchartpaytype], [id*=drpbankcashflowchartpayid], [id*=drpbankcashflowchartdaterange]").bind("change", function () {
                LoadBankCashFlowBarChart(); ret
            });
        });
        // Fill chart function
        function LoadBankCashFlowBarChart() {
            var paytype = $("[id*=drpbankcashflowchartpaytype]").val();
            var payid = $("[id*=drpbankcashflowchartpayid]").val();
            var bankcashflowbarchartdaterange = $("[id*=drpbankcashflowchartdaterange]").val();
            $.ajax({
                type: "POST",
                url: "home.aspx/GetBankCashFlowBarChart",
                data: "{paytype: '" + paytype + "', payid: '" + payid + "', bankcashflowbarchartdaterange: '" + bankcashflowbarchartdaterange + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (r) {
                    var labels = r.d[0];
                    var series1 = r.d[1];
                    //var series2 = r.d[2];
                    var data = {
                        labels: r.d[0],
                        datasets: [
                            {
                                label: paytype,
                                fillColor: "rgba(255, 255, 193, 0.2)",
                                strokeColor: "#FCD209",
                                pointColor: "#FF8C00",
                                data: series1
                            }
                        ]
                    };
                    $("#dvBankCashFlowBarChart").html("");
                    var canvas = document.createElement('canvas');
                    $("#dvBankCashFlowBarChart")[0].appendChild(canvas);

                    //Fix for IE 8
                    if ($.browser.msie && $.browser.version == "8.0") {
                        G_vmlCanvasManager.initElement(canvas);
                    }
                    var ctx = canvas.getContext('2d');
                    ctx.canvas.height = 335;
                    ctx.canvas.width = 731;
                    var lineChart = new Chart(ctx).Bar(data, {
                        barBeginAtOrigin: true,
                        scaleBeginAtZero: false,
                        bezierCurve: false,
                    });
                },
                failure: function (response) {
                    alert('There was an error.');
                }
            });
        }
    </script>

but on page load (not in aspx.cs) graph is not showing any data because the parameter "payid" is getting null value in my LoadBankCashFlowBarChart() function, but when i change any one of dropdownlist it shows data(getting actual parameter value on change of dropdownlist), .

I am new to Jquery and HTML5

Please help me.

What I have tried:

I had written function LoadBankCashList() and LoadBankCashFlowBarChart()
and called on document.ready but it takes parameter as null of populated dropdownlist (LoadBankCashList()) value