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/-/1Jm89178ecIJ.
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.
