Easy400 home
Public Source


•Line charts

•Radar charts

•Bar charts

Polar, Pie & Doughnut


•Appendix A- Options


CHARTIT, a flexible chart generator

If you did appreciate all the possibilitiesof this chart-building solution, but you would rather like to have something simple and immediate to plug into your existing CGI applications, we suggest to consider the following easy-to-run chart generator, called Chartit.

Chartit is a CGI program, available in library GRAPHIT, that your CGI programs may call to provide graphic charts whenever needed.

The only prerequisite is, of course, that the graphit utility is installed on your IBM i box, along with its prerequisites, and that the required HTTP directives have been added to the HTTP server instance you are using.

You have two ways to invoke CGI program chartit:

  1. by providing a WEB page containing a form to invoke CGI program chartit
  2. by calling CGI program chartit from your CGI program.

Besides, in a CGI program you can use chartit to have a graphic chart included in the web page issued from the CGI itself.

1.Invoke program chartit from a form

Build your form as follow:

<form name=chart method="post"
<input type="hidden" name="xtype" value="chart-type">
<input type="hidden" name="xtitle" value="chart-title">
<input type="hidden" name="xwidth" value="chart-width">
<input type="hidden" name="xheight" value="chart-height">
<input type="hidden" name="xoptions" value="options string">
<input type="hidden" name="xlabels" value="comma-separated labels">
<input type="hidden" name="xdata"
       value="[data-series 1],...,[data-series n]">
<input type="hidden" name="xlegenda"
       value="[legenda 1],...,[legenda n]">
<input type="hidden" name="xlistdata" value="yes/no">
<input type="hidden" name="xtostmf" value="IFS_stream_file_path">
xtype: One of the supported chart types: line, radar, bar, polar, pie or doughnut. Default value is line.
xtitle: A string of letters to be used as title at the top of each chart generated by the program
xwidth: The width in pixel to be reserved for each chart generated by the program. Default value is 600.
xheight: The height in pixel to be reserved for each chart generated by the program. Default value is 450.
xoptions: This is an optional parameter that you may want to use when you need to change some graph defaults, see page Appendix A - Options.
The following is an example of options string for a line chart:
bezierCurve: false, scaleOverride: true, scaleStartValue: 50, scaleStepWidth: 50, scaleSteps: 50
xlabels: A series of string labels to be used on the x-axis of a chart,
example: January, February, ..., December
xdata: Up to 20 comma-separated series of numbers, to be used in making up the charts. Each series must be within square brackets.
Example: [25,7,80,33],[47,32,89,12],[8,18,25,12]
Note. When more than one data series is provided
  • chart types line, radar and bar overlay the results on the same chart
  • chart types polar, pie and doughnut provide a different chart for each data series.
xlegenda: Up to 20 legendas, to explaining the meaning of each data series. Each legenda must be within square brackets.
Example: [2013 sales],[2014 sales],[2015 sales]
xlistata: If yes specified, the numeric data series are listed at the bottom of the appropriate charts.
xtostmf: Leave it blank to have the output sent the the client browser, OR
type path and name of an IFS stream file where the output must be saved (the stream file doesn't have to exist already).

In order to demonstrate the above, this page includes a form to call the GRAPHIT program. In this form all inputs are hidden, except one that lets you select one of the supported chart types. Try it:

Select the type of chart you want to display
and press the Go button:

2.Call program chartit from your CGI program

If you do not want to use a form, you may call program GRAPHIT/CHARTIT from your CGI program in order to provide the desired chart as WEB response. In this case, however, program CHARTIT cannot receive any input variables and it will try instead to receive the input data from HTTP environment variables. Therefore, your CGI program must provide the required HTTP environment variables before calling the CHARTIT program. Environment variables are available through the execution of an entire HTTP CGI transaction.
Environment variables are created through CGIDEV2 procedure putenv(), see this CGIDEV2 documentation page.
To create an environment variable:
putenv('environment_variable_name=environment_variable_value' : qusec);
See the following example:
 /copy CGIDEV2/qrpglesrc,hspecs
 /copy CGIDEV2/qrpglesrc,hspecsbnd
 /copy CGIDEV2/qrpglesrc,prototypeb
 /copy CGIDEV2/qrpglesrc,usec
 /copy CGIDEV2/qrpglesrc,variables3

 * Local procedures
D GoChartit       pr                  extpgm('GRAPHIT/CHARTIT')


    putenv('CHARTIT_XTITLE='+'Our sales last year':qusec);
     'bezierCurve: false, scaleOverride: true, +
     scaleStartValue: 50, scaleStepWidth: 50, scaleSteps: 50';
      [France + Germany + Italy + United Kingdom]':qusec);
    putenv('CHARTIT_XTOSTMF='+' ':qusec);

    GoChartit();     //call pgm GRAPHIT/CHARTIT


That is exactly the code of our test program GRAPHIT/CHARTITEST.
If you want you may execute it now to display its result, just press this link.

3. Embed the graph in the WEB page from your CGI.

If you have a CGI already issuing a WEB page, you can easily embed a "chart-it" graph in that page.
What the program should do is:

  1. Provide in the output buffer the HTML script preceding the graph
  2. Use chart-it to produce the graph to an IFS stream file
  3. Use CGIDEV2 procedure LoadStreamFile() to load in memory the graph stream file
  4. Use CGIDEV2 procedure WrtNoSection() to write this memory to the output buffer
  5. Complete the output HTML
  6. Send the output buffer to the client browser.
Important note- Create the CGI program with ACTGRP(*CALLER).

An example program is available in member EMBEDGRAPH of GRAPHIT/QRPGLESRC.
Press this link to run this example program.

previous page next page