Chart.js: Line Chart Not Accepting Dynamically Generated Arrays

[ericrosas]

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
});

[ericrosas]

That was exactly it, thanks!

[SamClarke2012]

No problem :)

[fulldecent]

Requesting to close issue please

[ssureshs21]

This is good but i want to create dynamic datasets for multiple lines.

My code is below:

var datasetValue = [];
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]
}]
}

var mydata = {
datasets : datasetValue
}

here the count is 3. In this case I want to display three lines in the line chart. The count value will get vary based on my configuration.

I tried to access the data like mydata.datasets[0].data in the alert window. It should show the data of first datasets but its showing undefined.

Could you please anyone tell me how to fix this?

[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]
}
}