[visualization-api] Re: Google Sheet Query Language

['Ray Thomas' via Google Visualization API]

Hi Ale,

I have no use-case for using CSVs at all. What happened was that years ago 
I was working for a university looking after their website. They wanted 
graphing capabilities for their sites but between them, Web Services and IT 
wouldn't provide the means of connecting to any of our databases. I had a 
look around, chose Google Visualizations as the tool and uploaded the data 
I needed to Google Sheets and provided the tables and charts that way.

Years before that I was a database programmer, but that was way back in the 
days of things like FoxPro for DOS, but I still know quite a bit about 
SQL-like queries.

I just answer questions here where I think I can be of a little bit of a 
help. I like to show what I write actually works, at least for myself, and 
it doesn't take much to put together a page on my own site to show it.

Ray

On Thursday, April 11, 2024 at 3:57:32 PM UTC-4 Ale wrote:

> Excuse me Ray, did you have a similar goal? Could you please share your 
> use case? Maybe it could help me finding another idea/path.
>
> I sent a CSV file to facilitate the forum to have an input table to work 
> with. In my case I have a table in a sheet, daily filled in with new rows, 
> each time I spend somthing (this example is part of my use case: check my 
> expenses and income periodically).
> Unfortunately the first column is made of decimal values in which the 
> decimal part is separated by the integer one with a comma, just because in 
> Italy the decimal representation is made with commas. I have to deal with 
> this built-in characteristic in this country.
>
> I looked at the link anyway, it's really interesting! Thank you for using 
> my use case to help the community, and me too!
>
> Il giorno mercoledì 10 aprile 2024 alle 22:30:55 UTC+2 Ray Thomas ha 
> scritto:
>
>> I couldn't get your CSV file to work at all wthout making some changes to 
>> it, changing the commas to decimal points and the semicolons to commas. 
>> Even then, I couldn't get a query to work with it. I know the query works, 
>> because I used it in a Google Sheet 
>> 
>>  
>> I made in cell G1.
>>
>> Until someone who knows how to do this answers you, I thought of two 
>> solutions that will work. You can either import the entire CSV file into 
>> your page as a DataTable then create a DataView and create a table from 
>> that. The other method is to import your CSV file into a Google Sheet and 
>> run the query against that to extract the data you need.
>>
>> I illustrated both of those at https://brisray.com/google-charts/csv.htm 
>>
>> On Monday, April 8, 2024 at 6:42:41 PM UTC-4 Ale wrote:
>>
>>> I'm having issues in performing a query that allows me to retrieve the 
>>> percentage of each expense, filtered by category, using Google sheet Query 
>>> Language (
>>> https://developers.google.com/chart/interactive/docs/querylanguage).
>>>
>>> Does anyone help me?
>>>
>>> I need an output like this:
>>> Filtered by Category=Fun
>>> Reason  Percentage
>>> Biliardo 2,17%
>>> Birra 23,91%
>>> Cena 28,87%
>>> Cinema 12,17%
>>> Metro 6,43%
>>> Paninaro 7,39%
>>> Pizza 6,96%
>>> Spesa 12,82%
>>>
>>> The input is the following table (in CSV):
>>> Import;Date;Reason;Source;Category
>>> -4,40;01/02/2024;Metro;Credit Card;Fun
>>> -10,00;01/02/2024;Birra;Credit Card;Fun
>>> -2,50;02/02/2024;Biliardo;Credit Card;Fun
>>> -8,00;03/02/2024;Pizza;Credit Card;Fun
>>> -63,14;03/02/2024;Benzina;Credit Card;Outcome
>>> -14,74;10/02/2024;Spesa;Credit Card;Fun
>>> -35,99;10/02/2024;Regali;Credit Card;Additional outcome 
>>> 5,50;12/02/2024;Ricarica ticket;Ticket restaurant;Income
>>> -14,00;12/02/2024;Cinema;Credit Card;Fun
>>> -5,50;17/02/2024;Birra;Credit Card;Fun
>>> -5,50;17/02/2024;Birra;Credit Card;Fun
>>> -8,50;17/02/2024;Paninaro;Credit Card;Fun
>>> -11,64;18/02/2024;A Satispay;Credit Card;Additional outcome 
>>> 11,64;18/02/2024;Da Credit Card;Satispay;Additional income 
>>> -127,00;19/02/2024;Tagliando;Credit Card;Additional outcome 
>>> -12,80;20/02/2024;Regali;Satispay;Additional outcome 
>>> -87,44;23/02/2024;Benzina;Credit Card;Outcome
>>> -3,00;24/02/2024;Metro;Credit Card;Fun
>>> -33,20;24/02/2024;Cena;Credit Card;Fun
>>> -6,50;24/02/2024;Birra;Credit Card;Fun
>>> -3,00;26/02/2024;Treno;Credit Card;Outcome
>>> -996,99;26/02/2024;Assicurazione auto;Credit Card;Outcome
>>> -3,00;26/02/2024;Treno;Credit Card;Outcome
>>> 1.941,11;27/02/2024;Stipendio;Credit Card;Income
>>> -529,65;28/02/2024;Rata macchina;Credit Card;Outcome
>>>
>>

-- 
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 google-visualization-api+unsubscr...@googlegroups.com.
To view this discussion on the web visit 

[visualization-api] Re: URL creation for extracting Google Sheets data

['Ray Thomas' via Google Visualization API]

I've had better luck using the query code from 
https://developers.google.com/chart/interactive/docs/spreadsheets and the  
encodeURIComponent function.

For example:

function drawChart() {
var queryString = encodeURIComponent('SELECT C,A,E where E="Fun" ORDER BY 
C,A');
var query = new 
google.visualization.Query('google_sheet_url/gviz/tq?gid=1011451446=1='
 
+ queryString);
query.send(handleQueryResponse);
}

which comes from a live page .

On Wednesday, April 10, 2024 at 2:53:46 PM UTC-4 Laurie Bennett wrote:

> I'm using Google Charts to create pie charts on my web site. These charts 
> display if I hard-code the data, but I'm trying to use a query of a public 
> Google Sheet. It's not working, and the problem appears to be in this 
> section.
>
> // Callback to draw the chart 
> function drawChart() {
>   var query = new google.visualization.Query("[Google Sheet 
> URL]/gviz/tq?tq=[ENCODED QUERY]");
>   query.send(handleQueryResponse);
> }
>
> Bracketed info is replaced by the real values. The query has been encoded 
> using the tool on this page: 
> https://developers.google.com/chart/interactive/docs/querylanguage. 
>
> I use double quotes around the URL because the query contains a where 
> clause with single quotes.
>
>

-- 
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 google-visualization-api+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/7447327e-2f33-4147-bf19-6055309fe144n%40googlegroups.com.

[visualization-api] Re: URL creation for extracting Google Sheets data

['Ray Thomas' via Google Visualization API]

I've had better luck using the query code from 
https://developers.google.com/chart/interactive/docs/spreadsheets and the  
encodeURIComponent function.

For example:

I've had better luck using the query code from 
https://developers.google.com/chart/interactive/docs/spreadsheets and the  
encodeURIComponent function.

For example:

function drawChart() {
var queryString = encodeURIComponent('SELECT C,A,E where E="Fun" ORDER BY 
C,A');
var query = new 
google.visualization.Query('https://docs.google.com/spreadsheets/d/1tswaWUAbeBijHq4o505w0h7TmbD-qGhR3jBactcbGq0/gviz/tq?gid=1011451446=1='
 
+ queryString);
query.send(handleQueryResponse);
}

which comes from a live page .

On Wednesday, April 10, 2024 at 2:53:46 PM UTC-4 Laurie Bennett wrote:

> I'm using Google Charts to create pie charts on my web site. These charts 
> display if I hard-code the data, but I'm trying to use a query of a public 
> Google Sheet. It's not working, and the problem appears to be in this 
> section.
>
> // Callback to draw the chart 
> function drawChart() {
>   var query = new google.visualization.Query("[Google Sheet 
> URL]/gviz/tq?tq=[ENCODED QUERY]");
>   query.send(handleQueryResponse);
> }
>
> Bracketed info is replaced by the real values. The query has been encoded 
> using the tool on this page: 
> https://developers.google.com/chart/interactive/docs/querylanguage. 
>
> I use double quotes around the URL because the query contains a where 
> clause with single quotes.
>
>

-- 
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 google-visualization-api+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/1c2c3c12-bfd6-485a-96ca-243f932221e0n%40googlegroups.com.

[visualization-api] Re: URL creation for extracting Google Sheets data

['Ray Thomas' via Google Visualization API]

I've had better luck using the query code from 
https://developers.google.com/chart/interactive/docs/spreadsheets and the  
encodeURIComponent function.

For example:

function drawChart() {
var queryString = encodeURIComponent('SELECT C,A,E where E="Fun" ORDER BY 
C,A');
var query = new 
google.visualization.Query('https://docs.google.com/spreadsheets/d/1tswaWUAbeBijHq4o505w0h7TmbD-qGhR3jBactcbGq0/gviz/tq?gid=1011451446=1='
 
+ queryString);
query.send(handleQueryResponse);
}

which comes from a live page .


On Wednesday, April 10, 2024 at 2:53:46 PM UTC-4 Laurie Bennett wrote:

> I'm using Google Charts to create pie charts on my web site. These charts 
> display if I hard-code the data, but I'm trying to use a query of a public 
> Google Sheet. It's not working, and the problem appears to be in this 
> section.
>
> // Callback to draw the chart 
> function drawChart() {
>   var query = new google.visualization.Query("[Google Sheet 
> URL]/gviz/tq?tq=[ENCODED QUERY]");
>   query.send(handleQueryResponse);
> }
>
> Bracketed info is replaced by the real values. The query has been encoded 
> using the tool on this page: 
> https://developers.google.com/chart/interactive/docs/querylanguage. 
>
> I use double quotes around the URL because the query contains a where 
> clause with single quotes.
>
>

-- 
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 google-visualization-api+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/671ba445-ce1f-4897-9dca-480b50f7119cn%40googlegroups.com.

[visualization-api] Re: Google Sheet Query Language

['Ray Thomas' via Google Visualization API]

I couldn't get your CSV file to work at all wthout making some changes to 
it, changing the commas to decimal points and the semicolons to commas. 
Even then, I couldn't get a query to work with it. I know the query works, 
because I used it in a Google Sheet 

 
I made in cell G1.

Until someone who knows how to do this answers you, I thought of two 
solutions that will work. You can either import the entire CSV file into 
your page as a DataTable then create a DataView and create a table from 
that. The other method is to import your CSV file into a Google Sheet and 
run the query against that to extract the data you need.

I illustrated both of those at https://brisray.com/google-charts/csv.htm 

On Monday, April 8, 2024 at 6:42:41 PM UTC-4 Ale wrote:

> I'm having issues in performing a query that allows me to retrieve the 
> percentage of each expense, filtered by category, using Google sheet Query 
> Language (
> https://developers.google.com/chart/interactive/docs/querylanguage).
>
> Does anyone help me?
>
> I need an output like this:
> Filtered by Category=Fun
> Reason  Percentage
> Biliardo 2,17%
> Birra 23,91%
> Cena 28,87%
> Cinema 12,17%
> Metro 6,43%
> Paninaro 7,39%
> Pizza 6,96%
> Spesa 12,82%
>
> The input is the following table (in CSV):
> Import;Date;Reason;Source;Category
> -4,40;01/02/2024;Metro;Credit Card;Fun
> -10,00;01/02/2024;Birra;Credit Card;Fun
> -2,50;02/02/2024;Biliardo;Credit Card;Fun
> -8,00;03/02/2024;Pizza;Credit Card;Fun
> -63,14;03/02/2024;Benzina;Credit Card;Outcome
> -14,74;10/02/2024;Spesa;Credit Card;Fun
> -35,99;10/02/2024;Regali;Credit Card;Additional outcome 
> 5,50;12/02/2024;Ricarica ticket;Ticket restaurant;Income
> -14,00;12/02/2024;Cinema;Credit Card;Fun
> -5,50;17/02/2024;Birra;Credit Card;Fun
> -5,50;17/02/2024;Birra;Credit Card;Fun
> -8,50;17/02/2024;Paninaro;Credit Card;Fun
> -11,64;18/02/2024;A Satispay;Credit Card;Additional outcome 
> 11,64;18/02/2024;Da Credit Card;Satispay;Additional income 
> -127,00;19/02/2024;Tagliando;Credit Card;Additional outcome 
> -12,80;20/02/2024;Regali;Satispay;Additional outcome 
> -87,44;23/02/2024;Benzina;Credit Card;Outcome
> -3,00;24/02/2024;Metro;Credit Card;Fun
> -33,20;24/02/2024;Cena;Credit Card;Fun
> -6,50;24/02/2024;Birra;Credit Card;Fun
> -3,00;26/02/2024;Treno;Credit Card;Outcome
> -996,99;26/02/2024;Assicurazione auto;Credit Card;Outcome
> -3,00;26/02/2024;Treno;Credit Card;Outcome
> 1.941,11;27/02/2024;Stipendio;Credit Card;Income
> -529,65;28/02/2024;Rata macchina;Credit Card;Outcome
>

-- 
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 google-visualization-api+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/a165f5c1-b6d1-4846-9997-4a67dfad20e9n%40googlegroups.com.

[visualization-api] Re: Google chart localy

['Ray Thomas' via Google Visualization API]

You can't. The API is free to use, even commercially, but it belongs to, 
and is hosted by Google and their TOS, https://developers.google.com/terms 
and https://support.google.com/code/topic/13605, means you cannot download 
it and host it locally.

This may change in the future as they posted in the forum in June 2022 

 that 
they may be looking at releasing at least part of it as open source.

When I was looking around at the various charting and graphing libraries, 
this API was one of the feature rich and easier ones to use. If you 
absolutely must use something locally, then it may be one of the others is 
better for you.

On Wednesday, January 3, 2024 at 11:05:35 AM UTC-5 Ginanjar wrote:

> How to use google chart localy?

-- 
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 google-visualization-api+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/795902c6-f992-4c5e-810e-7d959c86e684n%40googlegroups.com.

[visualization-api] Re: Google Charts not displaying in DIV

['Ray Thomas' via Google Visualization API]

What does the console message in the browser dev tools say? It might be 
something like "Error: The container #xx is not defined." 

The div to hold the chart has to exist before the chart can be drawn.

On Thursday, December 14, 2023 at 8:48:33 AM UTC-5 Regain 2AControl wrote:

> I have just started using google charts and it works great when a chart is 
> placed in a div on a specific static page, however, I am having an issue 
> with pages within pages loaded with javascript fetch into a panel(div).  
> Example, index.php chart works fine.  Chart on rightpanel.php fetched into 
> a div in index.php, the chart does not load.  Any thoughts?

-- 
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 google-visualization-api+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/54c83483-f170-4226-8586-97ca0aad14d7n%40googlegroups.com.

Re: [visualization-api] JavaScript Template Strings

['Ray Thomas' via Google Visualization API]

Thanks Daniel,

I guessed it was still a string  The drawchart method works just as well as 
anything and accepts practically anything in  its option list so I really 
was just exploring possibilities.

I also tried eval() and that returns the strict JSON response as well.

Ray

On Tuesday, November 21, 2023 at 12:38:28 PM UTC-5 Daniel LaLiberte wrote:

> Hi Ray
>
> Your chartStr is still a string, not an expression, even though it looks 
> like an expression when you print it out.  At best, you would have to 
> evaluate the string to turn it into code.
>
> The drawChart function and ChartWrapper class do a lookup of the string 
> name of a chartType in order to interpret the string as a chart type that 
> can be executed.  Doing that may require dynamically loading more packages, 
> if they are not already loaded.
>
> On Mon, Nov 20, 2023 at 10:00 PM 'Ray Thomas' via Google Visualization API 
>  wrote:
>
>> I thought I'd try using JavaScript's template strings to produce some 
>> charts, but cannot make them work. The idea was to pass a variable into the 
>> visualization chart code. The code I used was:
>>
>> function newCharts(){
>> chartType=`BarChart`;
>> var chartStr = 
>> `google.visualization.${chartType}(document.getElementById('awstats-graph'))`;
>> console.log(chartStr);
>> newChart = new chartStr;
>> newChart.draw(drawData); 
>> }
>>
>> The console output looks OK and gives:
>>
>> google.visualization.BarChart(document.getElementById('awstats-graph'))
>>
>> But then I get the error:
>>
>> Uncaught Error: Error handling Query strict JSON response: TypeError: 
>> chartStr is not a constructor
>>
>> Does this mean there's something wrong with the code or that I cannot use 
>> this method?
>>
>> I got what I wanted to do by using the drawchart method - 
>> https://developers.google.com/chart/interactive/docs/reference#drawchart
>>
>> but am curious about the template strings.
>>
>> The working code can be see at https://brisray.com/utils/awslogs/
>>
>> -- 
>> 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 google-visualizati...@googlegroups.com.
>> To view this discussion on the web visit 
>> https://groups.google.com/d/msgid/google-visualization-api/d421ba86-9892-4c83-a635-dce9f99a47e3n%40googlegroups.com
>>  
>> <https://groups.google.com/d/msgid/google-visualization-api/d421ba86-9892-4c83-a635-dce9f99a47e3n%40googlegroups.com?utm_medium=email_source=footer>
>> .
>>
>
>
> -- 
>
> • Daniel LaLiberte
>
>  • SWE
>
>  • Cambridge MA
>
>  • dlalibe...@google.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 google-visualization-api+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/ec1a3f70-d7c9-4096-943e-d0eb8df1d9bdn%40googlegroups.com.

[visualization-api] JavaScript Template Strings

['Ray Thomas' via Google Visualization API]

I thought I'd try using JavaScript's template strings to produce some 
charts, but cannot make them work. The idea was to pass a variable into the 
visualization chart code. The code I used was:

function newCharts(){
chartType=`BarChart`;
var chartStr = 
`google.visualization.${chartType}(document.getElementById('awstats-graph'))`;
console.log(chartStr);
newChart = new chartStr;
newChart.draw(drawData); 
}

The console output looks OK and gives:

google.visualization.BarChart(document.getElementById('awstats-graph'))

But then I get the error:

Uncaught Error: Error handling Query strict JSON response: TypeError: 
chartStr is not a constructor

Does this mean there's something wrong with the code or that I cannot use 
this method?

I got what I wanted to do by using the drawchart method - 
https://developers.google.com/chart/interactive/docs/reference#drawchart

but am curious about the template strings.

The working code can be see at https://brisray.com/utils/awslogs/

-- 
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 google-visualization-api+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/d421ba86-9892-4c83-a635-dce9f99a47e3n%40googlegroups.com.

[visualization-api] Re: Google Visualization API for google sheets limit and costing

['Ray Thomas' via Google Visualization API]

The API is free to use, but you cannot host it yourself whch sometimes gets 
asked about here. As for data limits, I don't think there are hard limits 
but performance will drop for very large data sets - tens of thousands of 
rows in the Google Chart, and they'll probably take a look at what you're 
doing if there are a lot of requests from a single IP.

On Friday, October 20, 2023 at 2:30:31 PM UTC-4 Saurav Seth wrote:

> Hi All,
>
> Can anyone help me with the pricing and limits of ? I want to use the 
> Visualisation API for reading data efficiently from google sheets. Can 
> anyone help me with the pricing and limits of this API?
>
> Regards,
> Saurav Seth
>

-- 
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 google-visualization-api+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/a266cee5-4c66-43a7-b2ec-cf722ab188e4n%40googlegroups.com.

Re: [visualization-api] How to id certain columns or header rows in Table API

['Ray Thomas' via Google Visualization API]

This may help you, you can manipulate the data to give any cell, row, or 
column you want a class using the Visualizations API using the 
setProperties methods on 
https://developers.google.com/chart/interactive/docs/reference#methods

I wrote about how I do this with an example at 
https://brisray.com/google-charts/tablepops.htm

The methods do not seeem to be able to support IDs but there should be no 
problem with classes which you can then use in your own code.

On Wednesday, August 30, 2023 at 9:22:21 PM UTC-4 SJW wrote:

> Doesn't really help. I can manipulate the data - that's not what I want 
> help with. I want to try and insert a title attribute on the column header 
> cell. 
> There does not appear to be any event handlers that are built into the 
> charts to achieve this - hence why I am looking to manipulate after the 
> table is drawn - it's a workaround to cater for the chart APIs lack of 
> flexibility in this regard.
> I also want to insert additional attributes on the cells of specific 
> columns to cater for XLS export using SheetsJS - 
> https://docs.sheetjs.com/docs/api/utilities/html/#value-override
>
> e.g I want to add the following to all currency columns:
> data-z='"$"#,##0.00_);\\("$"#,##0.00\\)'
>
> On Wednesday, 23 August 2023 at 00:43:06 UTC+10 Daniel LaLiberte wrote:
>
>> The DataTable is transformed by the chart code into the elements of the 
>> visualization, typically SVG, but possibly HTML for a couple chart types 
>> (e.g. Table).  The DataTable API does have a generic property mechanism, so 
>> you can associate arbitrary property name-value pairs to columns, and these 
>> would be available when you handle events related to the chart, once it has 
>> been rendered.  But it is probably not a good idea to add css properties to 
>> the visualization elements.  Since your goal is to manipulate the data, 
>> then you can already do that via the event handlers built into charts.  
>> Hope that helps.
>>
>> On Tue, Aug 22, 2023 at 1:30 AM SJW  wrote:
>>
>>> I have a table which can have some really long headers and a dynamic 
>>> number of columns.
>>>
>>> I want to truncate these headers and move the column header into a title 
>>> tag which shows on hover.
>>>
>>> So, ideally, I would want to add a class to the dynamic header columns. 
>>> Is this possible?  From what I have read in the documentation it appears to 
>>> not be possible but as the documentation is pretty cumbersome I wouldn't 
>>> surprised if there was an undocumented method somewhere?
>>>
>>> Effectively
>>>
>>> ```
>>> // Initialise DataTable()
>>> var nonProdDollarsTable = new google.visualization.DataTable();
>>>
>>> // Column Setup
>>> nonProdDollarsTable.addColumn('string', 'No');
>>> nonProdDollarsTable.addColumn('string', 'Name');
>>> 
>>> nonProdDollarsTable.addColumn('string', 'Location');
>>> 
>>> nonProdDollarsTable.addColumn('string', 'Classification');
>>> nonProdDollarsTable.addColumn('number', 'Allocation');
>>> 
>>> nonProdDollarsTable.addColumn('number', 'Total');
>>> ```
>>>
>>> So, all columns in the `$nonProdDollarsColData` I want to add a css 
>>> class or something that identifies them to jQuery so I can manipulate the 
>>> data.
>>>
>>> -- 
>>> 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 google-visualizati...@googlegroups.com.
>>> To view this discussion on the web visit 
>>> https://groups.google.com/d/msgid/google-visualization-api/eb75cc2d-9e1d-4cd2-9354-b86fa09d0512n%40googlegroups.com
>>>  
>>> 
>>> .
>>>
>>
>>
>> -- 
>>
>> • Daniel LaLiberte
>>
>>  • SWE
>>
>>  • Cambridge MA
>>
>>  • dlalibe...@google.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 google-visualization-api+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/5ccde5af-42dc-43c3-b721-e6d67818fa2cn%40googlegroups.com.

[visualization-api] Re: I need to add the averages of the values to my chart of type "ChartAreas".

['Ray Thomas' via Google Visualization API]

The second bit is easier. I created copies of the CSV file and changed the 
year in them, now I had three files to test this on, jose-2022.csv, 
jose-2023.csv and jose-2024.csv.

To get the current year in JavaScript use new Date().getFullYear();

Then it's just a matter of creating the new file name from that and 
importing it. So, 

// Create the query giving the path and name of the CSV file
var query = new google.visualization.Query('jose.csv', queryOptions);
query.send(handleQueryResponse);
}

Use a variable where the file name string was, so the above is now:

  var thisYear = new Date().getFullYear();
var fileName = 'jose-' + thisYear + '.csv';
   
// Create the query giving the path and name of the CSV file
var query = new google.visualization.Query(fileName, queryOptions);
query.send(handleQueryResponse);
}

To get the jose-2022.csv file, you could use:

var lastYear = new Date().getFullYear() - 1;
var fileName = 'jose-' + lastYear + '.csv';

And to get the jose-2024.csv file, you could use:

var nextYear = new Date().getFullYear() + 1;
var fileName = 'jose-' + nextYear + '.csv';

But that's just standard JavaScript string manipulation.

On Friday, May 5, 2023 at 6:11:18 AM UTC-4 Ray Thomas wrote:

> You are getting the "b.getTimezoneOffset is not a function" error because 
> the date in CSV file is in the wrong format. This is your original format:
>
> 01-01-2023,7.7,13.0,69,99
> 02-01-2023,6.5,12.1,67,98
> 03-01-2023,7.0,12.6,67,99
>
> It should be:
>
> 2023-01-01,7.7,13,69,99
> 2023-01-02,6.5,12.1,67,98
> 2023-01-03,7,12.6,67,99
>
> It really is fussy about how the dates are arranged in CSV files. You can 
> see the difference more clearly by opening the file in a text editor like 
> Notepad rather than something like Excel. When I tried it, the dates are 
> shown as being in the same format, but they are not.
>
> But there's an easy way to fix this. In the line:
>
> csvColumns: ['date', 'number', 'number', 'number', 'number'],
>
> Change date to string, so it becomes: 
>
> csvColumns: ['string', 'number', 'number', 'number', 'number'],
>
> That way it doesn't matter what format the date is in. The only downside 
> is that you are now using discrete text values for the first column, not a 
> continuous date series. Depending on what you want to do, that may not 
> matter.
>
> On Friday, May 5, 2023 at 4:21:37 AM UTC-4 José Vicente Zahonero wrote:
>
>> First of all, thanks you for your time. I have just tried your code and 
>> first of all I get an error when I try to run it, it says 
>> "b.getTimezoneOffset is not a function". Apart from that, I have tried to 
>> add a variable to the path of the csv file so that each year it reads the 
>> corresponding file and I don't have to change it every year but it also 
>> gives me an error. I want to solve first the problem of the error and then 
>> the problem of the path to the file.
>> I leave the code for you to have a look. Thanks a lot.
>>
>> El viernes, 5 de mayo de 2023 a las 4:16:35 UTC+2, Ray Thomas escribió:
>>
>>> Aftere reading all the links I gave (several times), I finally worked 
>>> this out. It confused me why so many tables seemed to be made. Here's the 
>>> sequence of events:
>>>
>>> 1) Import the data into a datatable
>>> 2) Create a new table view with the grouping data and averages . As all 
>>> the data is being used, the grouping data is all the same (in this case an 
>>> empty string). Then use then aggregation to calculate the averages.
>>> 3) Create the averages variables from the above table view - they are 
>>> all going to be the same.
>>> 4) Make a new view from the original datatable and add the the calcuated 
>>> averages to new columns.
>>>
>>> What I did was start from scratch to make things clearer:
>>>
>>> https://www.gstatic.com/charts/loader.js";>
>>>
>>> 
>>> google.charts.load('current', {'packages':['corechart']});
>>> google.charts.setOnLoadCallback(drawChart);
>>> function drawChart() {
>>> var queryOptions = {
>>> // Define the CSV data columns
>>>csvColumns: ['date', 'number', 'number', 'number', 'number'],
>>> // This should be false if your CSV file doesn't have a header 
>>>csvHasHeader: true
>>> }
>>>
>>> // Create the query giving the path and name of the CSV file
>>> var query = new google.visualization.Query('jose.csv', queryOptions);
>>> query.send(handleQueryResponse);
>>> }
>>>
>>> function handleQueryResponse(response) {
>>> if (response.isError()) {
>>> alert('Error in query: ' + response.getMessage() + ' ' + 
>>> response.getDetailedMessage());
>>> return;
>>> }
>>>
>>> var dataTable = response.getDataTable();dataTable
>>>
>>> //Create the averages using aggregation
>>> var averages = google.visualization.data.group(
>>> dataTable,
>>> // The first column is what to group on, in this case an empty string
>>> [{column: 0, type: 'string', modifier: function () {return '';}}],
>>> [
>>> {column: 1, type: 'number', 

[visualization-api] Re: I need to add the averages of the values to my chart of type "ChartAreas".

['Ray Thomas' via Google Visualization API]

You are getting the "b.getTimezoneOffset is not a function" error because 
the date in CSV file is in the wrong format. This is your original format:

01-01-2023,7.7,13.0,69,99
02-01-2023,6.5,12.1,67,98
03-01-2023,7.0,12.6,67,99

It should be:

2023-01-01,7.7,13,69,99
2023-01-02,6.5,12.1,67,98
2023-01-03,7,12.6,67,99

It really is fussy about how the dates are arranged in CSV files. You can 
see the difference more clearly by opening the file in a text editor like 
Notepad rather than something like Excel. When I tried it, the dates are 
shown as being in the same format, but they are not.

But there's an easy way to fix this. In the line:

csvColumns: ['date', 'number', 'number', 'number', 'number'],

Change date to string, so it becomes: 

csvColumns: ['string', 'number', 'number', 'number', 'number'],

That way it doesn't matter what format the date is in. The only downside is 
that you are now using discrete text values for the first column, not a 
continuous date series. Depending on what you want to do, that may not 
matter.

On Friday, May 5, 2023 at 4:21:37 AM UTC-4 José Vicente Zahonero wrote:

> First of all, thanks you for your time. I have just tried your code and 
> first of all I get an error when I try to run it, it says 
> "b.getTimezoneOffset is not a function". Apart from that, I have tried to 
> add a variable to the path of the csv file so that each year it reads the 
> corresponding file and I don't have to change it every year but it also 
> gives me an error. I want to solve first the problem of the error and then 
> the problem of the path to the file.
> I leave the code for you to have a look. Thanks a lot.
>
> El viernes, 5 de mayo de 2023 a las 4:16:35 UTC+2, Ray Thomas escribió:
>
>> Aftere reading all the links I gave (several times), I finally worked 
>> this out. It confused me why so many tables seemed to be made. Here's the 
>> sequence of events:
>>
>> 1) Import the data into a datatable
>> 2) Create a new table view with the grouping data and averages . As all 
>> the data is being used, the grouping data is all the same (in this case an 
>> empty string). Then use then aggregation to calculate the averages.
>> 3) Create the averages variables from the above table view - they are all 
>> going to be the same.
>> 4) Make a new view from the original datatable and add the the calcuated 
>> averages to new columns.
>>
>> What I did was start from scratch to make things clearer:
>>
>> https://www.gstatic.com/charts/loader.js";>
>>
>> 
>> google.charts.load('current', {'packages':['corechart']});
>> google.charts.setOnLoadCallback(drawChart);
>> function drawChart() {
>> var queryOptions = {
>> // Define the CSV data columns
>>csvColumns: ['date', 'number', 'number', 'number', 'number'],
>> // This should be false if your CSV file doesn't have a header 
>>csvHasHeader: true
>> }
>>
>> // Create the query giving the path and name of the CSV file
>> var query = new google.visualization.Query('jose.csv', queryOptions);
>> query.send(handleQueryResponse);
>> }
>>
>> function handleQueryResponse(response) {
>> if (response.isError()) {
>> alert('Error in query: ' + response.getMessage() + ' ' + 
>> response.getDetailedMessage());
>> return;
>> }
>>
>> var dataTable = response.getDataTable();dataTable
>>
>> //Create the averages using aggregation
>> var averages = google.visualization.data.group(
>> dataTable,
>> // The first column is what to group on, in this case an empty string
>> [{column: 0, type: 'string', modifier: function () {return '';}}],
>> [
>> {column: 1, type: 'number', aggregation: google.visualization.data.avg},
>> {column: 2, type: 'number', aggregation: google.visualization.data.avg},
>> {column: 3, type: 'number', aggregation: google.visualization.data.avg},
>> {column: 4, type: 'number', aggregation: google.visualization.data.avg}
>> ]
>> );
>>
>> // Put the calculated averages into variables
>> var diastolAvg = averages.getValue(0, 1);
>> var sistolAvg = averages.getValue(0, 2);
>> var pulsaAvg = averages.getValue(0, 3);
>> var saturaAvg = averages.getValue(0, 4);
>>
>> // Create a new view from the table and add the averages
>> var dataView = new google.visualization.DataView(dataTable);
>> dataView.setColumns([0, 1, 2, 3, 4, {
>> label: 'diastolAvg',
>> type: 'number',
>> calc: function (dt, row) {
>> return diastolAvg;
>> }
>> }, {
>> label: 'sistolAvg',
>> type: 'number',
>> calc: function (dt, row) {
>> return sistolAvg;
>> }
>> }, {
>> label: 'pulsaAvg',
>> type: 'number',
>> calc: function (dt, row) {
>> return pulsaAvg;
>> }
>> }, {
>> label: 'saturaAvg',
>> type: 'number',
>> calc: function (dt, row) {
>> return saturaAvg;
>> }
>> }]);
>>
>> var options = {
>> series: {
>> 0:{type: 'area'},
>> 1:{type: 'area'},
>> 2:{type: 'area'},
>> 3:{type: 'area'},
>> 4:{type: 'line'},
>> 5:{type: 'line'},
>> 6:{type: 'line'},
>> 

[visualization-api] Re: I need to add the averages of the values to my chart of type "ChartAreas".

['Ray Thomas' via Google Visualization API]

Aftere reading all the links I gave (several times), I finally worked this 
out. It confused me why so many tables seemed to be made. Here's the 
sequence of events:

1) Import the data into a datatable
2) Create a new table view with the grouping data and averages . As all the 
data is being used, the grouping data is all the same (in this case an 
empty string). Then use then aggregation to calculate the averages.
3) Create the averages variables from the above table view - they are all 
going to be the same.
4) Make a new view from the original datatable and add the the calcuated 
averages to new columns.

