Make your own free website on Tripod.com


ChartMaker Applet


ChartMaker is an applet that can create a variety of charts, including pie charts, bar charts, and line charts. The interface is via JavaScript so that charts can be modified dynamically to reflect changes in the underlying data. Here are simple examples of the three chart types that are supported:

Line Chart Example:
Get yourself a java-enabled browser.

Bar Chart Example:
Get yourself a java-enabled browser.

Pie Chart Example:
Get yourself a java-enabled browser.

Here is the HTML code used to create the three (3) examples above:
In addition to the above HTML code, three (3) javascript functions, placed within the <HEAD> and </HEAD> tags, were used to set the chart attributes:
The final step in creating the above examples was to handle the "OnLoad" event by calling the above javascript functions within the <BODY> HTML tag as follows:

Applet Parameters


ChartMaker supports the following applet parameters:

Author and Origin (new to version 1.04)
Set Author = "Mark Ganson" and Origin = "http://www.bigfoot.com/~java4free" in order to enable the DisableCaptionLink param described below.

DisableCaptionLink (new to version 1.04)
Set to "true" or "1" to disable the "Powered by Java4Free" caption link. Note that you must first set the Author and Origin params as described above in order for this param to work.

Title
The string to be displayed across the bottom of the applet. This property can also be set via JavaScript using the setTitle() public method.

BGColor
The background color of the applet. The default is ffffff (white). The value for this parameter must be a six-string hexadecimal value in the form of rrggbb where the rr is the red component, the gg is the green component, and bb is the blue component.

FGColor
The foreground color of the applet, which includes all the text and borders to be drawn. The value for this parameter must be a six-digit hexadecimal value in the same form as the BGColor parameter above.

FixedChartWidth (new for version 1.03)
Fixes the chart width to the specified integer value. By default, ChartMaker will set the width of the chart to the same value as the height, which is calculated by subtracting the overall applet height by the heights of the title and caption images at the top and bottom of the applet, creating a perfectly square chart and leaving any excess room for the legend. By setting the FixedChartWidth param, you are effectively taking room away from (or adding room to) the legend area on the right side of the applet since the applet will allocate whatever room remains for the legend area.

HideVerticalLines (new to version 1.03 - Line Charts Only)
If set to "true" or "1" will cause vertical lines in line charts to NOT be drawn. The default is to draw the lines.

ShowBorder
A boolean value, with "true" or "1" being interpreted as true and all other values being interpreted as false. Default is false.

LegendFontName
The font to be used in the legend area, which is always to the right-hand side of the applet. This value can be "Courier", "Helvetica", or "TimesRoman".

LegendFontStyle
The style of the font to use in the legend area. Can be "bold", "italic", "plain", or "bolditalic".

LegendFontSize
The size (in points) of the font to be used in the legend area. The lower this value, the smaller the font will be. Larger fonts are easier to read, whereas more information can be displayed with smaller fonts.

Following parameters applicable to Bar Charts and Line Charts only:

ChartFontName
Similar to the LegendFontName parameter, except this applies to the fonts in the chart area rather than the legend area.

ChartFontStyle
Similar to the LegendFontStyle parameter, except this applies to the fonts in the chart area rather than the legend area.

ChartFontSize
Similar to the LegendFontSize parameter, except this applies to the fonts in the chart area rather than the legend area.

ChartType
The type of chart to create. Can be either "pie", "line", or "bar". This property can also be set via JavaScript using the public method setChartType() public method.

ChartLeftMargin and ChartBottomMargin
Set the left and bottom margins, respectively, for the bar and line chart types in pixels. The higher these values, the more room is reserved for the range and segment/bar labels for these chart types. The default values will be appropriate in most instances.


JavaScript Public Interface



public void setTitle(String strTitle);
Sets the title to the String strTitle. The title is the text displayed across the bottom of the applet. Example: javascript:document.ChartMakerPieExample.setTitle('A pie chart example');

public void setChartType(String strChartType);
Sets the chart type to either "pie", "bar", or "line". Should usually be followed with calls to public void clearChart() and public void clearLegend().

