|
Trend Graph |
Top Previous Next |
|
Traces: The graph supports multiple traces. Each trace has the same set of properties: Expression: an expression, the result of which is graphed as the trace. Note that the result must be an array with time associated with it (usually from a tag), and since JavaScript doesn't directly support array math, if you want to do anything other than trend a tag, you will need to use the math. functions described later in this guide. Note also that tagName() returns an array of historical values based on the X scaling of the graph. In all other controls, tagName() returns a scalar with the most recent reading. Line Width: the width of the line in pixels. Label: if you assign a label to a trace, a legend will appear for the traces with labels. Scaling: If you double click on a graph while in run mode, a scaling box will appear. This allows you to adjust the scaling parameters and jump to any particular time. These settings are also available in the properties of the graph under the Scaling tab. The Y scaling is pretty straight forward. You can select Auto for either max or min and the graph will set the Y scaling appropriately. If Auto is not checked, then the value specified will be used for the Y scaling. For X scaling there are two options: if you have X Time Width checked, then the graph will always show the most recent data point at the right of the graph and will scroll as new data arrives. The amount of time displayed along the bottom axis is determined by the value to the right of the check box (in seconds). If X Time Width is not checked, then the X Min and X Max settings are used to determine the scaling. Simply specify a start and end time to display. You can jump to any point in time that exists in your history. If you jump back in time it may take a little time for the graph to get data from our server to render. This is usually one update cycle. If the X axis scaling results in a lot data points coming from our servers, the data will be spread out over several updates and you will see chunks of data drawn as the new data arrives. Once data has been downloaded, it remains in memory until you quit, refresh your browser, or hasn't been accessed for a while. This means once the data is downloaded you can quickly zoom in and out without the initial delay. This applies across pages if you switch between pages. Refreshing the browser clears the data downloaded. Also, to avoid using too much memory on your system, data in memory that hasn't been accessed in a while is released and has to be re-downloaded when a new need for it arises. Property names for script access (intermediate): you can access the properties of this control as described in the script section. Here are the properties for this control: Series: All series properties start with "series.x." where x is the series # starting with 0. If you only have one trace, it will be 0: series.0.expression: a string containing the full tag name. Even though this is called "expression" it can only be a tag name "series" is a property that contains an array. If you want to add new traces programmatically, you will have to retrieve the series property, then add to it manually, then set the property with the result. Scaling: xaxis.timeWidth yaxis.userMax Programmatically manipulating series (intermediate): There are a number of functions available to allow you to manipulate series in a trend graph from script. This would allow you to, for example, create buttons to select which traces are displayed. As mentioned, all control functions start with "control." then the ID of the control, then (, then the command and parameters, then ). To manipulate series there are 5 functions: getSeries(index) So, for example, to get the first series, you'd do: control.myGraphId("getSeries", 0);
index in all cases can either be the series number, starting from 0 or the exact expression (tag name), so you could do: control.myGraphId("getSeries", "myTag()");
The two remove functions are pretty self explanatory. Get will retrieve the details of a series. If you pass -1 as the index, you'll get the default series. You should usually use getSeries to get a template object to modify and pass back to setSeries or addSeries, though technically you don't have to. You can call set/add with partial details and the rest is filled in. For example, you can create a new series with all the defaults, display myTag by doing: control.myGraphId("addSeries", {expression : "myTag()"});
However, its often helpful to do the full template, so it'd go something like: var template = control.myGraphId("getSeries", -1);
It adds a copy of the template, so you can then modify the template again and add a new series: var template = control.myGraphId("getSeries", -1);
|
The trend graph allows you to view a graph of your data over time. You can view a real time graph that scrolls as new data comes in, or scroll the graph back in time to view historical data.