0
203
VisualizaçõesGoogleCharts: las columnas de datos para el eje n.º 0 no pueden ser de tipo cadena
Estoy creando una aplicación web con ExtJS y tengo un gráfico de Google que muestra la cantidad de días que tarda en completarse una tarea, junto con el recuento de esos días. El objetivo es ver fácilmente si las tareas se realizan dentro de un período de tiempo razonable o si gran parte de la tarea se completa en un período de tiempo mucho más largo.
Puedo obtener los datos sin problemas, y convierto los datos sin procesar en algo que Google Charts puede procesar usando una función:
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;La función anterior genera mi matriz de datos, que incluye un encabezado de datos antes de los datos reales. Llamo a esta función en esta función a continuación:
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); }Sin embargo, después de ejecutar esto, recibí el siguiente error:
Data column(s) for axis #0 cannot be of type string Lo cual es extraño porque agregué un campo de type en el encabezado de la columna. Tampoco estoy seguro de si puedo hacer addColumn en mi arrayToDataTable como sería para DataTable .
2 Respostas
Responde à pergunta0
Creo que el problema está en la siguiente afirmación...
var output_data_table = google.visualization.arrayToDataTable([ output_data_array ], false); output_data_array ya está definido como una matriz,
así que no hay necesidad de envolver en otra matriz.
prueba de la siguiente manera...
var output_data_table = google.visualization.arrayToDataTable(output_data_array, false);ACTUALIZAR
el nuevo error resultó de los encabezados de las columnas.
aquí, la notación de objeto debe usarse para definir el tipo.
en su lugar, las cadenas se pasan en la siguiente declaración.
output_data_array.push(["Days, type: 'string'", "Count, type: 'number'", "{role: \"style\"}"]); y dado que no se utiliza la notación de objetos,
el método no reconoce el rol de estilo,
e intenta usar un valor de cadena para datos de series,
lo que da como resultado un error.
usar el constructor de la tabla de datos está bien,
pero si desea corregir arrayToDataTable ,
cambiar a lo siguiente...
output_data_array.push(["Days", "Count", {role: "style", type: "string"}]);o...
output_data_array.push([ {label: "Days", type: "string"}, {label: "Count", type: "number"}, {role: "style", type: "string"} ]);0
Seguí la respuesta de WhiteHat anterior, pero recibí un nuevo error:
All series on a given axis must be of the same data type.No estoy seguro de si hay algún problema con mis datos, hice un registro de mi matriz y tuve:
Los datos me parecen uniformes. No estoy seguro de cómo hacer esto, así que probé un DataTable en su lugar, ya que vi un DataTable con un encabezado de estilo. Reescribí mi función de convertidor de datos como tal:
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;Y luego, en la función principal, se usa como:
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); } Este funcionó de maravilla, pero todavía estoy abierto a volver a visitar la solución arrayToDataTable .