Nav view search

Navigation

Search

The Exchange

The place to download pre-configured tickets, code snippets, and solutions

Back

Google Chart API Example Snippet

In this snippet, we will give an example of how to use the Google Chart API to display a chart on your Virtual Ticket form

Bookmark and Share Share

With the use of the Google Chart API, we can insert dynamic graphs or charts into our Virtual Ticket forms.  First off, it's best to start with the Chart Wizard provided by Google.  With some configuration, you can create a URL:

http://chart.apis.google.com/chart?chxr=1,1,14&chxt=y,x&chs=600x400&cht=lxy&chco=071D4A&chds=1,14,0,100&chd=t:1,2,3,4,5,6,7,8,9,10,11,12,13,14|40,43,20,25,25,34,52,12,23,46,32,53,28,19&chdl=Sales&chg=0,10,1,1&chls=2&chma=5,5,5,25|22&chtt=Last+2+Weeks+Sales



This URL will display an image similar to the following:


If we look at the URL, all sections indicated by red and blue are parameters and values.  Because the remainder of the graph was configured by us using the Chart Wizard, the parameter we are most interested in (and want to be dynamic) is the chd parameter.  In this case, we have our x-values listed first (1,2,3,4,5,6,7,8,9,10,11,12,13,14), a separator (|), then our y-values (40,43,20,25,25,34,52,12,23,46,32,53,28,19).  With a query, we can recreate our data set and concatenate the portions together to dynamically create our graph.  We can then use the Professional Services Library function PS.SetWebImage to set the graph to a box on our form.  Here's an example:

1//@include "database:PS.js" 
2//@include "databae:Base64.js" 
3 
4var pre = "http://chart.apis.google.com/chart?chxr=1,1,14&chxt=y,x&chs=600x400&cht=lxy&chco=071D4A&chds=1,14,0,100&chd=t:1,2,3,4,5,6,7,8,9,10,11,12,13,14|"; 
5var data_set = []; 
6var post = "&chdl=Sales&chg=0,10,1,1&chls=2&chma=5,5,5,25|22&chtt=Last+2+Weeks+Sales"; 
7 
8// Your query here 
9var q = RunSQLQuery("SELECT Total FROM [view ...] WHERE ... ORDER BY ..."); 
10for(var i=0;i<q.length;i++){ 
11    data_set.push(q[i].Total); 
12} 
13 
14// Set the box with the ID 'Sales_Chart' to the chart image from your URL
15PS.SetWebImage(pre+data_set.join(",")+post, 'Sales_Chart'); 


Use this format to create your own charts and graphs.


Tags:

API, Custom Queries, Professional Services LIbrary, virtual ticket

Last Modified:

2011-12-15

by

Ken Valley