Google guage chart give Unknown Header Type : 24

google-visualization, javascript

Solution

I was having the same problem.

Using Firebug on my DB result I was able to identify that the problem was that the google library threating a numeric value as an array header.

My array is the following

[['234 234  - ',234.00],['234 234  - ',234.00],['cuarta zzzzzzzzz prueba htmlzzzzzzz  - ',654999.00],['fulanita de tal  - ',150.00],['fulanita de tal  - ',133.00],['Mario Alvarez Alvarez - tony',125143.20],['otra5555 prueba5555  - ',1866.00],['prieba de insert actualizando  - ',1101.00],['prueba 888  - ',987.00],['prueba con html  - ',854.00],['prueba de guardado  - ',123.00],['prueba de insert  - ',369.00],['prueba insert actualizando 02 - ',753.00],['prueba666 7777  - ',1547.00],['prueba666 7777  - ',1547.00],['prueba88888 de guardado8888  - ',1576.00],['tercera prueba  - ',98765.00]]

My javascript error was:

Error: Unknown header type: 234

The solution is explained in the Google Visualization API Reference:

google.visualization.arrayToDataTable(twoDArray, opt_firstRowIsData) Check this link for detailed info

You have to explicit tell the library that the first row is data, not a header. I add the second parameter true like this:

var data = google.visualization.arrayToDataTable(vArray, true);

PD: My web app was working fine until a few days ago. I guess google did some change to the library.

Hope my explain will help you

Problem

Here is my code which is right as per my knowledge. Because I created similar PIE chart successfully, Error is : `Unknown Header Type : 24` I think error is in parsing data from csv file. But it parsed correctly in `string` & `int` form. Can someone tell what is the issue here. ``` <html> <head> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script> <script src="http://jquery-csv.googlecode.com/files/jquery.csv-0.71.js"></script> <script type="text/javascript"> google.load("visualization", "1", {packages:["gauge"]}); google.setOnLoadCallback(drawChart); function drawChart() { // grab the CSV $.get("Chart2-data.csv", function(csvString) { // transform the CSV string into a 2-dimensional array var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar}); //alert(arrayData); // this new DataTable object holds all the data var data = new google.visualization.arrayToDataTable(arrayData); // this view can select a subset of the data at a time var view = new google.visualization.DataView(data); view.setColumns([0,1]); // set chart options var options = { title: "A Chart from a CSV!", hAxis: {title: data.getColumnLabel(0), minValue: data.getColumnRange(0).min, maxValue: data.getColumnRange(0).max}, vAxis: {title: data.getColumnLabel(1), minValue: data.getColumnRange(1).min, maxValue: data.getColumnRange(1).max}, legend: 'none' }; var chart = new google.visualization.Gauge(document.getElementById('gauge')); chart.draw(data, options); }); } </script> </head> <body> <div id="gauge" style="width: 900px; height: 500px;"></div> </body> </html > ``` csv data: ``` Engine,24 min,34 max,0 yellowFrom,10 yellowTo,6 redFrom,6 redTo,0 ```

Original source