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.
