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:
Bar Chart
Example:
Pie Chart
Example:
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:
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.