On Monday, December 8, 2014 9:57:38 AM UTC-5, Sergey wrote: > > Hi Ken, > > You had some pretty fundamental issues in the code that you attached in > your initial post. The one that drew my eye is your .setColumns call. With > the way you're calling it, it seems like you expect it to set the type: > 'boolean', and role: 'certainty' on all of the columns, which is not what > it does. .setColumns *changes* the columns of the chart to a subset (plus > calculated columns). So when you wrote .setColumns([2, 4, 6, 8]), that > means that those columns would be the only ones in the data table. You > actually don't need to use a DataView or the ready event at all. In fact, > here is an example of the chart you want: http://jsfiddle.net/stjxwsju/ > > I think one of the issues you may be seeing is that the jQuery CSV parser > doesn't detect boolean values, which is completely reasonable. You might > have to override it, and use a custom converter. >
Sergey - I can't even begin to express my gratitude at your remarkable, and non-judgement (at my struggling efforts) responses! You are a gem amongst gems! I modified my code substantially to attempt to incorporate your suggestions, plus some additional thoughts. This is my current 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); $.get("temps.csv", function(csvString) { // transform the CSV string into a 2-dimensional array dataArray = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks. castToScalar}); //alert (dataArray[0]+ '\n' + dataArray[1]); //alert(chartTbl.join('\n')); }); function drawChart() { data = [ // columns: Time,Dwn,Cert,Mid,Cert,Out,Cert,Frez,Cert,Frig,Cert {label: 'Time', type: 'number'}, //col 0 {label: 'Dwn', type: 'number'}, //col 1 {label: 'Cert', type: 'boolean'}, //col 2 {label: 'Mid', type: 'number'}, //col 3 {label: 'Cert', type: 'boolean'}, //col 4 {label: 'Out', type: 'number'}, //col 5 {label: 'Cert', type: 'boolean'}, //col 6 {label: 'Frez', type: 'number'}, //col 7 {label: 'Cert', type: 'boolean'}, //col 8 {label: 'Frig', type: 'number'}, //col 9 {label: 'Cert', type: 'boolean'}, //col 10 ]; //alert(dataArray); //alert(data); data = google.visualization.arrayToDataTable(dataArray, true); //true means the first row has data. var csv = google.visualization.dataTableToCsv(data); alert(csv); // Define the columns... data.setColumnProperty(0, 'role', 'domain'); 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'); // }); // set chart options var start = -20; var vTicks = []; while (start <= 100) { vTicks.push(start); start+=10; } var d = new Date() var days = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday', 'Saturday']; var months = ['January','February','March','April','May','June','July', 'August','September','October','November','December']; var day = days[d.getDay()]; var month = months[d.getMonth()]; var options = { fontSize: 8, legend: {position: 'right'}, // columns: Dwn, Mid, Out, Frez, Frig //legend: 'true', title: day, series: { // n: {color: '#1DC70E',lineWidth:4,lineDashStyle: [2, 2] }, 0: { color: '#E30805' }, //Dwn 1: { color: '#F78F07' }, //Mid 2: { color: '#1DC70E' }, //Out 3: { color: '#0A5EFA' }, //Frez 4: { color: '#44B8F2' } //Frig }, 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> I am no longer getting any JavaScript Console errors and am getting everything with the charts I desire EXCEPT still not getting the 'certainty' results expressed on the graph. NOTE: I am not getting the labels either that I thought I set in the drawChart definitions. <https://lh5.googleusercontent.com/-Z2WqLDlGUjc/VIYbb9_n9FI/AAAAAAAACeE/wu0E6tDaOPY/s1600/graph.png> I seem to kinda be getting the csv data OK, as this is a partial dump of the dataTableToCsv(data) reconstruction of what is feeding the chart... <https://lh3.googleusercontent.com/-af1mUI6BEOA/VIYdFqWGfKI/AAAAAAAACek/VGvhr9sZaOM/s1600/response.png> I am puzzled though, why the alert dump seems to be discontinuous. It sure doesn't look right! Anyway, much closer than ever before. Hopefully a few "fine tuning" efforts will put the icing on the cake. [:-)} -- 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.
