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.
