Customizing a Time-Series Graph


Overview

This article will cover all of the graph profile configuration options to customize your graph profile to meet your needs, from time-frame selection to multiple graphs and layout configuration, . 

 

Graph Timeframe Selection

We will go through the several options available to you to change the time window display of the X-axis: 1. Timepicker, 2. Time-slider, and 3. Click and Drag Zoom.

 

 

1. Time-picker Timeframe Selection- There is a time selection option on the upper left side of the graph, shown below, that allows for several time selection options. The function of the buttons on this bar will be explained in detail below. 

 

 

Times- The first few selection options vary from 1 hour to 1 year. Selecting any of these options will change the graph to display data from now and looking back for the selected amount of time.

 All- The All button displays a time frame from the earliest datapoint of the selected sensors to now.

 Fit- The Fit button automatically adjusts the time frame from the earliest datapoint of the selected sensors to the most recent datapoint of the selected sensors.

 Custom Selection- Clicking the clock icon opens a configuration window, shown below. The dropdown at the top of this window allows you to select between "Fixed start date" and "Rolling Time Range". These two configuration options will be explained below.

 

 

 

 

a.- The configuration dropdown will allow you to select "Fixed start date".

b.- The left calendar is the start date and time selector.

c.- The right calendar allows you to select an end date for the graph which will freeze the graph to that date and time, or you can check the "Now" box which will allow the graph to change the end of the X-axis to the current time any time the graph is viewed in the future.

d.- Last, select "Confirm" to save your changes.

 

 

 

a.- The configuration dropdown will allow you to select "Rolling time range".

b.- The first input of the "Last" row is a typing input that allows you to type a number that will be used in conjunction with the time metric dropdown selection in the next step. 

c.- The time metric dropdown allows you to select a unit of time measurement that is used in conjunction with the number input in the previous step to define the time length of the X-axis for the graph.

 

d.- Last, select "Confirm" to save your changes.

 

Sync/Desync Graphs- The last button on the Time Picker bar is the graph sync button. This button allows you to match, or sync, the data display timeframe for multiple graph panes. Once enabled, all graph paness will sync to the same X-axis timeframe. The button is set to off by default, but clicking the button will turn the button to enabled, looking like this .

 

2. Time-slider Timeframe Selection- Below the X-axis time legend for the graph, there is an additional time bar (red rectangle) that ranges from the first datapoint of the sensors on the graph to the current time, and a slider bar (red oval) is visible on that time bar to visualize the timeframe of the data displayed on the graph. This time-slider can also be grabbed on either end to change the time range of the graph, or it can be clicked and dragged to change the graph time range.

 

 

3. Click and Drag Zoom Timeframe Selection- The last time selection option for time-series graphs is to click on a point on the graph and drag across the graph then release to end the selection. As illustrated below, the portion of the graph being selected will appear blue during the click and drag process.

 

 

Adding a Second Metric to a Graph

The "+Axis" button on the top of each graph pane allows you to add another metric to be graphed on the same graph as shown in the graph below with frequency and temperature on the same graph. 

 

 

1. Click the "+Axis" button to create a new graph metric at the top of the graph.

 

 

2. Click on the new metric to open the configuration dropdown and select the metric and metric unit. 

3. Save your changes to the profile.

 

Adding Additional Graph Panes and Changing Layout of Panes

Up to six graph panes can be added to a graph profile. Additionally, up to three graphs can be stacked on top of one another. This section will cover how to add and change layout of graph panes.

1. Adding additional Graph Panes- Click the "+Graph" button at the top of the profile page, highlighted by the red box below. You can add up to 6 graph panes to a single profile. The image below shows a graph profile with two graphs. This format is called a 2-column layout.

 

 

2. Graph Pane Layout- There is a dropdown option in the upper right that allows you to change the layout of the graph, highlighted by the red box in the image below. The default layout is a two-column layout, as shown above, meaning that there will be two columns of graph panes splitting the page. The dropdown at the upper right of the page allows you to change the layout so that two graphs will show up stacked, called "1-column layout", as show below. Up to 3 graph panes can be stacked via the 1-column layout.

 

 

Adding Sensors, Changing Sensor Line Colors, and Adding Trendlines

