Conditionally Apply PatternFormat to Visualization

113 views
Skip to first unread message

Ray Thomas

unread,
Apr 18, 2017, 1:25:46 PM4/18/17
to Google Visualization API
Taking the code at https://developers.google.com/chart/interactive/docs/reference#patternformatter as an example. 

The data looks like this

data.addRows([
 
['John Lennon', 'jo...@beatles.co.uk'],
 
['Paul McCartney', 'pa...@beatles.co.uk'],
 
['George Harrison', 'geo...@beatles.co.uk'],
 
['Ringo Starr', 'ri...@beatles.co.uk']
]);

But suppose the data looks like this:

data.addRows([
 
['John Lennon', ''],
 
['Paul McCartney', 'pa...@beatles.co.uk'],
 
['George Harrison', ''],
 
['Ringo Starr', 'ri...@beatles.co.uk']
]);

The formatter looks like this:
var formatter = new google.visualization.PatternFormat(
   
'<a href="mailto:{1}">{0}</a>');
// Apply formatter and set the formatted value of the first column.
formatter
.format(data, [0, 1]);

Is it possible to conditionally apply the PatternFormat so that if the email data is empty then the formatter is not applied?

I know I could create a new column by stepping through the data, and creating and populating that with either the name or the name and an email link, but then the column sorting is not going to work properly because it's gong to sort on "<" as well as the name.

Daniel LaLiberte

unread,
Apr 18, 2017, 1:53:29 PM4/18/17
to Google Visualization API
What you need to do is not replace the data value itself, but just the formatted representation.  Each cell has two fields, v and f, for the value and its formatted representation.  So set the formatted representation to be your link, but leave the value set to just the text without the link.   Sorting should only apply to the value, not the formatted representation.

Also, did you try using null instead of empty strings ('') for the value that have no email address?

--
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-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/8a3c8237-16e3-4ebf-876c-3e714d396350%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.



--

Ray Thomas

unread,
Apr 19, 2017, 12:06:13 AM4/19/17
to Google Visualization API
Thanks Daniel, I've been rereading the documentation and think I see what I need to do.

Get the total number of rows using

var totalrows = crewDataTable.getNumberOfRows();

I know there are only 5 columns in the original data, and the URL I want is in the last of those. There's only 30 of those  out of 3,100 rows of data.

Step through each row.
Test is there's anything in last column of the current row.
If there is, create the formatted URL text and add that to the first column in the current row using

setCell(rowIndex, columnIndex [, value [, formattedValue [, properties]]]);

where value is going to be undefined so it retains the current value

Once that's done, draw the altered table using just the first 4 columns as the last one is now superfluous.


I was hoping there was a nice simple way of using the formatter, but I don't see why this shouldn't work.

If anyone's interested, this is what its being used for - http://hmsgambia.org/crewlist.htm 

Unless something goes horribly wrong, I should have this done properly in a day or two.

Reply all
Reply to author
Forward
0 new messages