其它资源 > Creating charts using Zoho Sheet API

Creating charts using Zoho Sheet API

[+]

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 toZoho 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.