Graphist

Graphist Samples

The following samples provide graphs, the image tags used to produce them, and explanations of each parameter. These images are archived products of Graphist; they were not dynamically created just now. Each graph's colored border is part of this page, not the graph.

Sample 1

one data set of three points

Only data points are provided. All graph characteristics are based on default settings. We see (-5,-5) plotted in the lower left corner, (0,0) plotted at the center, and (5,5) in the upper right corner, each connected by a line segment.

Note that, for your installation, the src parameter may work as shown or may require a prefix to qualify the location of your installation of Graphist. That prefix will be the same as though Graphist were a static image being included in the page, from the directory where Graphist is installed. Something like http://www.yourdomain.com/some/where/ or ../extras/ may be required.

Sample 2

three data sets

For easier reading, the sample image tag includes line breaks and omits many of the data points. Here is a sample of the complete src parameter, fit for copying.

iw=250&ih=275
Set the overall image width to 250 pixels and the height to 275 pixels.

ds=-3,-0.42,...
Graph three data sets. Ellipses [...] indicate values omitted here, for brevity.

dsl=sin(x)%20*3;x%20*x%20-3;dodecagon
Set the data set labels to the names of the functions used to create the plotted data. Graphist does not execute mathematical functions. The values were calculated and provided as constants. The value is escaped to retain a proper URL.

xbl=-3.8&xbu=3.8
Set the x-axis to range from -3.8 to +3.8. Without this declaration, it would range from -3 to 3, based on the provided data.

ybl=-4&ybu=4
Set the y-axis to range from -4 to 4. Without this declaration, it would range from -3 to 6, based on the provided data.

xgi=1&ygi=1
Give both axes gridlines at increments of 1 unit of value.

dsp=8;0;8
The first data set, sin function, is given a bar size of 8. The second data set's point size is 0 for none, and the dodecagon's point size is set to 8.

dsr=b
Render the first data set as a bar graph. The others default to line graphs.

dsw=0;3;0
The first data set is given a line width of 0 for none. (Otherwise, lines would connect the ends of the bars.) The second data set is given a line width of 3. The dodecagon is given a line size of 0 for none.

hh=15&htfs=2&ht=Graphist%20v1.0
Provide a header of 15 pixels. Use font size 2 to tell what made the graph.

fh=10&ft=11Jun7
Provide a footer of 10 pixels. Use it to publish the date of production.

width="250" height="275"
The overall image dimensions are 250x275. These are standard IMG tag declarations, not Graphist parameters. This declaration allows the web browser to allocate space on the page before receiving the image.

Sample 3a

four data sets, dull

For easier reading, the sample image tag includes line breaks and omits many of the data points. Here is a sample of the complete src parameter, fit for copying.

ds=4,32.67,...
We're graphing four data sets. Ellipses [...] indicate values omitted here, for brevity.

Sample 3b

four data sets, sharp

The data is exactly that of Sample 3a. We know something that Graphist doesn't: the data is of monthly percentages over a four year period. Instead of letting Graphist scale the plot, we're taking some control in order to pretty it up.

For easier reading, the sample image tag includes line breaks and omits many of the data points. Here is a sample of the complete src parameter, fit for copying.

ibgc=255,255,255
Set the background color to white.

ds=4,32.67,...
We're graphing four data sets. Ellipses [...] indicate values omitted here, for brevity.

dsl=2004;2005;2006;2007
The data set labels are years for which the data was compiled.

lbgc=221,221,221
The legend background color is set to a medium light gray.

ybl=0&ybu=100
Force the y-axis range to be 0-100, as any good percentage will be.

ygi=10
Provide y-axis gridlines at each increment of 10 percentage points.

xbl=0.3&xbu=12.9
Force the x-axis to range from something less than 1 to something more than 12. Though the months are only from 1 through 12, the extra value space becomes padding for full display of the January and December data points.

xgi=1
Provide x-axis gridlines for each month.

Sample 4

three data sets of four points each

For easier reading, the sample image tag includes line breaks. No values are omitted here. Here is a sample of the complete src parameter, fit for copying.

ds=-5,-3,-3...
Graph three data sets.

iw=260
Set the overall image width to 260 pixels.

ih=220
Set the overall image height to 220 pixels.

xbl=-6&xbu=3
Set the x-axis to range from -6 to 3. Without these declarations, the range would be -5 to 2, based on the provided data.

ybl=-4&ybu=6
Set the y-axis to range from -4 to 6. Without these declarations, the range would be -3 to 4.5, based on the provided data.

xgn=9
Divide the x-axis into 9 regions.

ygi=1
Show y-axis grid lines for each increment of 1 value unit.

dsr=b;b;b
Render each data set as a bar graph.

dsp=12;8;4
Set the data set point sizes with descending values to provide nested bars. Graphist does not offset bars that share a value of x.

dsw=0;0;0
Avoid connecting the bar tops with lines.

Sample 5

five data sets

Graphist will plot any set of points, in the sequence they are provided. Here is the parameter list for Mr. Stickman's face. Its parsing is left as an exercise for the curious.

Clear enough? If not, please let us know via .

last update: 18-Jun-2007 6:03 PM

Graphist: 2D Graphing via PHP