 |
|
||
|
|
||
|
 |
||
|
|
|
|
Graphs for FreeWX and FreeWX-Wi - Version 2
|
|
||
This guide is for users wishing to use the full potential of jsGraphIT with data obtained and included in the web page from the latest versions of FreeWX and FreeWX-Wi. |
This guide assumes that you are comfortable with making changes to the HTML code of your web pages that hold your graphs. For some this will mean the default FreeWX templates. It also assumes that you have downloaded the latest jsGraphIT Version 2 file and have uploaded it to your web site by either FTPing it directly or forcing FreeWX to do so on it's next upload. 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. Further it assumes that you are familiar with the FreeWX web tags concept and know how to use them. FreeWX and FreeWX-Wi now include web tags that output only the data needed for the graphs... These tags are as follows.... ~~TEGR24DATA~~ JavaScript graph temperature data So, how do you use them? Well, you have to write a little JavaScript in the HTML of your web page where you want each graph to appear. This assumes that you already have the graph.js file correctly called in the <HEAD> section of the page. If not, you need to enter... <script language="JavaScript1.2" src="graph.js" type="text/javascript"></script> ...on a line somewhere between the <HEAD> and </HEAD> tags in your HTML. Now you are ready to add some graphs... 1. Pick the point in your html where you want a graph to appear. 2. Now enter the following two lines... <script language="JavaScript1.2" type="text/javascript"> </script> 3. Between these lines you must put the settings for the graph to be created... var h = new Graph(400,200,'#000000',0,0,0,1,"external"); <<< Always the first line. h.setLegend("Temperature","Dew Point"); h.build(); <<< Must always be the last line before the closing script tag. This would create a single graph plotting the previous 24 hours data for your outside temperature and dew point. It would have a legend, a title, a Y axis label and different bar colors, one for temperature and one for dew point. The bar area would be 400 pixels wide by 200 pixels high, it would have black axis lines and display a 24 hour clock. In fact, it would appear exactly as below but with your data... |
Notice how in the example script, there are deliberately extra empty lines between the h.setTime row and the h.build() row. JavaScript will ignore them, but this is to illustrate that this is where you can place many more settings to customise the appearance of your graphs... Perhaps you would like the title and Y axis label bigger and in a different font and color? Simple, add the title customisation setting... e.g. h.setTitles("Tahoma","12","#000099") Tahoma font, at 12 point size in dark blue. |
Axis values and legend wording in red? h.setAxis("Verdana","10","Red") A light grey grid to ease visualisation? h.gGrid = "#CCCCCC"; Perhaps you'd like to see negative values below a zero X axis? h.negbars=1; |
The list goes on... There are many, many more settings that can be included to change the appearance of your graphs, make them fit well in your web site size and design and above all else present the data in the best format to read it. These include... Line Graphs, MinMax Graphs, Wind Direction Graphs. Being able to set colors or images as bars, backgrounds and frames. Being able to have different colors or images for positive, negative and MinMax bars as well as many others. See the introduction page here for some further examples. Hopefully this introduction has given you a good insight into how easy it is to use the new FreeWX web tags and when you're ready to get customising, all the settings are fully explained in the jsGraphIT Version 2 user guide here. Finally, if you only wish to customise one or two of your graphs in the ways described above but also wish to change the default appearance of the standard graphs, then you can also make the basic settings described here. |
 |