OK Solved the various errors but not getting the chart results desired.
Despite the use of *data.setColumnProperty(2, 'role', 'certainty');* for col 2 (and 4,6,8,10) and a correct array and DataTable, none of the chart lines change from certain to uncertain mode. On the chart below (output from the code shown below it) the lines should all change at ~14 hours where the input data changes, but it doesn't ... <https://lh3.googleusercontent.com/-UMaJi_rqyWo/VISX3ft5P0I/AAAAAAAACdk/UVCvbvJrmdQ/s1600/temps.png> Here is the data array contents around the change... <https://lh4.googleusercontent.com/-REnbrgSB-k8/VISYMhMZvaI/AAAAAAAACds/vAyQrJxoPwM/s1600/input.png> And here is the page code... <html> <head> <script src="https://www.google.com/jsapi";> </script> <script src="http://code.jquery.com/jquery-1.10.1.min.js";> </script> <script src="http://jquery-csv.googlecode.com/git/src/jquery.csv.js"; ></script> <script> // Load the Visualization API from Google and set Listener google.load("visualization", "1", {packages:["corechart"]}); google.setOnLoadCallback(drawChart); // this has to be a global function function drawChart() { // grab the CSV $.get("temps.csv", function(csvString) { // transform the CSV string into a 2-dimensional array var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks. castToScalar}); alert (arrayData[0]+ '\n' + arrayData[1]); //alert(arrayData.join('\n')); // this new DataTable object holds all the data // Define the 'certainty' columns var data = new google.visualization.arrayToDataTable(arrayData); data.setColumnProperty(2, 'role', 'certainty'); data.setColumnProperty(4, 'role', 'certainty'); data.setColumnProperty(6, 'role', 'certainty'); data.setColumnProperty(8, 'role', 'certainty'); data.setColumnProperty(10,'role', 'certainty'); //Create a DataView from the data_table //Set the first column of the dataview to format as a number, and return the other columns as is. //dataView.setColumns([{calc: function(data, row) { return data.getFormattedValue(row, 0); }, type:'number'}, 1, 2, 3, 4, 5]); // set chart options var start = -20; var vTicks = []; while (start <= 100) { vTicks.push(start); start+=10; } var options = { fontSize: 8, legend: {position: 'right'}, colors: ['green', 'blue', 'red', 'green', 'yellow', 'gray'], series: { 0: { lineDashStyle: [2, 2] } }, hAxis: { title: 'Time', gridlines: { count: 25, }, minorGridlines: { count: 3 }, }, vAxis: { title: 'Temperature', gridlines: { count: 12, }, minorGridlines: { count: 4 }, ticks: vTicks } }; var chart = new google.visualization.LineChart(document.getElementById( 'chart_div')); chart.draw(data,options); }); } </script> </head> <body> <div id="chart_div" style="width: 800px; height: 300px;"></div> </body> </html> As far as I can tell I have faithfully replicated several examples I discovered, but obviously I have something wrong. Hopefully someone's sharp eyes will catch the error. [:-)} -- You received this message because you are subscribed to the Google Groups "Google Visualization API" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/google-visualization-api. For more options, visit https://groups.google.com/d/optout.