public int setChartRange(double dLowRange, double dHighRange, double dIncrement, int nNumBarsParam);
This method is only for bar charts and line charts.
The parameters, dLowRange and dHighRange are the low and high ranges that the bar charts and line charts can display. These values can be either positive or negative, but dHighRange should always be higher (more positive) than dLowRange. The parameter dIncrement is the increment between range (horizontal) lines in the bar charts and line charts. The parameter nNumBars is interpreted as the number of bars (and blank separator bars) for bar charts and the number of line segments for line charts. The applet uses this parameter to determine how many verticle lines and how for apart to set them for line charts and how wide to make the bars and separator bars for bar charts. The return value for this method is an integer value representing the number of range (horizontal) lines the applet will create. For example: var numRangeLines = document.ChartMakerLineExample.setChartRange(-100.00, 300.00, 50.00, 4); was used to set the range for the Line Chart example at the top of this page.

public void setRangeLabel(int nWhichLine, String strLabel);
This method is only for bar charts and line charts.
Sets the range line label for the range line nWhichLine to the String strLabel. The range lines are the horizontal lines in bar charts and line charts. The range labels are the labels extending upwards along the left-hand side of the bar charts and line charts. If the range line represents a value that is below zero (negative), use a negative value for the nWhichLine parameter. For example, the range labels for the line chart at the top of this page were set with the following method calls:

document.ChartMakerLineExample.setRangeLabel(-2, '-100.00');
document.ChartMakerLineExample.setRangeLabel(-1, ' -50.00');
document.ChartMakerLineExample.setRangeLabel(0, ' 0.00');
document.ChartMakerLineExample.setRangeLabel(1, ' 50.00');
document.ChartMakerLineExample.setRangeLabel(2, ' 100.00');
document.ChartMakerLineExample.setRangeLabel(3, ' 150.00');
document.ChartMakerLineExample.setRangeLabel(4, ' 200.00');
document.ChartMakerLineExample.setRangeLabel(5, ' 250.00');

public void setSegmentLabel(int nWhichSeg, String strLabel);
This method is only used for line charts.
Sets the segment label nWhichSeg to the String strLabel. The segment labels are found along the bottom of the chart, extending from left to right. Typically, segment labels will be a time line, such as a date. For example, the segment labels for the line chart example at the top of this page were set using the following method calls:

document.ChartMakerLineExample.setSegmentLabel(0, '1st');
document.ChartMakerLineExample.setSegmentLabel(1, '2nd');
document.ChartMakerLineExample.setSegmentLabel(2, '3rd');
document.ChartMakerLineExample.setSegmentLabel(3, '4th');

public void addSeparatorBar();
This method is only used for bar charts.
Adds a blank separator bar to the bar chart at the next bar position. This is useful where you want to logically group sets of bars together as in the above bar chart example on this page and where you just want to add some space in between your bars rather than have them bunched right next to each other.

public void addLineSegment(String strDValue, int nCurrentLineSegment, String strLegendLabel)
public void addLineSegment(String strDValue, int nCurrentLineSegment, String strLegendLabel, String strHexColor)
These methods are only for use with line charts.
The parameter strDValue is a double-precision floating point value passed to the applet as a String. This value will be used to determine the placement of this particular line segment, pointed to by nCurrentLineSegment, according to the range values which must have been set with a previous call to public int setChartRange();, described above. The parameter strLegendLabel will be a label drawn in the legend area on the right-hand side of the applet if and only if the parameter nCurrentLineSegment is set to zero (0). Likewise, the strHexColor parameter is only interpreted if the nCurrentLineSegment is set to zero (0). The strHexColor parameter specifies a color for the line and associated legend label. If strHexColor is omitted, the applet will fetch the next color in its built-in preset vector of colors. For example, the following code was used to set the line segments for the "Widget Corporation" in the line chart at the top of this page:



public void addBar(double dValue, String strLabel, String strLegendLabel);
public void addBar(double dValue, String strLabel, String strLegendLabel, String strHexColor);
These methods are only to be used for bar charts.
Puts a new bar to the bar chart at the next available bar position. The bar extends from range zero (0) to dValue, extending upwards if dValue is positive or downards if dValue is negative. The parameter strLabel is used as a label for this particular bar along the bottom of the chart area. Use an empty string ('') if you don't want a label. The parameter strLegendLabel will be used to create a legend label for this particular bar in this bar's color unless the strLegendLabel is set to "null", in which case no legend label is created. The strHexColor parameter is optionally used to specify a particular color in six-digit hexadecimal format. If strHexColor is not used, the applet will fetch the next available color from its built-in color vector. For example, the bars for the bar chart example on this page were created with the following method calls:

