GoogleCharts - Data column(s) for axis #0 cannot be of type string

Question

I'm building a web app using ExtJS, and I have a Google Chart that displays the number of days it takes for a task to be completed, along with the count for those days. The aim is to easily see if the tasks are being done within a reasonable amount of time, or if a lot of the task are completed at a much longer time period.

I can fetch the data with no problems, and I convert the raw data to something that Google Charts can process using a function:

var output_data= "";
var output_data_array = [];
var data_count = data.length;

google.charts.load('current', {'packages':['corechart', 'bar']});

var header = "[\"Days\", \"Count\", { role: \"style\" } ],";
output_data_array.push(["Days, type: 'string'", "Count, type: 'number'", "{role: \"style\"}"]);

for(var i = 0 ; i < data_count ; i++){

    var data_entry = data[i];

    var number_of_days = data_entry.days;
    var count = parseFloat(data_entry.count);
    var color;

    if(number_of_days < limit){
        color = 'green';
    }
    else{
        color = 'red';
    }

    output_data_array.push([number_of_days, count, color]);

}

var output_data_table = google.visualization.arrayToDataTable([
    output_data_array
], false);

return output_data_table;

The function above generates my data array, which includes a data header before the actual data. I call this function in this function below:

var graph_data = this.convertData_forGoogleCharts(analytics_data_array, 15);

google.charts.load('current', {'packages':['corechart', 'bar']});

// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);

function drawChart() {

    var view = new google.visualization.DataView(graph_data);
    view.setColumns([0, 1,
                     { calc: "stringify",
                      sourceColumn: 1,
                      type: "string",
                      role: "annotation" },
                     2]);

    var options = {
        title: "Test Chart",
        width: width,
        height: height,
        bar: {groupWidth: "95%"},
        legend: { position: "none" },
    };
    var chart = new google.visualization.ColumnChart(document.getElementById("myChartPanel"));
    chart.draw(view, options);
}

However, after I ran this, I got the following error:

Data column(s) for axis #0 cannot be of type string

Which is odd because I added in the a type field in the column header. I'm also not sure if I can do addColumn in my arrayToDataTable like how it would go for DataTable.

user_5090771 · Answer

I think the problem is with the following statement...

var output_data_table = google.visualization.arrayToDataTable([
    output_data_array
], false);

output_data_array is already defined as an array,
so no need to wrap in another array.

try as follows...

var output_data_table = google.visualization.arrayToDataTable(output_data_array, false);

UPDATE

the new error resulted from the column headings.

here, object notation should be used to define the type.
instead, strings are being passed in the following statement.

output_data_array.push(["Days, type: 'string'", "Count, type: 'number'", "{role: \"style\"}"]);

and since object notation is not used,
the method does not recognize the style role,
and tries to use a string value for series data,
which results in error.

using the data table constructor is fine,
but if you want to correct arrayToDataTable,
change to the following...

output_data_array.push(["Days", "Count", {role: "style", type: "string"}]);

or...

output_data_array.push([
  {label: "Days", type: "string"},
  {label: "Count", type: "number"},
  {role: "style", type: "string"}
]);

user_1374416 · Answer

I followed WhiteHat's answer above, but I got a new error:

All series on a given axis must be of the same data type.

Not sure if there's anything wrong with my data, I did a log of my array and I had:

The data looks uniform to me. I'm not sure how to go about this, so I tried a DataTable instead, as I saw a DataTable with a style header. I re-wrote my data converter function as such:

var data_table = new google.visualization.DataTable();
data_table.addColumn({type: 'string', label: 'Number of Days'});
data_table.addColumn({type: 'number', label: 'Count'});
data_table.addColumn({type: 'string', role: 'style'});


for(var i = 0 ; i < data_count ; i++){

    var data_entry = data[i];

    var number_of_days = data_entry.days;
    var count = parseFloat(data_entry.count);
    var color;

    if(number_of_days < tat_limit){
        color = 'green';
    }
    else{
        color = 'red';
    }

    data_table.addRow([number_of_days, count, color]);

}

output_data = header + output_data;

return data_table;

And then in the main function, it's being used as:

function drawChart() {

    var graph_data = this.convertData_forGoogleCharts(analytics_data_array, 15);

    var view = new google.visualization.DataView(graph_data);
    view.setColumns([0, 1,
                     { calc: "stringify",
                      sourceColumn: 1,
                      type: "string",
                      role: "annotation" },
                     2]);

    var options = {
        title: "Test Chart",
        width: width,
        height: height,
        bar: {groupWidth: "95%"},
        legend: { position: "none" },
    };

    var chart = new google.visualization.ColumnChart(document.getElementById("myChartPanel"));
    chart.draw(view, options);
}

This one worked like a charm, but I'm still open to revisiting the arrayToDataTable solution.

GoogleCharts - Data column(s) for axis #0 cannot be of type string

2 Answers