Graphs From Vvidget Server
Author: Lance
Web Site: www.vvi.com
Vvidget Server is a multi-threaded asynchronous graphing server that runs on Mac OS X 10.5 in 64 bit mode with hardware-accelerated graphics. This article explains some basics on how to use that server and how EDU customers can setup their own Vvidget Server for free.
To use Vvidget Server your application inputs data in the appropriate format and the server sends your application a graph. The easiest input format to demonstrate is a HTML FORM, which is shown in the next section. The other input format shown is a Cocoa-based format used for desktop graphing applications. But, first lets look at a common input serialization.
To make a graph in a web application (like the graph generated when executing the form example below) that application would serialize some HTTP content like the following:
http://www.vvidget.org/cgi-bin/nph-pvs?pvs_version=1&image_maker=chart&chart_type=1
&chart_format_type=1&image_width=575&image_height=300&image_contact=demo%40vvi.com
&title=Make%20A%20Graph%20At%20MacResearch&x_title=X-Axis%20Title&y_title=Y-Axis%20Title
&data_1=1.25%202.75%203%20.25%204.75%202.75&data_2=6.25%202.75%208%20.25%209.75%202.75
&image_output_type=2&chart_subtype=0and send a HTTP request to the Vvidget Server for a resulting image or send the URL to the end user browser which then requests the graph.
So, programming a graph into a web application is tantamount to constructing a serialization of key value pairs into a string with the usual escaped encodings of HTML. This way of programming shows a good level of indirection and distributed processing. For example, note how the web application retrieves the data and forms the input for the Vvidget Server, but the web browser makes the request upon the graphing server for the actual graph. This form of distributed processing becomes more evident when the web app server and graphing server are running on different computers and the web app server communicates directly with the graphing server to maintain state information behind the scenes. But, that is beyond the scope of this tutorial.
Forms
Below is a form source code. When executed, your application is your own browser which will package up the HTTP request (with content like that in the example above) and send it to the Vvidget Server when the submit button is clicked which will then return a graph to your web browser.
But, that is too easy, so you may wish to skip to the next section to read about a Cocoa interface.
<FORM NAME="TEST1" ACTION="http://www.vvidget.org/cgi-bin/nph-pvs" METHOD="GET" TARGET=LineGraphFrame>
<INPUT TYPE="hidden" NAME="pvs_version" VALUE="1">
<INPUT TYPE="hidden" NAME="image_maker" VALUE="chart">
<INPUT TYPE="hidden" NAME="chart_type" VALUE="1">
<INPUT TYPE="hidden" NAME="chart_format_type" VALUE="1">
<INPUT TYPE="hidden" NAME="image_width" VALUE="575">
<INPUT TYPE="hidden" NAME="image_height" VALUE="300">
<INPUT TYPE="hidden" NAME="image_contact" VALUE="demo@vvi.com">
<INPUT TYPE="hidden" NAME="string_encoding_type" VALUE="1">
<font size="1">Main Title:</font><BR>
<INPUT TYPE="text" NAME="title" SIZE=85 VALUE="Make A Graph At MacResearch">
<br>
<font size="1">X Title:</font><BR>
<INPUT TYPE="text" NAME="x_title" SIZE=85 VALUE="X-Axis Title">
<br>
<font size="1">Y Title:</font><BR>
<INPUT TYPE="text" NAME="y_title" SIZE=85 VALUE="Y-Axis Title">
<br>
<font size="1">Curve 1 Data (Sequence of x y values):</font><BR>
<INPUT TYPE="text" NAME="data_1" SIZE=85 VALUE="1.25 2.75 3 .25 4.75 2.75">
<br>
<font size="1">Curve 2 Data (Sequence of x y values):</font><BR>
<INPUT TYPE="text" NAME="data_2" SIZE=85 VALUE="6.25 2.75 8 .25 9.75 2.75">
<TABLE BORDER="0" CELLPADDING="1" CELLSPACING="0" WIDTH="100%" class="BodyNormal">
<TR>
<TD VALIGN=TOP ALIGN=LEFT>
<font size="1">Output Type:</font><BR>
<SELECT CLASS="bodytext" NAME="image_output_type" SIZE="1">
<OPTION VALUE="1">PNG</OPTION>
<OPTION VALUE="2" SELECTED>JPEG</OPTION>
<OPTION VALUE="3">GIF</OPTION>
<OPTION VALUE="1005">PDF</OPTION>
</SELECT>
</TD><TD VALIGN=TOP ALIGN=LEFT>
<font size="1">Graph subtype:</font><BR>
<SELECT CLASS="bodytext" NAME="chart_subtype" SIZE="1">
<OPTION VALUE="0" SELECTED>Linear</OPTION>
<OPTION VALUE="1">Semi-Log</OPTION>
<OPTION VALUE="2">X-Log</OPTION>
<OPTION VALUE="3">Log-Log</OPTION>
</SELECT>
</TD><TD VALIGN=TOP ALIGN=LEFT>
<font size="1">Submit:</font><BR>
<INPUT TYPE="submit" VALUE="Make Line Graph" CLASS="bodytext" NAME="make_chart_submit">
</TD>
</TR>
</TABLE>
</FORM>
<IFRAME NAME="LineGraphFrame" NORESIZE WIDTH=600 HEIGHT=325 FRAMEBORDER=0 >
</IFRAME>Cocoa Interface
Vvidget Server also has a desktop application interface. The following code makes a linear graph:
#import <Cocoa/Cocoa.h>
#import <VvidgetCode/VvidgetCode.h>
- (void)updateGraph
{
id input_string_constructor = [myGraph get_VC_input_string_constructor];
NSMutableString *data_string = [NSMutableString stringWithCapacity:1024];
double x, y;
int point_index;
// Make the data string which is a sequence of x y pairs (space delimited) ...
for(point_index = 0; point_index < 50; point_index++)
{
x = point_index;
y = log10((point_index)/6.0);
[data_string appendFormat:@"%g %g ", x, y];
}
// Update the graph using key/value pairs ...
[input_string_constructor VC_reset];
[input_string_constructor VC_append_key:"chart_type" unsigned_value:1];
[input_string_constructor VC_append_key:"chart_subtype" unsigned_value:0];
[input_string_constructor VC_append_key:"chart_format_type" unsigned_value:1];
[input_string_constructor VC_append_key:"title" string_value:@"Make A Graph At MacResearch"];
[input_string_constructor VC_append_key:"x_title" string_value:@"My X Title"];
[input_string_constructor VC_append_key:"y_title" string_value:@"My Y Title"];
[input_string_constructor VC_append_key:"data_1" string_value:data_string];
// Display the graph ...
[myGraph VCN_update_using_input_string_constructor];
[myGraph display];
}
As an example of the utilitarian nature of the key value definitions, changing the chart_subtype value to 1 makes a semi-log graph. That can be inferred from the forms example above because the key value definitions are the same for desktop and web applications, which helps with reusability.
The graph is placed in the view named myGraph which is assigned as an outlet in an Interface Builder nib file. Or to describe the construction: Drag a VvidgetCodeView from the Vvidget Code Kit Library in Interface Builder onto your Application's window and assign the outlet of a controller to that view. Or, alternatively, one can subclass the view [class] and incorporate the graph generation within the view [class instance] itself in the appropriate method and dispense with the controller.
Of course, the values of x and y can come from other computations or queries such as from a database. The code above can be called in a loop to animate the graph if needed.
Full Programming Examples
There are too many possibilities to show the breadth of Vvidget Server in this short tutorial however I would like to mention a few things: When incorporating a graph in a web site, the data entry and serialization is done by a web application. That application can be written in nearly any language, PHP and Java are some good languages, and use a variety of libraries such as J2EE, JDBC, WebObjects, .NET, etc. The desktop version is normally written using Xcode, but can be written with command line tools as well. The graph view can be instantiated with or without a nib file. Vvidget also has a command line tool so it can be driven via scripts that use stdio. Graphing is quite fast, as an example see the Wizards in Vvidget Builder which use code sections very similar to what is shown above and communicates with a Vvidget Server on the desktop computer for graph results.
Notice how the fonts or other graphical properties of the graph are not specified. They are all defined in a template constructed by the GUI tool Vvidget Builder. That gives easy access to thousands of properties and a discussion of that is beyond the scope of this tutorial. However, you can download the template builder and experiment with it by clicking: http://www.vvidget.org/builder/download
Conclusion
Vvidget Server has many different interfaces. Some are HTTP connection compliant and accept HTML serialization while others are custom unix socket interfaces where the input is binary. Any which way, the client server architecture of Vvidget Server robustly solves the problem of making a graph. Optionally, the server can be directly programmed via its frameworks which provide a foundation for any type of report server and can suit the needs of publishing and business reporting, for example, as well as the graph feature shown in this tutorial.
Additional Resources
You can read the Vvidget Server reference manual at this URL: http://www.vvidget.org/service/manual.
If you are an EDU customer you can setup your own Vvidget Server (for free!). There are particular requirements for the server: It must be at a static routed IP address, have a public DNS name and run Mac OS X 10.5 (client or server). To get started contact: sales@vvi.com.
