Perspective - Chart Range Selector

The Chart Range Selector component is a small recreation of a chart that operators can use to select a time range based on seeing the existing data. This component complements the Time Series Chart component, and should always be used with a chart. Its features include:

• Zoom and pan in/out via mouse wheel interaction.
• Click-and-drag brush range selection and panning.

• Start and End property values that are updated as the brush range changes. These properties can govern the start/end points of data queries to return a dataset.

• Time range showing the overall range of the data being displayed by the brush. (The range updates as the brush is updated.)

• Simple display customization for the axes, baselines, markers, and the overall chart data appearance.
• Label properties have their own dedicated styling properties, such as color and size. 

User Interaction

Properties

Component Events

Examples

Example 1 - Using a Format Property in a prop.timeAxis.tick.label

The new format property represents the preferred date/time format for the timeAxis property. You can enter any preferred date/time format as defined by https://momentjs.com/docs/#/parsing/string-format/ .  Below is a listing of suggested formats and how they can be used. 

"Millisecond [638]": "SSS",
"Second [:35]": ":ss",
"Hour Minute [8:15]": "h:mm",
"Hour with Meridiem [8 AM]": "h A",
"Day of Week, Month, and Hour [Monday 2nd, 08 AM]": "dddd Do, hh A",
"Abbreviated Day of Week and Month [Mon 2nd]": "ddd Do",
"Abbreviated Month and Day of Month [Jan 2nd]": "MMM Do",
"Full Month [January]": "MMMM",
"Abbreviated Month and Year [Jan 20]": "MMM YY",
"Full Year [2020]": "YYYY",
"[3-2-2020 8:15:35]": "M-D-YYYY h:mm:ss",
"[2020-3-2 8:15:35]": "YYYY-M-D h:mm:ss",
"Unix Millisecond Timestamp [1563464737269]": "x",
"Unix Timestamp [1563464737]": "X"

Example 2 - Using the Chart Range Selector

To begin using the Chart Range Selector, a Time Series Chart with trend data will be needed. This example shows how to configure the Chart Range Selector.

1.  Begin by configuring tag history on a Tag of your choice. 
2.  From the Perspective section of the Project Browser on your Designer, right click on the Views folder and select New View... to create a new view.
3.  This will bring up the New View window. Give your view a name and select the Flex Root Container Type. The Page URL setting will remain unchecked for this example.
   
   
   
   
4. From the PerspectiveComponent Palette, drag and drop a Time Series Chart onto your newly created view.  In the Position category of the Property Editor, set the position.grow  property to '1' .
5. Drag and drop a Chart Range Selector component onto your view. Go to the Postion category and set the Chart Range Selector's position.grow property to '1' .
6. With the Chart Range Selector selected, go to the data property, click on the binding icon  to bring up the Binding Editor window and select the Tag History binding type as shown in the image below.
7. Set the Time Range to Historical. We'll configure the binding to span the last one hour of historical data by making the following changes:
   Start Date:  dateArithmetic(now(0), -1, 'hour')
   End Date:  now(0)
   
   
   
   
8. Under the Select Tags section, click on the Tag icon and use the Tag browser to drill down to the Tag you created in Step 1
9. Click OK.
   
   
   
   
10. Click OK on the Binding Editor window to accept the binding changes. You should now have a Chart Range Selector displaying the last 1 hour of historical data for your Tag created in Step 1.
    
    
    
    
11. Now select your Time Series Chart and from the Perspective Property Editor, and click on the binding   icon  for the series[0].data  property to  open  the Binding Editor window.
12. Select the Tag History binding type as shown in the following image.
    
    
    
    
13. Set the Time Range to Historical.
14. The Start Date needs to have a property binding configured pointing to the Chart Range Selector's props.selectedRange.start property as in the image below.
    
    
    
    
15. Similarly, the  End Date  needs to have a property binding configured pointing to the Chart Range Selector's  props.selectedRange.end .
16. For the Tag History Binding configuration, click on the Tag icon  on the right of the Select Tags table and drill down to the Tag from Step 1, then click  OK.
    
    
    
    
17. After clicking OK and accepting the binding configurations on the Time Series Chart, you will be able to use your Chart Range Selector to select what data you want on your Time Series Chart to display. Simply drag and re-size the Chart Range Selector's brush section as shown below.