What I did was start from scratch to make things clearer:

https://www.gstatic.com/charts/loader.js";>


google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var queryOptions = {
// Define the CSV data columns
   csvColumns: ['date', 'number', 'number', 'number', 'number'],
// This should be false if your CSV file doesn't have a header 
   csvHasHeader: true
}
   
// Create the query giving the path and name of the CSV file
var query = new google.visualization.Query('jose.csv', queryOptions);
query.send(handleQueryResponse);
}

function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + 
response.getDetailedMessage());
return;
}

var dataTable = response.getDataTable();dataTable

//Create the averages using aggregation
var averages = google.visualization.data.group(
dataTable,
// The first column is what to group on, in this case an empty string
[{column: 0, type: 'string', modifier: function () {return '';}}],
[
{column: 1, type: 'number', aggregation: google.visualization.data.avg},
{column: 2, type: 'number', aggregation: google.visualization.data.avg},
{column: 3, type: 'number', aggregation: google.visualization.data.avg},
{column: 4, type: 'number', aggregation: google.visualization.data.avg}
]
);

// Put the calculated averages into variables
var diastolAvg = averages.getValue(0, 1);
var sistolAvg = averages.getValue(0, 2);
var pulsaAvg = averages.getValue(0, 3);
var saturaAvg = averages.getValue(0, 4);

// Create a new view from the table and add the averages
var dataView = new google.visualization.DataView(dataTable);
dataView.setColumns([0, 1, 2, 3, 4, {
label: 'diastolAvg',
type: 'number',
calc: function (dt, row) {
return diastolAvg;
}
}, {
label: 'sistolAvg',
type: 'number',
calc: function (dt, row) {
return sistolAvg;
}
}, {
label: 'pulsaAvg',
type: 'number',
calc: function (dt, row) {
return pulsaAvg;
}
}, {
label: 'saturaAvg',
type: 'number',
calc: function (dt, row) {
return saturaAvg;
}
}]);

var options = {
series: {
0:{type: 'area'},
1:{type: 'area'},
2:{type: 'area'},
3:{type: 'area'},
4:{type: 'line'},
5:{type: 'line'},
6:{type: 'line'},
7:{type: 'line'}
}
};

var joseChart = new 
google.visualization.ComboChart(document.getElementById('joseChart-div'));
joseChart.draw(dataView, options);
}




You should be able to add all your options back into this. You can see this 
simplified chart at https://brisray.com/test/jose-simple.htm

Just so I don't forget how to do this, I've also started a new page - 
https://brisray.com/google-charts/calcs.htm - where it should permanently 
along with some other bits and pieces.

Like most things,  it's easy once you understand what's going on.

On Tuesday, May 2, 2023 at 2:16:31 PM UTC-4 José Vicente Zahonero wrote:

> I have modified my php file and added the averages at  the last line of 
> the csv. Now I don't know how I can add this data to my chart.
> Can you help me?
>
> El martes, 2 de mayo de 2023 a las 6:07:58 UTC+2, José Vicente Zahonero 
> escribió:
>
>> Hi, I have just read the documentation in the link you sent me and it 
>> didn't clarify much, to be honest. When I convert the table to csv the 
>> columns are specified in the database, moreover, then I convert that csv to 
>> Excel and there is no problem when it comes to differentiate the dates from 
>> the numbers to calculate the averages.
>> Anyway, what I want to embed is a line with the average of each column, 
>> not the trend it has. I don't know if I've made myself clear.
>> I'm sorry if I'm wasting your time. I thank you for the trouble you are 
>> taking with my problem. 
>>
>> Translated with www.DeepL.com/Translator (free version)
>>
>> El martes, 2 de mayo de 2023 a las 1:34:17 UTC+2, Ray Thomas escribió:
>>
>>> When CSV files are used by the API, it guesses the data type of each 
>>> column. It's reading the number columns properly but I think it is 
>>> importing the date as a string and so cannot graph it on a trendline.
>>>
>>> From 
>>> https://developers.google.com/chart/interactive/docs/reference#google.visualization.arraytodatatable
>>>  you 
>>> can change the header of the CSV file to {label: 'fecha', 

[visualization-api] Re: I need to add the averages of the values to my chart of type "ChartAreas".

['Ray Thomas' via Google Visualization API]

When CSV files are used by the API, it guesses the data type of each 
column. It's reading the number columns properly but I think it is 
importing the date as a string and so cannot graph it on a trendline.

From 
https://developers.google.com/chart/interactive/docs/reference#google.visualization.arraytodatatable
 you 
can change the header of the CSV file to {label: 'fecha', type: 
'date'},sistolica,diastolica,pulsaciones,saturacion

On Monday, May 1, 2023 at 7:59:37 AM UTC-4 José Vicente Zahonero wrote:

> Hi, I have modified my HTML-PHP file with your specifications and I still 
> can't see the lines with the averages. The only difference between your 
> proposal and mine is the way to create the csv file, I create it from a 
> Postgres query and you do not. I attach the code I have and a screenshot of 
> what it returns. Best regards.[image: Captura_001.png]
>
> El lunes, 1 de mayo de 2023 a las 12:50:00 UTC+2, Ray Thomas escribió:
>
>> I used a LineChart because Trendlines only work on Scatter Charts, Bar 
>> Charts, Column Charts, and Line Charts.
>>
>> Sorry, I should have explained that in my answer.
>>
>> I also don't have PHP installed so what I did was use a query to open the 
>> CSV file after I rewrote the dates. The complete code I used is at 
>> https://brisray.com/test/jose.htm (which is where the screenshot came 
>> from) and the CSV file is at https://brisray.com/test/jose.csv  
>> 
>>
>> On Monday, May 1, 2023 at 2:12:51 AM UTC-4 José Vicente Zahonero wrote:
>>
>>> Hi, I have tried changing the format of the dates to '-MM-dd' in the 
>>> csv and I have added the code you have indicated but it doesn't show me any 
>>> average line in the graph.
>>> [image: Captura_001.png]
>>>
>>> El lunes, 1 de mayo de 2023 a las 1:41:03 UTC+2, Ray Thomas escribió:
>>>
 The quickest way is to add a trendline to the graph. Add this something 
 like this under your series statements in the options secion:

 trendlines: {
  0:{type: 'linear', color: 'yellow', visibleInLegend: true, 
 lineWidth:2},
  1:{type: 'linear', color: 'yellow', visibleInLegend: true, 
 lineWidth:2},
  2:{type: 'linear', color: 'yellow', visibleInLegend: true, 
 lineWidth:2},
  3:{type: 'linear', color: 'yellow', visibleInLegend: true, 
 lineWidth:2}
 },

 Trendlines do not work on discrete data such as strings, so you have to 
 change your CSV file to the preferred date format which for a CSV file is 
 -MM-dd or do it in the datatable. The trendline help is at 
 https://developers.google.com/chart/interactive/docs/gallery/trendlines

 [image: jose-trendlines.jpg]

 Trendlines are not averages, so if you really need those you need to 
 create new columns in the datatable and calculate them yourself. The 
 example in the ComboChart help at 
 https://developers.google.com/chart/interactive/docs/gallery/combochart 
 uses the averages of the row data but you need it for the column data. So 
 you'll need 4 new columns, one for each of the current columns, and each 
 of 
 the new columns will contain all the same number, the column averages.

 Another method of getting the averages is to use the aggregation 
 method. The help for that is at 
 https://developers.google.com/chart/interactive/docs/reference#data-manipulation-methods.
  
 Because that depends on grouping the data, you are going to need a new 
 column containing a single value in all the rows so they can be grouped 
 together. How to use this properly has come up fairly often so there are 
 examples on Stack Overflow. Here are some:


 https://stackoverflow.com/questions/58417507/how-to-draw-an-average-column-in-google-charts-bar-chart

 https://stackoverflow.com/questions/50004379/draw-a-line-to-show-the-average-distribution-in-google-scatter-plot

 https://stackoverflow.com/questions/35918308/average-line-for-current-data-in-a-google-combochart

 I don't know who WhiteHat is, but they certainly know their way around 
 the API.

 On Saturday, April 29, 2023 at 3:59:39 AM UTC-4 José Vicente Zahonero 
 wrote:

> Hi, I have an area chart in which I represent some values taken from a 
> csv file. I would like to be able to add the averages corresponding to 
> each 
> column to the graph, can you help me?
> My code is in the attached file. Thanks for you help. 
>


-- 
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 google-visualization-api+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/d106242e-4876-437a-a2eb-499632187230n%40googlegroups.com.

[visualization-api] Re: I need to add the averages of the values to my chart of type "ChartAreas".

['Ray Thomas' via Google Visualization API]

I used a LineChart because Trendlines only work on Scatter Charts, Bar 
Charts, Column Charts, and Line Charts.

Sorry, I should have explained that in my answer.

I also don't have PHP installed so what I did was use a query to open the 
CSV file after I rewrote the dates. The complete code I used is at 
https://brisray.com/test/jose.htm (which is where the screenshot came from) 
and the CSV file is at https://brisray.com/test/jose.csv  


On Monday, May 1, 2023 at 2:12:51 AM UTC-4 José Vicente Zahonero wrote:

> Hi, I have tried changing the format of the dates to '-MM-dd' in the 
> csv and I have added the code you have indicated but it doesn't show me any 
> average line in the graph.
> [image: Captura_001.png]
>
> El lunes, 1 de mayo de 2023 a las 1:41:03 UTC+2, Ray Thomas escribió:
>
>> The quickest way is to add a trendline to the graph. Add this something 
>> like this under your series statements in the options secion:
>>
>> trendlines: {
>>  0:{type: 'linear', color: 'yellow', visibleInLegend: true, 
>> lineWidth:2},
>>  1:{type: 'linear', color: 'yellow', visibleInLegend: true, 
>> lineWidth:2},
>>  2:{type: 'linear', color: 'yellow', visibleInLegend: true, 
>> lineWidth:2},
>>  3:{type: 'linear', color: 'yellow', visibleInLegend: true, 
>> lineWidth:2}
>> },
>>
>> Trendlines do not work on discrete data such as strings, so you have to 
>> change your CSV file to the preferred date format which for a CSV file is 
>> -MM-dd or do it in the datatable. The trendline help is at 
>> https://developers.google.com/chart/interactive/docs/gallery/trendlines
>>
>> [image: jose-trendlines.jpg]
>>
>> Trendlines are not averages, so if you really need those you need to 
>> create new columns in the datatable and calculate them yourself. The 
>> example in the ComboChart help at 
>> https://developers.google.com/chart/interactive/docs/gallery/combochart 
>> uses the averages of the row data but you need it for the column data. So 
>> you'll need 4 new columns, one for each of the current columns, and each of 
>> the new columns will contain all the same number, the column averages.
>>
>> Another method of getting the averages is to use the aggregation method. 
>> The help for that is at 
>> https://developers.google.com/chart/interactive/docs/reference#data-manipulation-methods.
>>  
>> Because that depends on grouping the data, you are going to need a new 
>> column containing a single value in all the rows so they can be grouped 
>> together. How to use this properly has come up fairly often so there are 
>> examples on Stack Overflow. Here are some:
>>
>>
>> https://stackoverflow.com/questions/58417507/how-to-draw-an-average-column-in-google-charts-bar-chart
>>
>> https://stackoverflow.com/questions/50004379/draw-a-line-to-show-the-average-distribution-in-google-scatter-plot
>>
>> https://stackoverflow.com/questions/35918308/average-line-for-current-data-in-a-google-combochart
>>
>> I don't know who WhiteHat is, but they certainly know their way around 
>> the API.
>>
>> On Saturday, April 29, 2023 at 3:59:39 AM UTC-4 José Vicente Zahonero 
>> wrote:
>>
>>> Hi, I have an area chart in which I represent some values taken from a 
>>> csv file. I would like to be able to add the averages corresponding to each 
>>> column to the graph, can you help me?
>>> My code is in the attached file. Thanks for you help. 
>>>
>>

-- 
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 google-visualization-api+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/34116f22-c34c-439e-871c-0acc0bc3f8cfn%40googlegroups.com.

[visualization-api] Re: Google Charts with CSV file

['Ray Thomas' via Google Visualization API]

You're too kind Joe. Once I realized what you are supposed to do with the 
query language it was surprisingly easy to create the chart. I let myself 
get a bit confused by some of what I found on Stack Overflow at first, such 
as posts using external libraries to import the data, which aren't needed.

We get home whenever we can. My (American) wife is fascinated by places 
like Chepstow Castle and Stonehenge and thinks the UK is some sort of 
Twilight Zone - like the US but different. She's convinced herself that 
Ipswich is the real home of Harry Potter but still manages to put 
8 syllables in Worcestershire.

On Friday, April 28, 2023 at 7:21:19 AM UTC-4 Joe Davies wrote:

> Ray Thomas, what can I say..., thank you so much for the effort you've 
> gone to in finding a solution for me, it's brilliant and it all worked 
> straight off the bat,. You have gone above and beyond my expectations!
> What a top man you are, may your generosity be returned to you a 
> hundredfold! I took the liberty of looking around your website 
> https://brisray.com/which contains all sorts of interesting stuff and 
> note that you are now living in happy exile but still have a passion for 
> all things Bristolian which is about an hours drive from where I live in 
> Bridgend, S Wales. Take care and thanks again!
>
> On Friday, April 28, 2023 at 6:44:03 AM UTC+1 Ray Thomas wrote:
>
>> It took a little bit of finding but I got the basics from a 9-year old 
>> thread in this group. You have to use a query to get the data from the CSV 
>> file.
>>
>> Here's the code using your CSV file - i named it mycsv.csv
>>
>> 
>> // Load the Charts and the corechart package.
>>
>> google.charts.load('current', {'packages':['corechart']});
>> google.charts.setOnLoadCallback(drawChart);
>>
>> function drawChart() {
>> var queryOptions = {
>> // Define the CSV data columns
>> csvColumns: ['string', 'number', 'number', 'number'],
>> // This should be false if your CSV file doesn't have a header 
>> csvHasHeader: true
>> }
>>
>> // Create the query giving the path and name of the CSV file
>> var query = new google.visualization.Query('mycsv.csv', queryOptions);
>> 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('csv-div'));
>> chart.draw(data);
>> }
>> 
>>
>> Here's a page that shows this working - 
>> https://brisray.com/google-charts/csv.htm
>>
>> On Thursday, April 27, 2023 at 11:11:11 AM UTC-4 Joe Davies wrote:
>>
>>> I have the following html which works fine in producing a stacked column 
>>> chart with Google Charts. I want to replace the static data in the html 
>>> with an external csv file and am unable to get it to work.
>>>
>>> Static Example (This works fine)
>>> 
>>>   
>>> https://www.gstatic.com/charts/loader.js";>
>>> 
>>>   google.charts.load('current', {'packages':['corechart']});
>>>   google.charts.setOnLoadCallback(drawChart);
>>>
>>>   function drawChart() {
>>> var data = google.visualization.arrayToDataTable([
>>>   ['Day', 'Status A', 'Status B', 'Status C'],
>>>   ['Monday', 10, 5, 3],
>>>   ['Tuesday', 8, 2, 6],
>>>   ['Wednesday', 6, 4, 10],
>>>   ['Thursday', 12, 8, 4],
>>>   ['Friday', 4, 12, 2],
>>>   ['Saturday', 6, 4, 8],
>>>   ['Sunday', 10, 6, 4]
>>> ]);
>>>
>>> var options = {
>>>   title: 'Status Values by Day',
>>>   isStacked: true
>>> };
>>>
>>> var chart = new 
>>> google.visualization.ColumnChart(document.getElementById('chart_div'));
>>> chart.draw(data, options);
>>>   }
>>> 
>>>   
>>>   
>>> 
>>>   
>>> 
>>>
>>> I have replaced the var data block with the following block of code to 
>>> reference a 'data.csv' file.
>>>
>>> var data = new google.visualization.DataTable();
>>> data.addColumn('string', 'Day');
>>> data.addColumn('number', 'Status A');
>>> data.addColumn('number', 'Status B');
>>> data.addColumn('number', 'Status C');
>>> data.load('data.csv', {'header': true, 'delimiter': ','});
>>>
>>> The 'data.csv' file is formed as follows and I have it in the same 
>>> folder as the html file.
>>> Day,Status A,Status B,Status C
>>> Monday,10,5,3
>>> Tuesday,8,2,6
>>> Wednesday,6,4,10
>>> Thursday,12,8,4
>>> Friday,4,12,2
>>> Saturday,6,4,8
>>> Sunday,10,6,4
>>>
>>> When I open the html file it is blank, I'd like to know where I have 
>>> gone wrong. Thank you in advance for any help or pointers you can give me.
>>>
>>

-- 
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 

[visualization-api] Re: Google Charts with CSV file

['Ray Thomas' via Google Visualization API]

It took a little bit of finding but I got the basics from a 9-year old 
thread in this group. You have to use a query to get the data from the CSV 
file.

Here's the code using your CSV file - i named it mycsv.csv


// Load the Charts and the corechart package.
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
var queryOptions = {
// Define the CSV data columns
csvColumns: ['string', 'number', 'number', 'number'],
// This should be false if your CSV file doesn't have a header 
csvHasHeader: true
}
   
// Create the query giving the path and name of the CSV file
var query = new google.visualization.Query('mycsv.csv', queryOptions);
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('csv-div'));
chart.draw(data);
}


Here's a page that shows this working - 
https://brisray.com/google-charts/csv.htm

On Thursday, April 27, 2023 at 11:11:11 AM UTC-4 Joe Davies wrote:

> I have the following html which works fine in producing a stacked column 
> chart with Google Charts. I want to replace the static data in the html 
> with an external csv file and am unable to get it to work.
>
> Static Example (This works fine)
> 
>   
> https://www.gstatic.com/charts/loader.js";>
> 
>   google.charts.load('current', {'packages':['corechart']});
>   google.charts.setOnLoadCallback(drawChart);
>
>   function drawChart() {
> var data = google.visualization.arrayToDataTable([
>   ['Day', 'Status A', 'Status B', 'Status C'],
>   ['Monday', 10, 5, 3],
>   ['Tuesday', 8, 2, 6],
>   ['Wednesday', 6, 4, 10],
>   ['Thursday', 12, 8, 4],
>   ['Friday', 4, 12, 2],
>   ['Saturday', 6, 4, 8],
>   ['Sunday', 10, 6, 4]
> ]);
>
> var options = {
>   title: 'Status Values by Day',
>   isStacked: true
> };
>
> var chart = new 
> google.visualization.ColumnChart(document.getElementById('chart_div'));
> chart.draw(data, options);
>   }
> 
>   
>   
> 
>   
> 
>
> I have replaced the var data block with the following block of code to 
> reference a 'data.csv' file.
>
> var data = new google.visualization.DataTable();
> data.addColumn('string', 'Day');
> data.addColumn('number', 'Status A');
> data.addColumn('number', 'Status B');
> data.addColumn('number', 'Status C');
> data.load('data.csv', {'header': true, 'delimiter': ','});
>
> The 'data.csv' file is formed as follows and I have it in the same folder 
> as the html file.
> Day,Status A,Status B,Status C
> Monday,10,5,3
> Tuesday,8,2,6
> Wednesday,6,4,10
> Thursday,12,8,4
> Friday,4,12,2
> Saturday,6,4,8
> Sunday,10,6,4
>
> When I open the html file it is blank, I'd like to know where I have gone 
> wrong. Thank you in advance for any help or pointers you can give me.
>

-- 
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 google-visualization-api+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/a323d79c-a1ac-402b-aa41-0c1915bd714fn%40googlegroups.com.

[visualization-api] Re: Cannot get PieChart to update data after button click

['Ray Thomas' via Google Visualization API]

Hello Arthur,

I couldn't figure out why your code wasn't working so I started over. Two 
ways of doing this came to mind, one way is to draw the charts then use a 
button to toggle the display property of the divs on and off. The other way 
was to redraw the charts on a button click in a single div.

Method 1 - hide/display the chart divs

I used 
https://developers.google.com/chart/interactive/docs/basic_multiple_charts as 
a starting point and added a button to show or hide the chart divs.

The code for this is:


  // Create a namespace
  var pizzas = (function() { 

  // Load Charts and the corechart package.
  google.charts.load('current', {'packages':['corechart']});

  // Draw the pie chart for Sara's pizza when Charts is loaded.
  google.charts.setOnLoadCallback(drawSaraChart);

  // Draw the pie chart for the Tony's pizza when Charts is loaded.
  google.charts.setOnLoadCallback(drawTonyChart);

  // Callback that draws the pie chart for Sara's pizza.
  function drawSaraChart() {

// Create the data table for Sara's pizza.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
  ['Mushrooms', 1],
  ['Onions', 1],
  ['Olives', 2],
  ['Zucchini', 2],
  ['Pepperoni', 1]
]);

// Set options for Sara's pie chart.
var options = {title:'How Much Pizza Sara Ate Last Night',
   width:400,
   height:300};

// Instantiate and draw the chart for sara's pizza.
var chart = new 
google.visualization.PieChart(document.getElementById('sara_chart_div'));
chart.draw(data, options);
  }

  // Callback that draws the pie chart for tony's pizza.
  function drawTonyChart() {

// Create the data table for Tony's pizza.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
  ['Mushrooms', 2],
  ['Onions', 2],
  ['Olives', 2],
  ['Zucchini', 0],
  ['Pepperoni', 3]
]);

