Hi, Andrew, I'll use HTML tooltips. Do you have an example? I've seen some other threads on tooltips.
For the API tooltip, though, it would be nice to have the 2nd line of it, in my case, say something like "[Category Name]: 30%" and to make sure that I can add the '%' into the text. If there's an easy way to modify the code for this, that would be great as well. Thanks, Scott On Wednesday, May 1, 2013 10:18:40 AM UTC-4, asgallant wrote: > > Ok, the way the API populates tooltips, you won't be able to get what you > want using the built-in tooltips, unless you change the series label (in > the calculated column) to "Value", which would break the legend (you would > have a bunch of data series called "Value" in the legend instead of the > country names). What you are going to need to do is use custom HTML > tooltips, which are as flexible as you need them to be. Any content that > you can present in HTML you can put in the tooltip. My suggestion would be > to come up with a template for a tooltip, and then we can work on > populating it the way you want it. > > On Wednesday, May 1, 2013 9:32:45 AM UTC-4, SSH wrote: >> >> Hi, Andrew, >> >> Right now, it appears as: "Germany" and then a second line underneath >> that with "Germany: 700". I would like to change the 2nd line to be, for >> example, "Value: 700" (adding the word "Value" to it). In other >> instances, I might want to add other information into the tool tip. In my >> case, I have percentages represented - I might also want to display the # >> of patients from a hospital setting, or other descriptive information. >> >> Thanks, >> Scott >> >> On Tuesday, April 30, 2013 5:10:11 PM UTC-4, asgallant wrote: >>> >>> How would you like to change it? >>> >>> On Tuesday, April 30, 2013 5:03:29 PM UTC-4, SSH wrote: >>>> >>>> Hi, Andrew, >>>> >>>> How can I change the code to customize the label that appears when the >>>> user hovers? >>>> >>>> Thanks, >>>> Scott >>>> >>>> On Tuesday, April 30, 2013 4:35:01 PM UTC-4, SSH wrote: >>>>> >>>>> Thanks, Andrew!! >>>>> >>>>> The bars I'm plotting are mutually exclusive. I definitely want to >>>>> order the bar color based on the order of the data. Your code helps to >>>>> do >>>>> this! >>>>> >>>>> Thanks, >>>>> Scott >>>>> >>>>> On Tuesday, April 30, 2013 4:22:36 PM UTC-4, asgallant wrote: >>>>>> >>>>>> The group is returning the labels in alphabetic order, which then >>>>>> makes the data series built in alphabetic order. >>>>>> >>>>>> There are alternative ways to handle this that can preserve the >>>>>> original order, but they either depend on the data having no duplicate >>>>>> labels or using additional layers of data abstraction to preserve the >>>>>> original order. If your data is guaranteed to not have any duplicate >>>>>> labels (or you don't care that duplicates get assigned different >>>>>> colors), >>>>>> you can skip the grouping altogether and just pull the labels directly >>>>>> from >>>>>> the base data set: http://jsfiddle.net/asgallant/zwPuU/7/ >>>>>> >>>>>> On Tuesday, April 30, 2013 3:07:59 PM UTC-4, SSH wrote: >>>>>>> >>>>>>> Andrew, >>>>>>> >>>>>>> Thanks. In your example: http://jsfiddle.net/asgallant/zwPuU/ I >>>>>>> am using an array of colors that are assigned alphabetically, but I >>>>>>> would >>>>>>> rather have the color assigned by the order of the data array. I'm >>>>>>> trying >>>>>>> to think of what to change in the options, or does the code need a >>>>>>> change? >>>>>>> >>>>>>> Thanks, >>>>>>> Scott >>>>>>> >>>>>>> On Tuesday, April 30, 2013 2:20:07 PM UTC-4, asgallant wrote: >>>>>>>> >>>>>>>> I have a hack that adds labels to ColumnCharts, but it only works >>>>>>>> in limited circumstances: http://jsfiddle.net/asgallant/QjQNX/ >>>>>>>> >>>>>>>> On Tuesday, April 30, 2013 1:24:18 PM UTC-4, SSH wrote: >>>>>>>>> >>>>>>>>> Hi, Andrew, >>>>>>>>> >>>>>>>>> Wow - thanks! I'll read this carefully & get back with Q's. >>>>>>>>> >>>>>>>>> One more thing that would make the bar charts helpful is to add >>>>>>>>> the data labels either inside or outside the bars. I know that I can >>>>>>>>> do >>>>>>>>> this with an Image chart (now deprecated), but would like to do it >>>>>>>>> with >>>>>>>>> this type of chart as well. I've looked at some of the >>>>>>>>> documentation, and >>>>>>>>> it does not appear that we can add this feature yet. Do you know of >>>>>>>>> a way? >>>>>>>>> >>>>>>>>> thanks, >>>>>>>>> Scott >>>>>>>>> >>>>>>>>> On Tuesday, April 30, 2013 1:00:51 PM UTC-4, asgallant wrote: >>>>>>>>>> >>>>>>>>>> Sure. In order to give each label a unique color, we have to >>>>>>>>>> separate each one out into its own data series, but since we are >>>>>>>>>> building >>>>>>>>>> this list of series dynamically, we have to parse the data for a >>>>>>>>>> list of >>>>>>>>>> all unique label, which is what this does: >>>>>>>>>> >>>>>>>>>> // get a list of all the labels in column 0 >>>>>>>>>> var group = google.visualization.data.group(data, [0], []); >>>>>>>>>> >>>>>>>>>> which groups "data" by column 0 into a new DataTable "group". >>>>>>>>>> Now that we have a list of unique labels, we can start creating >>>>>>>>>> data >>>>>>>>>> series for them by building an array of columns for a DataView. The >>>>>>>>>> columns in a DataView can be either integer values pointing to the >>>>>>>>>> indices >>>>>>>>>> of columns in the DataTable that the view is based on, or objects >>>>>>>>>> describing calculated columns (which create dynamic content based on >>>>>>>>>> the >>>>>>>>>> original DataTable). We start with column 0, as this contains the >>>>>>>>>> labels: >>>>>>>>>> >>>>>>>>>> var columns = [0]; >>>>>>>>>> >>>>>>>>>> and then we iterate over the group DataTable to add a calculated >>>>>>>>>> column for each label: >>>>>>>>>> >>>>>>>>>> for (var i = 0; i < group.getNumberOfRows(); i++) { >>>>>>>>>> //... >>>>>>>>>> } >>>>>>>>>> >>>>>>>>>> Inside the loop, we get the label from the current row in group: >>>>>>>>>> >>>>>>>>>> var label = group.getValue(i, 0); >>>>>>>>>> >>>>>>>>>> and then add a column for the new series to the list of columns: >>>>>>>>>> >>>>>>>>>> columns.push(/*...*/); >>>>>>>>>> >>>>>>>>>> The structure of the calculated column is an object with up to 6 >>>>>>>>>> properties: "calc" is a function which accepts two parameters (a >>>>>>>>>> DataTable >>>>>>>>>> and a row index) and returns a value of the appropriate data type of >>>>>>>>>> the >>>>>>>>>> calculated column, "column" references a column from the base >>>>>>>>>> DataTable >>>>>>>>>> (useful when you are using the view to add properties or data roles >>>>>>>>>> to an >>>>>>>>>> existing column without modifying the contents of the column), >>>>>>>>>> "label" >>>>>>>>>> gives the column a label (what shows up in the legend and tooltips >>>>>>>>>> of the >>>>>>>>>> chart, "properties" takes an object of column properties to apply to >>>>>>>>>> the >>>>>>>>>> column, "role" gives the column a data role, and "type" tells the >>>>>>>>>> view what >>>>>>>>>> the data type of the column is (string, number, date, etc). The >>>>>>>>>> object >>>>>>>>>> must contain either the "column" property or both the "calc" and >>>>>>>>>> "type" >>>>>>>>>> properties; all others are optional. In our case, we need "type", >>>>>>>>>> "label", >>>>>>>>>> and "calc". Our data type is "number" and we want the legend and >>>>>>>>>> tooltips >>>>>>>>>> to show the country name, so we assign the "label" property the >>>>>>>>>> label >>>>>>>>>> variable. The "calc" property is a bit more complicated. We want >>>>>>>>>> to >>>>>>>>>> create a data series that only contains values where the label is >>>>>>>>>> equal to >>>>>>>>>> the label for this series, which gives us a starting function to >>>>>>>>>> work from: >>>>>>>>>> >>>>>>>>>> function (dt, row) { >>>>>>>>>> return (dt.getValue(row, 0) == label) ? dt.getValue(row, 1) : >>>>>>>>>> null; >>>>>>>>>> } >>>>>>>>>> >>>>>>>>>> The view passes a DataTable reference (which will be the data >>>>>>>>>> DataTable) and the row to populate into this function. The function >>>>>>>>>> checks >>>>>>>>>> the value of column 0 in this row for the label. If that value is >>>>>>>>>> the same >>>>>>>>>> as the label, then it returns the value in column 1, otherwise it >>>>>>>>>> returns >>>>>>>>>> null. >>>>>>>>>> >>>>>>>>>> The problem with this function is that the value of "label" >>>>>>>>>> changes when we iterate over the group DataTable, so by the time we >>>>>>>>>> get to >>>>>>>>>> drawing the chart, all of the columns' "calc" functions will be >>>>>>>>>> referencing >>>>>>>>>> the same label, which is not at all what we want. To fix this, we >>>>>>>>>> use a >>>>>>>>>> closure that maps the current value of label to another value inside >>>>>>>>>> the >>>>>>>>>> closure: >>>>>>>>>> >>>>>>>>>> (function (name) { >>>>>>>>>> //... >>>>>>>>>> })(label) >>>>>>>>>> >>>>>>>>>> This maps the value of label to the "name" variable inside the >>>>>>>>>> closure. Since closures execute immediately, and we want "calc" to >>>>>>>>>> have a >>>>>>>>>> function, we need to return a function inside the closure >>>>>>>>>> >>>>>>>>>> return function (dt, row) { >>>>>>>>>> return (dt.getValue(row, 0) == name) ? dt.getValue(row, 1) : >>>>>>>>>> null; >>>>>>>>>> }; >>>>>>>>>> >>>>>>>>>> Note that we changed the label variable to name so that it >>>>>>>>>> references the locked value that we pass to the closure. >>>>>>>>>> >>>>>>>>>> *phew* >>>>>>>>>> >>>>>>>>>> That explanation might not be exactly clear, so if please feel >>>>>>>>>> free to ask for clarification on any point. >>>>>>>>>> >>>>>>>>>> >>>>>>>>>> On Tuesday, April 30, 2013 12:12:22 PM UTC-4, SSH wrote: >>>>>>>>>>> >>>>>>>>>>> Hi, Andrew, >>>>>>>>>>> >>>>>>>>>>> Would you explain how the code works in the section called >>>>>>>>>>> "build the columns for the view", especially the "columns.push" >>>>>>>>>>> part? This >>>>>>>>>>> looks complicated. >>>>>>>>>>> >>>>>>>>>>> Thanks, >>>>>>>>>>> Scott >>>>>>>>>>> >>>>>>>>>>> On Monday, April 29, 2013 6:19:06 PM UTC-4, asgallant wrote: >>>>>>>>>>>> >>>>>>>>>>>> Certainly - this has actually been on my to-do list for a while >>>>>>>>>>>> now, as I've been unhappy with the fixed nature of the base code: >>>>>>>>>>>> http://jsfiddle.net/asgallant/zwPuU/ >>>>>>>>>>>> >>>>>>>>>>>> The ChartWrapper is defined >>>>>>>>>>>> here<https://developers.google.com/chart/interactive/docs/reference#chartwrapperobject>, >>>>>>>>>>>> >>>>>>>>>>>> and the DataView (which is what the "view" parameter of the >>>>>>>>>>>> ChartWrapper >>>>>>>>>>>> specifies) is defined >>>>>>>>>>>> here<https://developers.google.com/chart/interactive/docs/reference#DataView>. >>>>>>>>>>>> >>>>>>>>>>>> The documentation for the API needs a lot of work, as it is >>>>>>>>>>>> particular >>>>>>>>>>>> impenetrable for new users. I've been using the API for over 2 >>>>>>>>>>>> years now, >>>>>>>>>>>> and even I get frustrated when trying to look up information to >>>>>>>>>>>> make sure >>>>>>>>>>>> that I am answering a question correctly. The examples on the >>>>>>>>>>>> Visualization API Playground (DataView >>>>>>>>>>>> example<https://code.google.com/apis/ajax/playground/?type=visualization#simple_data_view>) >>>>>>>>>>>> >>>>>>>>>>>> are a bit better, though many of them are outdated. >>>>>>>>>>>> >>>>>>>>>>>> On Monday, April 29, 2013 6:04:23 PM UTC-4, SSH wrote: >>>>>>>>>>>>> >>>>>>>>>>>>> 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.
