Creating a new Ux chart

Ux (User Experience) charts are web charts. Programmed using HTML5, these charts are designed to work best when viewed in a browser. They also work as Px views and they use the standard Workbench PxEditor.

Prerequisites: You are working in Workbench and are familiar with how to use the PxEditor.

Right-click your equivalent of a Logic folder and click Views > New View.
The New Px View opens.
Assign a View Name, choose Ux Media for Target Media and click OK.
The Edit view of the PxEditor opens.
Open the webChart palette, drag a Chart component to the wire sheet and position it for easy viewing.
Click the add binding button () next to WebWidget in the Properties pane.
The Add Binding window opens.
Select analyticsAnalytic Web Chart Binding and click OK.
Double-click the chart component.
The Properties window opens
.
Configure the data property to display the desired information, such as hs:energy to show electrical energy values while leaving other properties set to their default values.
The table displays all values plotted throughout the day (today is the default interval).
To view the resulting chart, click the Toggle View/Edit Mode icon (
Workbench renders the chart as a Px graphic.
To view how the chart looks in a browser, click the Toggle Browser Preview Mode icon ().
Workbench renders the chart as it will look in a browser.
Using the drop-down list at the top of the chart component, change the interval to Last Week, Last Month, etc.
The data displayed in the chart change.
To configure multiple plots on the same chart, edit the binding by changing the node to a component in the station that represents a building that has an electrical energy point with an hs:energy tag, add another Analytic Web Chart Binding to the Web Chart widget, configure its node for a component that represents a different building and edit its properties: data and timeRange to match the first binding.
For example, you could plot values for two different networks or two different buildings on the same graph. This would work for comparing energy usage or possibly space temperature in a couple of different rooms.
To save the configuration, click the Save icon ().

When viewing the chart outside of the PxEditor, the Settings icon (*) at the top of the chart allows configuring the same properties that appear on the binding property sheet. Changing the properties with the Settings icon affects the live chart rendering but does not change the actual binding property values, which are saved in the px file. This allows an end user to dynamically change the data source, time range, rollup or aggregation functions, interval, etc. to analyze data as needed in the chart.

TIP: You may embed Web Charts into a Dashboard Pane to allow end users to persistently save properties modified using the Settings icon. The framework saves the dashboard settings persistently for each user and those changes do not affect other users when viewing the same px.

Creating a new Ux chart

Related Links