// Set options for Tony's pie chart.
var options = {title:'How Much Pizza Tony Ate Last Night',
   width:400,
   height:300};

// Instantiate and draw the chart for Tony's pizza.
var chart = new 
google.visualization.PieChart(document.getElementById('tony_chart_div'));
chart.draw(data, options);
  }
})();


and the HTML is:

Toggle Charts




and the code for the button is:


function showhidePizza() {
  var saraDiv = document.getElementById("sara_chart_div");
  var tonyDiv = document.getElementById("tony_chart_div");
  if (saraDiv.style.display === "none") {
saraDiv.style.display = "block";
tonyDiv.style.display = "none";
  } else {
saraDiv.style.display = "none";
tonyDiv.style.display = "block";
  }
}


Method 2: - redraw the charts on a button click

This was adapted from 
https://stackoverflow.com/questions/38161862/change-google-chart-data-and-appearance-with-button
 - 
WhiteHat who worte the original is a genius with the Chart API.

The script is:


// Create a namespace
var speakers = (function() {
google.charts.load('current', {
  'callback': function () {
var data1 = google.visualization.arrayToDataTable([
  ['Language', 'Speakers (in millions)'],
  ['Cat 1', 26], ['Cat 3', 16], ['Cat 2', 30]
]);

var data2 = google.visualization.arrayToDataTable([
  ['Language', 'Speakers (in millions)'],
  ['Cat 1', 100], ['Cat 3', 200], ['Cat 2', 300]
]);

var options = {
  title: 'Indian Language Use',
  legend: 'none',
  pieSliceText: 'label',
  slices: {  1: {offset: 0.2},
 2: {offset: 0.3},
 3: {offset: 0.4},
 4: {offset: 0.5},
  },
  animation: {
  startup:true,
  duration: 1000,
  easing: 'in'
  }
};

var chart = new 
google.visualization.PieChart(document.getElementById('language_div'));
chart.draw(data1, options);
  
document.getElementById('toggleData').addEventListener('click', function () 
{
var btnValue = document.getElementById('toggleData').value; 
if (btnValue == "0"){
chart.draw(data1, options); 
btnValue = "1";}
else { 
chart.draw(data2, options);
btnValue = "0";}
document.getElementById('toggleData').value = btnValue;
},  false);

document.getElementById('data1').addEventListener('click', function () {
  chart.draw(data1, options);
}, false);

document.getElementById('data2').addEventListener('click', function () {
  chart.draw(data2, options);
}, false);

  },
  'packages':['corechart']
});
})();


The HTML is:

Toggle Charts




I added both methods to the bottom of 
https://brisray.com/google-charts/multiple.htm so you can see 

[visualization-api] Re: TIMEline Charts API Zero shows up as JAN in tool tips.. and so on.

['Ray Thomas' via Google Visualization API]

Hi Rajesh,

It is to do with how JavaScript counts months, they start from 0 not 1, and 
run from 0 (January) to 11 (December). It does it with days of the week as 
well, the first day of the week is 0 and run from 0 (Sunday) to 6 ( 
Saturday).

Ray
On Monday, April 24, 2023 at 11:14:42 AM UTC-4 Rajesh Sharma wrote:

> The months in this start with ZERO... 
> new Date($YY,$MM,$DD)
>
> When $MM is zero. It shows Jan, Tool tips. 
> It should be 1. 
>
>
>

-- 
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 google-visualization-api+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/77e83859-c76f-434d-a09d-e63b19f5da33n%40googlegroups.com.

Re: [visualization-api] Re: Dynamic Swap Y-Axis Values in same Scatter Chart

['Ray Thomas' via Google Visualization API]

If you have all the values in your data already, what you could do is 
create a dataview from that - see 
https://developers.google.com/chart/interactive/docs/reference#dataview-class 
and 
then use  example: view.setColumns([0,1,3])  tos et the columns to be 
shown. see 
https://developers.google.com/chart/interactive/docs/reference#DataView_setColumns

The column numbers to be shown can be controlled via a dropdown or buttons 
as before. There's an example at http://jsfiddle.net/katalin_2003/3rzv7pvz/

On Monday, April 3, 2023 at 9:11:54 PM UTC-4 Kenton Jones wrote:

> Thank you, that seems like what I'm after in terms of pull down selector.  
> My data table has x values and several y values already in there, and I 
> want to swap out y values to make a "new" scatter chart.
>
> On Fri, Mar 31, 2023 at 12:10 PM 'Ray Thomas' via Google Visualization API 
>  wrote:
>
>> This is fairly easy to do, but you are going to have to change the type 
>> of chart you are drawing. This is because scatter charts do not support 
>> the isStacked option which allows you to use the percent stacked display. 
>> It's just not in the list of scatter chart options - 
>> https://developers.google.com/chart/interactive/docs/gallery/scatterchart#configuration-options
>>  as 
>> it is in things like the column charts - 
>> https://developers.google.com/chart/interactive/docs/gallery/columnchart#configuration-options.
>>  
>> I also tried it on some of my own charts and it does not work. 
>>
>> I suppose you could calculate the points yourself and draw that data, but 
>> it is probably easier to reconsider the type of chart you are drawing.
>>
>> What you need is something like a button, dropdown or something similar 
>> to let the users switch between what they want to see. You can use the 
>> onChange event of the switch to signal the code to redraw the chart with 
>> the new values.
>>
>> Here's a dropdown I used to choose between a normal, stacked and percent 
>> column chart:
>>
>> 
>>   Column
>>   Stacked
>>   Percent
>> 
>>
>> and here's the function I used to redraw the chart:
>>
>> function redrawChart(){
>> var chartType = document.getElementById("chooseChart").value;
>> var optionVar = false;
>> if (chartType == "Stacked") {optionVar = true}
>> if (chartType == "Percent") {optionVar = 'percent'}
>> var options = {isStacked: optionVar};
>>
>> var chart = new 
>> google.visualization.ColumnChart(document.getElementById('studentData_div'));
>>
>> chart.draw(studentData, options);
>> }
>>
>> You can see a working example along with the full script of this on 
>> https://brisray.com/google-charts/multiple.htm
>>
>> The page also shows how to change between different types of chart, I 
>> used a column and bar chart in my example. There's no reason you can't 
>> combine both the type of chart and whether it is stacked ot not in one go.
>>
>> On Thursday, March 30, 2023 at 3:18:45 PM UTC-4 Kenton Jones wrote:
>>
>>> I have a google scatter chart up and running.
>>> Chart shows a standard x-axis value and y-axis value.
>>>
>>> I'm thinking of adding a feature where
>>> user can click a button anCan you advise on general approach
>>> to add a button when clicked the chart will update
>>> from X date Y value to X date Y percent?
>>> (and I could update new y axis options)
>>>
>>> Thx
>>>
>> -- 
>> 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/f4SbYQnN3sE/unsubscribe
>> .
>> To unsubscribe from this group and all its topics, send an email to 
>> google-visualizati...@googlegroups.com.
>> To view this discussion on the web visit 
>> https://groups.google.com/d/msgid/google-visualization-api/a3bb9374-3809-41c9-a555-62b77c60fd57n%40googlegroups.com
>>  
>> <https://groups.google.com/d/msgid/google-visualization-api/a3bb9374-3809-41c9-a555-62b77c60fd57n%40googlegroups.com?utm_medium=email_source=footer>
>> .
>>
>

-- 
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 google-visualization-api+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/783b35fe-92e6-44fd-ade4-8fb7f97bbd04n%40googlegroups.com.

[visualization-api] Re: Dynamic Swap Y-Axis Values in same Scatter Chart

['Ray Thomas' via Google Visualization API]

This is fairly easy to do, but you are going to have to change the type of 
chart you are drawing. This is because scatter charts do not support 
the isStacked option which allows you to use the percent stacked display. 
It's just not in the list of scatter chart options - 
https://developers.google.com/chart/interactive/docs/gallery/scatterchart#configuration-options
 as 
it is in things like the column charts - 
https://developers.google.com/chart/interactive/docs/gallery/columnchart#configuration-options.
 
I also tried it on some of my own charts and it does not work. 

I suppose you could calculate the points yourself and draw that data, but 
it is probably easier to reconsider the type of chart you are drawing.

What you need is something like a button, dropdown or something similar to 
let the users switch between what they want to see. You can use the 
onChange event of the switch to signal the code to redraw the chart with 
the new values.

Here's a dropdown I used to choose between a normal, stacked and percent 
column chart:


  Column
  Stacked
  Percent


and here's the function I used to redraw the chart:

function redrawChart(){
var chartType = document.getElementById("chooseChart").value;
var optionVar = false;
if (chartType == "Stacked") {optionVar = true}
if (chartType == "Percent") {optionVar = 'percent'}
var options = {isStacked: optionVar};

var chart = new 
google.visualization.ColumnChart(document.getElementById('studentData_div'));

chart.draw(studentData, options);
}

You can see a working example along with the full script of this on 
https://brisray.com/google-charts/multiple.htm

The page also shows how to change between different types of chart, I used 
a column and bar chart in my example. There's no reason you can't combine 
both the type of chart and whether it is stacked ot not in one go.

On Thursday, March 30, 2023 at 3:18:45 PM UTC-4 Kenton Jones wrote:

> I have a google scatter chart up and running.
> Chart shows a standard x-axis value and y-axis value.
>
> I'm thinking of adding a feature where
> user can click a button anCan you advise on general approach
> to add a button when clicked the chart will update
> from X date Y value to X date Y percent?
> (and I could update new y axis options)
>
> Thx
>

-- 
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 google-visualization-api+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/a3bb9374-3809-41c9-a555-62b77c60fd57n%40googlegroups.com.

Re: [visualization-api] Re: How to have the Y axis labels show both Celsius and Fahrenheit in a line chart

['Ray Thomas' via Google Visualization API]

Here's what I came up with:


  // Load Charts and the corechart package.
  google.charts.load('current', {'packages':['corechart']});
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {

   var queryString = encodeURIComponent('SELECT A,B ORDER BY A');
   var query = new 
google.visualization.Query('<a  rel="nofollow" href="https://docs.google.com/spreadsheets/d/1tswaWUAbeBijHq4o505w0h7TmbD-qGhR3jBactcbGq0/gviz/tq?gid=464392919&headers=1&tq=">https://docs.google.com/spreadsheets/d/1tswaWUAbeBijHq4o505w0h7TmbD-qGhR3jBactcbGq0/gviz/tq?gid=464392919&headers=1&tq=</a>'
 
+ queryString);
   query.send(handleQueryResponse);
}
 
function handleQueryResponse(response) {
   if (response.isError()) {
   alert('Error in query: ' + response.getMessage() + ' ' + 
response.getDetailedMessage());
   return;
}
  
var data = response.getDataTable();
 function doConversion(temp) {
 return (temp - 32) * 0.5556;
 }

// Set the column label properly for Fahrenheit
data.setColumnLabel(1, "Fahrenheit");
// Create a new column to hold the custom tooltips for Fahrenheit
data.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});
// Create a new column to hold the Celcius values
data.addColumn("number", "Celcius");
// Create a new column to hold the custom tooltips for Celcius
data.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});

// Data table is now Date/Time | Fahrenheit | Fahrenheit Tooltip | Celcius 
| Celcius Tooltip
// Get the number of rows in the data
var totalRows= data.getNumberOfRows();

for (i = 0; i < totalRows; i++) { 
// Create the Celcius (column 3) from Fahrenheit data (column 1)
fTemp = data.getValue(i,1);
cTemp = doConversion(fTemp)
data.setCell(i, 3, cTemp); 
// Create the tooltip string in columns 2 and  4
var tooltipStr = '<div style="padding:0 10px;"><p>Date/Time: <b>' + 
data.getFormattedValue(i,0) + '</b></p><p>Fahrenheit: <b>' + 
data.getValue(i,1) + '</b><br>Celcius: <b>' + 
Math.round((data.getValue(i,3)+ Number.EPSILON) * 100) / 100 + 
'</b></p></div>';
data.setValue(i, 2, tooltipStr);
data.setValue(i, 4, tooltipStr); 
}

var fMin = data.getColumnRange(1).min -5;
var cMin = doConversion(fMin)
var fMax = data.getColumnRange(1).max + 5;
var cMax = doConversion(fMax)

var options = {
tooltip: {isHtml: true},
legend: 'none',
height: '200',
hAxis: {format: 'M/d/ H:m:s'},
series: {
  0: {targetAxisIndex: 0,},
  1: {targetAxisIndex: 1,}
}, 
vAxes: {
0: {title: 'Temp: Fahrenheit',
viewWindow: {
  min: fMin,
  max: fMax
}  
},
1: {title: 'Temp: Celcius',
viewWindow: {
  min: cMin,
  max: cMax
},
ticks: [ -15, -10, 0, 10, 15, 20, 30 ]
}
}
};

var Chart = new 
google.visualization.LineChart(document.getElementById('chart-div'));
Chart.draw(data, options);
}


It cam be seen at https://brisray.com/google-charts/axes.htm

On Sunday, December 18, 2022 at 6:58:58 PM UTC-5 Ray Thomas wrote:

