Dynamically Creating a Graph

The technique of passing information from the browser to the web server via a common gateway interface can be used to dynamically create a graph. The CGI from the previous example can be further developed to invoke a graph template. The term graph template refers to reusable code which makes a graph. GsharpWE graph templates are written in GSL, and create graphical objects and set properties belonging to these objects, thus defining a graph layout.

Let's begin this example by extending the HTML form so that it prompts for an additional parameter, the graph type. The HTML defining the form can be modified as follows to include a selection list: 

<form method="post" action="/Gsharp-bin/gs_hello2.gsw">
<b>Please type your name: </b><input type="text" size=20 name="name">
<b>Graph Type: </b><select name="graph">
  <option value="bar">Bar
  <option value="line">Line
  <option value="pie">Pie
        </select>
<input type="submit" value="Enter">
</form>
Next, a graph template is needed. GsharpWE can make a default graph from randomly generated data using these GSL statements: 
  create Viewport page_1.viewport_1 ;
  create Domain page_1.viewport_1.domain_1 ;
  create Graph page_1.viewport_1.domain_1.graph_1
     ( XuNyData = "rnd(10)"
     );
Perhaps you have noticed that this GSL does not make use of the new form information. Recall from the previous discussion of form processing that GsharpWE will automatically create form variables. In this case, a variable named FORM_graph will be created and set to the value of the form selection. This information can be directly used by the GSL create statement to set the graph type: 
  create Graph page_1.viewport_1.domain_1.graph_1
   ( XuNyData = "rnd(10)",
     XuNgraphType = FORM_graph
   );
The GSL script can also contain logic based on the form variables. For example, the layout of the graph can vary according the graph type selected: 
  if (FORM_graph="line) then
    set page_1.viewport_1.domain_1.graph_1
     ( XuNsmoothingFactor = 9,
       XuNcolor = 2
     );
  elif (FORM_graph="bar") then
    page_1.viewport_1.domain_1.graph_1.XuNcolor = 4;
  endif
Unlike the GSL from the first CGI example which output HTML, this GSL creates a graph. To keep these two operations seperate, the graph template can be defined as a GSL function:

Check Point 

  function makeGraph()
     if not exists(WORK.FORM_graph)  FORM_graph = "line";
     create Viewport page_1.viewport_1;
     create Domain page_1.viewport_1.domain_1;
     create Graph page_1.viewport_1.domain_1.graph_1
      ( XuNyData = "rnd(10)",
        XuNgraphType = type
      );
     if (FORM_graph="line") then
       set page_1.viewport_1.domain_1.graph_1
        ( XuNsmoothingFactor = 9,
          XuNcolor = 2
        );
     elif (FORM_graph="bar") then
        page_1.viewport_1.domain_1.graph_1.XuNcolor = 4;
     endif
   endfunction
Notice in the above function that a default setting for graph type has been introduced (type = "line") instead of using the form data directly. This is a coding style that makes template testing easier, since the template will still run if no form input is provided.

Generating an Image

Once the graph template is defined, the next step is to output the graph as a web-compliant image.

The Gsharp Web Edition includes a library of GSL functions, libhtml.gsl, for commonly used actions such as generating HTTP and HTML headers and for creating web-compliant images. We can use one of these functions to create in image from the graph template. For more details on libhtml.gsl see libhtml.gsl

Before a GSL library function can be used, the library must be read in. This can be done with the GSL include statement, which should appear in the main portion of the GSL script before the function is referenced. 

  include "$UNIDIR/lib/libhtml.gsl";
$UNIDIR is an environment variable known to GsharpWE, and points to the full path where GsharpWE has been installed. The libhtml library contains the GSL function make_image, defined as: 
  make_image(float xres, float yres, string filename)
The format of the image is determined by the extension part of the filename: 
  ".gif"  - GIF image format
  ".jpg"  - JPEG image format
  ".png"  - PNG image format
  ".java" - Java source
Note - PNG is a new image format adopted by the World Wide Web Consortium, W3C, as an alternative to GIF. Unlike GIF, PNG is based entirely on open standards. Depending on the vendor and version number of your browser, PNG may or may not be supported.

Adding this function call to the template will generate an image of the graph: 

  make_image(400, 300, "$UNIDIR/example/hello2.gif");
However, using a fixed image name can give problems if the template is run repeatedly. Most browsers cache a displayed image. This can cause an old version of the image to still be displayed even though a new version has been created. To prevent this from occurring, a unique name can be dynamically created using the getpid() function: 
  image = "/GsharpWE/tmp/hello2"+getpid()+".gif";
Check Point

Here is the final GSL which includes all of the above modifications. The source for this example can be found in example/GsharpWE/misc/hello2.gsl. 

  function makeGraph()
     string type;
     type = "line";
     if exists(WORK.FORM_graph)  type = FORM_graph;
     create Viewport page_1.viewport_1;
     create Domain page_1.viewport_1.domain_1;
     create Graph page_1.viewport_1.domain_1.graph_1
      ( XuNyData = "rnd(10)",
        XuNgraphType = type
      );
     if (type="line") then
       set page_1.viewport_1.domain_1.graph_1
        ( XuNsmoothingFactor = 9,
          XuNcolor = 2
        );
     elif (type="bar") then
        page_1.viewport_1.domain_1.graph_1.XuNcolor = 4;
     endif
  endfunction

  include "$UNIDIR/lib/libhtml.gsl";
  string image; image = "/GsharpWE/tmp/hello2"+getpid()+".gif";
  /*
   * create a graph and image
   */
  makeGraph();
  make_image(400, 300, "$UNIDIR/example/" + image);

        /*
         * write out HTML
   */
  id = 1;
  fwrite(id, "<HTML><BODY BGCOLOR=#FFFFFF>");
  fwrite(id, "<TITLE>GsharpWE Greeting</TITLE>");
  fwrite(id, "<CENTER><FONT SIZE=+4><B>");
  fwrite(id, "Hello ",FORM_name);
  fwrite(id, "</B></FONT><P>");
  fwrite(id, '<IMG SRC="',image,'">');
  fwrite(id, "</CENTER>");
  fwrite(id, "</BODY></HTML>");
If you have installed the Gsharp Web Edition then you can try running this example using the form below:
Please type your name: Graph Type:

Return to Gsharp Web Edition User Guide