The "Sensors" button at the top of the graph profile has a few functions: adding additional sensors to the profile, changing graph line color for a sensor, and adding trendlines to a graph. To access these options, click the "Sensors" button to open a configuration window.

 

This is an example of the sensors window. 

 

 

1. Managing (Adding or Removing) Sensors- Click the "Manage Sensors" button to open the Sensor addition or removal window below, where you can add sensors to the graph profile or remove them.

 

 

2. Changing Sensor Line Color- Clicking the colored box next to a sensor name opens a color configuration window, where you can select the graph line color for that sensor. From this window you can select a color from the color slider, customize the shade with the box, or select from a previously used "Saved Color" at the bottom of the window.

 

 

3. Adding Trendline- Hovering over a sensor makes the "Add Trendline" button visible to the right of the sensor name, highlighted by the red box in the image below. Clicking the button enables a trendline on the graph. The graph example below shows the trendline as a red-dotted ilne, with the slope of the trendline visible on the right side of the graph.

 

 

Graph Display Settings

 

The Display Settings window allows a large number of visualization customizations for a graph. This section will show you all of the configuration options in the Display settings window. These options will apply to only the graph pane selected.

 

 

Accessing the Display settings window- To open the display settings window, click the cogwheel at the upper right of the graph pane you would like to configure. The next steps will be shown for a graph with two metrics graphed to show all of the configuration options. 

 

 

 

1. Line or Scatter Plot Selection- The first option available at the top of the window is a toggle between line and scatter plots. The default graph option is a line plot, but clicking scatter plot will turn the connecting lines off. 

 

 

2. Y-Axis Limits- The Y-axis limit toggles allow you to input a minimum and maximum value, which will control the visible range of the Y-axis on the graph. 

 

 

3. Y-Axis Filters- The Y-axis data filter allows you to input values that allow you to hide data from display on the graph.

 

 

4. Show Graph legend- Toggling the graph legend option on will create a graph legend in the lower left corner of the graph. Clicking one of the names on the metric in the legend will hide that graph line from the graph. Clicking and holding the "Sensors" at the top of the legend wlll allow you to drag and drop the legend to other portions of the graph. 

 

 

5. Temporal Data Filtering- The temporal filtering toggle allows you to had data from the graph based on the timestamp of the data.

 

 

6. Data averaging-  Data averaging allows you to reduce the number of data points graphed or smooth out data by averaging the data over a selected timeframe, from hour to month. There is also an automatic averaging function that automatically selects a data averaging timeframe for you.

 

 

7. Alerts- Any alerts configured for the sensors and metrics configured on this graph will be available to toggle on and display on the graph, allowing you to visualize the graph data compared to alert thresholds. To toggle an alert on, click the "eye" icon to the right of the alert name. The example below shows the Alert Demo alert turned on, and the alert threshold can be seen on the graph as the red dotted line. 

 

 

8. Plotlines- The plotline function allows you to add a horizontal line across the graph. This function is useful for displaying non-alert data on a graph, such as reservoir level on a water elevation plot. 

 

 

a. Click the "+ Add Plotline" button to create a dropdown option to configure the plotline.

b. Click the dropdown carrot icon to the right of the trashcan icon to access all of the configuration options below.

c. You can begin by naming the plotline, which will appear along the plotline on the graph.

d. If you have multiple metrics on the graph, please be sure to select which the correct axis for the plotline value configuration. The default axis is the left axis, but toggling the button will enable you to configure the plotline for the right axis values.

e. The value input is the numerical value you would like the plotline to appear at on the graph.

f. Lastly, you can select the color of the plotline.

 

In the example below, we've configured a plotline for the left axis temperature metric, with a plotline name of "Room Temperature" and a blue line.

 

 

9. Events- Events are broken down into two categories: configuration updates and custom events. These events are created in the sensor configuration window. Configuration updates are logged any time the sensor configuration is changed (ie VW zero values), and Custom Events (notes about sensor issues, weather, etc.) can be manually input. They are tied to a timestamp. These events can then be toggled on to show up as vertical lines on the graph. The example below shows a bad sensor reading event on the last anomalous frequency reading.