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.
