I meant that you need to specify that the Style column is used for a column
in your dataTable that has role: 'style'. If you want to do like what you
did for the tooltip (rather than using a DataView, which I think would be
simpler) then you need to add this line after your last dataTable.addColumn:
dataTable.addColumn({type: 'string', role: 'style' });
And change the end of your forEach loop to this:
var tip = entry['c'][2].v;
var style = entry['c'][3].v;
//console.log (title +' : ' + value +' : ' + tip + ' style: ' + style)
output_array.push([title,value,tip, style]);
On Tue, Feb 18, 2014 at 4:04 PM, Leo Solano <[email protected]> wrote:
> no luck...
> I included a new column with hex colours called "Style" - but I definitely
> have something weird happening in my page... argh! - thanks for your
> patience!!!
>
> <html>
> <head>
> <script type="text/javascript" src="https://www.google.com/jsapi
> "></script>
> <script type="text/javascript">
> google.load("visualization", '1', {packages:['corechart']});
> google.setOnLoadCallback(drawChart);
>
>
>
> function drawChart() {
> var query = new google.visualization.Query(
> '
> https://docs.google.com/spreadsheet/ccc?key=0AtzRlJ-t2eDKdGl4ejYxcjlMYmZlVEdnWjlJcnF2b1E&usp=drive_web#gid=0'
> );
>
> query.send(handleQueryResponse);
> }
>
>
>
> function handleQueryResponse(response) {
> if (response.isError()) {
> alert('Error in query: ' + response.getMessage() + ' ' +
> response.getDetailedMessage());
> return;
> }
>
>
>
> console.log (response.getDataTable())
> var rawData = response.getDataTable()
>
> var dataTable = new google.visualization.DataTable();
> dataTable.addColumn('string', 'Year');
> dataTable.addColumn('number', 'Sales');
> dataTable.addColumn('style', 'color');
> // A column for custom tooltip content
> dataTable.addColumn({type: 'string', role: 'tooltip', style: 'color',
> p:{html: true} });
>
> console.log(JSON.stringify(rawData));
>
> var output_array=[]
> var a = rawData.xf;
> a.forEach(function(entry) {
> //console.log(entry);
> //console.log(JSON.stringify(entry));
> var title = entry['c'][0].v
> var value = entry['c'][1].v
> var tip = entry['c'][2].v
> var style = entry['c'][3].v
>
> //console.log (title +' : ' + value +' : ' + tip)
> output_array.push([title,value,tip,style])
> });
> dataTable.addRows(output_array)
> //dataTable.addRows(response.getDataTable())
>
> var options = {
> tooltip: {isHtml: true},
> legend: 'none'
> };
> var chart = new
> google.visualization.ColumnChart(document.getElementById('columnchart'));
> chart.draw(dataTable, options);
>
> //chart.draw(data, { legend: { position: 'none' } });
> }
> </script>
>
> <title>Data from a Spreadsheet</title>
> </head>
>
> <body>
> <h1>This is a test to show customized html tooltips on a graph</h1>
> <p>A brief explanation about what this page is about here: Lorem ipsum
> dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
> incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
> nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
> consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
> cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
> non proident, sunt in culpa qui officia deserunt mollit anim id est
> laborum.</p><br>
> <span id='columnchart'</span>
> </body>
> </html>
>
>
> On 18 February 2014 15:55, Daniel LaLiberte <[email protected]> wrote:
>
>> Ah, well, similar to how you could use a column of the spreadsheet for
>> tooltips, you could use a column for the role called 'style'.
>>
>>
>> On Tue, Feb 18, 2014 at 3:09 PM, Leo Solano <[email protected]> wrote:
>>
>>> hmmm, thanks, but really don't know how to add colours if I am using
>>> data from a spreadsheet - sorry, new using charts :(
>>>
>>>
>>> On 18 February 2014 11:57, Daniel LaLiberte <[email protected]>wrote:
>>>
>>>> I'm seeing an error in your page currently (forEach not defined).
>>>>
>>>> The documentation on the ColumnChart talks about how to get different
>>>> colors for each bar:
>>>> https://developers.google.com/chart/interactive/docs/gallery/columnchart#Colors
>>>>
>>>>
>>>> On Tue, Feb 18, 2014 at 11:20 AM, Leo Solano <[email protected]> wrote:
>>>>
>>>>> Hi Daniel, I think that I made it work with your help!
>>>>> leosolano.com/graph/index.html
>>>>>
>>>>> Do you know how I could change the colour of the bars to be different?
>>>>> leo
>>>>>
>>>>>
>>>>>
>>>>>
>>>>> On 18 February 2014 10:22, Daniel LaLiberte <[email protected]>wrote:
>>>>>
>>>>>> Hi Leo,
>>>>>>
>>>>>> I believe you can do what you want if you transform the data coming
>>>>>> from the spreadsheet by using a DataView. See the setColumns() method
>>>>>> documentation:
>>>>>> https://developers.google.com/chart/interactive/docs/reference#DataView_setColumnsand
>>>>>> note that you can add a calculated column that species a role. So the
>>>>>> end of your script would look more like this:
>>>>>>
>>>>>> var data = response.getDataTable();
>>>>>> var view = new google.visualization.DataView(data);
>>>>>> // Insert a tooltip column after column 1, using the values in
>>>>>> column 1
>>>>>> view.setColumns([0, 1, {sourceColumn: 2, role: 'tooltip'}, 3, 4]);
>>>>>>
>>>>>> var chart = new
>>>>>> google.visualization.ColumnChart(document.getElementById('columnchart'));
>>>>>> chart.draw(view, { legend: { position: 'none' } });
>>>>>>
>>>>>> I hope that will be enough of a clue, but let me know if it doesn't
>>>>>> work out.
>>>>>>
>>>>>>
>>>>>> On Sat, Feb 15, 2014 at 9:34 AM, Leo Solano <[email protected]> wrote:
>>>>>>
>>>>>>> How can I add a customized tooltip from a column in my spreadsheet
>>>>>>> - or html tooltips?
>>>>>>> This is what I have so far on my test page:
>>>>>>>
>>>>>>>
>>>>>>> <html>
>>>>>>> <head>
>>>>>>> <script type="text/javascript" src="https://www.google.com/jsapi
>>>>>>> "></script>
>>>>>>> <script type="text/javascript">
>>>>>>> google.load("visualization", '1', {packages:['corechart']});
>>>>>>> google.setOnLoadCallback(drawChart);
>>>>>>> function drawChart() {
>>>>>>> var query = new google.visualization.Query(
>>>>>>> '
>>>>>>> https://docs.google.com/spreadsheet/ccc?key=0AtzRlJ-t2eDKdE1ZcVo0eFZ1N1NpUTBPSElJUDRaT1E&usp=drive_web#gid=0'
>>>>>>> );
>>>>>>>
>>>>>>> query.send(handleQueryResponse);
>>>>>>> }
>>>>>>>
>>>>>>> function handleQueryResponse(response) {
>>>>>>> if (response.isError()) {
>>>>>>> alert('Error in query: ' + response.getMessage() + ' ' +
>>>>>>> response.getDetailedMessage());
>>>>>>> return;
>>>>>>> }
>>>>>>>
>>>>>>> var data = response.getDataTable();
>>>>>>> var chart = new
>>>>>>> google.visualization.ColumnChart(document.getElementById('columnchart'));
>>>>>>> chart.draw(data, { legend: { position: 'none' } });
>>>>>>> }
>>>>>>> </script>
>>>>>>>
>>>>>>> <title>Data from a Spreadsheet</title>
>>>>>>> </head>
>>>>>>>
>>>>>>> <body>
>>>>>>> <span id='columnchart'></span>
>>>>>>> </body>
>>>>>>> </html>
>>>>>>>
>>>>>>> --
>>>>>>> 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.
>>>>>>> For more options, visit https://groups.google.com/groups/opt_out.
>>>>>>>
>>>>>>
>>>>>>
>>>>>>
>>>>>> --
>>>>>> Daniel LaLiberte<https://plus.google.com/100631381223468223275?prsrc=2>
>>>>>> - 978-394-1058
>>>>>> [email protected] <[email protected]> 5CC, Cambridge MA
>>>>>> [email protected] <[email protected]> 9 Juniper
>>>>>> Ridge Road, Acton MA
>>>>>>
>>>>>> --
>>>>>> You received this message because you are subscribed to a topic in
>>>>>> the Google Groups "Google Visualization API" group.
>>>>>> To unsubscribe from this topic, visit
>>>>>> https://groups.google.com/d/topic/google-visualization-api/MoxlEkXbbaw/unsubscribe
>>>>>> .
>>>>>> To unsubscribe from this group and all its topics, 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.
>>>>>> For more options, visit https://groups.google.com/groups/opt_out.
>>>>>>
>>>>>
>>>>>
>>>>>
>>>>> --
>>>>> *Leo Solano*
>>>>> 647-609-2727
>>>>> [email protected]
>>>>> www.leosolano.com
>>>>>
>>>>> --
>>>>> 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.
>>>>> For more options, visit https://groups.google.com/groups/opt_out.
>>>>>
>>>>
>>>>
>>>>
>>>> --
>>>> Daniel LaLiberte<https://plus.google.com/100631381223468223275?prsrc=2>
>>>> - 978-394-1058
>>>> [email protected] <[email protected]> 5CC, Cambridge MA
>>>> [email protected] <[email protected]> 9 Juniper
>>>> Ridge Road, Acton MA
>>>>
>>>> --
>>>> You received this message because you are subscribed to a topic in the
>>>> Google Groups "Google Visualization API" group.
>>>> To unsubscribe from this topic, visit
>>>> https://groups.google.com/d/topic/google-visualization-api/MoxlEkXbbaw/unsubscribe
>>>> .
>>>> To unsubscribe from this group and all its topics, 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.
>>>> For more options, visit https://groups.google.com/groups/opt_out.
>>>>
>>>
>>>
>>>
>>> --
>>> *Leo Solano*
>>> 647-609-2727
>>> [email protected]
>>> www.leosolano.com
>>>
>>> --
>>> 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.
>>> For more options, visit https://groups.google.com/groups/opt_out.
>>>
>>
>>
>>
>> --
>> Daniel LaLiberte <https://plus.google.com/100631381223468223275?prsrc=2>
>> - 978-394-1058
>> [email protected] <[email protected]> 5CC, Cambridge MA
>> [email protected] <[email protected]> 9 Juniper Ridge
>> Road, Acton MA
>>
>> --
>> You received this message because you are subscribed to a topic in the
>> Google Groups "Google Visualization API" group.
>> To unsubscribe from this topic, visit
>> https://groups.google.com/d/topic/google-visualization-api/MoxlEkXbbaw/unsubscribe
>> .
>> To unsubscribe from this group and all its topics, 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.
>> For more options, visit https://groups.google.com/groups/opt_out.
>>
>
>
>
> --
> *Leo Solano*
> 647-609-2727
> [email protected]
> www.leosolano.com
>
> --
> 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.
> For more options, visit https://groups.google.com/groups/opt_out.
>
--
Daniel LaLiberte <https://plus.google.com/100631381223468223275?prsrc=2> -
978-394-1058
[email protected] <[email protected]> 5CC, Cambridge MA
[email protected] <[email protected]> 9 Juniper Ridge
Road, Acton MA
--
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.
For more options, visit https://groups.google.com/groups/opt_out.
