Overview
Zoho Creator charting functionality helps you to quickly and easily
analyze data in a visual format using a variety of graph types. To
create charts with data from multiple ZC forms or to display grouped
data, you can use the chart API supported by Zoho Sheet. The Sample
Application named "Student Management"
demonstrates this functionality. In this application, we have defined a
function called "getChartUrl" (you can see the function used in the
application under the Script --> Functions tab in edit mode), using which the required data is dynamically submitted to Zoho Sheet API, which creates the required chart as an image.
About the application
The Student Management application comprises of the following forms :
- Student Form to enter the name of the students and the country they belong to.
- Course Form to enter the name of the courses offered.
- Student Course Form to enter the course details enrolled by each student.
The Country Chart view displays a 3D Bar Chart which depicts the total number of students enrolled in each course for the selected country, as shown in the image below. The bar chart is created by passing the required
data as parameters to the Zoho Sheet chart API.
Steps in creating the chart using Zoho sheet API
1. The function getChartUrl() given below, returns the
URL of the graph based on the values passed to the function. To copy this
function to your application,
- Select the Script -> Function tab from the Edit mode of
your application.
- Select the option Write script / Copy sample function
- Copy- Paste the function given below, to the text area and click
Create the Function, to add the function to your application.
- The function will be listed in the Functions tree under Default
Namespace.
functions
{
string getChartUrl(string country)
{
courseRecs = Course [ID > 0];
courseList = courseRecs.Name.getall();
graphType = "BAR3D";
width = "300";
height = "300";
data = "Courses" + "," + "Students Enrolled";
for each key in courseList
{
cc = count(Student_Course[(Student.Country == input.country && Course == key)]);
data = data + "%0A" + key + "," + cc;
}
url = (("http://sheet.zoho.com/zohochart.do?xlabel=Courses&ylabel=Students&title=Students Enrolled in Different Courses in " + input.country) + "&charttype=") + graphType;
url = url + "&width=" + width + "&height=" + height;
url = url + "&chartdata=" + data;
return url;
}
} |
API requests are made by sending a request
to the following address: http://sheet.zoho.com/zohochart.do The
chart API will return the bytes of the chart object.
Parameters to be passed to the Chart API
|
Parameter Name
|
Description
|
Default Value |
| CHARTDATA |
(required) Chart data values in CSV format |
-- |
| GENPUBLICCHART |
(optional) true/false |
Default value : true |
| SHOW_LEGEND |
(optional) true/false |
Default value : true |
| GRAPHTYPE |
(optional) ChartType(BAR,PIE,LINE,....etc)
Refer Supported Chart Types.
|
Default value : BAR |
| CHART_TITLE |
(optional) Title
of the chart
|
-- |
| HEIGHT |
(optional) Height of the chart |
Default value : 500 |
| WIDTH |
(optional) Width of the chart |
Default value : 500 |
| CHART_X_LABEL |
(optional) X-Axis label |
-- |
| CHART_Y_LABEL |
(optional) Y-Axis label |
-- |
| LABEL_FORMAT |
(optional) Chart label format(V,P,L,L_P) , |
Default value : 'N' |
2. Create a HTML view and call the getChartUrl() function in your HTML view with
the required parameters, to create the chart. For example, in the following
HTML view named "CountryChart" ,
- the Select_Country form (stateless form) is embedded to select the country.
- the function getChartUrl is called with the required parameter (country).
- the chart URL returned by the function is displayed as an image.
htmlpage CountryChart(country)
<%{%>
<table width="100%">
<tr><td align="center">
<div elName='zc-component' formLinkName='Select_Country' params='zc_Header=true&zc_SuccMsg=Country Selected&zc_SubmitVal=Submit&zc_ResetVal=Reset'>Loading Form...</div>
</td></tr>
<%if (input.country != null)
{
if (input.country != "")
{
enrolmentChart = thisapp.getChartUrl(input.country);%>
<tr><td>
<table cellpadding=0 cellspacing=0 width="100%"><tr><td width="100%"><img src='<%=enrolmentChart%>'/></td></tr></table>
</td></tr>
<%}
}%>
</table>
<%}%> |
Supported Chart Types
- BAR, STACKEDBAR, STACKEDBAR_PERCENT, BAR3D, STACKEDBAR3D, STACKEDBAR3D_PERCENT,
-
COL, STACKEDCOL, STACKEDCOL_PERCENT, COL3D, STACKEDCOL3D, STACKEDCOL3D_PERCENT,
-
XYLINE,
XYLINE_SHAPES, STEPCHART, PIE, PIE3D, POLAR, SCATTER, XYLINE_SCATTER,
XYLINE_SCATTER_SHAPES, XYAREA, XYSTACKEDAREA,
- SPIDERWEB, BUBBLECHART, OHLCCHART, CANDLESTIC.
When you say
ChartType(BAR,PIE,LINE,....etc)
Where can I find that etc?
Where is there a complete list of chart types that can be used in this way?
Thanks