Hello, asgallant, Thanks! Would you mind editing your code from this example (earlier in the thread): http://jsfiddle.net/asgallant/zwPuU/ to achieve the same effect?
Also, could you direct me to some Google documentation on the view part of the code? The basic documentation for Google really does not have enough examples. Thanks, Scott On Monday, April 29, 2013 5:56:58 PM UTC-4, asgallant wrote: > > This is a method that handles it generically, regardless of the number of > labels: http://jsfiddle.net/asgallant/JENzE/5/ > > On Monday, April 29, 2013 4:12:37 PM UTC-4, SSH wrote: >> >> Hello, asagallant, >> >> In the *view* portion of the code, is there a more generic way of coding >> this than specifying 'Germany', etc.? I would like to make the code more >> flexible so that I can vary the # of bars sent to the JavaScript function & >> have it work automatically. >> >> Thanks, >> Scott >> >> >> On Thursday, January 10, 2013 4:09:23 PM UTC-5, asgallant wrote: >>> >>> No, you didn't do anything wrong. That chart is drawing exactly the way >>> it is supposed to. Each of your rows of data has 12 columns being drawn, >>> but most of them are null. They still occupy space along the axis, though, >>> which is why the columns seem so narrow. This is in fact the exact reason >>> why setting isStacked to true is necessary to make the hack work right. >>> >>> On Thursday, January 10, 2013 2:54:35 PM UTC-5, Justawebbie wrote: >>>> >>>> I hope I do not drive you nuts Asgallant or anyone else who helps me >>>> out! >>>> >>>> I tried to implement your column bar color change to a bar chart. I >>>> got to work the way I wanted but I can not use isStacked:'true' because I >>>> do not want them to stack but to go side by side like it is now. The >>>> problem I am having is the bars are way to small for the size I need it to >>>> be in width and height. Did I do something wrong? >>>> >>>> here is the code I am using: >>>> >>>> google.load('visualization', '1', {packages: ['corechart']}); >>>> >>>> function drawVisualization() { >>>> var query = new google.visualization.Query(' >>>> http://spreadsheets.google.com/tq?key=0AjlSK7_zXoNHdFZ6NmJTaU1vNjNxWFZMQ3AxcWVHRVE&pub=1' >>>> ); >>>> // Apply query language statement. >>>> // Send the query with a callback function. >>>> query.send(handleQueryResponse); >>>> } >>>> >>>> function handleQueryResponse(response) { >>>> if (response.isError()) { >>>> alert('Error in query: ' + response.getMessage() + ' ' + >>>> response.getDetailedMessage()); >>>> return; >>>> } >>>> >>>> var data = response.getDataTable(); >>>> // set the 3rd column to the "tooltip" role >>>> data.setColumnProperty(3, 'role', 'tooltip'); >>>> data.setColumnProperty(4, 'role', 'tooltip'); >>>> >>>> var view = new google.visualization.DataView(data); >>>> view.setColumns([0, { >>>> type: 'number', >>>> label: 'Value', >>>> calc: function (dt, row) { >>>> console.log(dt.getValue(row, 0)); >>>> return (dt.getValue(row, 0) == 'NOx') ? dt.getValue(row, 1) : >>>> null; >>>> } >>>> }, 3, { >>>> type: 'number', >>>> label: 'Value', >>>> calc: function (dt, row) { >>>> return (dt.getValue(row, 0) == 'NOx') ? dt.getValue(row, 2) : >>>> null; >>>> } >>>> }, 4, { >>>> type: 'number', >>>> label: 'Value', >>>> calc: function (dt, row) { >>>> return (dt.getValue(row, 0) == 'CO') ? dt.getValue(row, 1) : null; >>>> } >>>> }, 3, { >>>> type: 'number', >>>> label: 'Value', >>>> calc: function (dt, row) { >>>> return (dt.getValue(row, 0) == 'CO') ? dt.getValue(row, 2) : null; >>>> } >>>> }, 4, { >>>> type: 'number', >>>> label: 'Value', >>>> calc: function (dt, row) { >>>> return (dt.getValue(row, 0) == 'PM') ? dt.getValue(row, 1) : null; >>>> } >>>> }, 3, { >>>> type: 'number', >>>> label: 'Value', >>>> calc: function (dt, row) { >>>> return (dt.getValue(row, 0) == 'PM') ? dt.getValue(row, 2) : null; >>>> } >>>> }, 4, { >>>> type: 'number', >>>> label: 'Value', >>>> calc: function (dt, row) { >>>> return (dt.getValue(row, 0) == 'PM10') ? dt.getValue(row, 1) : >>>> null; >>>> } >>>> }, 3, { >>>> type: 'number', >>>> label: 'Value', >>>> calc: function (dt, row) { >>>> return (dt.getValue(row, 0) == 'PM10') ? dt.getValue(row, 2) : >>>> null; >>>> } >>>> }, 4,{ >>>> type: 'number', >>>> label: 'Value', >>>> calc: function (dt, row) { >>>> return (dt.getValue(row, 0) == 'PM2.5') ? dt.getValue(row, 1) : >>>> null; >>>> } >>>> }, 3,{ >>>> type: 'number', >>>> label: 'Value', >>>> calc: function (dt, row) { >>>> return (dt.getValue(row, 0) == 'PM2.5') ? dt.getValue(row, 2) : >>>> null; >>>> } >>>> }, 4, { >>>> type: 'number', >>>> label: 'Value', >>>> calc: function (dt, row) { >>>> return (dt.getValue(row, 0) == 'SO2') ? dt.getValue(row, 1) : >>>> null; >>>> } >>>> }, 3, { >>>> type: 'number', >>>> label: 'Value', >>>> calc: function (dt, row) { >>>> return (dt.getValue(row, 0) == 'SO2') ? dt.getValue(row, 2) : >>>> null; >>>> } >>>> }, 4]); >>>> >>>> var visualization = new >>>> google.visualization.BarChart(document.getElementById('visualization')); >>>> visualization.draw(view, { >>>> backgroundColor: '#F7F7F7', >>>> legend: 'none', >>>> //colors: ['#336699'], // with only one entry here, you will never >>>> get more than 1 color >>>> is3D: 'True', >>>> }); >>>> } >>>> >>>> google.setOnLoadCallback(drawVisualization); >>>> >>>> >>>> Thanks for the help in advance. >>>> >>>> justawebbie in learning >>>> >>>> On Thursday, January 10, 2013 8:54:01 AM UTC-9, asgallant wrote: >>>>> >>>>> You're welcome. >>>>> >>>>> On Thursday, January 10, 2013 12:40:02 PM UTC-5, Justawebbie wrote: >>>>>> >>>>>> Oh yes thank you so much Asgallant! Have a great week! >>>>>> >>>>>> Take care, justawebbie >>>>>> >>>>>> On Wednesday, January 9, 2013 1:01:22 PM UTC-9, asgallant wrote: >>>>>>> >>>>>>> Oops, I left out the tooltip column in the link I posted. Is this >>>>>>> what you're looking for: http://jsfiddle.net/asgallant/JENzE/3/? >>>>>>> >>>>>>> On Wednesday, January 9, 2013 4:17:21 PM UTC-5, Justawebbie wrote: >>>>>>>> >>>>>>>> I just noticed the custom tooltips from the google spreadsheet do >>>>>>>> not work. How can I get them to work with what you were able to show >>>>>>>> me to >>>>>>>> do with custom colors for each bar? >>>>>>>> >>>>>>>> Thanks for the help beforehand Asgallant! >>>>>>>> >>>>>>>> >>>>>>>> >>>>>>>> >>>>>>>> On Wednesday, January 9, 2013 11:52:26 AM UTC-9, Justawebbie wrote: >>>>>>>>> >>>>>>>>> Thank you so much Asgallant, that really helped me to see what I >>>>>>>>> did wrong and it is nice. >>>>>>>>> >>>>>>>>> Take care and again thank you for your help. >>>>>>>>> >>>>>>>>> >>>>>>>>> >>>>>>>>> On Tuesday, January 8, 2013 2:37:54 PM UTC-9, asgallant wrote: >>>>>>>>>> >>>>>>>>>> To get the tooltips, you have to include the tooltip column after >>>>>>>>>> every data column in the view. Also, if you are looking for >>>>>>>>>> different >>>>>>>>>> colors for each bar, you might be better off assigning data to >>>>>>>>>> columns by >>>>>>>>>> name rather than by value (example here: >>>>>>>>>> http://jsfiddle.net/asgallant/zwPuU/). Here's an example using >>>>>>>>>> your code as the base: http://jsfiddle.net/asgallant/JENzE/ >>>>>>>>>> >>>>>>>>>> On Tuesday, January 8, 2013 5:23:25 PM UTC-5, Justawebbie wrote: >>>>>>>>>>> >>>>>>>>>>> I know this is just me getting myself confused as I read all the >>>>>>>>>>> different ways everyone is doing this. I am trying to color each >>>>>>>>>>> column a >>>>>>>>>>> different color and use tooltips all coming from a google >>>>>>>>>>> spreadsheet. I >>>>>>>>>>> have tried doing isStacked with 0's in the other columns which >>>>>>>>>>> worked but >>>>>>>>>>> my tooltips stopped working for the 2 of the 3 columns. I then >>>>>>>>>>> went back >>>>>>>>>>> to the drawing board so now I am stuck. I think I just have this a >>>>>>>>>>> bit off >>>>>>>>>>> in coding or I am way off base on it. Thanks in advance for any >>>>>>>>>>> help you >>>>>>>>>>> give to this newby. >>>>>>>>>>> >>>>>>>>>>> var visualization; >>>>>>>>>>> >>>>>>>>>>> function drawVisualization() { >>>>>>>>>>> var query = new google.visualization.Query( >>>>>>>>>>> ' >>>>>>>>>>> http://spreadsheets.google.com/tq?key=0AjlSK7_zXoNHdHJ3ZXY2VHAyUWhXcVVkdGUwdXNCeHc&pub=1' >>>>>>>>>>> ); >>>>>>>>>>> >>>>>>>>>>> // Apply query language statement. >>>>>>>>>>> >>>>>>>>>>> >>>>>>>>>>> // Send the query with a callback function. >>>>>>>>>>> query.send(handleQueryResponse); >>>>>>>>>>> } >>>>>>>>>>> >>>>>>>>>>> function handleQueryResponse(response) { >>>>>>>>>>> if (response.isError()) { >>>>>>>>>>> alert('Error in query: ' + response.getMessage() + ' ' >>>>>>>>>>> + response.getDetailedMessage()); >>>>>>>>>>> return; >>>>>>>>>>> } >>>>>>>>>>> var view = new google.visualization.DataView(data); >>>>>>>>>>> view.setColumns([0, { >>>>>>>>>>> type: 'number', >>>>>>>>>>> label: 'Value', >>>>>>>>>>> calc: function (dt, row) { >>>>>>>>>>> return (dt.getValue(row, 1) > 10) ? dt.getValue(row, >>>>>>>>>>> 1) : null; >>>>>>>>>>> } >>>>>>>>>>> }, { >>>>>>>>>>> type: 'number', >>>>>>>>>>> label: 'Value', >>>>>>>>>>> calc: function (dt, row) { >>>>>>>>>>> return (dt.getValue(row, 1) < 10 && dt.getValue(row, >>>>>>>>>>> 1) > 30) ? dt.getValue(row, 1) : null; >>>>>>>>>>> } >>>>>>>>>>> }, { >>>>>>>>>>> type: 'number', >>>>>>>>>>> label: 'Value', >>>>>>>>>>> calc: function (dt, row) { >>>>>>>>>>> return (dt.getValue(row, 1) < 30 && dt.getValue(row, >>>>>>>>>>> 1) < 50) ? dt.getValue(row, 1) : null; >>>>>>>>>>> } >>>>>>>>>>> }]); >>>>>>>>>>> var data = response.getDataTable(); >>>>>>>>>>> // set the 3rd column to the "tooltip" role >>>>>>>>>>> data.setColumnProperty(2, 'role', 'tooltip'); >>>>>>>>>>> visualization = new >>>>>>>>>>> google.visualization.ColumnChart(document.getElementById('visualization')); >>>>>>>>>>> visualization.draw(data, view, {backgroundColor: >>>>>>>>>>> '#ffffff',legend: 'none', colors:['#336699'],is3D:'True', >>>>>>>>>>> isStacked:'true'}); >>>>>>>>>>> >>>>>>>>>>> >>>>>>>>>>> } >>>>>>>>>>> >>>>>>>>>>> >>>>>>>>>>> google.setOnLoadCallback(drawVisualization); >>>>>>>>>>> >>>>>>>>>>> >>>>>>>>>>> -- 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?hl=en. For more options, visit https://groups.google.com/groups/opt_out.
