Software Technology Tips

Charts are generally the visual representation of data. Charts are very useful for your statistical analysis of data. With the help of charts you can get your data in a more organized way.

As Servoy is heavily focused on Database Applications, this Tip will help you lot in building a nice Database Application.

 Google Chart at-a-glance

 With the introduction of Google Chart API, you can build different type of charts in very less effort. You do not have to be an expert, just make sure you have formatted your data correctly and pass the Chart URL to the Google Chart Web Service. With the Google Chart API you can build a URL that will dynamically create a chart for you. Google Chart web service returns you a PNG Format Image in response to your Chart Query URL. Previously, the service is used internally for Google Finance, Google Video etc. Now, anyone can use it for FREE. You can create Bar Chart, Line Chart, Radar Chart, Pie Chart, Scatter Plot Chart, Venn diagram, Maps, QR Codes, and Google-o-meters by using Google Chart API.

 

How to Integrate Google Chart in Servoy

 To integrate Google Chart in Servoy is very easy. Google Chart web service returns a PNG Format Image in response to your Chart Query URL. So, you only have to build the Chart URL and parse the URL to get the media content returned. You can do that by using the HTTP Plug-in of Servoy, coming with your default Servoy Installation or you can simply render the returned the image in a HTML Area. Let's see how easy it is to get going with Google Chart in Servoy.

 

Let's start building a simple Pie Chart showing sales of a company for the months of Jan, Feb, Mar & Apr by using Google Chart API.

 A Google Chart API URL must be in the following format:

http://chart.apis.google.com/chart?<parameter 1>&<parameter 2>&<parameter n>

So, our Chart Query URL will be (You can see the Chart, just by clicking on the URL):

 

http://chart.apis.google.com/chart?chs=350x120&chd=t:20,35,20,25&cht=p3&chl=JAN|FEB|MAR|APR

Where:

http://chart.apis.google.com/chart? is the Chart API's location.

  • & separates parameters.
  • chs=350x120 is the chart's size in pixels. (For the Chart size in pixel)
  • chd=t:20,35,20,25 is the chart's data. (For populating Chart Data)
  • cht=p3 is the chart's type. (For drawing Pie Chart)
  • chl=JAN|FEB|MAR|APRis the chart's label (For the months of Jan, Feb, Mar, Apr).

For more information, regarding How to build Google Chart API URL, please browse here.

 

Let us see, how we can integrate the above chart in Servoy.

 

Method-1

 Get the returned Image Media content by using the HTTP Plug-in.

 Create a global variable called "chartImage" as media type and place it in the form. Now, execute the below Servoy script in the "onShow" event of the form.

 //Servoy Code

//Get the Image Media content

var chartURL ='http://chart.apis.google.com/chart?chs=350x120&'

                                      +'chd=t:20,35,20,25&cht=p3&chl=JAN|FEB|MAR|APR';

varglobals.chartImage=plugins.http.getMediaData(chartURL);

  Now, the chartImageData is populated with the image media content returned by the URL. You can view the chart on the form.

 

Method-2

 

Render the returned Image Media in a HTML Area.

 

Create a global variable called "chartHTMLContent" as text type and place it in the form. Set the display type to "HTML_AREA" and uncheck the editable property. Now, execute the below Servoy script in the "onShow" event of the form.

 

//Servoy Code

//Render the returned Image Media

var chartURL ='http://chart.apis.google.com/chart?chs=350x120&'

                                      +'chd=t:20,35,20,25&cht=p3&chl=JAN|FEB|MAR|APR';

globals. chartHTMLContent='<html><head></head><body><tableborder=0cellpadding=0'

                   +        'cellspacing=0align="center"width="100%"><trwidth="100%">'

                   +        '<tdheight="350"align="center"class="normal"valign="middle">'

                   +   '<imgsrc="'+ chartURL +'"alt="PieChart"/></td></tr></table>'

                   +        '</body></html>';

 

Now, the chartHTMLContent, HTML Area should populate with the returned Chart Image from Google Chart web service.


Related Tags:

Servoy

Author: Arup Sahoo

Related Pages

  • Servoy Customization Projects

Servoy

Let us Connect!

iso 9001 QA25 Red Herring STPI D&B Fastest Growing SME 2013 Award zinnov Nasscom

copyright (c) Mindfire Solutions 2007-2014. Login