<script type="text/javascript">
            $(document).ready(function () {
                $("#btn_line_chart").on('click', function () {
                    var mb_one = $("#ddl_one").val() + " " + $("#ddl_one_time").val();
                    var mb_two = $("#ddl_two").val() + " " + $("#ddl_two_time").val();
                    var dt_col = $("#" + '<%= hdnTimeColumn.ClientID %>').val();
                    var dt_tblName = $("#" + '<%= hdnTableName.ClientID %>').val();
                    var dt_colNames = {};
                    var dt_colColors = {};

                    dt_colNames = ArrayPush();
                    dt_colColors = ArrayPushColors();


                    var jsonData = JSON.stringify({
                        mobileId_one: mb_one,
                        mobileId_two: mb_two,
                        dtColumnName: dt_col,
                        dbTableName: dt_tblName,
                        dbColumnNames: dt_colNames,
                        dbColumnColors: dt_colColors

                    });

                    $.ajax({
                        type: "POST",
                        url: "sampleservice.asmx/getLineChartData",
                        data: jsonData,
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: OnSuccess_,
                        error: OnErrorCall_
                    });

                    function OnSuccess_(reponse) {
                        var aData = reponse.d;
                        var repLength = reponse.d.length;

                        var aLabels = aData[0];
                        var colColumns = aData[1];
                        var colColumnsLength = colColumns.length;

                        var colColors = aData[2];
                        var colColorsLength = colColors.length;
                        alert(colColorsLength);

                        var dynDatasets = [];
// i am declaring my object properties here
                        var dsetBuilding = {
                            label: "",
                            fill: false,
                            fillColor: "",
                            strokeColor: "",
                            pointColor: "",
                            pointStrokeColor: "#fff",
                            pointHighlightFill: "#fff",
                            pointHighlightStroke: "",
                            backgroundColor: "",
                            borderColor: "",
                            data: ""
                        };
    //iterating through the loop and adding them to array
                        for (var i = 0; i < colColumnsLength; i++) {

                            alert(colColumns[i]);

                                dsetBuilding.label = "" + colColumns[i].toString() + "";
                                dsetBuilding.fillColor = "" + colColors[i].toString() + "";
                                dsetBuilding.strokeColor = "" + colColors[i].toString() + "";
                                dsetBuilding.pointColor = "" + colColors[i].toString() + "";
                                dsetBuilding.pointHighlightStroke = " " + colColors[i].toString() + "";
                                dsetBuilding.backgroundColor = "" + colColors[i].toString() + "";
                                dsetBuilding.borderColor = "" + colColors[i].toString() + "";
                                dsetBuilding.data = "" + aData[i + 4] + "";

// i am pushing the object to array
                                dynDatasets.push(dsetBuilding);
                                alert(dynDatasets);




                        }
                        //                    var aDatasets1 = aData[1];
                        //                    var aDatasets2 = aData[2];

                        var data = {
                            labels: aLabels,
                            datasets: dynDatasets

                        };


                        var options = {

                            scaleOverride: true,
                            scaleSteps: 10,
                            scaleStepWidth: 10,
                            scaleStartValue: 0,
                            showXLabels: 5

                        };

                        var ctx = $("#myChart").get(0).getContext('2d');
                        ctx.canvas.height = 220;  // setting height of canvas
                        //ctx.canvas.width = 800; // setting width of canvas
                        //                    var lineChart = new Chart(ctx).Line(data, {
                        //                        bezierCurve: false
                        //                    });//bezierCurve: false,

                        var lineChart = new Chart(ctx, {
                            type: "line",
                            data: data,
                            options: options
                        });
                    }
                    function OnErrorCall_(repo) {

                        alert("Woops something went wrong, pls try later !");
                    }
                    function ArrayPush() {

                        var searchIDs = $("#<%= chkBoxListTables.ClientID %> input:checkbox:checked").map(function () {
                            return $(this).closest("td").find("label").html();
                        }).get();



                        return searchIDs;
                    }
                    function ArrayPushColors() {

                        var searchIDs = $("#<%= chkBoxListTables.ClientID %> input:checkbox:checked").map(function () {
                            return $(this).closest("td").find("span").css("color");
                        }).get();



                        return searchIDs;
                    }
                });
            });
            //        window.onload = function () {
            //            var ctx = document.getElementById("canvas").getContext("2d");
            //            window.myLine = new Chart(ctx).Line(lineChartData, {
            //                scaleOverride: true,
            //                scaleSteps: 10,
            //                scaleStepWidth: 50,
            //                scaleStartValue: 0
            //            });
            //        }
        </script>