Google Visualization API Paging Symbols

Google Visualization API for Table has an interesting property "Paging". When enabled , ( by setting the "page" property to "enable") it brings up nice little arrows at the bottom of the table for navigation. This is very handy and I like this feature very much, as this does not make your table grow vertically and can fit into the space you are providing on your web page. The control buttons for Paging is shown below

Google Visualization API - Table - Standard Paging Symbols

In this post, we will see how to customize the Paging buttons to make them read like 'Previous', 'Next' instead of the standard arrow styles. To do this, we will make use of a configuration property called "pagingSymbols". With Paging Symbols, you can define the text for "Previous" and "Next" buttons on the table as shown below when invoking the "draw" method;

visualization.draw(data,{allowHtml: true,page : 'enable',pageSize :'5',sortAscending: 'True',width: '728',pagingSymbols: {prev: 'Prev', next: 'Next'}});

The one highlighted in green are the properties and the one in yellow are equivalent text that needs to be replaced. The control buttons in the table will now read 'Prev' and 'Next' instead of the standard "arrows". This is shown below

Google Visualization API - Paging Symbols - Customized Text

In a recent release note on this Visualization API, I read that pagingSymbols also supports images. I thought of giving it out a try and created two image files 'Previous.jpg' and 'Next.jpg' as shown below.

Previous Button for Visualization API

Next Button for Visualization API

We now define two Javascript variables that will have a HTML definition for the image location. An example is shown below

                  var img1='<img height="30" width="60" src="Previous.jpg">';

                  var img2='<img height="30" width="60" src="Next.jpg">';

In the draw method , we can now substitute these variables inside pagingSymbols and use them instead of regular text. As an example

visualization.draw(data,{allowHtml: true,page : 'enable',pageSize :'5',sortAscending: 'True',width: '728',pagingSymbols: {prev: img1, next: img2}});

When the table is rendered using this setup, the Previous and Next button will appear as images. This is shown in the screenshot below

You can always adjust the dimensions of the image so that it suits to your table. This feature would be useful to those who are looking for changing the default arrows and add some images in that position. In this short tutorial, we learned how to use pagingSymbols option in the draw method, to use both substitution text and images.  You can also see the substitution text in action, in the related post section of this blog post. We will discuss more configuration options for Google Visualization API in the upcoming posts.