> Thanks Daniel,
>
> I've just been reading this 
> https://github.com/google/google-visualization-issues/issues/1769 about 
> this very thing.
>
>
>
> On Sunday, December 18, 2022 at 6:34:49 PM UTC-5 dlali...@google.com 
> wrote:
>
>> You'll have to set the viewWindow min and max values of one axis so that 
>> it matches the min and max extreme values of the other axis.  It's also 
>> useful to specify the axis tick values you want to see using the ticks 
>> option.
>>
>> I did this using Ray's code.  See 
>> https://jsfiddle.net/dlaliberte/91wef0ga/14/
>>
>>
>> On Sun, Dec 18, 2022 at 5:07 PM 'Ray Thomas' via Google Visualization API 
>>  wrote:
>>
>>> It doesn't work properly! I used
>>>
>>> 
>>>   // Load Charts and the corechart package.
>>>   google.charts.load('current', {'packages':['corechart']});
>>>   google.charts.setOnLoadCallback(drawChart);
>>>
>>>   function drawChart() {
>>>
>>>var queryString = encodeURIComponent('SELECT A,B ORDER BY A');
>>>var query = new google.visualization.Query('
>>> <a  rel="nofollow" href="https://docs.google.com/spreadsheets/d/1tswaWUAbeBijHq4o505w0h7TmbD-qGhR3jBactcbGq0/gviz/tq?gid=464392919&headers=1&tq=">https://docs.google.com/spreadsheets/d/1tswaWUAbeBijHq4o505w0h7TmbD-qGhR3jBactcbGq0/gviz/tq?gid=464392919&headers=1&tq=</a>'
>>>  
>>> + queryString);
>>>query.send(handleQueryRespon

Re: [visualization-api] Re: How to have the Y axis labels show both Celsius and Fahrenheit in a line chart

['Ray Thomas' via Google Visualization API]

Thanks Daniel,

I've just been reading this 
https://github.com/google/google-visualization-issues/issues/1769 about 
this very thing.



On Sunday, December 18, 2022 at 6:34:49 PM UTC-5 dlali...@google.com wrote:

> You'll have to set the viewWindow min and max values of one axis so that 
> it matches the min and max extreme values of the other axis.  It's also 
> useful to specify the axis tick values you want to see using the ticks 
> option.
>
> I did this using Ray's code.  See 
> https://jsfiddle.net/dlaliberte/91wef0ga/14/
>
>
> On Sun, Dec 18, 2022 at 5:07 PM 'Ray Thomas' via Google Visualization API <
> google-visua...@googlegroups.com> wrote:
>
>> It doesn't work properly! I used
>>
>> 
>>   // Load Charts and the corechart package.
>>   google.charts.load('current', {'packages':['corechart']});
>>   google.charts.setOnLoadCallback(drawChart);
>>
>>   function drawChart() {
>>
>>var queryString = encodeURIComponent('SELECT A,B ORDER BY A');
>>var query = new google.visualization.Query('
>> <a  rel="nofollow" href="https://docs.google.com/spreadsheets/d/1tswaWUAbeBijHq4o505w0h7TmbD-qGhR3jBactcbGq0/gviz/tq?gid=464392919&headers=1&tq=">https://docs.google.com/spreadsheets/d/1tswaWUAbeBijHq4o505w0h7TmbD-qGhR3jBactcbGq0/gviz/tq?gid=464392919&headers=1&tq=</a>'
>>  
>> + queryString);
>>query.send(handleQueryResponse);
>> }
>>  
>> function handleQueryResponse(response) {
>>if (response.isError()) {
>>alert('Error in query: ' + response.getMessage() + ' ' + 
>> response.getDetailedMessage());
>>return;
>> }
>>   
>> var data = response.getDataTable();
>>
>> // Set the column label properly for Fahrenheit
>> data.setColumnLabel(1, "Fahrenheit");
>> // Create a new column to hold the Celcius values
>> data.addColumn("number", "Celcius");
>> // Get the number of rows in the data
>> var totalRows= data.getNumberOfRows();
>> 
>> for (i = 0; i < totalRows; i++) { 
>> fTemp = data.getValue(i,1);
>> cTemp = (fTemp - 32) * 0.5556;
>> data.setCell(i, 2, cTemp); 
>> }
>>
>> var options = {
>> series: {
>>   0: {targetAxisIndex: 0},
>>   1: {targetAxisIndex: 1}
>> },
>> vAxes: {
>>   // Adds titles to each axis.
>>   0: {title: 'Temp: Fahrenheit'},
>>   1: {title: 'Temp: Celcius'}
>> },
>> };
>>
>> var Chart = new 
>> google.visualization.LineChart(document.getElementById('switch-chart'));
>> Chart.draw(data, options);
>> }
>> 
>>
>> What that gives is:
>>
>> [image: charts-conversion.jpg]
>>
>> What I expected to happen is for the lines to line up with each other, 
>> but they don't. I will look at this again, it would be useful for other 
>> values, mph and km/hr etc.
>>
>> On Friday, December 16, 2022 at 10:30:19 PM UTC-5 Ray Thomas wrote:
>>
>>> I don't think you can do exactly what you want to do because the scale 
>>> and grid markers are calculated by the API.
>>>
>>> But what you could do is add a calculated column either in the original 
>>> data or create it before the API processes the data, that contains 
>>> the fahrenheit values and display that on the right hand side. See the help 
>>> for series and vAxes at 
>>> https://developers.google.com/chart/interactive/docs/gallery/linechart?csw=1#dual-y-charts
>>>  
>>> and the JSFiddle at https://jsfiddle.net/api/post/library/pure/
>>>
>>> Something else you can do is add both values to the tooltips. The help 
>>> for customizing the tooltips is at 
>>> https://developers.google.com/chart/interactive/docs/customizing_tooltip_content
>>>
>>>
>>>
>>>
>>>
>>> On Wednesday, December 14, 2022 at 9:39:49 PM UTC-5 
>>> gabrield...@gmail.com wrote:
>>>
>>>> I'm using the line chart and having some trouble formatting the y-axis 
>>>> grid markers. The data provided is stored in Celsius, but I'd like the 
>>>> labels on the left to also show Fahrenheit. For example one of the markers 
>>>> is showing 22, but I'd like it to show something like 22 / 71.6. This is 
>>>> my 
>>>> first time using Google Charts and I couldn't find anything in the 
>>>> documentation about manually adjusting automatic values. Can anyone point 
>>>> me in t

[visualization-api] Re: How to have the Y axis labels show both Celsius and Fahrenheit in a line chart

['Ray Thomas' via Google Visualization API]

It doesn't work properly! I used


  // Load Charts and the corechart package.
  google.charts.load('current', {'packages':['corechart']});
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {

   var queryString = encodeURIComponent('SELECT A,B ORDER BY A');
   var query = new 
google.visualization.Query('https://docs.google.com/spreadsheets/d/1tswaWUAbeBijHq4o505w0h7TmbD-qGhR3jBactcbGq0/gviz/tq?gid=464392919&headers=1&tq='
 
+ queryString);
   query.send(handleQueryResponse);
}
 
function handleQueryResponse(response) {
   if (response.isError()) {
   alert('Error in query: ' + response.getMessage() + ' ' + 
response.getDetailedMessage());
   return;
}
  
var data = response.getDataTable();

// Set the column label properly for Fahrenheit
data.setColumnLabel(1, "Fahrenheit");
// Create a new column to hold the Celcius values
data.addColumn("number", "Celcius");
// Get the number of rows in the data
var totalRows= data.getNumberOfRows();

for (i = 0; i < totalRows; i++) { 
fTemp = data.getValue(i,1);
cTemp = (fTemp - 32) * 0.5556;
data.setCell(i, 2, cTemp); 
}

var options = {
series: {
  0: {targetAxisIndex: 0},
  1: {targetAxisIndex: 1}
},
vAxes: {
  // Adds titles to each axis.
  0: {title: 'Temp: Fahrenheit'},
  1: {title: 'Temp: Celcius'}
},
};

var Chart = new 
google.visualization.LineChart(document.getElementById('switch-chart'));
Chart.draw(data, options);
}


What that gives is:

[image: charts-conversion.jpg]

What I expected to happen is for the lines to line up with each other, but 
they don't. I will look at this again, it would be useful for other values, 
mph and km/hr etc.

On Friday, December 16, 2022 at 10:30:19 PM UTC-5 Ray Thomas wrote:

> I don't think you can do exactly what you want to do because the scale and 
> grid markers are calculated by the API.
>
> But what you could do is add a calculated column either in the original 
> data or create it before the API processes the data, that contains 
> the fahrenheit values and display that on the right hand side. See the help 
> for series and vAxes at 
> https://developers.google.com/chart/interactive/docs/gallery/linechart?csw=1#dual-y-charts
>  
> and the JSFiddle at https://jsfiddle.net/api/post/library/pure/
>
> Something else you can do is add both values to the tooltips. The help for 
> customizing the tooltips is at 
> https://developers.google.com/chart/interactive/docs/customizing_tooltip_content
>
>
>
>
>
> On Wednesday, December 14, 2022 at 9:39:49 PM UTC-5 gabrield...@gmail.com 
> wrote:
>
>> I'm using the line chart and having some trouble formatting the y-axis 
>> grid markers. The data provided is stored in Celsius, but I'd like the 
>> labels on the left to also show Fahrenheit. For example one of the markers 
>> is showing 22, but I'd like it to show something like 22 / 71.6. This is my 
>> first time using Google Charts and I couldn't find anything in the 
>> documentation about manually adjusting automatic values. Can anyone point 
>> me in the right direction?
>>
>> [image: Screenshot 2022-12-14 at 6.33.27 PM.png]
>>
>>

-- 
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 google-visualization-api+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/aab92913-58a2-4a54-b8b2-3dee7f19387bn%40googlegroups.com.

[visualization-api] Re: How to have the Y axis labels show both Celsius and Fahrenheit in a line chart

['Ray Thomas' via Google Visualization API]

This does not work as I thought it might. I used:


  // Load Charts and the corechart and barchart packages.
  google.charts.load('current', {'packages':['corechart']});

  // Draw the pie chart and bar chart when Charts is loaded.
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {

var queryString = encodeURIComponent('SELECT A,B ORDER BY A');
   var query = new 
google.visualization.Query('https://docs.google.com/spreadsheets/d/1tswaWUAbeBijHq4o505w0h7TmbD-qGhR3jBactcbGq0/gviz/tq?gid=464392919&headers=1&tq='
 
+ queryString);
   query.send(handleQueryResponse);
}
 
function handleQueryResponse(response) {
   if (response.isError()) {
   alert('Error in query: ' + response.getMessage() + ' ' + 
response.getDetailedMessage());
   return;
}
  
var data = response.getDataTable();

// Set the column label properly for Fahrenheit
data.setColumnLabel(1, "Fahrenheit");
// Create a new column to hold the Celcius values
data.addColumn("number", "Celcius");
// Get the number of rows in the data
var totalRows= data.getNumberOfRows();

for (i = 0; i < totalRows; i++) { 
fTemp = data.getValue(i,1);
cTemp = (fTemp - 32) * 0.5556;
data.setCell(i, 2, cTemp); 
}

var options = {
series: {
  0: {targetAxisIndex: 0},
  1: {targetAxisIndex: 1}
},
vAxes: {
  // Adds titles to each axis.
  0: {title: 'Temp: Fahrenheit'},
  1: {title: 'Temp: Celcius'}
},
};

var Chart = new 
google.visualization.LineChart(document.getElementById('chart-div'));
Chart.draw(data, options);
}


And what that gives is:

[image: charts-conversion.jpg]

Almost there, but not good enough. 

I expected the charts to line up with each other but they don't. I will 
have another look at this later, if it works it would be so useful for 
other applications, mph to km/h and so on.
On Friday, December 16, 2022 at 10:30:19 PM UTC-5 Ray Thomas wrote:

> I don't think you can do exactly what you want to do because the scale and 
> grid markers are calculated by the API.
>
> But what you could do is add a calculated column either in the original 
> data or create it before the API processes the data, that contains 
> the fahrenheit values and display that on the right hand side. See the help 
> for series and vAxes at 
> https://developers.google.com/chart/interactive/docs/gallery/linechart?csw=1#dual-y-charts
>  
> and the JSFiddle at https://jsfiddle.net/api/post/library/pure/
>
> Something else you can do is add both values to the tooltips. The help for 
> customizing the tooltips is at 
> https://developers.google.com/chart/interactive/docs/customizing_tooltip_content
>
>
>
>
>
> On Wednesday, December 14, 2022 at 9:39:49 PM UTC-5 gabrield...@gmail.com 
> wrote:
>
>> I'm using the line chart and having some trouble formatting the y-axis 
>> grid markers. The data provided is stored in Celsius, but I'd like the 
>> labels on the left to also show Fahrenheit. For example one of the markers 
>> is showing 22, but I'd like it to show something like 22 / 71.6. This is my 
>> first time using Google Charts and I couldn't find anything in the 
>> documentation about manually adjusting automatic values. Can anyone point 
>> me in the right direction?
>>
>> [image: Screenshot 2022-12-14 at 6.33.27 PM.png]
>>
>>

-- 
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 google-visualization-api+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/0de27d85-0619-41c5-9a02-db4e90dee05an%40googlegroups.com.

[visualization-api] Re: How to have the Y axis labels show both Celsius and Fahrenheit in a line chart

['Ray Thomas' via Google Visualization API]

I don't think you can do exactly what you want to do because the scale and 
grid markers are calculated by the API.

But what you could do is add a calculated column either in the original 
data or create it before the API processes the data, that contains 
the fahrenheit values and display that on the right hand side. See the help 
for series and vAxes at 
https://developers.google.com/chart/interactive/docs/gallery/linechart?csw=1#dual-y-charts
 
and the JSFiddle at https://jsfiddle.net/api/post/library/pure/

Something else you can do is add both values to the tooltips. The help for 
customizing the tooltips is at 
https://developers.google.com/chart/interactive/docs/customizing_tooltip_content





On Wednesday, December 14, 2022 at 9:39:49 PM UTC-5 gabrield...@gmail.com 
wrote:

> I'm using the line chart and having some trouble formatting the y-axis 
> grid markers. The data provided is stored in Celsius, but I'd like the 
> labels on the left to also show Fahrenheit. For example one of the markers 
> is showing 22, but I'd like it to show something like 22 / 71.6. This is my 
> first time using Google Charts and I couldn't find anything in the 
> documentation about manually adjusting automatic values. Can anyone point 
> me in the right direction?
>
> [image: Screenshot 2022-12-14 at 6.33.27 PM.png]
>
>

-- 
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 google-visualization-api+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/607b2537-caf4-4eb2-a657-9a65f897c5abn%40googlegroups.com.

Re: [visualization-api] Queries giving error only on Mobile Devices

['Ray Thomas' via Google Visualization API]

As far as I know, the best solution that works is to just use one ID. But, 
https://developers.google.com/apps-script/guides/projects also has this:


   - Open an incognito window in Google Chrome, or an equivalent private 
   browsing window, and log in to the Google Account that has the Apps Script 
   project, add-on, or web app you need to access.

On Monday, December 12, 2022 at 4:24:45 AM UTC-5 avadhoot...@gmail.com 
wrote:

> Yes, Ray. You are right.
>
> I have diagnosed the issue and found that when I use two user IDs in the 
> same browser it gives an error. The same query works on the desktop 
> browser. And the same query works on some other browsers. So 
> script.google.com does not work with multiple IDs. But I am talking about 
> the embedded query in my site which is a published query. This looks very 
> strange. Is there any solution to this?
> On Thursday, 8 December 2022 at 09:39:50 UTC+5:30 Ray Thomas wrote:
>
>> It works properly on my Android as well. I have seen error messages like 
>> this on phones before, but that was years ago. Some devices never could 
>> display anything made with the API. If everything is the same, I don't see 
>> why it should work one day and not the next. 
>>
>> Google Scripts does this sometimes if you are logged into it with 
>> multiple accounts, but it can do it for other reasons as well.
>>
>> Ray
>>
>> On Wednesday, December 7, 2022 at 11:33:26 AM UTC-5 dlali...@google.com 
>> wrote:
>>
>>> Hi Avadhoot,
>>>
>>> I tried your link on my android phone, and the Table chart seems to work 
>>> fine.  I don't see anything in the error screenshot that you attached that 
>>> suggests this is related to the Table chart.   In particular, there is 
>>> nothing about an ".exe" file used by Google Charts.  Also, nothing has 
>>> changed with Google Charts recently, so I would suspect that something else 
>>> must have changed to cause the error you started seeing yesterday.  Sorry I 
>>> can't be more helpful.
>>>
>>> On Wed, Dec 7, 2022 at 5:31 AM Avadhoot Dandekar  
>>> wrote:
>>>
 Hello Daniel, 

 I have some Google charts embedded in my site.
 I am giving the link here . This 
 chart works well in the desktop chrome browser. And it was also working 
 well on the mobile browser.

 It works well in the desktop chrome browser but it gives the following 
 attached error in the chrome mobile browser. The .exe file works in the 
 chrome desktop browser but gives the same error in the mobile chrome 
 browser. I tried other browsers but the same issue. I am using the current 
 library.

 Everything was working well till yesterday.

 The same is the story for all other queries/ charts.

 Please HELP!! Thanks and regards.

 -- 
 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 google-visualizati...@googlegroups.com.
 To view this discussion on the web visit 
 https://groups.google.com/d/msgid/google-visualization-api/8f93c529-ce6b-4ab9-9645-ab534dbe627cn%40googlegroups.com
  
 
 .

>>>
>>>
>>> -- 
>>>
>>> • Daniel LaLiberte
>>>
>>>  • SWE
>>>
>>>  • Cambridge MA
>>>
>>>  • dlalibe...@google.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 google-visualization-api+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/ff733f43-a373-4f71-99bc-4cfdbcf3ecacn%40googlegroups.com.

Re: [visualization-api] Queries giving error only on Mobile Devices

['Ray Thomas' via Google Visualization API]

It works properly on my Android as well. I have seen error messages like 
this on phones before, but that was years ago. Some devices never could 
display anything made with the API. If everything is the same, I don't see 
why it should work one day and not the next. 

Google Scripts does this sometimes if you are logged into it with multiple 
accounts, but it can do it for other reasons as well.

Ray

On Wednesday, December 7, 2022 at 11:33:26 AM UTC-5 dlali...@google.com 
wrote:

> Hi Avadhoot,
>
> I tried your link on my android phone, and the Table chart seems to work 
> fine.  I don't see anything in the error screenshot that you attached that 
> suggests this is related to the Table chart.   In particular, there is 
> nothing about an ".exe" file used by Google Charts.  Also, nothing has 
> changed with Google Charts recently, so I would suspect that something else 
> must have changed to cause the error you started seeing yesterday.  Sorry I 
> can't be more helpful.
>
> On Wed, Dec 7, 2022 at 5:31 AM Avadhoot Dandekar  
> wrote:
>
>> Hello Daniel, 
>>
>> I have some Google charts embedded in my site.
>> I am giving the link here . This chart 
>> works well in the desktop chrome browser. And it was also working well on 
>> the mobile browser.
>>
>> It works well in the desktop chrome browser but it gives the following 
>> attached error in the chrome mobile browser. The .exe file works in the 
>> chrome desktop browser but gives the same error in the mobile chrome 
>> browser. I tried other browsers but the same issue. I am using the current 
>> library.
>>
>> Everything was working well till yesterday.
>>
>> The same is the story for all other queries/ charts.
>>
>> Please HELP!! Thanks and regards.
>>
>> -- 
>> 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 google-visualizati...@googlegroups.com.
>> To view this discussion on the web visit 
>> https://groups.google.com/d/msgid/google-visualization-api/8f93c529-ce6b-4ab9-9645-ab534dbe627cn%40googlegroups.com
>>  
>> 
>> .
>>
>
>
> -- 
>
> • Daniel LaLiberte
>
>  • SWE
>
>  • Cambridge MA
>
>  • dlalibe...@google.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 google-visualization-api+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/6229b6b4-b83e-42fb-874c-bbfccfdc9cc6n%40googlegroups.com.

Re: [visualization-api] Queries giving error only on Mobile Devices

['Ray Thomas' via Google Visualization API]

It works properly on a Samsung S9,+, but I have seen error messages like 
this on phones before, but that was years ago. Some devices never could 
display anything made with the API. Here's what I wrote about this in these 
forums in 2019:

"I never managed to view the charts on my old Samsung Galaxy S3 (2012) 
phone, but they worked on anything later than at least the S6 (2015). I 
can't view any of the charts on my old Asus TF201 tablet (2011) either.

I don't know why. CPU, memory, OS version, browser capability?"

Ray

On Wednesday, December 7, 2022 at 11:33:26 AM UTC-5 dlali...@google.com 
wrote:

> Hi Avadhoot,
>
> I tried your link on my android phone, and the Table chart seems to work 
> fine.  I don't see anything in the error screenshot that you attached that 
> suggests this is related to the Table chart.   In particular, there is 
> nothing about an ".exe" file used by Google Charts.  Also, nothing has 
> changed with Google Charts recently, so I would suspect that something else 
> must have changed to cause the error you started seeing yesterday.  Sorry I 
> can't be more helpful.
>
> On Wed, Dec 7, 2022 at 5:31 AM Avadhoot Dandekar  
> wrote:
>
>> Hello Daniel, 
>>
>> I have some Google charts embedded in my site.
>> I am giving the link here . This chart 
>> works well in the desktop chrome browser. And it was also working well on 
>> the mobile browser.
>>
>> It works well in the desktop chrome browser but it gives the following 
>> attached error in the chrome mobile browser. The .exe file works in the 
>> chrome desktop browser but gives the same error in the mobile chrome 
>> browser. I tried other browsers but the same issue. I am using the current 
>> library.
>>
>> Everything was working well till yesterday.
>>
>> The same is the story for all other queries/ charts.
>>
>> Please HELP!! Thanks and regards.
>>
>> -- 
>> 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 google-visualizati...@googlegroups.com.
>> To view this discussion on the web visit 
>> https://groups.google.com/d/msgid/google-visualization-api/8f93c529-ce6b-4ab9-9645-ab534dbe627cn%40googlegroups.com
>>  
>> 
>> .
>>
>
>
> -- 
>
> • Daniel LaLiberte
>
>  • SWE
>
>  • Cambridge MA
>
>  • dlalibe...@google.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 google-visualization-api+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/46b137ec-014d-4df9-baaf-f110f33168bdn%40googlegroups.com.

[visualization-api] Re: Try to make a table interact with bar chart

['Ray Thomas' via Google Visualization API]

I can't produce a code example at the moment, there's just not enough time 
for eerything, but here's some thoughts that may help.

The data sources have to have something in common. It could be a common 
data field in which case you can step through the data and look for the 
data, or they need to sorted in the same order in which case you can use 
the row indexes.

In the displayed table you need to add an event handler - 
https://developers.google.com/chart/interactive/docs/events - this is 
probably what you are referring to when you said you found the 
documentation.

When the event handler is triggered you need to get the row index in the 
table data table that triggered the handler. To do that see the first 
example on https://developers.google.cn/chart/interactive/docs/examples which 
uses  table.getSelection()[0].row; 

I used the same on http://brisray.com/google-charts/clickable.htm

Now you have the row index you can use that directly to manipulate the 
chart data so long as they are sorted in the same order. If not, use the 
row index to look up a common data field in the table data and search for 
it the chart data. You should know the column indexes to look in. Once you 
have found the data in the chart data you should also have the row index of 
that.

Suppose the row index in the table data is 5. The common data field in the 
table data is in column 3 but in column 6 of the chart data. You can use.

// Get the cell content from the table data
var content = tabledata.getValue(5 3);
// Search the chart data for the common data content
// Get the number of rows
var totalRows = chartdata.getNumberOfRows();
// Search the chart data
for (i = 0; i < totalRows; i++) {
   if content == chartdata.getValue(i 6);{
  var foundIndex = i;
  break;
}

Once you've found the row index in the chart data then you can use 
setSelection()  
in the chart.

This looks like it all should work but something tricky may turn up.

Ray

On Saturday, April 9, 2022 at 11:59:58 AM UTC-4 Hindami wrote:

> Hello All,
> i would like to make a table that can interact with chart like below
>
> [image: Screen Shot 2022-04-09 at 22.44.34.png]
>
> when i select the table with blue color, the bar chart with the same color 
> will popup the tooltip or highlight the bar.
>
> the problem is the data source used in table look very different than in 
> the column chart. 
>
> i have found the tutorial in the doc, but it using the same data source.
>
> please guide me, thank you.
>
>
>
>

-- 
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 google-visualization-api+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/cfebc2e8-1cf8-42c2-8e14-334cfb3f182cn%40googlegroups.com.

[visualization-api] Re: Try to make a table interact with bar chart

['Ray Thomas' via Google Visualization API]

I can't produce a code example at the moment, there's just not enough time 
for eerything, but here's some thoughts that may help.

The data sources have to have something in common. It could be a common 
data field in which case you can step through the data and look for the 
data, or they need to sorted in the same order in which case you can use 
the row indexes.

In the displayed table you need to add an event handler - 
https://developers.google.com/chart/interactive/docs/events - this is 
probably what you are referring to when you said you found the 
documentation.

When the event handler is triggered you need to get the row index in the 
table data table that triggered the handler. To do that see the first 
example on https://developers.google.cn/chart/interactive/docs/examples which 
uses  table.getSelection()[0].row; 

I used the same on http://brisray.com/google-charts/clickable.htm

Now you have the row index you can use that directly to manipulate the 
chart data so long as they are sorted in the same order. If not, use the 
row index to look up a common data field in the table data and search for 
it the chart data. You should know the column indexes to look in. Once you 
have found the data in the chart data you should also have the row index of 
that.

Suppose the row index in the table data is 5. The common data field in the 
table data is in column 3 but in column 6 of the chart data. You can use.

// Get the cell content from the table data
var content = tabledata.getValue(5 3);
// Search the chart data for the common data content
// Get the number of rows
var totalRows = chartdata.getNumberOfRows();
// Search the chart data
for (i = 0; i < totalRows; i++) {
   if content == chartdata.getValue(i 6);{
  var foundIndex = i;
  break;
}

Once you've found the row index in the chart data then you can use 
getSelection()  
in the chart.

This looks like it all should work but something tricky may turn up.

Ray
On Saturday, April 9, 2022 at 11:59:58 AM UTC-4 Hindami wrote:

> Hello All,
> i would like to make a table that can interact with chart like below
>
> [image: Screen Shot 2022-04-09 at 22.44.34.png]
>
> when i select the table with blue color, the bar chart with the same color 
> will popup the tooltip or highlight the bar.
>
> the problem is the data source used in table look very different than in 
> the column chart. 
>
> i have found the tutorial in the doc, but it using the same data source.
>
> please guide me, thank you.
>
>
>
>

-- 
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 google-visualization-api+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/01b974f1-8b0d-4375-84fe-37c6f0de066dn%40googlegroups.com.

[visualization-api] Re: Gannt Chart - Tooltip Bug or Issue

['Ray Thomas' via Google Visualization API]

The CSS  nth-child() pseudo class can be incredibly useful - 
https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

There's a lot of things CSS can do that I never realized it could. I'll 
never use most of what  Chris Coyier writes about on CSS Tricks - 
https://css-tricks.com/ but it's always interesting to see what it can do.

On Saturday, February 19, 2022 at 8:37:01 PM UTC-5 Ray Thomas wrote:

> One option is to use a Timeline chart instead of a Gantt.
>
> I also found this page - 
> https://matthewelsom.com/blog/styling-google-gantt-chart-with-css.html and 
> Matthew does control the Gantt tooltips with CSS. I went to his CodePen and 
> tried a few things.
>
> In his CSS tooltips section you can replace the CSS with things like fill: 
> transparent; stroke-opacity: 0; and opacity: 0; You can also use display: 
> none; and it seems to work.
>
> Ray
>
>
>
> On Thursday, February 17, 2022 at 2:12:15 AM UTC-5 dgkm...@gmail.com 
> wrote:
>
>> We are unable to disable or change the tooltip format on Gannt charts. 
>> When the name file is lengthly it almost occupies on the row itself and 
>> many a times it becomes impossible to click the row.
>>
>> Also from the documents we see that Gannt chart doesn't support HTML 
>> based tooltip. As a result we are also not able to apply any styles to it.
>>
>> Do you any any solution or fix for the same?
>>
>

-- 
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 google-visualization-api+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/47f15f55-3d48-4f4b-9b9e-8d72829c0a98n%40googlegroups.com.

[visualization-api] Re: Gannt Chart - Tooltip Bug or Issue

['Ray Thomas' via Google Visualization API]

One option is to use a Timeline chart instead of a Gantt.

I also found this page - 
https://matthewelsom.com/blog/styling-google-gantt-chart-with-css.html and 
Matthew does control the Gantt tooltips with CSS. I went to his CodePen and 
tried a few things.

In his CSS tooltips section you can replace the CSS with things like fill: 
transparent; stroke-opacity: 0; and opacity: 0; You can also use display: 
none; and it seems to work.

Ray



On Thursday, February 17, 2022 at 2:12:15 AM UTC-5 dgkm...@gmail.com wrote:

> We are unable to disable or change the tooltip format on Gannt charts. 
> When the name file is lengthly it almost occupies on the row itself and 
> many a times it becomes impossible to click the row.
>
> Also from the documents we see that Gannt chart doesn't support HTML based 
> tooltip. As a result we are also not able to apply any styles to it.
>
> Do you any any solution or fix for the same?
>

-- 
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 google-visualization-api+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/78aafb43-a898-43db-acc0-55e57197aa55n%40googlegroups.com.

[visualization-api] Re: Line in charts graphic bars

['Ray Thomas' via Google Visualization API]

Are you talking about the chart gridlines? 

Those can be defined in the chart options and can be applied to most 
charts. You need to look at what the various charts are capable of in the 
"Configuration options" (right-hand menu) of whatever type of chart you are 
using in the left-menu of 
https://developers.google.com/chart/interactive/docs

Depending on what you want to do, Stack Overflow has some nice tips such as 
removing the lines altogether - 
https://stackoverflow.com/questions/18039646/google-visualization-line-chart-remove-horizontal-grid-lines
 or 
aligning them more properly with the data - 
https://stackoverflow.com/questions/60869963/how-do-i-align-google-chart-gridlines-with-my-data-points

Ray
On Friday, February 18, 2022 at 10:44:08 AM UTC-5 clizan...@gmail.com wrote:

> Good afternoon guys,  
>
> i 'm new in the download api charts and i need withdraw the lines of 
> horizontal in the graphic bars. How do you make? 
>
> Thanks
>
>

-- 
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 google-visualization-api+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/fd1239b5-d8c6-4cbb-81fa-52025521ffa2n%40googlegroups.com.

[visualization-api] Re: thoughts on visualizing time data

['Ray Thomas' via Google Visualization API]

Hello Terry,

I've used the API for several years now on various sites and found it ideal 
for what I use it for. The charts can be manipulated using CSS and 
JavaScript and my only worries about using it is that it doesn't seem as 
popular as it was and Google has a nasty habit of either making things no 
longer free or taking them away altogether, but I have not heard of 
anything like that happening to the API.

If you don't like the look of one type of chart it is easily changed to 
another.

As far as I know the API cannot handle XML files on its own, but there are 
several PHP scripts around that can read the files and change them to JSON. 
A quick search found 
https://stackoverflow.com/questions/8830599/php-convert-xml-to-json and 
https://lostechies.com/seanbiefeld/2011/10/21/simple-xml-to-json-with-php/

Ray

On Tuesday, February 1, 2022 at 10:38:00 AM UTC-5 
te...@hornsillustrated.com wrote:

> I'm trying to take an xml file that includes data spanning a period of 
> time (40 minutes) and show an animated progression of what happened (data) 
> over the 40 minutes.
>
> I have the data, I'm thinking that Google Visualization API is the right 
> choice but not sure, and it looks like I can write some php to read the 
> data and fee to the api.  
>
> Am I even thinking in the right direction?  There's probably a 1000 ways 
> to solve, I'm just looking for one that is simple to implement.
>
> Terry
>

-- 
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 google-visualization-api+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/fe117506-24f9-4e5b-8a8d-0c3957c28a5en%40googlegroups.com.

[visualization-api] Re: CSS Styling

['Ray Thomas' via Google Visualization API]

In case you haven't found it yet and it might help someone else, you need 
to read 
https://developers.google.com/chart/interactive/docs/gallery/table?hl=en#configuration-options

There are three parts to getting CSS styles to work in tables.

1) Set the HTML and CSS in options
2) Define the class names
3) Write the styles

The options should contain at a minimum

var options = {
   allowHtml: true,
   cssClassNames: cssNames 
};

Then using whatever you called the cssClassNames (I used cssNames, but it 
can be whatever you want)

var cssNames = {
'headerRow': 'headercss',
'tableCell': 'cellcss'
};

Then write the styling for whatever you called the CSS classes 


.cellcss { 
text-align: left;
padding: 10px;
}
.headercss {
background-color: blue; text-transform: uppercase;
color: white;
}


On Friday, November 19, 2021 at 9:06:37 PM UTC-5 kiwis wrote:

> I'm looking at Google Charts (specific table charts) as an alternative to 
> my current solution.
>
> Can I apply CSS padding to my table? I want it applied to all rows/columns 
> and cells.
>
> How can I make header backgrounds a specific color and font another?
>
> Also how can I align some content left, middle or right?
>

-- 
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 google-visualization-api+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/682a34fd-a6e1-4e05-9cfe-b67f55e49cc5n%40googlegroups.com.

[visualization-api] Re: date an time / line diagram

['Ray Thomas' via Google Visualization API]

Did you ever figure this out? 

Sometimes the documentation doesn't appear very clear to me but there seems 
to be several ways you can do this.

1) Add a column to the data before it gets imported

You can create a new column and add information to that calculated from the 
other columns. An advantage of this is you can use whatever language you 
feel comfortable with. After you import it into the Google data table you 
can assign the role of tooltip to it by using setColumnProperty. For 
example  data.setColumnProperty(4, 'role', 'tooltip');

2) Add a column to the data table after it has been imported.

See 
https://developers.google.com/chart/interactive/docs/reference?hl=en#DataTable_addColumn
 and 
then calculate the tooltip value using setColumns 
- 
https://developers.google.com/chart/interactive/docs/reference#DataView_setColumns

The column role as tooltip can be set in either method.  This might help 
show what you are trying to do - 
https://stackoverflow.com/questions/46613501/how-to-add-a-style-role-column-to-a-google-charts-aggregated-datatable

3) Change the formatted value of the date column cells

The Google data table cells can contain two values, the "real" value and a 
formatted value. Where it can the API uses the formatted value.The 
documentation has methods for getting and setting both values - look for 
setCell,  getValue,  getFormattedValue,  setValue, and setFormattedValue 
on https://developers.google.com/chart/interactive/docs/reference

Doing this means creating a loop by getting the number of rows in the 
column using getNumberOfRows() then loop through each row, getting the 
value of whatever column hold the date using getValue and writing a new 
formatted version of it using either setCell or setFomattedValue.

var totalRows = data.getNumberOfRows(); for (i = 0; i < totalRows; i++) { 
var dateValue = getValue(i,2)
   // Do whatever you want to the date value
setFormattedValue(i, 2, dateValue)  
}
On Saturday, December 18, 2021 at 4:55:09 AM UTC-5 lutter...@gmail.com 
wrote:

> when i go on the line with the mouse, the date and time are displayed. i 
> would like to have the time displayed in 24 hour mode. who has an idea how 
> I can do it. or in which part of the program this is specified?
>
>
> best
> meinolf
>

-- 
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 google-visualization-api+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/4683169e-22ea-43b7-b2c1-4248277161a4n%40googlegroups.com.

[visualization-api] Re: Making Columns in column graphs clickable

['Ray Thomas' via Google Visualization API]

Yes there is. It's not very well documented, if at all - I couldn't find 
it. But looking through the documentation for getSelection() at 
https://developers.google.com/chart/interactive/docs/reference#visgetselection 
I 
thought I saw a way this could be done. The URLs can come from the data or 
from the code, I used a switch statement. Both methods work for several 
types of chart, but not all for all of them.

I use Google Sheets as a data source. These examples use the one at 
https://docs.google.com/spreadsheets/d/1tswaWUAbeBijHq4o505w0h7TmbD-qGhR3jBactcbGq0/edit#gid=0