document.ChartMakerBarExample.addBar(127.50, '1st', 'Widget Corp.', 'ff0000');
document.ChartMakerBarExample.addBar(42.25, '', 'XYZ Corp.', '00ff00');
document.ChartMakerBarExample.addBar(242.50, '', 'ABC Corp.', '0000ff');
document.ChartMakerBarExample.addSeparatorBar();
document.ChartMakerBarExample.addBar(227.50, '2nd', 'null', 'ff0000');
document.ChartMakerBarExample.addBar(59.32, '' , 'null', '00ff00');
document.ChartMakerBarExample.addBar(262.33, '', 'null', '0000ff');
document.ChartMakerBarExample.addSeparatorBar();
document.ChartMakerBarExample.addBar(45.00, '3rd', 'null', 'ff0000');
document.ChartMakerBarExample.addBar(-61.45, '', 'null', '00ff00');
document.ChartMakerBarExample.addBar(179.48, '', 'null', '0000ff');
document.ChartMakerBarExample.addSeparatorBar();
document.ChartMakerBarExample.addBar(100.00, '4th', 'null', 'ff0000');
document.ChartMakerBarExample.addBar(77.16, '', 'null', '00ff00');
document.ChartMakerBarExample.addBar(227.19, '', 'null', '0000ff');

public void addPieSlice(double dTotal, double dSlice, String strLegendLabel);
public void addPieSlice(double dTotal, double dSlice, String strLegendLabel, String strHexColor);
These methods are only to be used with pie charts.
Adds a slice of the pie to the pie chart. The parameter dTotal represents the combined total of all the slices of the pie. It is your responsibility to compute the dTotal parameter correctly for your chart! This is so the applet can produce pie charts without needing all the pie slices, so you can have a pie chart with only one slice, if desired. The dSlice parameter specifies how much of dTotal this slice of the pie represents. The parameter strLegendLabel is the String to be used as a legend label for this slice of the pie. Set strLegendLabel to "null" if you don't want a label for this particular slice. The parameter strHexColor is a six-digit hexadecimal value representing the color of this slice of the pie. Leave out strHexColor if you'd like the applet to pick a color for this slice for itself. For example, the following code was used to add the slices of the pie to the pie chart example on this page:

document.ChartMakerPieExample.addPieSlice(500, 127.50, ' 1st ($127.50)');
document.ChartMakerPieExample.addPieSlice(500, 227.50, ' 2nd ($227.50)');
document.ChartMakerPieExample.addPieSlice(500, 45.00, ' 3rd ($ 45.00)');
document.ChartMakerPieExample.addPieSlice(500, 100.00, ' 4th ($100.00)');

public void clearChart();
Clears the current chart, whether it be a pie chart, bar chart, or line chart doesn't matter. You should call this method if you use public void setChartType(); to set the type of chart from one to another dynamically with JavaScript before adding the bars, segments, or slices to the new chart.

public void clearLegend();
Clears the legend area, which is always to the right-hand side of the applet. You should call this method if you use public void setChartType(); to set the type of chart from one to another dynamically with JavaScript before adding the bars, segments, or slices to the new chart.

public void addLegendText(String strLegendText);
public void addLegendText(String strLegendText, String strHexColor);
Adds a line of text to the legend area in the current legend font in either the FGColor or the strHexColor, if specified. These methods are useful where you want to provide additional information in your legend area and where you just want to add filler text to fill in a lot of blank space. Use a blank space (' ') for strLegendText to add a blank line to the legend area.

public void skipNextColor();
Use this method to skip the next color in the vector of built-in colors (26 of them) held internally by the applet. If you don't specify a color for a pie slice or new bar, for example, the applet will choose a color for you. If you don't like the color the applet chooses, use this method to skip that color and go on to the next one.


To download, SHIFT+CLICK this link to the ChartMaker.class file.
ChartMaker.jar file can also be used if preferred.

Java4Free! Home Page