XYGraph v2.3

Technical Information

Right now you're asking "How does this jaw-dropping graph work and how will it perform for my application?"

Overview

XYgraph generates graphics using Vector Markup Language (VML) by returning an html string for display via Javascript. This provides true vector graphics which gives you fast, high resolution output for professional results.

Running Platform

XYgraph is fully supported by Internet Explorer 5 or later, and will run on any website or intranet, online or offline. VML will print from Internet Explorer and can be saved as an html file. For more information on VML, see the following Microsoft article: msdn.microsoft.com/workshop/author/vml/default.asp

Support

Documentation of the XYgraph script is maintained within the source file which may be viewed with any text editor. If you have a question about XYgraph, please email us at Info@Structura.Info. We welcome comments and suggestions for improvement.

Implementation

Simply download and copy the XYgraph.js file into a directory on your website or intranet. Following the example in the provided templates, insert the appropriate reference to this file on your html page, write a short Javascript function that sends your data to XYgraph and then have Javascript show the resulting graph. No special software is required, you only need an html editor (you can even use Notepad) to add XYgraph to your site!

Data Input

Multiple lines with unlimited points and customizable formats can be drawn on the same plot. An intelligent analysis of input data will formulate axes that provide a best fit for simple, dynamic programming without any user involvement. The only required input is the x and y data, all formatting and other parameters either have default values or are calculated to fit the input data.

Unlike standard X/Y graphs, lines are drawn point to point in any direction without limitation. This allows step functions, circles, shapes, etc. Extreme values beyond ±999E+99 and "NaN" are clipped from the data set. XYgraph does not optimize data for better resolution, it is up to the programmer to input the data as desired. Generating smooth output requires increasing the number of data points at the expense of computation time. Generally, 1000 points or less is adequate and more than that will begin to slow the response of graphing to the page noticably.

A Note About SVG

With the release of Internet Explorer 7, it has become clear that VML will continue to be used by Microsoft with limited future development. Scalable Vector Graphics (SVG) is not uniformly supported among browsers and requires users to download third party plugins. We are working on a dynamic SVG component for XYgraph which will interact with an available Adobe SVG plugin. For more information on implementing SVG see the following Microsoft article: msdn.microsoft.com/msdnmag/issues/03/07/ScalableVectorGraphics and Adobe article: www.adobe.com/svg

Internet Explorer 7 Notes

The rendering of dynamic html within div or span elements produces different results between IE6 and IE7. The problem appears to be purely a CSS implementation change in IE7. These elements do not automatically gain layout status in IE7, and the use of CSS style positioning produces different results between IE7 and IE6. These differences are not related to any part of the dynamic content generated by XYgraph. The workaround which is shown in all of the examples on this site is to define the position of the element containing a graph differently if IE7 is detected. One way to implement this is to insert the following code into the head of the webpage, and use the style class in the body of the code as required.

<!--[if IE 7]><style>div.graph {position:relative;}</style><![endif]-->
or
<!--[if IE 7]><style>div.graph {position:relative; top:-50%;}</style><![endif]-->
When dynamic html is used in tables in IE7, the height and width of the td element may be required to set. Further CSS positioning options may be used to obtain the desired layout.

Limits Of Use

XYgraph is copyrighted and may not be modified without permission. Use of this code is free for all non-commercial websites. A license is required for commercial use, see Purchase Your License Now! Please leave the script header intact if you intend on sharing the code file.