Line Chart Not Accepting Dynamically Generated Arrays

I am writing a WordPress plugin that will be using Chart.js on an admin page. I am using jQuery to pull data from a database via AJAX and then turning this data into an array. When I JSON decode it and turn it into an array in javascript Chart.js does not accept the values(the chart doesn’t display, or only shows one of the labels).

Here is my code:

           if($("#transactions_per_month_chart").length){
                var ctx = $("#transactions_per_month_chart").get(0).getContext("2d");
                //This will get the first returned node in the jQuery collection.
                var myNewChart = new Chart(ctx);

                // AJAX request to get the number of transactions for this month
                var ajaxurl = "<?php echo admin_url('admin-ajax.php'); ?>";
                var lineChartDates = [];
                var lineChartTransactions = [];
                var data = {
                        action: 'populate_admin_line_chart_dates'
                };
                $.post(ajaxurl, data, function(response) {
                    $.each(JSON.parse(response), function(i, obj){
                        lineChartDates[i] = String(obj);
                    });
                });
                //alert(lineChartDates);

                var dataTwo = {
                        action: 'populate_admin_line_chart_transactions'
                };
                $.post(ajaxurl, dataTwo, function(response) {
                    $.each(JSON.parse(response), function(i, obj){
                        lineChartTransactions[i] = parseInt(obj);
                    });
                });

                // Create the line chart object
                var dataThree = {
                    labels :lineChartDates,
                    datasets : [
                        {
                            fillColor : "rgba(220,220,220,0.5)",
                            strokeColor : "rgba(220,220,220,1)",
                            pointColor : "rgba(220,220,220,1)",
                            pointStrokeColor : "#fff",
                            data : lineChartTransactions
                        }
                    ]
                }
                var adminLineChart = new Chart(ctx).Line(dataThree);
}

Am I missing something or does Chart.js just not accept dynamically generated arrays?

If you are familiar with WordPress this code exists in the callback function in the following hook:

add_action( 'admin_footer', 'er_qm_admin_chart_js' )

Any help will be greatly appreciated!

[SamClarke2012]

It sounds like your getting caught out by async loading

try

$.ajaxSetup({
async: false
});

[ssureshs21]

I got a solution by removing the “[]” from the datasetValue. Below is my new code

for (var j = 0; j < count; j++) { datasetValue[j] = { fillColor: ‘rgba(220,220,220,0.5)’, strokeColor :‘rgba(220,220,220,1)’ , title :‘2013’, data : [Math.round(Math.random() * 100),Math.round(Math.random() * 100)-10] } }