Graphs for FreeWX and FreeWX-Wi

This guide assumes that you have downloaded the latest jsGraphIT Version 2 file and have uploaded it to your web site. You can either do this by FTPing it directly or by placing it in the FreeWX directory on your computer and changing a graph setting in FreeWX. This will ensure that the file is uploaded on the next FTP to your web site. Note that if you choose to upload it directly you should still also place it in your FreeWX directory so that it is not accidentally over written in the future.

IMPORTANT: Previous versions of the graph.js file have enabled the user to make settings in the top section of the file that influence the appearance of the default Free-WX graphs. If you have changed these settings to customise your graphs then you must follow these instructions when upgrading to version 2.

All user settings that were in the top of graph.js have been removed but it is still possible to make them easily by following these instructions.

Any changes made as directed below will influence all graphs on the page the settings are made on.

Open the FreeWX HTML template on which your graphs are displayed and locate the line...

...in the <HEAD> section of the HTML.

Immediately below this line you should enter the following two lines with a line between them...

</SCRIPT>

In the line between the <SCRIPT> tags you should then enter any settings that you wish to make. Note that you only need to enter any settings that you want to change, not all settings.

Say for example that you wanted to change the graph title fonts and colors you would enter the following:

<SCRIPT type="text/javascript>
var gtitlefont="Verdana,Arial,Helvetica";
var gtitlesize="10"
var gtitlecolor="#FF0000"
< /SCRIPT>

So basically, any setting that you want to change should be entered in the format...

var setting = value.

You would substitute the word setting above for the setting you want to change from the list below and the word value for the appropriate value.

Please be aware that some values require only a digit such as 0 or 1 whereas others require words which must be placed between double quote marks. Please note carefully from the table below the list of available settings and the correct format of their values.

Title and Axis Label Settings...

gtitlefont:	Set this to the font you would like the title (and Y axis units) displayed in. For the web you can use multiple fonts, for example "Verdana,Arial,Helvetica". What this means is that when someone loads your web page it will attempt to display the text using Verdana. If they don't have this installed on their machine it will try Arial and if they don't have this installed then Helvetica. If they don't have any of them installed then it will display using their browsers default font. Default if not set is "Verdana,Arial,Helvetica".
gtitlesize:	Set this to the size you want the title (and Y axis units) displayed in pixels. Default if not set is "10".
gtitlecolor:	Set this to the color you want the title and Y axis units to be displayed in. Either use hex color values such as #FF0000 or color words such as Red. Default if not set is that it will inherit the color from your page.
gaxisfont:	Set this to the font you would like to use for the axis labels. Default if not set is "Arial,Helvetica".
gaxissize:	Set this to the size you want the axis labels displayed in. Default if not set is "10".
gaxiscolor:	Set this to the color you want the axis units displayed in. Either use hex color values such as #FF0000 or color words such as Red. Default if not set is that it will inherit the color from your page.

NOTE: Whenever you change the font or size of the titles, legends or axis values it is possible that you could make the font too big for the size of graph and therefore end up with a malformed graph. If this happens, consider reducing the font size or alternatively increasing the size of your graphs as explained below with the gheight and gwidth settings.

Settings to change the title and Y axis label wording...

The default title settings are as follows:

ott:	Temperature: last 24 hours.
oht:	Humidity: last 24 hours
bt:	Barometer: last 24 hours
dpt:	Dew Point: last 24 hours
awt:	Avg. wind speed: last 24 hours
wdt:	Wind direction: last 24 hours
rft:	Rainfall: last 24 hours
itt:	Indoor temperature: last 24 hours
iht:	Indoor humidity: last 24 hours

Say for example you wanted your Barometer graph to display the title "Air Pressure: last 24 hours" instead of the default, you would enter the setting: var bt = "Air Pressure: last 24 hours"

The following settings are exactly the same for the graph units with one difference. If you set any of these values to "n" then the displayed units text will not be shown. This might be appropriate if you chose to show the wind direction graph as compass points... you then wouldn't want that graph showing the degree symbol as the units and so you would hide it by setting var wdl = "n".

otl:	Changes the displayed units for the outdoor temperature graph.
ohl:	Changes the displayed units for the outdoor humidity graph.
bl:	Changes the displayed units for the barometer graph.
dpl:	Changes the displayed units for the dew point graph.
awl:	Changes the displayed units for the average wind speed graph.
wdl:	Changes the displayed units for the wind direction graph.
rfl:	Changes the displayed units for the rainfall graph.
itl:	Changes the displayed units for the indoor temperature graph.
ihl:	Changes the displayed units for the indoor humidity graph.

Miscellaneous settings follow:

wdcompass:	Set this to the digit 1 if you want the wind direction graph to display compass points as opposed to degrees. Any other setting will cause the wind direction graph to display degrees. Default if not set is 1 so explicitely set to 0 if you don't want compass points.
wdgraphline:	This instructs the wind direction graph to display as lines and not bars. Set to a value of 1 to show lines and any other value to show bars. Default if not set is 1.
wdglsize:	If you have set the wind direction graph to show lines then this sets the thickness of the lines. The default is 2 and it is recommended not to exceed 3 although you could set any value you want. Default if not set is 2.
negline:	If you have graphs with negative values such as temperature then setting this to '1' instructs the graph to be shown with the X axis at the zero value and all negative bars are then below the zero line. Setting any other value will create the graphs with the default base X axis line. Note that when you choose to show the X axis at the zero value there aren't any X axis labels displayed although the mouse overs do still work. Default if not set is 0.
barimage:	If you would like the graphs to display your own image for the bars then set this to the name of the new image. eg var barimage = "mybar.jpg". This assumes that the image 'mybar' is in the same folder on your web server as the page the graph will be displayed on. This is the default folder for all Free-WX images. If you want to make your own images, be aware that the default bar.gif image is just 5 pixels square and it would be advisible to stick to this size. The image is loaded multiple times to the page and so you don't want it being too big. Leave this setting as it's default of 'bar.gif' to use the standard Free-WX bar image. Default if not set is "bar.gif".
wdbarimage:	As above but for the wind direction graph when it is set to display as lines. Default if not set is "bar.gif".
negbarimage:	If you have set your graphs to show negative values below the zero axis line then you can also set an alternative image to use for the negative values as directed above. Default if not set is "bar.gif".
gwidth:	This, and gheight, below, enable you to change the size of the graphs. The default setting for these is 0 (zero) which tells the graphs to use the Free-WX set size of 200 pixels wide by 120 pixels high. It is strongly recommended that you do not set the width and height below these values. You can however make them bigger. 300 wide by 200 high for example improves the readability and accuracy of the graphs. Default if not set is 0.
gheight:	Explained in gwidth above. Default if not set is 0.