*Method 1 - Switch Statement*

 google.charts.load('current', 
{'packages':['corechart']}); 
google.charts.setOnLoadCallback(drawSwitchViz); function drawSwitchViz() { 
var queryString = encodeURIComponent('SELECT A,B ORDER BY A LIMIT 5'); var 
query = new 
google.visualization.Query('https://docs.google.com/spreadsheets/d/1tswaWUAbeBijHq4o505w0h7TmbD-qGhR3jBactcbGq0/gviz/tq?gid=0&headers=1&tq='
 
+ queryString); query.send(handleQueryResponse); } function 
handleQueryResponse(response) { if (response.isError()) { alert('Error in 
query: ' + response.getMessage() + ' ' + response.getDetailedMessage()); 
return; } var switchData = response.getDataTable(); var switchChart = new 
google.visualization.ColumnChart(document.getElementById('switch-chart')); 
switchChart.draw(switchData); // Add the event handler and processing 
google.visualization.events.addListener(switchChart, 'select', 
switchHandler); function switchHandler(e) { var selection = 
switchChart.getSelection(); var 
switchPizza=switchData.getFormattedValue(selection[0].row,0); switch 
(switchPizza) { case 'Boscaiola': 
window.open('https://it.wikipedia.org/wiki/Boscaiola','_blank'); case 
'Bufalina': 
window.open('https://en.wikipedia.org/wiki/Buffalo_mozzarella','_blank'); 
case 'Caprese': 
window.open('https://en.wikipedia.org/wiki/Caprese_salad','_blank'); case 
'Capricciosa': 
window.open('https://en.wikipedia.org/wiki/Pizza_capricciosa','_blank'); 
case 'Carbonara': 
window.open('https://en.wikipedia.org/wiki/Carbonara','_blank'); } } } 


*Method 2 - URLs in data*

 google.charts.load('current', 
{'packages':['corechart']}); google.charts.setOnLoadCallback(drawURLViz); 
function drawURLViz() { var queryString = encodeURIComponent('SELECT A,B,C 
ORDER BY A LIMIT 5'); var query = new 
google.visualization.Query('https://docs.google.com/spreadsheets/d/1tswaWUAbeBijHq4o505w0h7TmbD-qGhR3jBactcbGq0/gviz/tq?gid=0&headers=1&tq='
 
+ queryString); query.send(handleQueryResponse); } function 
handleQueryResponse(response) { if (response.isError()) { alert('Error in 
query: ' + response.getMessage() + ' ' + response.getDetailedMessage()); 
return; } var URLData = response.getDataTable(); var URLView = new 
google.visualization.DataView(URLData); URLView.setColumns([0, 1]); var 
URLChart = new 
google.visualization.BarChart(document.getElementById('URL-chart')); 
URLChart.draw(URLView); // Add the event handler and processing 
google.visualization.events.addListener(URLChart, 'select', URLHandler); 
function URLHandler(e) { var selection = URLChart.getSelection(); var 
URLPizza=URLData.getFormattedValue(selection[0].row,2); 
window.open(URLPizza,'_blank'); } } 
 

I made a page to show both methods working. That can be found at 
http://brisray.com/google-charts/clickable.htm

-- 
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 google-visualization-api+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/6b19cc81-0494-459e-80bf-965f33d2414bn%40googlegroups.com.

[visualization-api] Re: Gantt chart taking very long to render

['Ray Thomas' via Google Visualization API]

Here's what I found in a couple of browsers:

Chrome  93.0.4577.63 - runs everything fine
Edge  93.0.961.44 -  runs everything fine
Firefox 91.0.1 - seems a little bit slower rendering the JSFiddle but 
otherwise OK
Opera  78.0.4093.184 - seems slower than Firefox at rendering the JSFiddle, 
slow at rendering the local file, can't show the tooltips on either
IE 11 - can't render the JSFiddle at all, slow rendering the local file, 
can't show the tooltips

If it helps, I've had users reporting problems with some charts I've 
created if they are using some extensions in Chrome.

How's your memory usage when running this? Opera uses even more memory than 
Chrome does when running the chart.

Ray

On Friday, September 10, 2021 at 10:16:53 AM UTC-4 rahu...@gmail.com wrote:

>
> Thanks Ray! 
>
> Could you please let me know what version of the Chrome Browser you are 
> using? I have tried this on Chome and Edge Browsers and they are both 
> showing the same rendering delays.
>
> Regards,
> On Thursday, September 9, 2021 at 10:48:32 PM UTC-4 Ray Thomas wrote:
>
>> Hi, I can't see anything wrong with the speed it's rendering at either in 
>> JSFiddle or wen I copied the code to my own file.
>>
>> Maybe trying another browser might hep?
>>
>> On Thursday, September 9, 2021 at 12:44:22 PM UTC-4 rahu...@gmail.com 
>> wrote:
>>
>>> Here is a simple fiddle that can reproduce the issue: 
>>> https://jsfiddle.net/qtm2hwa6/
>>>
>>> notice the long render time as well as the very long delays on to 
>>> tooltip when hovering on a bar. 
>>>
>>> On Thursday, September 9, 2021 at 12:13:45 PM UTC-4 Rahul Trivedi wrote:
>>>
 Any word here? looks like any page that is trying to render the gantt 
 chart with ~200+ rows is crashing. We have tried this on a few browsers 
 and 
 they are all showing the same issue. 

 On Tuesday, August 31, 2021 at 2:30:02 PM UTC-4 Rahul Trivedi wrote:

> Hello folks,
>
> We have noticed recently that our Gantt chart load times have spiked a 
> lot. A quick performance profile of the render shows that the delay is in 
> the draw() call resulting from a lot or layout changes and rendering. Has 
> anyone else noticed this and is there a known issue on this? 
>
> We are using a gantt chart to  plot service start and duration times 
> so we have a ~150-200 rows on the chart. 
>
>
>

-- 
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 google-visualization-api+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/4b342242-38da-4cd5-bf7c-bcc43432fbc1n%40googlegroups.com.

[visualization-api] Re: Adding the £ symbol to the tooltip

['Ray Thomas' via Google Visualization API]

How this works is going to depend on what your data looks like when you 
import it. Is it a simple value or has it already been formatted in some 
way?

Google Charts data tables, like most spreadsheets, can hold two values, the 
actual underlying value and the formatted value. The dataTable has several 
methods or reading and writing these values see get and set in the 
documentation at 
https://developers.google.com/chart/interactive/docs/reference#methods

The easiest method I found is to simply loop through the data and change 
the formatting. The data I used as an example comes from the spreadsheet at 
https://docs.google.com/spreadsheets/d/1tswaWUAbeBijHq4o505w0h7TmbD-qGhR3jBactcbGq0/#gid=299043339
 and 
that's formatted as a number to two decimal places with the thousands comma.

The important part of the code is to loop through the cells of the data 
table, in my example table2, and reformat the formatting:

var totalRows = table2.getNumberOfRows(); 
var totalCols = table2.getNumberOfColumns();

for (i = 0; i < totalRows; i++) { 
   // No need to do Column 0 as that's the row label not data
   for (j = 1; j < totalCols; j++) {
  var thisValue = table2.getFormattedValue(i, j);
  thisValue = "£" + thisValue;
  table2.setFormattedValue(i, j, thisValue);
   }
}

I wrote a page to demonstrate it working at 
http://brisray.com/google-charts/formattips.htm

There is another way of doing this and that's by completely rewriting the 
tooltips - 
https://developers.google.com/chart/interactive/docs/customizing_tooltip_content
 
but that's going to be a lot more work. In my simple example there are 
seven columns of data, using this tooltips method, another seven would have 
to written.


On Tuesday, June 15, 2021 at 4:58:19 PM UTC-4 stu...@gmail.com wrote:

> How do I format the value to be a currency £
> so it reads Fertilizer £14,325.60 
>
> On Tuesday, June 15, 2021 at 9:55:39 PM UTC+1 Dean Williams wrote:
>
>> [image: chart.jpg]
>>
>> On Tuesday, June 15, 2021 at 9:52:50 PM UTC+1 Dean Williams wrote:
>>
>>> I have tried and failed
>>> 
>>>   https://www.gstatic.com/charts/loader.js";>
>>> 
>>>   google.charts.load('current', {'packages':['corechart'], 
>>> 'language': 'en-gb'});
>>>   google.charts.setOnLoadCallback(drawVisualization);
>>>
>>>   function drawVisualization() {
>>> // Some raw data (not necessarily accurate)
>>> var data = google.visualization.arrayToDataTable([
>>>   
>>> ]);
>>>   var formatter = new google.visualization.NumberFormat({
>>> prefix: '£',
>>> negativeParens: true
>>>   });
>>> var options = {
>>>   title : 'Totals by Paddock for ',
>>>   titleFontSize:30,
>>>   fontName: 'tahoma',
>>>   fontSize: '16',
>>>   format: "currency",
>>>   prefix:"£",
>>>   width:780,
>>>   height:520,
>>>   vAxis: {title: '', format: '£#,##0.00;(£#,##0.00)', 
>>> prefix:"£", fontSize: '24'},
>>>   hAxis: {format: 'currency', prefix:"£", fontSize: '24'},
>>>   seriesType: 'bars',
>>>   //series: {5: {type: 'line'}}
>>> };
>>>
>>>
>>>
>>>
>>> var chart = new 
>>> google.visualization.ComboChart(document.getElementById('chart_div'));
>>> chart.draw(data, options);
>>>   }
>>> 
>>> 
>>>   
>>>
>>>

-- 
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 google-visualization-api+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/2ebe0715-5e77-4400-834f-d385bd961696n%40googlegroups.com.

[visualization-api] Re: Get change in percentage between two points. Google Charts

['Ray Thomas' via Google Visualization API]

One way might be to show the change in a tooltip. Tooltips can show 
whatever you like - 
https://developers.google.com/chart/interactive/docs/customizing_tooltip_content
 
- but it does mean creating a new column to show it. There's no reason you 
cannot show the current premium, percentage change from the previous data 
point as well percentage change to the next data point.

Here's an example from a live site of mine:

dataCollege.addColumn({type: 'string', 'role': 'tooltip', 'p': {'html': 
true}})

and then loop through the datatable and create the data for that column

for (i=0;  i < rowsRaw; i++) {
   // Create a new row in dataCollege
   dataCollege.addRow();
   // Save the original data for use later
  var Title = dataRaw.getValue(i,0);
  var Name = dataRaw.getValue(i,1);
  var startYear = dataRaw.getValue(i,2);
  var endYear = dataRaw.getValue(i,3);
  var photoLoc = dataRaw.getValue(i,4);
   // for each new column (there are 5 of them). No need to do 
column 1 (the bar labels) as they're null anyway
   for (j = 0; j < 5; j++){
if (j==0) { dataCollege.setValue(i, j, Title); }
if (j==1) {dataCollege.setValue(i, j, Name); }
if (j==2) { if (photoLoc == null) {dataCollege.setValue(i, 
j, "" +  Name + "Service: " + startYear + " to " + endYear + 
" (" + (endYear - startYear) + " years)");}
 else {dataCollege.setValue(i, j, "" +  Name + "Service: " + startYear + " to " + 
endYear + " (" + (endYear - startYear) + " years)"); }
}
if (j==3) { dataCollege.setValue(i, j, new Date(startYear, 
0, 0)); }
if (j==4) { dataCollege.setValue(i, j, new Date(endYear, 0, 
0)); }
   }
  }

The calculation for the tooltip is done in the line where J==2. Here I show 
an image (photoLoc) , but not all data points have an image, so it tests 
for that as well as the calculation. 

The result is shown in the Google timeline chart on 
https://www.indstate.edu/business/history/timeline

---

Another way you might be able to show the information is to create a new 
datatable or dataview  from what you've already got - 
https://developers.google.com/chart/interactive/docs/reference and 
https://developers.google.com/chart/interactive/docs/datatables_dataviews - 
but create a new column showing the percentage change from the previous 
data point and using that to create a new chart using that value.

Some people have problems showing multiple charts on a page but see 
https://developers.google.com/chart/interactive/docs/basic_multiple_charts and  
something I wrote at http://brisray.com/google-charts/multiple.htm - the 
timing when drawing multiple charts on a page is important!

Ray

On Tuesday, June 15, 2021 at 6:07:10 AM UTC-4 alkhedhir@gmail.com wrote:

> I have the following chart that calculates premium for each month.
>
> 
> google.load("visualization", "1", { packages: ["corechart"] });
> google.setOnLoadCallback(drawChart);
> function drawChart() {
> 
> 
> 
> var options = {
> title: 'Monthly Total Production',
> curveType: 'function',
> legend: { position: 'bottom' },
> height: 600,
> vAxis: {
> viewWindow: { min: 0 },
> format: 'currency',
> },
> 
> 
> 
> 
> };
> $.ajax({
> 
> type: "POST",
> url: "url",
> data: '{}',
> contentType: "application/json; charset=utf-8",
> dataType: "json",
> success: function (r) {
> var data = google.visualization.arrayToDataTable(r.d);
> var chart = new 
> google.visualization.LineChart($("#monthlyProductionChart")[0]);
> var view = new google.visualization.DataView(data);
> view.setColumns([0, 1, {
> calc: "stringify",
> sourceColumn: 1,
> type: "string",
> role: "annotation"
> },]);
> chart.draw(view, options);
> },
> failure: function (r) {
> alert(r.d);
> },
> error: function (r) {
> alert(r.d);
> }
> });
> }
> 
> 
> 
>
>
>
> The chart displays total premium. Is there a way to show the difference in 
> percentage between two points alongside the premium? I found a way in 
> another post on how to show the percentage change, but that would replace 
> the premium on the chart.
>
>
> Thanks
>
>

-- 
You received this message because you are subscribed to the Google Groups 
"Google 

Re: [visualization-api] Formatting X axes values in tooltips

['Ray Thomas' via Google Visualization API]

Hello Shweta,

You really can put whatever you like in the datatable cell used to create 
the tooltip so long as it's HTML formatted for JavaScript. You can include 
variables,  images, links and even other charts - 
https://developers.google.com/chart/interactive/docs/customizing_tooltip_content

The column given the role of tooltip can either be in wherever the data is 
imported from or created in the chart code. 

Ray

On Thursday, April 29, 2021 at 7:23:07 AM UTC-4 Shweta Goyal wrote:

> Hello,
>
> I have some issues regarding tooltip.I need some extra text in tooltip 
> like I showed in attachment.
> I need above text in tooltip.
> So, Please help for this.
>  
>
> SHWETA GOYAL
>
> Web Developer
>
>      
>    
>   
>    
>
> *Grow, Evolve, Connect*
>
> +91 9806816293 <+91+9806816293>
>
> https://chetaru.com
> This email contains information from Chetaru that may be proprietary, 
> confidential and/or privileged. The information is intended only for the 
> use of the individual(s) or entity named above.
>
> If you are not the intended recipient, be aware that any disclosure, 
> copying, distribution or use of the contents of this information is 
> prohibited. If you have received this email in error, please notify the 
> sender immediately by replying to the address listed in the "From:" field
>
>
> On Wed, Apr 28, 2021 at 10:08 PM 'Daniel LaLiberte' via Google 
> Visualization API  wrote:
>
>> Hi Micheal,
>>
>> There are two kinds of formatting features to be aware of: formatting of 
>> tick values and formatting of data values.  It is the latter which end up 
>> in tooltips, so look into how you format your data values either by using 
>> the formatting functions, e.g. NumberFormat, or by specifying the formatted 
>> string yourself as part of the data.  You can specify the formatted value 
>> using the cell value notation, e.g. {'v': 8087, 'f': 'Q4 2020'}, or by 
>> setting the formatted value of each cell with 
>> datatable.setFormattedValue(row, column, string);
>>
>> Hope that helps.
>>
>>
>> On Wed, Apr 28, 2021 at 11:12 AM Michael Broos  wrote:
>>
>>> How do I prevent Google Charts from formatting the X axis values in the 
>>> tooltip?  I have a few examples where I need to do this.  The simplest is 
>>> below, where I am charting line items from an annual statement.  I prevent 
>>> Google from formatting the year on the x axis with hAxis: { format: '' }, 
>>> but it still adds the comma when displaying those year values in the 
>>> tooltip.  If I make the x axis a "string" column instead of a "number" 
>>> column, I lose the hAxis gridlines because it is a discrete column, not a 
>>> continuous one.
>>>
>>> [image: GoogleChartTooltip.jpg]
>>>
>>> A more complicated example is quarterly financials.  As you can see in 
>>> the example below, different companies define the endpoints of their 
>>> "quarters" differently, depending on how their financial year is defined.  
>>> Again, I want hAxis gridlines, but I can't use the continuous value I have 
>>> (period end date) because the dates vary so much.  Google puts tickmarks 
>>> where it thinks they look good, without regard to the actual period end 
>>> dates.  So, I synthesize a continuous quantity for the x-axis with (Year * 
>>> 4) + Quarter, and provide a ticks array with the string equivalent (e.g. 
>>> "Q4 2020").  Google, of course, displays that synthetic "quarter number" in 
>>> the tooltip, as in the example below.  ((2021*4)+3 = 8087)
>>>
>>> [image: GoogleChartTooltip2.jpg]
>>>
>>> -- 
>>> 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 google-visualizati...@googlegroups.com.
>>> To view this discussion on the web visit 
>>> https://groups.google.com/d/msgid/google-visualization-api/e566317b-69ae-4b47-9f47-fad512bf0d43n%40googlegroups.com
>>>  
>>> 
>>> .
>>>
>>
>>
>> -- 
>>
>> • Daniel LaLiberte
>>
>>  • SWE
>>
>>  • Cambridge MA
>>
>>  • dlalibe...@google.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 google-visualizati...@googlegroups.com.
>>
> To view this discussion on the web visit 
>> https://groups.google.com/d/msgid/google-visualization-api/CAOtcSJNy2Y6nNmCaf%2BZKz2fwFAKBXZNsFv4_8kCzMhh%3DHc4T4w%40mail.gmail.com
>>  
>> 

Re: [visualization-api] heatmap

['Ray Thomas' via Google Visualization API]

Given the image looks more like a table and that you can give every cell in 
a table a CSS class here's something I would try. It looks good in theory 
and should work.

The example at 
https://developers.google.com/chart/interactive/docs/examples#custom_table_example
 gets 
the classname for the cell from the data but there's no reason you can't 
step through the dataTable do some sort of logical test on the data and set 
a classname programmatically. You could even create an array of colors, do 
the logical test, set the classname and then use IF, SWITCH or a MAP to set 
the background color from the color array.

If you wanted you can either add new columns to the dataTable that has 
empty data so the original data that you did the test on doesn't show or 
even reset the cell's contents to an empty string. Something to start with:

var totalRows = mydata.getNumberOfRows();
var totalCols = mydata.getNumberOfColumns();

for (i = 0; i < totalRows; i++) { 
 for (j = 0; j < totalCols; j++) {
  // logical test, create myclass as the classname
  mydata.setProperty(i,j,"className",myclass);
  mydata.setFormattedValue(i,j,"");
 }
}

Another option might be to use the newish VegaCharts - 
https://developers.google.com/chart/interactive/docs/gallery/vegachart_examples 
but 
I don't know much about those yet.
On Tuesday, April 20, 2021 at 7:16:14 AM UTC-4 stanle...@gmail.com wrote:

> Hi Nick
> Just wanted to check with you if you were able to implement this with 
> Stacked Charts ? OR did you find any other better alternative ?
>
> On Monday, September 18, 2017 at 11:13:22 PM UTC+2 Nick Dunbar wrote:
>
>> Thanks Dan, 
>>
>> for the stacked column route, I am thinking about how to format the 
>> dataTable. I suppose the bar height columns are just integers to create the 
>> square grid, while the correlations go in the style columns which get 
>> turned into RGB values. It is a shame there isn't a colorbar off the shelf 
>> that can be used. 
>>
>> The 3D thing sounds tricky. I have to study that. 
>>
>> How about you create a heatmap Google chart? Looks like you have already 
>> done the heavy lifting!
>>
>> Nick
>>
>>
>>
>> On Monday, September 18, 2017 at 7:41:53 PM UTC+1, Daniel LaLiberte wrote:
>>
>>> Hi Nick,
>>>
>>> We don't have any direct support for heatmaps in Google Charts.  
>>> However, it is similar to a stacked column chart, with bar.gap = 0.  You'd 
>>> have to specify the color of each cell since it wouldn't do that itself.  
>>> We also don't have any colorbar available independent of the few charts 
>>> that support it.
>>>
>>> Another option is to use the Graph3d charts documented here: 
>>> http://almende.github.io/chap-links-library/js/graph3d/doc/
>>> These use the Google Charts data structures and API for setting up the 
>>> datatable and options.   Using the 3D surface plot, turn off the 
>>> perspective, and rotate the view until it is on top of the z axis and you 
>>> get a heatmap. 
>>>
>>> On Mon, Sep 18, 2017 at 2:10 PM, Nick Dunbar  wrote:
>>>
>> Hi, 

 Is there any way of adapting the existing API to produce a heatmap like 
 the attached image? I'm sure this must be possible somehow. 

 All suggestions appreciated. 

 Nick 

>>> -- 
 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 google-visualization-api+unsub...@googlegroups.com.

>>> To post to this group, send email to google-visua...@googlegroups.com.
>>>
>>>
 Visit this group at 
 https://groups.google.com/group/google-visualization-api.
 To view this discussion on the web visit 
 https://groups.google.com/d/msgid/google-visualization-api/49cbafdd-7679-4bff-bc98-726c72216f4e%40googlegroups.com
  
 
 .
 For more options, visit https://groups.google.com/d/optout.

>>>
>>>
>>>
>>> -- 
>>> Daniel LaLiberte 
>>> dlali...@google.com   5CC, Cambridge 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 google-visualization-api+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/c417aa53-4ad5-4e91-b638-f953a95e13e4n%40googlegroups.com.

[visualization-api] Re: Graph and while

['Ray Thomas' via Google Visualization API]

Hi Jean-Yves,

Problems with drawing multiple charts on a page comes up regularly, and 
it's usually because of the way scripts work. 

To show all the charts, you need to either wait until each chart fires its 
ready event - 
https://developers.google.com/chart/interactive/docs/events#the-ready-event 
or add a setTimeout function with the timer set to 0. As far as I know, the 
0 time does not mean "do it now", it means "do it as soon as there's 
nothing else to be done"

I've tried to explain this in the section Multiple Data Tables, Multiple 
Charts at http://brisray.com/google-charts/multiple.htm

myString is an array of objects that contains everything needed to draw the 
charts.

var strLength = myString.length;
for (i=0; i < strLength; i++){
processChart(i);
}
function processChart(i) { 
  setTimeout(function() { 
  function drawVisualization() {
var newString = myString[i]
  google.visualization.drawChart(newString);
  }
  google.charts.setOnLoadCallback(drawVisualization); 
  }, 0); 
}

Probably the only limit to how many charts you can have on a page is due to 
memory. https://indstate.edu/business/metrics has 24 charts on the page and 
uses a single event listener - pinched from 
https://www.kirupa.com/html5/handling_events_for_many_elements.htm

On Wednesday, March 17, 2021 at 9:49:35 AM UTC-4 Jean-Yves LEGRAS wrote:

> Hey,
>
> Do you know how to display some graph tanks to a while like that : 
>
> while ($i <= 3) {
> $i++;  
> /* La valeur affichée est $i avant 
> l'incrémentation(post-incrémentation)  */
> echo $i;
> echo '';
> }
>
> It doesn't work so I don't know how 
>
> Thanks for your answers
>

-- 
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 google-visualization-api+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/73193b12-d696-4a1a-8abd-85256be69a30n%40googlegroups.com.

[visualization-api] Re: Google Visualization API Sample

['Ray Thomas' via Google Visualization API]

Hi Culley,

I think it's the authorization key causing this. You'll need to read 
https://developers.google.com/chart/interactive/docs/spreadsheets#authorization 
which explains how to obtain your own OAuth credentials.

My own preference is to simply make the spreadsheet readable to anyone with 
the link. The same page explains how to do that and use either the GID or 
the name of the sheet to read the data from it.

I don't use OAuth often. My own feeling is that I'm drawing a public chart 
from a Google sheet and anything I'd prefer to be kept private shouldn't be 
in the same sheet anyway.

Ray

On Friday, March 19, 2021 at 1:23:15 PM UTC-4 harr...@gmail.com wrote:

> I am working with the sample code seen here:
>
>
> https://developers.google.com/chart/interactive/docs/reference#chartwrapperobject
>
> I have copied the content of the "using setter methods" example and 
> published it here:
>
> http://www.k2tog.com/test.html
>
> As you can see, the example does not work because of the XSS settings.  Is 
> this something I can fix with the server headers?  I have also tried it 
> locally and got the same error.
>
> culley
>
>

-- 
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 google-visualization-api+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/cee9d947-050e-47bf-95db-141eb2baeca3n%40googlegroups.com.

[visualization-api] Re: Study project data visualisation graphics webpage doesn't work

['Ray Thomas' via Google Visualization API]

Are you getting any sort of error message in the console? F12 in most 
browsers and Ctrl+Shift+I in Opera.

I can't say for certain but it might be the lines async: false. That's been 
depreciated - https://xhr.spec.whatwg.org/#the-open()-method and 
https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests
 - 
so that might be the problem.

If that is the problem, one solution is to use the ready event handler - 
https://developers.google.com/chart/interactive/docs/events#the-ready-event 
put drawing the charts inside a setTimeout function with the time set to 0, 
which also seems to work - Multiple Data Tables, Multiple Charts at 
http://brisray.com/google-charts/multiple.htm 

Ray
On Saturday, March 13, 2021 at 8:23:10 AM UTC-5 cullet...@gmail.com wrote:

> Here the script :
> 
> 
> 
> https://www.gstatic.com/charts/loader.js";>
> https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js
> ">
> 
>   google.charts.load("current", {packages: ["corechart", "geochart"]});
>
>   google.charts.setOnLoadCallback(drawChart);
>
>   function drawChart(){
> var data1 = google.visualization.arrayToDataTable(
>   $.ajax({
>   url: "life_expectancy_continent.php",
>   async: false
>   }).responseJSON
>   );
> var options1 = {
> title: "Espérance de vie par continent (en %)",
> };
> var chart1 = new 
> google.visualization.BarChart(document.getElementById('Barchart'));
>   chart1.draw(data1,options1);
>
>var data2 = google.visualization.arrayToDataTable(
>   $.ajax({
>   url: "surface_population.php",
>   async: false
>   }).responseJSON
>   );
> var options2 = {
>   title: "Surface d'un continent (en m²) en fonction de sa population",
>   hAxis: {title:'Surface (en m²)'},
>   vAxis: {title:'Population du continent'}
> }
> var chart2 = new 
> google.visualization.ScatterChart(document.getElementById('scatterplot'));
> chart2.draw(data2,options2);
>
>
> var data3 = google.visualization.arrayToDataTable(
>   $.ajax({
> url: "life_expectancy.php",
> async: false
>   }).responseJSON
> );
>
> var options3 = {title:"Carte du monde de l'espérance de vie (par 
> pays)"};
>
> var chart3 = new 
> google.visualization.GeoChart(document.getElementById('map'));
> chart3.draw(data3, options3);
>
> var data4 = google.visualization.arrayToDataTable(
>   $.ajax({
> url: "life_expectancy_population_PNB.php",
> async: false
>   }).responseJSON
> );
>
> var options4 = {
> title: "Corrélation entre l'espérance de vie et le produit 
> national brut et la population d'un pays",
>   hAxis: {title: 'Life Expectancy'},
>   vAxis: {title: 'Fertility Rate'},
>   bubble: {textStyle: {fontSize: 11}}
>   };
>
> var chart4= new 
> google.visualization.BubbleChart(document.getElementById('bbl_c'));
> chart4.draw(data4, options4);
> }
>   
> 
> 
> 
> 
> 
> 
> 
> 
>
>
> Le samedi 13 mars 2021 à 11:34:32 UTC+1, Jérôme a écrit :
>
>> Hello,
>>
>> I needed to code a webpage with graphics using Google chart linked with a 
>> database and I get to display a webpage with the first graphic I coded but 
>> when I added a 2nd graphic, nothing at all happen even the first graphic I 
>> saw before didn't appear. The same when I added other graphics between 
>> JavaScript tag. I tried to fix it but I don't know where is the problem. I 
>> don't think the problem come from my.php files. Anyone can see the problem 
>> in my Google chart code?
>>
>> Thank you!
>>
>

-- 
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 google-visualization-api+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/ac3ea4c7-65b4-4b37-8129-8ab6e05aa83an%40googlegroups.com.

[visualization-api] Re: Adding a second curve to a graph

['Ray Thomas' via Google Visualization API]

There isn't a missing or extra comma in the CSV file? Someone else here had 
that problem. Absolutely nothing wrong with their code but  there was an 
extra comma hundreds of lines into their data file which meant the chart 
couldn't draw.

On Sunday, March 7, 2021 at 5:24:32 PM UTC-5 Ray Thomas wrote:

> I can't see anything wrong with it - but that doesn't mean much.
>
> Are you getting any console messages? (F12 in most browsers, Opera uses 
> Ctrl + Shift + i)
>
> If you remove the viewport code do the graphs display? If it's something 
> to do with that, perhaps enabling explorer in options - 
> https://developers.google.com/chart/interactive/docs/gallery/linechart#configuration-options
>  or 
> changing to an Annotation Chart - 
> https://developers.google.com/chart/interactive/docs/gallery/annotationchart 
> may 
> be an alternative?
>
> On Sunday, March 7, 2021 at 2:34:54 PM UTC-5 eddy.bi...@gmail.com wrote:
>
>> I am controlling (with an arduino based esp8288) my solar heater by 
>> measuring the temperature of the glycol/water in the panel and the water in 
>> the boiler. When the panel temperature is above the boiler temperature the 
>> pump is running.
>>
>> I currently generate a csv file (temp.csv) which is used to generate a 
>> simple graph via Google Charts. (see attached temperatureGraph.js)  I would 
>> like to add however the second graph. 
>>
>> The csv file looks like this and every 20 secons a line is added
>>
>> 1615141524,25.57
>> 1615141544,26.21
>> 1615141564,26.71
>> 1615141584,27.13
>>
>> I am able to add the second temperature to the csv file
>>
>> 1615141524,25.57,28.34
>>
>>  I tried add the 2nd temperature to data[2] :
>>
>> function parseCSV(string) {
>> var array = [];
>> var lines = string.split("\n");
>> for (var i = 0; i < lines.length; i++) {
>> var data = lines[i].split(",", 2);
>> data[0] = new Date(parseInt(data[0]) * 1000);
>> data[1] = parseFloat(data[1]);
>> data[2] = parseFloat(data[2]);
>> array.push(data);
>> }
>> return array;
>> }
>>
>> and it to the drawChart() :
>>
>> function drawChart() {
>> var data = new google.visualization.DataTable();
>> data.addColumn('datetime', 'UNIX');
>> data.addColumn('number', 'Temperature 1');
>> data.addColumn('number', 'Temperature 2');
>>  
>> But it does not show-up. It is probably very simple.but I do not  see 
>> it.
>> Regards,
>>
>> Eddy
>>
>>
>> 
>> var dataArray = [];
>> var defaultZoomTime = 24*60*60*1000; // 1 day
>> var minZoom = -6; // 22 minutes 30 seconds
>> var maxZoom = 8; // ~ 8.4 months
>> var zoomLevel = 0;
>> var viewportEndTime = new Date();
>> var viewportStartTime = new Date();
>> loadCSV(); // Download the CSV data, load Google Charts, parse the data, 
>> and draw the chart
>>
>> /*
>> Structure:
>> loadCSV
>> callback:
>> parseCSV
>> load Google Charts (anonymous)
>> callback:
>> updateViewport
>> displayDate
>> drawChart
>> */
>> /*
>>|CHART|
>>|  VIEW PORT  |
>> invisible  |   visible   |  
>> invisible
>> ---|-|--->
>>   
>> time
>>viewportStartTime  viewportEndTime
>>|__viewportWidthTime__|
>> viewportWidthTime = 1 day * 2^zoomLevel = viewportEndTime - 
>> viewportStartTime
>> */
>> function loadCSV() {
>> var xmlhttp = new XMLHttpRequest();
>> xmlhttp.onreadystatechange = function() {
>> if (this.readyState == 4 && this.status == 200) {
>> dataArray = parseCSV(this.responseText);
>> google.charts.load('current', { 'packages': ['line', 
>> 'corechart'] });
>> google.charts.setOnLoadCallback(updateViewport);
>> }
>> };
>> xmlhttp.open("GET", "temp.csv", true);
>> xmlhttp.send();
>> var loadingdiv = document.getElementById("loading");
>> loadingdiv.style.visibility = "visible";
>> }
>> function parseCSV(string) {
>> var array = [];
>> var lines = string.split("\n");
>> for (var i = 0; i < lines.length; i++) {
>> var data = lines[i].split(",", 2);
>> data[0] = new Date(parseInt(data[0]) * 1000);
>> data[1] = parseFloat(data[1]);
>> array.push(data);
>> }
>> return array;
>> }
>> function drawChart() {
>> var data = new google.visualization.DataTable();
>> data.addColumn('datetime', 'UNIX');
>> data.addColumn('number', 'Temperature');
>> data.addRows(dataArray);
>> var options = {
>> curveType: 'function',
>> height: 360,
>> legend: { position: 'none' },
>> hAxis: {
>> viewWindow: {
>> min: viewportStartTime,
>>   

[visualization-api] Re: Adding a second curve to a graph

['Ray Thomas' via Google Visualization API]

I can't see anything wrong with it - but that doesn't mean much.

Are you getting any console messages? (F12 in most browsers, Opera uses 
Ctrl + Shift + i)

If you remove the viewport code do the graphs display? If it's something to 
do with that, perhaps enabling explorer in options - 
https://developers.google.com/chart/interactive/docs/gallery/linechart#configuration-options
 or 
changing to an Annotation Chart - 
https://developers.google.com/chart/interactive/docs/gallery/annotationchart 
may 
be an alternative?

On Sunday, March 7, 2021 at 2:34:54 PM UTC-5 eddy.bi...@gmail.com wrote:

> I am controlling (with an arduino based esp8288) my solar heater by 
> measuring the temperature of the glycol/water in the panel and the water in 
> the boiler. When the panel temperature is above the boiler temperature the 
> pump is running.
>
> I currently generate a csv file (temp.csv) which is used to generate a 
> simple graph via Google Charts. (see attached temperatureGraph.js)  I would 
> like to add however the second graph. 
>
> The csv file looks like this and every 20 secons a line is added
>
> 1615141524,25.57
> 1615141544,26.21
> 1615141564,26.71
> 1615141584,27.13
>
> I am able to add the second temperature to the csv file
>
> 1615141524,25.57,28.34
>
>  I tried add the 2nd temperature to data[2] :
>
> function parseCSV(string) {
> var array = [];
> var lines = string.split("\n");
> for (var i = 0; i < lines.length; i++) {
> var data = lines[i].split(",", 2);
> data[0] = new Date(parseInt(data[0]) * 1000);
> data[1] = parseFloat(data[1]);
> data[2] = parseFloat(data[2]);
> array.push(data);
> }
> return array;
> }
>
> and it to the drawChart() :
>
> function drawChart() {
> var data = new google.visualization.DataTable();
> data.addColumn('datetime', 'UNIX');
> data.addColumn('number', 'Temperature 1');
> data.addColumn('number', 'Temperature 2');
>  
> But it does not show-up. It is probably very simple.but I do not  see 
> it.
> Regards,
>
> Eddy
>
>
> 
> var dataArray = [];
> var defaultZoomTime = 24*60*60*1000; // 1 day
> var minZoom = -6; // 22 minutes 30 seconds
> var maxZoom = 8; // ~ 8.4 months
> var zoomLevel = 0;
> var viewportEndTime = new Date();
> var viewportStartTime = new Date();
> loadCSV(); // Download the CSV data, load Google Charts, parse the data, 
> and draw the chart
>
> /*
> Structure:
> loadCSV
> callback:
> parseCSV
> load Google Charts (anonymous)
> callback:
> updateViewport
> displayDate
> drawChart
> */
> /*
>|CHART|
>|  VIEW PORT  |
> invisible  |   visible   |  
> invisible
> ---|-|--->
>   
> time
>viewportStartTime  viewportEndTime
>|__viewportWidthTime__|
> viewportWidthTime = 1 day * 2^zoomLevel = viewportEndTime - 
> viewportStartTime
> */
> function loadCSV() {
> var xmlhttp = new XMLHttpRequest();
> xmlhttp.onreadystatechange = function() {
> if (this.readyState == 4 && this.status == 200) {
> dataArray = parseCSV(this.responseText);
> google.charts.load('current', { 'packages': ['line', 
> 'corechart'] });
> google.charts.setOnLoadCallback(updateViewport);
> }
> };
> xmlhttp.open("GET", "temp.csv", true);
> xmlhttp.send();
> var loadingdiv = document.getElementById("loading");
> loadingdiv.style.visibility = "visible";
> }
> function parseCSV(string) {
> var array = [];
> var lines = string.split("\n");
> for (var i = 0; i < lines.length; i++) {
> var data = lines[i].split(",", 2);
> data[0] = new Date(parseInt(data[0]) * 1000);
> data[1] = parseFloat(data[1]);
> array.push(data);
> }
> return array;
> }
> function drawChart() {
> var data = new google.visualization.DataTable();
> data.addColumn('datetime', 'UNIX');
> data.addColumn('number', 'Temperature');
> data.addRows(dataArray);
> var options = {
> curveType: 'function',
> height: 360,
> legend: { position: 'none' },
> hAxis: {
> viewWindow: {
> min: viewportStartTime,
> max: viewportEndTime
> },
> gridlines: {
> count: -1,
> units: {
> days: { format: ['MMM dd'] },
> hours: { format: ['HH:mm', 'ha'] },
> }
> },
> minorGridlines: {
> units: {
> hours: { format: ['hh:mm:ss a', 'ha'] },
> minutes: { format: ['HH:mm a Z', 

Re: [visualization-api] Re: Challenges with the Select event or getSelection method?

['Ray Thomas' via Google Visualization API]

Did you ever get this working Jamie?

Being able to natively get the cell or column references would be useful, 
but as they are not, what I did was add a unique class name to each cell, 
then use an eventListener, then used the results of that to get the row and 
column numbers back out of the unique class names I gave them. I was 
listening for mouseover and mouseout, but it will work for any other event.

The code I came up with is:


var longText = (function() {
google.charts.load('current', {'packages':['table']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
   var queryString = encodeURIComponent('SELECT A,B,C ORDER BY A');
   var query = new 
google.visualization.Query('https://docs.google.com/spreadsheets/d/1tswaWUAbeBijHq4o505w0h7TmbD-qGhR3jBactcbGq0/gviz/tq?gid=1950745726&headers=1&tq='
 
+ queryString);
   query.send(handleQueryResponse);
}

function handleQueryResponse(response) {
   if (response.isError()) {
 alert('Error in query: ' + response.getMessage() + ' ' + 
response.getDetailedMessage());
 return;
  }
  var quotes = response.getDataTable();
  var totalRows = quotes.getNumberOfRows();
  var totalCols = quotes.getNumberOfColumns();
  var maxLength = 50;

  for (i = 0; i < totalRows; i++) { 
 for (j = 1; j < totalCols; j++) {
// Set the cell's formatted (displayed) text from the cell's value 
 var quote = quotes.getValue(i, j);
 if (quote.length >= maxLength) {
  quote = quote.slice(0,maxLength) + "...";
quotes.setFormattedValue(i,j,quote);
 }
// Set the cell's classname
quotes.setProperty(i,j,"className","r"+i+"c"+j);
  }   
  }
  var classNames = {};
  var options = {'cssClassNames': classNames};
 
  var chart = new 
google.visualization.Table(document.getElementById('quotes_div'));
  chart.draw(quotes, options);
  // Add event listeners for the table. Need mouseover and mouseout 
  let tableClass = 
document.getElementsByClassName("google-visualization-table");
  tableClass[0].addEventListener("mouseover", function( event ) {
var cellClass = event.target.className;
// cellClass is two texts, what we added and what Google puts in there 
var startLetter = cellClass.charAt(0);
if (startLetter == "r") {
   // We just need what we put in the cell class 
   cellClass = cellClass.split(" ")[0];
   // cellClass is going to be an r followed by some numbers, then a c 
followed by some more numbers, need to extract the row and column numbers
   // Split cellClass at c 
   splitClass = cellClass.split("c");
   var rownum = parseInt(splitClass[0].slice(1));
   var colnum = parseInt(splitClass[1]);
   var longText = quotes.getValue(rownum,colnum);
   document.getElementById("popup_div").innerHTML = "
" + longText + 
"
";
   document.getElementById("popup_div").style.display = "inline-block";
}
}, false);
tableClass[0].addEventListener("mouseout", function( event ) {
   document.getElementById("popup_div").innerHTML = "";
   document.getElementById("popup_div").style.display = "none";
}, false);

}
})();


There's a working example at http://brisray.com/google-charts/tablepops.htm

On Friday, December 18, 2020 at 2:27:47 PM UTC-5 Jamie wrote:

> Hi, Daniel,
>
> Thanks for the quick reply. From the documentation, I was under the 
> impression that the click event would not work. I will investigate this 
> option and update this thread accordingly.
>
> What you're saying about toggling the current selection makes sense to me 
> in the context of the broad application of the select event (that is, I see 
> how the piece of a PieChart does have a column association to the DataTable 
> in a way that Table chart's cell does not). I do think you may still have a 
> bug when clicking on a cell in the first column of a row in the Table 
> chart. It seems to me that should return a row reference given the current 
> design. I would definitely appreciate the addition of column reference in 
> the Table chart select context.
>
> Thanks again,
> Jamie
>
> On Friday, December 18, 2020 at 4:48:54 AM UTC-8 Daniel LaLiberte wrote:
>
>> The selection event toggles the current selection.  Maybe you want just 
>> the 'click' event instead.
>>
>> I agree that being able to get the column index (or id even) when 
>> clicking on a table cell, and selecting a table cell, or whole column, 
>> would be a convenience for many applications.  It will require some changes 
>> to the Table chart to support these, but I don't know of any inherent 
>> conflicts.  Maybe I will get inspired over the next couple weeks.
>>
>> On Fri, Dec 18, 2020 at 1:11 AM Jamie  wrote:
>>
>>> Forgot the chart screenshot.
>>> [image: Sample Aggregate Chart.png]
>>>
>>> On Thursday, December 17, 2020 at 10:05:59 PM UTC-8 Jamie wrote:
>>>
 Aaand...I just noticed the note that says Table 

[visualization-api] Re: setting column width

['Ray Thomas' via Google Visualization API]

What I came up could probably be simplified. It seems a lot of work to 
extract the row and column numbers from the class names I gave to the cells.

 
var longText = (function() {
google.charts.load('current', {'packages':['table']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
   var queryString = encodeURIComponent('SELECT A,B,C ORDER BY A');
   var query = new 
google.visualization.Query('https://docs.google.com/spreadsheets/d/1tswaWUAbeBijHq4o505w0h7TmbD-qGhR3jBactcbGq0/gviz/tq?gid=1950745726&headers=1&tq='
 
+ queryString);
   query.send(handleQueryResponse);
}

function handleQueryResponse(response) {
   if (response.isError()) {
 alert('Error in query: ' + response.getMessage() + ' ' + 
response.getDetailedMessage());
 return;
  }
  var quotes = response.getDataTable();
  var totalRows = quotes.getNumberOfRows();
  var totalCols = quotes.getNumberOfColumns();
  var maxLength = 50;

  for (i = 0; i < totalRows; i++) { 
 for (j = 1; j < totalCols; j++) {
// Set the cell's formatted (displayed) text from the cell's value 
 var quote = quotes.getValue(i, j);
 if (quote.length >= maxLength) {
  quote = quote.slice(0,maxLength) + "...";
quotes.setFormattedValue(i,j,quote);
 }
// Set the cell's classname
quotes.setProperty(i,j,"className","r"+i+"c"+j);
  }   
  }
  var classNames = {};
  var options = {'cssClassNames': classNames};
 
  var chart = new 
google.visualization.Table(document.getElementById('quotes_div'));
  chart.draw(quotes, options);
  // Add event listeners for the table. Need mouseover and mouseout 
  let tableClass = 
document.getElementsByClassName("google-visualization-table");
  tableClass[0].addEventListener("mouseover", function( event ) {
var cellClass = event.target.className;
// cellClass is two texts, what we added and what Google puts in there 
var startLetter = cellClass.charAt(0);
if (startLetter == "r") {
   // We just need what we put in the cell class 
   cellClass = cellClass.split(" ")[0];
   // cellClass is going to be an r followed by some numbers, then a c 
followed by some more numbers, need to extract the row and column numbers
   // Split cellClass at c 
   splitClass = cellClass.split("c");
   var rownum = parseInt(splitClass[0].slice(1));
   var colnum = parseInt(splitClass[1]);
   var longText = quotes.getValue(rownum,colnum);
   document.getElementById("popup_div").innerHTML = "
" + longText + 
"
";
   document.getElementById("popup_div").style.display = "inline-block";
}
}, false);
tableClass[0].addEventListener("mouseout", function( event ) {
   document.getElementById("popup_div").innerHTML = "";
   document.getElementById("popup_div").style.display = "none";
}, false);

}
})();

A working example is at http://brisray.com/google-charts/tablepops.htm
The Google Sheet used is the same as the last example.

On Friday, March 5, 2021 at 8:34:43 PM UTC-5 Ray Thomas wrote:

> Tooltips are not natively supported by table charts - 
> https://developers.google.com/chart/interactive/docs/customizing_tooltip_content#supported-charts
>
> I thought about this when writing the table and someone wants me to try 
> and do it in a project for work that they've been waiting ages for.
>
> They are old, but two articles that I thought may be useful are at 
> https://groups.google.com/g/google-visualization-api/c/yc3DU997Dx0 and 
> https://stackoverflow.com/questions/18735594/handling-a-hover-event-for-a-google-charts-table
>
> You can also give each cell in the table a class name - 
> https://developers.google.com/chart/interactive/docs/gallery/table#data-format
>  
>
> Just thinking out loud...
>
> Instead of changing the value, change the formatted text with what I wrote 
> (f instead of v) - setFormattedValue - 
> https://developers.google.com/chart/interactive/docs/reference#methods 
> Give each cell a classname based on row and column number
> Use some sort of tooltip or popup code to retrieve the cell classname when 
> hovered over
> Display the original value of cell in the tooltip/popup
>
> I'm not promising anything, but I'll try and take another look at this.
>
>
> On Friday, March 

[visualization-api] Re: setting column width

['Ray Thomas' via Google Visualization API]

What I came up could probably be simplified. There seems to be a lot of 
code getting the row and column information back out of the class names I 
gave to the cells.


var longText = (function() {
google.charts.load('current', {'packages':['table']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
   var queryString = encodeURIComponent('SELECT A,B,C ORDER BY A');
   var query = new 
google.visualization.Query('https://docs.google.com/spreadsheets/d/1tswaWUAbeBijHq4o505w0h7TmbD-qGhR3jBactcbGq0/gviz/tq?gid=1950745726&headers=1&tq='
 
+ queryString);
   query.send(handleQueryResponse);
}

function handleQueryResponse(response) {
   if (response.isError()) {
 alert('Error in query: ' + response.getMessage() + ' ' + 
response.getDetailedMessage());
 return;
  }
  var quotes = response.getDataTable();
  var totalRows = quotes.getNumberOfRows();
  var totalCols = quotes.getNumberOfColumns();
  var maxLength = 50;

  for (i = 0; i < totalRows; i++) { 
 for (j = 1; j < totalCols; j++) {
// Set the cell's formatted (displayed) text from the cell's value 
 var quote = quotes.getValue(i, j);
 if (quote.length >= maxLength) {
  quote = quote.slice(0,maxLength) + "...";
quotes.setFormattedValue(i,j,quote);
 }
// Set the cell's classname
quotes.setProperty(i,j,"className","r"+i+"c"+j);
  }   
  }
  var classNames = {};
  var options = {'cssClassNames': classNames};
 
  var chart = new 
google.visualization.Table(document.getElementById('quotes_div'));
  chart.draw(quotes, options);
  // Add event listeners for the table. Need mouseover and mouseout 
  let tableClass = 
document.getElementsByClassName("google-visualization-table");
  tableClass[0].addEventListener("mouseover", function( event ) {
var cellClass = event.target.className;
// cellClass is two texts, what we added and what Google puts in there 
var startLetter = cellClass.charAt(0);
if (startLetter == "r") {
   // We just need what we put in the cell class 
   cellClass = cellClass.split(" ")[0];
   // cellClass is going to be an r followed by some numbers, then a c 
followed by some more numbers, need to extract the row and column numbers
   // Split cellClass at c 
   splitClass = cellClass.split("c");
   var rownum = parseInt(splitClass[0].slice(1));
   var colnum = parseInt(splitClass[1]);
   var longText = quotes.getValue(rownum,colnum);
   document.getElementById("popup_div").innerHTML = "" + longText + "";
   document.getElementById("popup_div").style.display = "inline-block";
}
}, false);
tableClass[0].addEventListener("mouseout", function( event ) {
   document.getElementById("popup_div").innerHTML = "";
   document.getElementById("popup_div").style.display = "none";
}, false);

}
})();


A working example is at http://brisray.com/google-charts/tablepops.htm 
The Google Sheet used is the same as the previous example. 
On Friday, March 5, 2021 at 8:34:43 PM UTC-5 Ray Thomas wrote:

> Tooltips are not natively supported by table charts - 
> https://developers.google.com/chart/interactive/docs/customizing_tooltip_content#supported-charts
>
> I thought about this when writing the table and someone wants me to try 
> and do it in a project for work that they've been waiting ages for.
>
> They are old, but two articles that I thought may be useful are at 
> https://groups.google.com/g/google-visualization-api/c/yc3DU997Dx0 and 
> https://stackoverflow.com/questions/18735594/handling-a-hover-event-for-a-google-charts-table
>
> You can also give each cell in the table a class name - 
> https://developers.google.com/chart/interactive/docs/gallery/table#data-format
>  
>
> Just thinking out loud...
>
> Instead of changing the value, change the formatted text with what I wrote 
> (f instead of v) - setFormattedValue - 
> https://developers.google.com/chart/interactive/docs/reference#methods 
> Give each cell a classname based on row and column number
> Use some sort of tooltip or popup code to retrieve the cell classname when 
> hovered over
> Display the original value of cell in the tooltip/popup
>
> I'm not promising anything, but I'll try and take another look at this.
>
>
> On Friday, March 5, 2021 at 5:15:02 AM UTC-5 idan...@gmail.com wrote:
>
>> Hi,
>>
>> Thanks for your answer
>>
>> Can I make it that when click on the cell it will show all the text as 
>> tooltip or other way ?
>>
>> ב-יום שישי, 5 במרץ 2021 בשעה 04:37:56 UTC+2, Ray Thomas כתב/ה:
>>
>>> Hi 
>>>
>>> What you need to do is step through the datatable, test the length of 
>>> the text in each cell, then change it if necessary.
>>>
>>> Here's an example:
>>>
>>> 
>>> var longText = (function() {
>>> google.charts.load('current', {'packages':['table']});
>>> google.charts.setOnLoadCallback(drawChart);
>>> function 

[visualization-api] Re: setting column width

['Ray Thomas' via Google Visualization API]

Tooltips are not natively supported by table charts - 
https://developers.google.com/chart/interactive/docs/customizing_tooltip_content#supported-charts

I thought about this when writing the table and someone wants me to try and 
do it in a project for work that they've been waiting ages for.

They are old, but two articles that I thought may be useful are at 
https://groups.google.com/g/google-visualization-api/c/yc3DU997Dx0 and 
https://stackoverflow.com/questions/18735594/handling-a-hover-event-for-a-google-charts-table

You can also give each cell in the table a class name - 
https://developers.google.com/chart/interactive/docs/gallery/table#data-format
 

Just thinking out loud...

Instead of changing the value, change the formatted text with what I wrote 
(f instead of v) - setFormattedValue - 
https://developers.google.com/chart/interactive/docs/reference#methods 
Give each cell a classname based on row and column number
Use some sort of tooltip or popup code to retrieve the cell classname when 
hovered over
Display the original value of cell in the tooltip/popup

I'm not promising anything, but I'll try and take another look at this.


On Friday, March 5, 2021 at 5:15:02 AM UTC-5 idan...@gmail.com wrote:

> Hi,
>
> Thanks for your answer
>
> Can I make it that when click on the cell it will show all the text as 
> tooltip or other way ?
>
> ב-יום שישי, 5 במרץ 2021 בשעה 04:37:56 UTC+2, Ray Thomas כתב/ה:
>
>> Hi 
>>
>> What you need to do is step through the datatable, test the length of the 
>> text in each cell, then change it if necessary.
>>
>> Here's an example:
>>
>> 
>> var longText = (function() {
>> google.charts.load('current', {'packages':['table']});
>> google.charts.setOnLoadCallback(drawChart);
>> function drawChart() {
>> var queryString = encodeURIComponent('SELECT A,B,C ORDER BY A');
>> var query = new google.visualization.Query('
>> https://docs.google.com/spreadsheets/d/1tswaWUAbeBijHq4o505w0h7TmbD-qGhR3jBactcbGq0/gviz/tq?gid=1950745726&headers=1&tq='
>>  
>> + queryString);
>>   query.send(handleQueryResponse);
>> }
>>
>> function handleQueryResponse(response) {
>>   if (response.isError()) {
>> alert('Error in query: ' + response.getMessage() + ' ' + 
>> response.getDetailedMessage());
>> return;
>>   }
>>   var quotes = response.getDataTable();
>>   var totalRows = quotes.getNumberOfRows();
>>   var totalCols = quotes.getNumberOfColumns();
>>   var maxLength = 50;
>>
>>   for (i = 0; i < totalRows; i++) { 
>>  for (j = 1; j < totalCols; j++) {
>>  var quote = quotes.getValue(i, j);
>>  if (quote.length >= maxLength) {
>>   quote = quote.slice(0,maxLength) + "...";
>> quotes.setValue(i,j,quote);
>>  }
>>   }
>>   }
>>  
>>   var chart = new 
>> google.visualization.Table(document.getElementById('quotes_div'));
>>   chart.draw(quotes);
>> }
>> })();
>>   
>>
>> You can see this working at http://brisray.com/google-charts/getset.htm 
>> and the original spreadsheet at 
>> https://docs.google.com/spreadsheets/d/1tswaWUAbeBijHq4o505w0h7TmbD-qGhR3jBactcbGq0/#gid=1950745726
>>
>> Instead of .slice you can use .substring
>>
>> On Sunday, February 14, 2021 at 2:30:09 PM UTC-5 idan...@gmail.com wrote:
>>
>>> Hi,
>>>
>>> I am using dataTable to show data return from sql query
>>> The columns are being created dynamaclly depend on the query
>>>
>>> for some column I can have long text inside column.
>>>
>>> I want to  limit number of chars in columns to 50 chars for example and 
>>> if there is longer text it will appear with elipsis 
>>>
>>> I saw some example but none was working
>>> Can it be done and how ?
>>>
>>> Thanks
>>>
>>>

-- 
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 google-visualization-api+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/2ee66f50-58c0-4cb8-9e1a-7da7f9c7190bn%40googlegroups.com.

[visualization-api] Re: setting column width

['Ray Thomas' via Google Visualization API]

Hi 

What you need to do is step through the datatable, test the length of the 
text in each cell, then change it if necessary.

Here's an example:


var longText = (function() {
google.charts.load('current', {'packages':['table']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var queryString = encodeURIComponent('SELECT A,B,C ORDER BY A');
var query = new 
google.visualization.Query('https://docs.google.com/spreadsheets/d/1tswaWUAbeBijHq4o505w0h7TmbD-qGhR3jBactcbGq0/gviz/tq?gid=1950745726&headers=1&tq='
 
+ queryString);
  query.send(handleQueryResponse);
}

function handleQueryResponse(response) {
  if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + 
response.getDetailedMessage());
return;
  }
  var quotes = response.getDataTable();
  var totalRows = quotes.getNumberOfRows();
  var totalCols = quotes.getNumberOfColumns();
  var maxLength = 50;

  for (i = 0; i < totalRows; i++) { 
 for (j = 1; j < totalCols; j++) {
 var quote = quotes.getValue(i, j);
 if (quote.length >= maxLength) {
  quote = quote.slice(0,maxLength) + "...";
quotes.setValue(i,j,quote);
 }
  }
  }
 
  var chart = new 
google.visualization.Table(document.getElementById('quotes_div'));
  chart.draw(quotes);
}
})();
  

You can see this working at http://brisray.com/google-charts/getset.htm and 
the original spreadsheet at 
https://docs.google.com/spreadsheets/d/1tswaWUAbeBijHq4o505w0h7TmbD-qGhR3jBactcbGq0/#gid=1950745726

Instead of .slice you can use .substring

On Sunday, February 14, 2021 at 2:30:09 PM UTC-5 idan...@gmail.com wrote:

> Hi,
>
> I am using dataTable to show data return from sql query
> The columns are being created dynamaclly depend on the query
>
> for some column I can have long text inside column.
>
> I want to  limit number of chars in columns to 50 chars for example and if 
> there is longer text it will appear with elipsis 
>
> I saw some example but none was working
> Can it be done and how ?
>
> Thanks
>
>

-- 
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 google-visualization-api+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/26c04364-29aa-4956-909f-68dc0cd2871fn%40googlegroups.com.

[visualization-api] Re: Visualization from not shared google spreadsheet

['Ray Thomas' via Google Visualization API]

You can use OAuth 2.0 authorization - 
https://developers.google.com/chart/interactive/docs/spreadsheets#authorization
 

On Thursday, March 4, 2021 at 2:10:16 PM UTC-5 njuha...@gmail.com wrote:

> Hello,
>
> I was searching a lot in google, bud did not find something working. 
> I am using vizualization table to query data from spreadsheet and show 
> some part on of this data on tv svscreen using web browser. Visualization 
> requires the spreadsheet would be shared to everyone. In last time I am 
> experiencing some problems, since everybody can access the original file 
> having a link. Is that possible somehow to close the spreadsheet and use 
> kind of google spreadsheet api to automatically login opening web page and 
> load the table? 
>

-- 
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 google-visualization-api+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/d0a9b2ed-1151-40aa-bc39-a542284f250cn%40googlegroups.com.

[visualization-api] Re: google.visualization.drawChart JSON response object options?

['Ray Thomas' via Google Visualization API]

It should be possible. You can turn both option objects into strings and 
manipulate them that way using JSON.stringify() to create a single set of 
options.

// Set chart options
var options = {'title':'How Much Pizza I Ate Last Night',
'width':400,
'height':300};

myStr = JSON.stringify(options);
alert( myStr);


Depending on how you are drawing your chart you can also try 
using setOption or setOptions in the chartWrapper methods documentation 
at https://developers.google.com/chart/interactive/docs/reference#methods_2  
 

Some time ago, before I really knew what I was doing, I wrote the page 
at https://www.indstate.edu/business/metrics

Here's part of the code from that to show the use of  setOption


theGraphs = new google.visualization.ChartWrapper({
chartType: userChart,
containerId: graphArea,
dataTable: myObject.datatable,
// These are options applied to all graphs
options: {
   height: 400,
   hAxis: {
  maxTextLines: 4, // maximum number of lines to wrap to
  maxAlternation: 4, // maximum layers of labels (setting this higher 
than 1 allows labels to stack over/under each other)
  minTextSpacing: 1, // minimum space in pixels between adjacent labels
   },
   textStyle: {
  fontSize: 9
   },
   legend: {
  position: "top",
  maxLines: 5
   },
   colors: usrClr
   }
});

// Add options for individual charts here
if (myObject.ID == "MSDC1" || myObject.ID == "MSDC2") {
theGraphs.setOption('hAxis.title', 'Figures are number of engaged 
students');
theGraphs.setOption('title', 'Figures are number of engaged students');
theGraphs.setOption('titleTextStyle.italic', true);
theGraphs.setOption('titleTextStyle.bold', false);
}  
On Monday, December 21, 2020 at 5:34:03 PM UTC-5 Thijs Alberts wrote:

> Hello please consider this:
>
> function myCallback() {
>  callback = google.visualization.drawChart({
>containerId: ,
>dataSourceUrl: ,
>chartType: "...",
>options: 
>  });
> }
> my data url returns a json literal object eg:
> {
> data: {cols:..., rows:...}} //normal datatable in literal notation
> options: {chartOptions} // eg: title + subtitle etc based on query
> }
>
> Is it possible to merge options from the literal response with the options 
> set in the callback?
>

-- 
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 google-visualization-api+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/93b3077c-29ee-4fea-93ea-28bb67f9591bn%40googlegroups.com.

[visualization-api] Re: Different color pattern

['Ray Thomas' via Google Visualization API]

You need to give an array of color in the options for each chart. That's 
explained on 
https://developers.google.com/chart/interactive/docs/customizing_charts

What happens is the same as for the default palette, if you have more data 
than you have defined colors for then they start again at the beginning. 

You can even give the array of colors a variable name in the code and use 
that in the color option.

usrClr = 
['#7CB5EC','#434348','#90ED7D','#F7A35C','#8085E9','#F15C80','#E4D354','#2B908F','#F45B5B','#91E8E1','#2F7ED8','#0D233A','#8BBC21','#91','#1AADCE','#492970','#F28F43','#77A1E5','#C42525','#A6C96A','#4572A7','#AA4643','#89A54E','#80699B','#3D96AE','#DB843D','#92A8CD','#A47D7C','#B5CA92','#4572A7'];

and then in the options section use

colors: usrClr,

-- 
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 google-visualization-api+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/82d3b6b4-1755-47c4-930c-b67c284ce89co%40googlegroups.com.

[visualization-api] Re: Creating charts from an external Spreadsheet and update data every hour/day(or at a particular time)

['Ray Thomas' via Google Visualization API]

First, do you mean a Google Sheet or Excel? Google Sheets are much easier 
to work with and the charts will update as soon as the sheet is, and the 
web page refreshed. 

Excel is going to need a bit more help to work properly and there's very 
little help around for doing it. There's some at the following, but I 
haven't used them...

Tushar Mehta at 
http://www.tushar-mehta.com/publish_train/xl_vba_cases/excel_google_chart_api/ 
used 
VBA in Excel to do it.
yuriarfil on GitHub also uses VBA - 
https://github.com/yuriarfil/google-visualization-vba
SheetJS on GitHub uses JavaScript to create the JSON data

As far as I know there's just one example of using a Google Sheet in the 
Google Visualizations help and that's at 
https://developers.google.com/chart/interactive/docs/spreadsheets#creating-a-chart-from-a-separate-spreadsheet
 

You may also need to look at the Query Language help at 
https://developers.google.com/chart/interactive/docs/querylanguage 

If you're updating the spreadsheet you may be better off just specifying 
the columns from it you want to import. For example, my table at 
http://hmsgambia.org/crewlist.htm is drawn from the sheet at  

https://docs.google.com/spreadsheets/d/1kjOTQMAlWc-j6G_XfFUJIzAxuvmyxygQh0q1Dpn4oRU/edit#gid=0
 and 
uses:

function drawChart() {
  var queryString = encodeURIComponent('SELECT A, B, C, D, E order by 
A');

  var query = new google.visualization.Query(
'https://docs.google.com/spreadsheets/d/1kjOTQMAlWc-j6G_XfFUJIzAxuvmyxygQh0q1Dpn4oRU/gviz/tq?gid=0=1='
 
+ queryString);
  query.send(handleQueryResponse);
}

function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + 
response.getDetailedMessage());
return;
}

var crewDataTable = response.getDataTable();
...
...
   }

or you can omit the querystring altogether and simply use

 var query = new google.visualization.Query(
'https://docs.google.com/spreadsheets/d/1kjOTQMAlWc-j6G_XfFUJIzAxuvmyxygQh0q1Dpn4oRU/gviz/tq?gid=0=1');

in which case Google will try and import the entire sheet to work on.

Unless you are using the authorization method at 
https://developers.google.com/chart/interactive/docs/spreadsheets#authorization 
the 
only thing to remember is to make the Google Sheet public or "viewable to 
anyone with the link". I don't use authorization because I don't keep 
anything in the Sheets that is not going to be put onto a web page in one 
form or another anyway.

Other than where the data comes from to create the datatable there's no 
difference in the code to be used to create your charts, and all the 
methods and events for your particular chart types will work as they should.

I hope this helps.

-- 
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 google-visualization-api+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/b3829fc4-9d24-41a7-94cb-ccb1ba0acd53%40googlegroups.com.

[visualization-api] Re: Comparing data from two years

['Ray Thomas' via Google Visualization API]

Hello Lee,

What you could do is put the values side by side in almost any of the chart 
types, but there is also something called a Diff Chart that is good for 
comparing data - 
https://developers.google.com/chart/interactive/docs/gallery/diffchart

This came up here just a few days ago, so take a look at the thread at 
https://groups.google.com/forum/#!topic/google-visualization-api/rhq6hZO1eSw

Ray

-- 
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 google-visualization-api+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/e148ead3-d4f4-45fc-bc9d-cb73188df51c%40googlegroups.com.

[visualization-api] Re: adding horizontal,vertical labels to a histogram chart

['Ray Thomas' via Google Visualization API]

Hello again Yves,

You can add new lines to titles and labels by using \n in the text. BUT - 
you cannot (as far as I know) easily restyle it. What I did was copy your 
code and put it at http://brisray.com/test/yves.htm so I could see what I 
can do to help you. I also tidied up what I wrote before so there isn't so 
much CSS and clutter.

You see the bottom haxis title is now on two lines? That is done by adding 
\n to the text.

title: 'EUI (kBTU/ft squared) \n >> Uses more energy per ft2 >>',

in the haxis options.

When I tried doing that to the main title it did work but it used the title 
styling which not what I think you want. What I did then was remove the 
title and subtitle from the chart itself and used them separately. The 
problem with that is that there was a huge gap between that text and top of 
the chart.

There is a way around that though by using the chartArea options. Details 
about that are available in the documentation - 
https://developers.google.com/chart/interactive/docs/gallery/histogram#configuration-option
 
s
 
So I added

chartArea:{top:10} 

to your options to reduce the size of the gap.


WhiteHat on StackOverflow did come up with a way to insert a subtitle into 
the chart, but to me it seems a bit over-complicated for the result 
achieved - 
https://stackoverflow.com/questions/41893055/add-subtitle-in-areachart-in-google-chart

-- 
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 google-visualization-api+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/a2747754-8003-4a9e-99c7-cdf87d603020%40googlegroups.com.

Re: [visualization-api] Subdivide a pie chart section

['Ray Thomas' via Google Visualization API]

An idea I had when I first read this is to create a custom tooltip for that 
slice of the pie chart to explain or display the information, even another 
pie chart, for that slice - 
https://developers.google.com/chart/interactive/docs/customizing_tooltip_content

According to Stackoverflow, if you only want that particular slice to show 
the custom tooltip set all the tooltip information for the other slices to 
null or "" and they will show the default tooltips. If you don't want them 
to show any tooltips at all, then you can hide them with CSS - 
https://stackoverflow.com/questions/39977947/removing-tooltip-for-one-part-of-piechart-google-charts

-- 
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 google-visualization-api+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/49e668dd-5952-4b91-abb7-253c9d1dfb87%40googlegroups.com.

Re: [visualization-api] Re: adding horizontal,vertical labels to a histogram chart

['Ray Thomas' via Google Visualization API]

Because this is going to be under all the chart elements, I'd be tempted to 
go back to plain HTML/CSS. Something like this.



This is the left-hand 
description
This 
is the right-hand description 


-- 
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 google-visualization-api+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/39756b18-f08c-461a-ba7b-73ed465a6c89%40googlegroups.com.

Re: [visualization-api] Re: adding horizontal,vertical labels to a histogram chart

['Ray Thomas' via Google Visualization API]

Because this is going to under the chart anyway, I'd be tempted to go back 
to plain HTML/CSS

Something like this:



This is the left-hand 
description
This 
is the right-hand description 


-- 
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 google-visualization-api+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/ee6f6944-09f2-456c-b041-1bd4dc4622b6%40googlegroups.com.

[visualization-api] Re: adding horizontal,vertical labels to a histogram chart

['Ray Thomas' via Google Visualization API]

Cool. These charts really are versatile, but sometimes it's a little bit of 
work to get them how you want them.  Ray

-- 
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 google-visualization-api+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/c2d28917-ba3b-46d1-a89f-19546bf785eb%40googlegroups.com.

[visualization-api] Re: adding horizontal,vertical labels to a histogram chart

['Ray Thomas' via Google Visualization API]

Hello Yves,

what you want is 

var options = {
  title: 'Efficiency of East Bank Buildings',
  legend: { position: 'none' },
  colors: ['gold'],
  histogram: { hideBucketItems: true },
  hAxis: { title: 'Efficiency (Energy-use intensity/Energy-use per 
square ft.)'},
};

You have to try and realize the difference between how the examples are 
written in the Configuration Options of the charts and how to use them in 
the options block or you will keep running into problems.

-- 
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 google-visualization-api+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/45d54639-c1ab-46f1-b632-3acad95c0533%40googlegroups.com.

[visualization-api] Re: Vertical Line Graph Issue

['Ray Thomas' via Google Visualization API]

I don't know if this is going to work for you but sometimes the way to get 
the graph to display how you want it to is not to flip the data but to 
rotate the datatable created from the data.

This was written several years ago by Bhuman Soni - 
http://captaindanko.blogspot.com/2013/05/transpose-of-google-visualization-data.html
 with 
a working example at 
https://bitbucket.org/cptdanko/blog-code/src/0666cdce533db48cd89a4e2f02ef7e87a891c857/transpose.html?at=default

It was later shortened on stackoverflow - 
https://stackoverflow.com/questions/16949993/inverting-rows-and-columns-on-google-area-chart


-- 
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 google-visualization-api+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/eef12b43-f522-4728-b1e2-7cd30b0a9104%40googlegroups.com.

[visualization-api] Re: Why are my posts being deleted?

['Ray Thomas' via Google Visualization API]

I've had a couple of replies automatically deleted a couple of minutes ago.

-- 
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 google-visualization-api+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/6453070f-c5fb-47a7-919f-81d5f6403f78%40googlegroups.com.

Re: [visualization-api] Re: Histogram: How to make it so that my columns are not divided individually?

['Ray Thomas' via Google Visualization API]

It all works but the documentation is a little difficult to understand in 
places.

There's another way of drawing the graphs and that uses an object called 
ChartWrapper - 
https://developers.google.com/chart/interactive/docs/reference#chartwrapperobject
 

In that, you can set the options using dot notation as in *setOption(key, 
value)* so you can use things like *setOption('hAxis.slantedText', 'true')*

*var options* uses bracket notation but in the list of available options 
dot notation is used. You just need to realize how to change the dot 
notation to bracket notation.

In the histogram documentation one of the options is given as 
*histogram.hideBucketItems* but you cannot use that. It has to be changed 
to *histogram: {hideBucketItems: true},*

Likewise for *hAxis.title* that has to be changed to *hAxis: { title: 
'Energy-use per square ft.'},*

Here's your new options:

var options = {
  title: 'Efficiency of East Bank Buildings',
  legend: { position: 'none' },
  colors: ['gold'],
  hAxis: { title: 'Energy-use per square ft.'},
  histogram: {hideBucketItems: true},
 };


Ray





-- 
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 google-visualization-api+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/bf1b4457-bca7-4db2-a900-452f248b999c%40googlegroups.com.

[visualization-api] Re: Histogram: How to make it so that my columns are not divided individually?

['Ray Thomas' via Google Visualization API]

You can hide the individual column elements by setting 
the histogram.hideBucketItems option to true. In your options, use

 histogram: { hideBucketItems: true },

For the titles and and legends you need to go to 
https://developers.google.com/chart/interactive/docs/gallery/histogram#configuration-options
 and 
look through what you can do with this type of chart.

Ray

-- 
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 google-visualization-api+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/c6f4eb2a-fce3-45b9-ad6c-887af24139c5%40googlegroups.com.

[visualization-api] Re: Histogram: defining my data?

['Ray Thomas' via Google Visualization API]

Hi Yves,

I think I know what's wrong. In the data you sent me, in the line ['Akerman 
Hall' 106.7], there's a comma missing, change it to ['Akerman Hall', 
106.7], and it should all work.

Ray

-- 
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 google-visualization-api+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/dea3560a-30c0-4e3a-a2a5-296cc3bed026%40googlegroups.com.

[visualization-api] Re: skip 0's and negative values from chart

['Ray Thomas' via Google Visualization API]

Try putting nulls or leaving the data out altogether where zero and 
negative values are and setting interpolateNulls to true.

You should end up with something looking like this:

var data = google.visualization.arrayToDataTable([
['Year', 'Massachusetts', 'National'],
  ['2010',  88,  76],
  ['2011',  null,  82],
  ['2012',  96,  86],
  ['2013',  100,  91],
  ['2014',  null,  94],
  ['2015',  null,  98],
  ['2016',  100,  99],
  ['2017',  124,  100],
  ['2018',  125,  102]]);

  var options = { interpolateNulls: true };

or 

var data = google.visualization.arrayToDataTable([
['Year', 'Massachusetts', 'National'],
  ['2010',  88,  76],
  ['2011',  ,  82],
  ['2012',  96,  86],
  ['2013',  100,  91],
  ['2014',  ,  94],
  ['2015',  ,  98],
  ['2016',  100,  99],
  ['2017',  124,  100],
  ['2018',  125,  102]]);

  var options = { interpolateNulls: true };

Without setting interpolateNulls to true the graph will draw but you will 
have gaps in the line.

-- 
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 google-visualization-api+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/5ca2c2eb-0708-4ec4-a256-db525b533f0e%40googlegroups.com.

[visualization-api] Re: skip 0's and negative values from chart

['Ray Thomas' via Google Visualization API]

Try putting nulls where zero and negative values are and 
setting interpolateNulls to true.

You should end up with something looking like this:

var data = google.visualization.arrayToDataTable([
['Year', 'Massachusetts', 'National'],
  ['2010',  88,  76],
  ['2011',  null,  82],
  ['2012',  96,  86],
  ['2013',  100,  91],
  ['2014',  null,  94],
  ['2015',  null,  98],
  ['2016',  100,  99],
  ['2017',  124,  100],
  ['2018',  125,  102]]);

  var options = { interpolateNulls: true };

Without setting interpolateNulls to true the graph will draw but you will 
have gaps in the line.

-- 
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 google-visualization-api+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/b669ca5a-da8b-453a-b679-6eed59db001a%40googlegroups.com.

[visualization-api] Re: Histogram: defining my data?

['Ray Thomas' via Google Visualization API]

You can easily check most of the examples as they're usually in their own 
frames. Right click somewhere just outside of the graph and choose to view 
the frame source, copy it to Notepad or other plain text editor, remove the 
information in the  section, and save it to a new html file.

You can then change the data in the file and add whatever else you need on 
the page.

Ray

-- 
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 google-visualization-api+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/c6165a9f-031b-46fb-ba48-6667c4e541a3%40googlegroups.com.

[visualization-api] Re: How to get a count of words appearing in a column of text fields, sorted by volume

['Ray Thomas' via Google Visualization API]

The quickest way I know how to do this is with a query.. Suppose you have 
your list of words in column A. In cell B2 you can use

=query(A2:A,"select A, count(A) where A != '' group by A order by count(A) 
desc")

That adds two new columns, a list with the unique words and in the next 
column the number count of those words sorted highest first.

You can also do it using formulas, but I don't see how it can be done in 
one step.

At the top of a new column (in my case D) put =unique(A2:A) that wil give 
you the list of unique words. In the next column put =COUNTIF($A$2:A,D2) and 
copy that down the list of unique words, that gives you the count of each 
of the unique words.

In the column after that put =sort(D2:E,2,FALSE) which creates of copy of 
columns D and E, but sorted in descending order of column E.

Here's a Google Sheet showing all of the above - 
https://docs.google.com/spreadsheets/d/1OOo9dfSW6ppYKt7PJUHCWGrYC2JDGQpCYmFjHhZibeA/edit#gid=0

-- 
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 google-visualization-api+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/c01caa2d-d2b1-4cec-b32a-b0860cf304d4%40googlegroups.com.

[visualization-api] Re: JavaScript code to dynamically switch between isStacked: true and isStacked: 'percent'

['Ray Thomas' via Google Visualization API]

This comes up every now and then such as 
https://stackoverflow.com/questions/21170147/google-charts-switching-between-line-and-column-charts
 and 
https://stackoverflow.com/questions/35380994/google-charts-switch-between-table-and-chart-view
 

As you're only changing the value of isStacked you need only add an event 
handler to a button to change a variable then redraw the barchart. Here's 
the code to do what you want::


   google.charts.load('current', {
  packages: ['corechart'],
  callback: initChart
});

function initChart() {
  var button;
  var chart;
  var data;
  var showChart = 'Show as Absolute';

  var data = google.visualization.arrayToDataTable([
['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General',
 'Western', 'Literature', { role: 'annotation' } ],
['2010', 10, 24, 20, 32, 18, 5, ''],
['2020', 16, 22, 23, 30, 16, 9, ''],
['2030', 28, 19, 29, 30, 12, 13, '']
  ]);
chart = new google.visualization.ChartWrapper({
containerId: 'chart_div',
dataTable: data
  });

  button = document.getElementById('btnSwitch');
  button.addEventListener('click', switchChart, false);

  // draw initial chart
  switchChart();

  function switchChart() {
button.value = showChart;
var barType;
showChart = (showChart === 'Show as Absolute') ? 'Show as Percent' : 
'Show as Absolute';
if (showChart.indexOf("Absolute") >-1){
barType = true;
}
else {
barType = "percent";
}
drawChart(barType);
  }

  function drawChart(barType) {
 var options = {
width: 600,
height: 400,
legend: { position: 'top', maxLines: 3 },
isStacked: barType,
  };

  var chart = new 
google.visualization.BarChart(document.getElementById('chart_div'));
  chart.draw(data, options);
  }
}
  



You should be able to see where to put your own options. There's a working 
example at http://brisray.com/test/nevada.htm

You can use almost any element to do things like this, a dropdown list for 
example.

-- 
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 google-visualization-api+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/bcafb4d0-0e0a-4171-a61d-bfe05697ac62%40googlegroups.com.

[visualization-api] Re: how to add attach hyperlinks to google chart

['Ray Thomas' via Google Visualization API]

Here's how I do it, I'm not sure if it is the most efficient method, but it 
works in at least Table Charts.

I create a column that contains the text I want to show and another that 
contains the URL i want the text to link to. You can see that in 
https://docs.google.com/spreadsheets/d/1kjOTQMAlWc-j6G_XfFUJIzAxuvmyxygQh0q1Dpn4oRU/
 where 
the Name column is the text I want to add the URL to.

Once I've got the datatable, I get the number of rows in it, then step 
through each row, combining the Name and URL to make the link

var totalRows = crewDataTable.getNumberOfRows(); 
for (i = 0; i < totalRows; i++) {
// Create the link in the name column (index 0)
var txt = crewDataTable.getValue(i, 4);
if (txt !=null) {
name = crewDataTable.getValue(i, 0);
newURL = ''+name+'';
crewDataTable.setCell(i, 0, undefined, newURL); 
} 

You can see the finished table at http://hmsgambia.org/crewlist.htm 

I used the same technique on http://hmsgambia.org/crewbios.htm but that 
only collects data where the URL column is not empty (null). There's 
nothing much else on those pages so looking at the source should show you 
the code fairly easily.

There's another technique you can use and that's adding the URL to the 
tooltips for most charts. You can add almost any HTML to the tooltips and 
the documentation for doing that is at 
https://developers.google.com/chart/interactive/docs/customizing_tooltip_content
 

I used the documentation to add images to the tootips to a Timeline chart, 
but there's no reason you cannot add links. A working example of that is at 
https://indstate.edu/business/history/faculty (that's a fairly long page so 
just use  Ctrl + End to get to the bottom of it). The sheet for that is at 
https://docs.google.com/spreadsheets/d/1MFDuFhqJGkEBSgbZd5t4KBcz06LPrRVVRykIom2LZzs/
 - 
it looks a bit odd because the top timeline on that page is drawn using 
Timeline JS and that expects the data to be in a certain order and I use a 
single sheet to produce both timelines.

-- 
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 google-visualization-api+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/8c0e1c5b-9662-4fd5-bfe1-b1ac01d07304%40googlegroups.com.

[visualization-api] Re: SIMPLE DATE QUERY

['Ray Thomas' via Google Visualization API]

A little extra, suppose your cell B1 really does contain '=5 or < 7 or 
something of that sort, then you can use

=QUERY(A:A, "select * where Month(A) "&"")

I made a small Sheet of the examples I used at 
https://docs.google.com/spreadsheets/d/1NTGuA7DA5-GVGbvT-aEYMIYmEl358NUjxExDFDVDq-8/edit#gid=0
C1, D1, E1 contains what to reference and C3, D3 and E3 contain the queries.

-- 
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 google-visualization-api+unsubscr...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/960d16a8-fec8-4e46-b27a-36c7cc49212c%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[visualization-api] Re: SIMPLE DATE QUERY

['Ray Thomas' via Google Visualization API]

OK, suppose your column A contains the dates and cell B1 contains the 
number of the month you want, then you can use 

=QUERY(A:A, "select * where Month(A)="&"")

It looks a bit strange but that's the way the cell values are referenced in 
the queries.

As a side note, if you use a query like this to use text in a cell to do 
some sort of comparison and that text contains a space then you need to add 
single quotes around "&" so it becomes '"&"'

-- 
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 google-visualization-api+unsubscr...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/45594bdb-8a10-45d8-bebe-7014433d8090%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[visualization-api] Re: Query Function

['Ray Thomas' via Google Visualization API]

An old thread but this should work

=Query(range,"Select C, sum(E) where C contains 'LIM67' and not C contains 
'+' group by C")

-- 
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 google-visualization-api+unsubscr...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/93b29cef-c072-424e-b352-44ac64d10d1c%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[visualization-api] Re: Timeline min/max viewable range

['Ray Thomas' via Google Visualization API]

This thread is over a year old but I recently came across the same problem 
and eventually got it to work the way I wanted. What I had was a list of 
people and their start and end dates of working the the university college 
I work for. What I wanted was to show everyone who worked between user 
selectable years regardless of the start and end dates in the dataTable.

The standard dashboard controls - 
https://developers.google.com/chart/interactive/docs/gallery/controls - 
will not work because those use a single column to get the min and max 
values, but Timeline's use two - the start and end dates.

I had the dumb idea of using the control but not binding it to anything. A 
complete failure as nothing drew at all.

Another idea I had was to use a HTML 5 slider control -  - 
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range - but 
those only have one slider handle. There are some double sliders around 
such as https://refreshless.com/nouislider/ or 
http://www.simple.gy/blog/range-slider-two-handles/ or 
https://codepen.io/ChrisSargent/pen/meMMye but those turned out to be more 
trouble for me than they were worth. The original idea was to get the min 
and max values from the sliders and then filter the two date columns of a 
Timeline dataTable based on those values. This method will work, but I was 
spending more time getting the sliders to work than drawing the Timeline.

What I eventually did seems a bit long-winded but it works and as far as I 
can see works with no loss of speed. 

I created a hidden div to hold a dataTable made from the original dataTable 
which I emptied using the views option

view: {
rows: [] // remove all rows from the view so it doesn't waste time 
rendering them
}

I  then added an event listener to the slider control and got the min and 
max values and used that to filter another view of the data on both date 
columns and drew that to another div.

google.visualization.events.addListener(yearUserSlider, 'statechange', 
function () {
 var state  = yearUserSlider.getState();
 var userLow = state.lowValue.getFullYear();
 var userHigh =  state.highValue.getFullYear()
 var viewUserControls = new 
google.visualization.DataView(dataUserControls);
 viewUserControls.setRows(viewUserControls.getFilteredRows([
  {column: 3, maxValue: new Date(userHigh,0,0,)},
  {column: 4, minValue: new Date(userLow,0,0,)}
 ]));
 var userControlTimeline = new 
google.visualization.Timeline(document.getElementById('timelineUserControls_div'));
 userControlTimeline.draw(viewUserControls, timelineOptions);


The complete code can be found at 
http://brisray.com/test/faculty-timeline.htm
The Google Sheet it comes from is at 
https://docs.google.com/spreadsheets/d/1MFDuFhqJGkEBSgbZd5t4KBcz06LPrRVVRykIom2LZzs/edit#gid=0
 - 
it looks a bit odd because I  also use it for a Timeline JS timeline - 
http://timeline.knightlab.com/ and that is fussy about how it accepts the 
data. I just use a query and rearrange it for the Google Visualization 
Timeline.

If anyone is interested in what the production page looks like, that's at 
https://www.indstate.edu/business/history/faculty 
The Timeline JS timeline is at the top of the page and the Google 
Visualization one is at the very bottom.

-- 
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 google-visualization-api+unsubscr...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/78d6ef2e-ac16-4707-8b53-04d748f61fb6%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[visualization-api] Re: SIMPLE DATE QUERY

['Ray Thomas' via Google Visualization API]

Try =QUERY(A:A, "select * where Month(A) = 5")

Where A is the column of dates. In lots of instances months and days start 
from 0, not 1. So 5 would return those dates in June, 6 would return the 
dates in July.

Sheet, column A

06/29/2019
06/29/2019
06/30/2019
07/01/2019
07/01/2019
07/02/2019

Output:

06/29/2019
06/29/2019
06/30/2019

-- 
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 google-visualization-api+unsubscr...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/242b1417-8033-4186-9fb4-e018d246aa3a%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[visualization-api] Re: [Google Timeline] How to compress hAxis data with time(minutes) in Google Timeline?

['Ray Thomas' via Google Visualization API]

I don't think there is. The Timelines are largely automatic without the 
number of options available in some other charts. I tried a couple of 
methods but the closest I came to what I think you want was by adding a 1 
second event to the end of the day using [ 'Petunia Room', '', new 
Date(0,0,0,23,59,58), new Date(0,0,0,23,59,59) ], which gives the timeline 
in the attached image, a live version can be seen at 
http://brisray.com/test/dionela.htm

Hopefully someone can come up with something not quite so kludgy.


-- 
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 google-visualization-api+unsubscr...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/e6af3622-bb15-435f-95d3-66a7b871f94d%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[visualization-api] Re: Stacked Bar Chart

['Ray Thomas' via Google Visualization API]

Because Google Visualizations and Google Sheets both use Query language - 
https://developers.google.com/chart/interactive/docs/querylanguage -  you 
can either extract the data you use in the Sheet or do it in the code when 
drawing the chart.

I used your Sheet and used a query in the chart code to extract the data. 
The only problem was that the data table had to be transposed to get it to 
work properly. Luckily, there's a function to do that.

I made a working example at to do what I think you are trying to achieve at 
http://brisray.com/test/zumwalt.htm

Here's the code to do what I think you are trying to achieve:

https://www.gstatic.com/charts/loader.js";>

google.charts.load("current", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function transposeDataTable(dataTable) {
//step 1: let us get what the columns would be
var rows = [];//the row tip becomes the column header and the rest become
for (var rowIdx=0; rowIdx < dataTable.getNumberOfRows(); rowIdx++) {
var rowData = [];
for( var colIdx = 0; colIdx < dataTable.getNumberOfColumns(); colIdx++) {
rowData.push(dataTable.getValue(rowIdx, colIdx));
}
rows.push( rowData);
}
var newTB = new google.visualization.DataTable();
newTB.addColumn('string', dataTable.getColumnLabel(0));
newTB.addRows(dataTable.getNumberOfColumns()-1);
var colIdx = 1;
for(var idx=0; idx < (dataTable.getNumberOfColumns() -1);idx++) {
var colLabel = dataTable.getColumnLabel(colIdx);
newTB.setValue(idx, 0, colLabel);
colIdx++;
}
for (var i=0; i< rows.length; i++) {
var rowData = rows[i];
console.log(rowData[0]);
newTB.addColumn('number',rowData[0]); //assuming the first one is always a 
header
var localRowIdx = 0;
for(var j=1; j< rowData.length; j++) {
newTB.setValue(localRowIdx, (i+1), rowData[j]);
localRowIdx++;
}
}
return newTB;
  }
function drawChart() {
 var queryString = encodeURIComponent('SELECT J, L LIMIT 6 OFFSET 1 ');
 var query = new google.visualization.Query( 
'https://docs.google.com/spreadsheets/d/1F7_JGyhDQAq0yk0u20haUX-lc0G2CJhmdbCk8b-fkr0/gviz/tq?gid=1820859385&headers=1&tq='
 
+ queryString);
  query.send(handleQueryResponse);
}

 function handleQueryResponse(response) {
  if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + 
response.getDetailedMessage());
return;
  }

 var Options = {
isStacked: 'percent',
 };

  var data = response.getDataTable();
  var transposedData = transposeDataTable(data);
  var chart = new 
google.visualization.BarChart(document.getElementById('chart_div'));
  chart.draw(transposedData, Options);

}   
 

Queries are very useful. I used them to create some of the sheets at 
https://docs.google.com/spreadsheets/d/1uoYZyzlsWEiJa6jtWnoR781hm49AdDm4P3TUX0uou3I/edit#gid=0
 which 
are used to draw the graphs on 
https://www.indstate.edu/business/SMIFC/research/SMIFCstats 

-- 
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 google-visualization-api+unsubscr...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/fa269c4d-638f-4bd9-9ec7-bab0c9c14a7d%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[visualization-api] Re: Repeated Y-Axis Labels on Stacked Material Chart

['Ray Thomas' via Google Visualization API]

Hi Drew,

I did wonder about that when I saw the graph but I can't recall seeing an 
example of showing such disparate values properly on the same chart.

If it is not possible, there are two methods that may work. Some charts 
allow use of the "explorer" option. This allows users to zoom in on a 
particular area of the chart. This is from 
https://stackoverflow.com/questions/20764157/zoom-google-line-chart and two 
fiddles - https://jsfiddle.net/4w626v2s/2/ and http://jsfiddle.net/duJA8/ - 
neither are particularly intuitive but they do work.

Something else I thought of was to create a new dataview of the data you've 
already got but not displaying the very large values. That view of the data 
can then be shown in a tooltip - 
https://developers.google.com/chart/interactive/docs/customizing_tooltip_content#placing-charts-in-tooltips

I'm no expert of the API, I don't even understand some of the questions 
people ask about it, but I've found you sometimes have to work with what 
they can do rather than what you wish they did.

-- 
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 google-visualization-api+unsubscr...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/41ef5bfa-ca9f-404a-9199-9b41315c0cec%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[visualization-api] Re: Repeated Y-Axis Labels on Stacked Material Chart

['Ray Thomas' via Google Visualization API]

It's odd behavior to show the y-axis like that but one way around it is to 
set the font size to 0 for those axis. Another method I've seen used is to 
set the font color to match the background, but I think setting the font 
size to 0 is the better of the two.

2: {
textStyle: { fontSize: 0}
},  
3: {
textStyle: { fontSize: 0}
}
  } 

and here's the full code I used while testing this:


  
https://www.gstatic.com/charts/loader.js";>

  google.charts.load('current', {'packages':['bar']});
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {
var data = google.visualization.arrayToDataTable([
   ['Month', 'NTC Health', 'NTC Pharmacy', 'UHC Health', 'UHC 
Pharmacy', 'WHP Health', 'WHP Pharmacy'],
  ['July 2018', 165733, 175169, 113492, 122547, 82610, 60578],
  ['2015', 1170, 460, 250, 2000, 0, 0],
  ['2016', 660, 1120, 300, 10, 0, 0],
  ['2017', 1030, 540, 350, 15, 0, 0]
]);

var options = {
  chart: {
 title: 'Total Claims Paid',
subtitle: 'By Health Plan',
  },
  height: 400,
  colors: ['#A1C73A', '#002060', '#E77924'],
  bars: 'vertical',
  isStacked: true,
  series: {
0: {
  targetAxisIndex: 1
},
1: {
  targetAxisIndex: 1
},
2: {
  targetAxisIndex: 2
},
3: {
  targetAxisIndex: 2
},
4: {
  targetAxisIndex: 3
},
5: {
  targetAxisIndex: 3
}
  },
  vAxes: {
1: {
  format: 'decimal',
  viewWindow: {
min: 0,
max: 45
  }
},
2: {
textStyle: { fontSize: 0}
},  
3: {
textStyle: { fontSize: 0}
}
  }   
};

var chart = new 
google.charts.Bar(document.getElementById('columnchart_material'));

chart.draw(data, google.charts.Bar.convertOptions(options));
  }

  
  

  


-- 
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 google-visualization-api+unsubscr...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/5a642828-3532-408b-b881-2993083ae3be%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[visualization-api] Re: Timeline - How to Control Width of Row Label.

['Ray Thomas' via Google Visualization API]

I don't think there is. The column is "dumb" in that everything, HTML, 
escape codes, character codes and so on, are all treated as text, so 
there's no way to control it.

Requests to change this behavior have been made for years before this 
thread was started, for example on GitHub - 
https://github.com/google/google-visualization-issues/issues/690 but it 
must have a very low priority.

Until the behavior is changed it might be the best workaround is to do what 
the original poster hinted at; use some sort of shortened text for the row 
label and use the tooltip to hold the full text. The tooltips are fully 
formattable and can contain hundreds of characters.

Probably not the answer you're looking for and someone else might know a 
lot more about formatting the row labels than I've been able to find.

-- 
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 google-visualization-api+unsubscr...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/1ba3f53b-842d-4792-aac0-b0c3e657e586%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[visualization-api] Re: Timeline Error

['Ray Thomas' via Google Visualization API]

It's probably because your end time Mon Jul 01 2019 00:15:00 is earlier 
than your start time Mon Jul 01 2019 22:25:00


>

-- 
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 google-visualization-api+unsubscr...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/7b6a4651-ad4a-453c-852e-b398bcb03486%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[visualization-api] Re: Timeline chart tooltips.

['Ray Thomas' via Google Visualization API]

Until I can find a better method, what I did was to step through the 
datatable and create a new one with the columns set up in the tooltips help 
of the Timeline page - 
https://developers.google.com/chart/interactive/docs/gallery/timeline#customizing-tooltips.
 
Now I know what I am doing I should be able to customize it a bit more by 
adding images of these people etc. There's a couple of things to try on the 
Tooltips page - 
https://developers.google.com/chart/interactive/docs/customizing_tooltip_content#customizing-html-content

The simple sheet I used - 
https://docs.google.com/spreadsheets/d/1HkdVxj-b8B4N4waRm092LMjKoBrnGRAMp4_hZVuD6kw/edit#gid=275822376
 
The half finished "production" page - 
https://www.indstate.edu/business/history/faculty 
A page of tests - https://www.indstate.edu/business/stuff/timelines - this 
will be deleted some time in the future.

The code I used:

https://www.gstatic.com/charts/loader.js";>


var Faculty_Timeline = (function() {
google.charts.load("current", {packages:["timeline"]});
google.charts.setOnLoadCallback(drawNewTooltipsTimeline);

function drawNewTooltipsTimeline() {

  var query = new google.visualization.Query(
  
'https://docs.google.com/spreadsheets/d/1HkdVxj-b8B4N4waRm092LMjKoBrnGRAMp4_hZVuD6kw/gviz/tq?gid=275822376&headers=1');
  query.send(handleNewTooltipsQueryResponse);
}

function handleNewTooltipsQueryResponse(response) {
  if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + 
response.getDetailedMessage());
return;
  }

  var options = {
  height: 400,
  tooltip: {isHtml: true},
  };

  var dataRaw = response.getDataTable();

  // Get the number of rows in the original datatable
  var rowsRaw = dataRaw.getNumberOfRows();
  // Create new datatable called dataNew
  var dataNew = new google.visualization.DataTable();
  // Add the new columns to dataNew
  dataNew.addColumn({ type: 'string', id: 'Faculty' });
  dataNew.addColumn({ type: 'string', id: 'bar label' });
  dataNew.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': 
true}})
  dataNew.addColumn({ type: 'date', id: 'Start' });
  dataNew.addColumn({ type: 'date', id: 'End' });
  // Start stepping through the original datatable
  var i;
  var j;
  // for each row
  for (i=0;  i < rowsRaw; i++) {
   // Create a new row in dataNew
   dataNew.addRow();
   // for each new column (there are 5 of them). No need to do 
column 1 as that's null anyway
   for (j = 0; j < 5; j++){
if (j==0) { dataNew.setValue(i, j, dataRaw.getValue(i,j)); }
   if (j==2) {  dataNew.setValue(i, j, "
" +  
dataNew.getValue(i, 0) + "
Service: " + dataRaw.getValue(i,1) + " 
to " + dataRaw.getValue(i,2) + " (" + (dataRaw.getValue(i,2) - 
dataRaw.getValue(i,1)) + " years)
"); }
if (j==3) { dataNew.setValue(i, j, new 
Date(dataRaw.getValue(i,1), 0, 0)); }
if (j==4) { dataNew.setValue(i, j, new 
Date(dataRaw.getValue(i,2), 0, 0)); }
   }
  }
  // Destroy dataRaw table
 dataRaw = {};
  var chart = new 
google.visualization.Timeline(document.getElementById('timelineNewTooltips_div'));
  chart.draw(dataNew, options);
}

})();

div.google-visualization-tooltip { padding: 6px; width: 
200px;}


-- 
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 google-visualization-api+unsubscr...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/7e1e1571-19c1-4ab1-b1f4-001e29a881a8%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[visualization-api] Re: Timeline chart tooltips.

['Ray Thomas' via Google Visualization API]

Until I can find a better method, what I did was to step through the 
datatable and create a new one with the columns set up in the tooltips help 
of the Timeline page - 
https://developers.google.com/chart/interactive/docs/gallery/timeline#customizing-tooltips.
 
Now I know what I am doing I should be able to customize it a bit more by 
adding images of these people etc. There's a couple of things to try on the 
Tooltips page - 
https://developers.google.com/chart/interactive/docs/customizing_tooltip_content#customizing-html-content

The simple sheet I used - 
https://docs.google.com/spreadsheets/d/1HkdVxj-b8B4N4waRm092LMjKoBrnGRAMp4_hZVuD6kw/edit#gid=275822376
The half finished "production" page - 
https://www.indstate.edu/business/history/faculty
A page of tests - https://www.indstate.edu/business/stuff/timelines - this 
will be deleted some time in the future.

The code I used:

https://www.gstatic.com/charts/loader.js";>

   
 .header-css {
   font-weight: bold;
   font-size: 11px;
   font-style: italic;
   color: #0047b6;
   border: 3px solid gold;
   height: 12px;
 }
 
 .border-css {
   border: 3px solid lightblue;
 }



var Faculty_Timeline = (function() {
google.charts.load("current", {packages:["timeline"]});
google.charts.setOnLoadCallback(drawNewTooltipsTimeline);

function drawNewTooltipsTimeline() {

  var query = new google.visualization.Query(
  
'https://docs.google.com/spreadsheets/d/1HkdVxj-b8B4N4waRm092LMjKoBrnGRAMp4_hZVuD6kw/gviz/tq?gid=275822376&headers=1');
  query.send(handleNewTooltipsQueryResponse);
}

function handleNewTooltipsQueryResponse(response) {
  if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + 
response.getDetailedMessage());
return;
  }

  var options = {
  height: 400,
  tooltip: {isHtml: true},
  };

  var dataRaw = response.getDataTable();

  // Get the number of rows in the original datatable
  var rowsRaw = dataRaw.getNumberOfRows();
  // Create new datatable called dataNew
  var dataNew = new google.visualization.DataTable();
  // Add the new columns to dataNew
  dataNew.addColumn({ type: 'string', id: 'Faculty' });
  dataNew.addColumn({ type: 'string', id: 'bar label' });
  dataNew.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': 
true}})
  dataNew.addColumn({ type: 'date', id: 'Start' });
  dataNew.addColumn({ type: 'date', id: 'End' });
  // Start stepping through the original datatable
  var i;
  var j;
  // for each row
  for (i=0;  i < rowsRaw; i++) {
   // Create a new row in dataNew
   dataNew.addRow();
   // for each new column (there are 5 of them). No need to do 
column 1 as that's null anyway
   for (j = 0; j < 5; j++){
if (j==0) { dataNew.setValue(i, j, dataRaw.getValue(i,j)); }
   if (j==2) {  dataNew.setValue(i, j, "
" +  
dataNew.getValue(i, 0) + "
Service: " + dataRaw.getValue(i,1) + " 
to " + dataRaw.getValue(i,2) + " (" + (dataRaw.getValue(i,2) - 
dataRaw.getValue(i,1)) + " years)
"); }
if (j==3) { dataNew.setValue(i, j, new 
Date(dataRaw.getValue(i,1), 0, 0)); }
if (j==4) { dataNew.setValue(i, j, new 
Date(dataRaw.getValue(i,2), 0, 0)); }
   }
  }
  // Destroy dataRaw table
 dataRaw = {};
  var chart = new 
google.visualization.Timeline(document.getElementById('timelineNewTooltips_div'));
  chart.draw(dataNew, options);
}

})();

div.google-visualization-tooltip { padding: 6px; width: 
200px;}


-- 
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 google-visualization-api+unsubscr...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/7d5181c5-55d2-46b4-a1c2-3682fa958b7b%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[visualization-api] Re: How to make a table with Google Sheets data using Google Charts API

['Ray Thomas' via Google Visualization API]

An easier way to do what you want to do is to use the examples on 
https://developers.google.com/chart/interactive/docs/spreadsheets and 
https://developers.google.com/chart/interactive/docs/gallery/table

Using the examples you can see you have to load the table package by using 

google.charts.load('current', {'packages':['table']});

You can also then use the methods and options in the second of those pages. 
For example, the showRowNumber option is set to false as a default so that 
column won't show. It is also mobile-friendly, so the table is sortable on 
most devices.

-- 
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 google-visualization-api+unsubscr...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/385c3cd3-0942-4152-8cbb-c316a23b9123%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[visualization-api] Re: Color?

['Ray Thomas' via Google Visualization API]

Andrian is absolutely correct but here's a fuller explanation.

The colors can be defined for any graph either in the Options section or in 
the main draw() method. The help for both is at 
https://developers.google.com/chart/interactive/docs/customizing_charts

The default color array for Google charts contains 32 colors. The first 21 
of them are given at https://github.com/ankane/chartkick/issues/351

If there are more data points than colors then when the entire array is 
used then it starts from the beginning again. This also applies if you 
define your own array.

You can also define your own array anywhere inside the script and use that. 
For example

var clrArray=['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6']; 
colors: clrArray 

This is useful if for example you need to use more colorblind friendly 
colors.

There's several palette generators around, three are the ones at 
http://tools.medialab.sciences-po.fr/iwanthue/ and http://colorbrewer2.org/
 and https://color.adobe.com/create/color-wheel/ 

-- 
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 google-visualization-api+unsubscr...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/7bd794e1-95e8-4170-a5ce-604e0ac3e1a3%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[visualization-api] Re: NOOB - where to get started

['Ray Thomas' via Google Visualization API]

Using a Google Sheet with Google Visualizations is relatively easy. The 
documentation you need is at 
https://developers.google.com/chart/interactive/docs/spreadsheets#creating-a-chart-from-a-separate-spreadsheet
 all 
the other options in the documentation will work, just where the data comes 
from is a bit different than the other examples. 

Getting it work in WordPress is a bit more complicated. There are WordPress 
plugins available, some of which will take the data from your Google Sheet 
- https://wordpress.org/plugins/tags/google-charts/ you can also add your 
own JavaScript to your pages. There are several guides around including the 
one at 
https://premium.wpmudev.org/blog/learn-how-to-add-custom-javascript-to-wordpress-the-right-way/
 

-- 
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 google-visualization-api+unsubscr...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/4c2f6537-2261-4dac-b3cb-b4f0afeb12de%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[visualization-api] Re: How to link the info from texboxes to the google chart (bars)

['Ray Thomas' via Google Visualization API]

I'm not sure if this helps you specifically, but I can think of two ways 
text boxes can be linked to Google Charts. Because of the way some of the 
sites I use are set up, some are CMSs which I have only limited access to, 
so I mostly use Google Sheets to hold the data, but the principles should 
still be same.

You can take the content of a textbox and use that to build a query to your 
data if it supports SQL or something similar. The result from the query 
than can be used to create the chart. The reference for doing that is at 
https://developers.google.com/chart/interactive/docs/queries 

There is also a test: function() that was added some time in 2014 - 
https://groups.google.com/forum/#!topic/google-visualization-api/iOOO4TQfcEE 
and 
which is still not very well documented, but it does work. The JS Fiddle 
associated with that thread is at http://jsfiddle.net/0h7fxsLu/ The only 
reference to it that I know of in the documentation is at 
https://developers.google.com/chart/interactive/docs/reference bit it's 
only mentioned in passing with no real description of what it does, 

I know it works because I use it for a user dropdown search function on 
https://indstate.edu/business/Meis-Center/calendar and you should be able 
to easily adapt it for the text from a textbox.

My page contains a dropdown called audienceDrop and the datatable is called 
MSDC_cal_DataTable. I added an event listener to check if the dropdown 
changes. If it does, it creates a new dateview based the results of test: 
function(), which returns the row numbers of whatever the user is 
interested in finding.

The code is:

audienceDrop.addEventListener("change", function() {
if (audienceDrop.value == "All") {
drawTable(MSDC_cal_DataTable);
} else {
searchVal = audienceDrop.value;

var view = new google.visualization.DataView(MSDC_cal_DataTable);
view.setRows(MSDC_cal_DataTable.getFilteredRows([{
column: 1,
test: function(value) {
return (value == null || value == "Everyone" || value.indexOf(searchVal) > 
-1)
}
}]));
drawTable(view);
}
});
}


-- 
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 google-visualization-api+unsubscr...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/a29631ef-e76b-447c-add8-5c8bc9c66a05%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[visualization-api] Re: Invert rows with columns on DataTable

['Ray Thomas' via Google Visualization API]

As far as I know, the easiest way to do it is to the use the code from 
https://stackoverflow.com/questions/16949993/inverting-rows-and-columns-on-google-area-chart
 
which in rturn comes from Bhuman's code at 
http://captaindanko.blogspot.com/2013/05/transpose-of-google-visualization-data.html

The Stackoverflow page also has a very compact version.

It's stable and works with everything I've tried it on. Here's an example 
of it in use - https://www.indstate.edu/business/metrics

Just click on any of the "Rotate graph data" checkboxes to see it work.

Original version:

  function transposeDataTable(dataTable) {

//step 1: let us get what the columns would be
var rows = [];//the row tip becomes the column header and the rest 
become
for (var rowIdx=0; rowIdx < dataTable.getNumberOfRows(); rowIdx++) {
var rowData = [];
for( var colIdx = 0; colIdx < dataTable.getNumberOfColumns(); 
colIdx++) {
rowData.push(dataTable.getValue(rowIdx, colIdx));
}
rows.push( rowData);
}
var newTB = new google.visualization.DataTable();
newTB.addColumn('string', dataTable.getColumnLabel(0));
newTB.addRows(dataTable.getNumberOfColumns()-1);
var colIdx = 1;
for(var idx=0; idx < (dataTable.getNumberOfColumns() -1);idx++) {
var colLabel = dataTable.getColumnLabel(colIdx);
newTB.setValue(idx, 0, colLabel);
colIdx++;
}
for (var i=0; i< rows.length; i++) {
var rowData = rows[i];
console.log(rowData[0]);
newTB.addColumn('number',rowData[0]); //assuming the first one 
is always a header
var localRowIdx = 0;

for(var j=1; j< rowData.length; j++) {
newTB.setValue(localRowIdx, (i+1), rowData[j]);
localRowIdx++;
}
}
return newTB;
  }


Compact version:

function transposeDateDataTable (dt) {
var ndt = new google.visualization.DataTable;
ndt.addColumn ('string',dt.getColumnLabel(0));
for (var x=1; xhttps://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/efbb3ea0-8d24-4d77-8ebb-d79e2cd96bbf%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[visualization-api] Re: can I get help rearranging the columns in a google chart?

['Ray Thomas' via Google Visualization API]

Are you using a Google Sheet to hold the chart? If you are you can use 
ORDER BY in the query to get the table. The help for that is at 
https://developers.google.com/chart/interactive/docs/querylanguage#order-by 
there's 
more at https://developers.google.com/chart/interactive/docs/spreadsheets 
and here's an example form one of my charts:

var queryString = encodeURIComponent('SELECT A, B, C, D, E order by A');
var query = new 
google.visualization.Query('https://docs.google.com/spreadsheets/d/1kjOTQMAlWc-j6G_XfFUJIzAxuvmyxygQh0q1Dpn4oRU/gviz/tq?gid=0=1='
 
+ queryString); 

You can also sort the table using one of the sort options from the help at 
https://developers.google.com/chart/interactive/docs/gallery/table and see 
https://stackoverflow.com/questions/23764280/sort-in-google-table-chart 

-- 
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 google-visualization-api+unsubscr...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/50f7ec52-e7af-49fd-9f7c-7a28d4a7b344%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[visualization-api] Re: LINK GOOGLE SHEET DATA TO LINE CHART -

['Ray Thomas' via Google Visualization API]

As most of what you need is in your index.html file anyway it may be an 
idea to remove the GS code altogether, or at least the getSpreadsheetData() 
function and use the API's query to connect to and get the data from the 
spreadsheet. There's a complete example at 
https://developers.google.com/chart/interactive/docs/spreadsheets

All you need is your Sheet ID, GID or sheet name and the columns you want 
to import and change the chart type from ColumnChart to LineChart. The API 
is good at importing the data it can find so you may not even need the 
querystring part. In the example 
use 
'https://docs.google.com/spreadsheets/d/1XWJLkAwch5GXAt_7zOFDcg8Wm8Xv29_8PWuuW15qmAE/gviz/tq?gid=0=1';
 
instead 
of 
'https://docs.google.com/spreadsheets/d/1XWJLkAwch5GXAt_7zOFDcg8Wm8Xv29_8PWuuW15qmAE/gviz/tq?gid=0=1='
 
+ queryString); 

This won't work in the example, but could for your sheet. You'll see why if 
you look at the example's sheet at 
https://docs.google.com/spreadsheets/d/1XWJLkAwch5GXAt_7zOFDcg8Wm8Xv29_8PWuuW15qmAE/edit#gid=0


Also in your code you have  The empty div is to hold 
the chart, so you need to change it to  which 
is what you've used later on in your code.

I hope all that makes sense, standard charts are fairly easy to produce 
once you get the hang of what's happening.

-- 
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 google-visualization-api+unsubscr...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/29317085-5561-4ebf-8a01-45317ee25f9e%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[visualization-api] Re: Eleminate RED color in Google Stacked bar charts

['Ray Thomas' via Google Visualization API]

One way is to use the method described at 
https://developers.google.com/chart/interactive/docs/customizing_charts and 
to create your own palette in the graph's options. Google's default palette 
is at https://github.com/ankane/chartkick/issues/351, you can simply paste 
the values into the option and remove the ones that are giving your users 
problems. 

You can completely change the palette using this method to one of the 
colorblind friendly palettes. There's some available in the dropdowns at 
http://tools.medialab.sciences-po.fr/iwanthue/

Depending on your data, you can use a smaller palette. Like Google's 
default palette what happens is if there is more data than colors, then the 
colors are reused starting from the beginning.

This is more less what I did to create the palettes at 
https://www.indstate.edu/business/metrics

Ray

-- 
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 google-visualization-api+unsubscr...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/2cbcd555-2b98-43c9-9e9d-c336db62a464%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[visualization-api] Re: Combining a chart with a table

['Ray Thomas' via Google Visualization API]

A table in Google Charts is drawn in the same way as a graph and can use 
the same data.

Create divs to hold the graph and the table then simply draw them both in 
nearly the same way.

two divs - chart_div and table_div
1 data table - data

Draw the chart and table:

var chart = new 
google.visualization.LineChart(document.getElementById("chart_div"));
chart.draw(data);
var table = new 
google.visualization.Table(document.getElementById("table_div"));
table.draw(data);

-- 
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 google-visualization-api+unsubscr...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/0ae83153-0250-4fd4-a060-670935444589%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[visualization-api] Re: How To Show Dual Dashboard Google Chart In One Page

['Ray Thomas' via Google Visualization API]

So far as I know you can have as many charts on one page as you like, but 
you have to some sort of plan to do it. It is important to remember that 
you can only have one call to the loader.js. You also need to change some 
of the function and variable names so that they are unique and each must be 
drawn in their own div or they will be overwritten.

There's help about this at 
https://developers.google.com/chart/interactive/docs/basic_multiple_charts

I've also rewritten your code so both charts appear and that's at 
http://brisray.com/test/google-venom.htm

To illustrate what can be done, 
https://www.indstate.edu/business/investment-club/portfolio uses one data 
source and the data table is then manipulated with JavaScript to produce 
multiple charts. https://www.indstate.edu/business/metrics uses multiple 
data sources to produce several charts on a page.

Ray

-- 
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 google-visualization-api+unsubscr...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/6a2f0999-f25e-49e6-bd90-7b1a1e9698d5%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[visualization-api] Re: line chart to only display the last "X" number of lines

['Ray Thomas' via Google Visualization API]

It would be nice if there was a query that could do this when the Sheet is 
first read, but as far as I know there is not. One solution is to download 
all the data then work on the datatable before you display it. The methods 
that can be used are at 
https://developers.google.com/chart/interactive/docs/reference#methods

One method that can be used is to find the number of rows in the datatable 
using .getNumberOfRows(), then a little math and use .removeRows(rowIndex,
numberOfRows)

The code then becomes:

var dataTable = response.getDataTable();
num = dataTable.getNumberOfRows()
dataTable.removeRows(0, num - 30)


I have a Google Sheet that contains a little under 4,000 rows, and used 
this method to just show the last 30. An example file is at 
http://brisray.com/test/google-dave.htm to show you it working.

Ray

-- 
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 google-visualization-api+unsubscr...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/4b878223-a902-45f2-adc8-bc74ed62710b%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.