ok just means seeing how I can manipulate data to show the way I want in
the spreadsheet then. I was wondering how do I customize the color for
each column bar now? I tried adding in the colors in options but they did
not work.
thanks again for all your help on this to.
justawebbie in learning
On Thursday, January 10, 2013 12:09:23 PM UTC-9, 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 view this discussion on the web visit
https://groups.google.com/d/msg/google-visualization-api/-/QN_SJQBhGQ0J.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-visualization-api?hl=en.
