The inmation:webchart
The inmation:webchart is an advanced chart display application that can be used inside a browser or as embedded content in Visual KPI. This Web App application connects to system:inmation using the Web API to retrieve and display data directly from your system.
The ability to display multiple axes (both x and y) means Web Chart is a great way to illustrate a lot of information within limited space and allow new insight to the data you may have otherwise missed.
Multiple x-axis support enables different time period comparisons. Diverse production data can be added to a single graph, making the comparison of critical outliers much easier by removing the need to switch between graphs. Multiple y-axis support enables different scale comparison. Variables with different scales can have a strong relation, e.g. temperature and humidity. Thanks to multi y-axis support these relations can now be easily illustrated. Combination of both multi x and y-axis makes Web Chart a powerful tool for chart plotting, analysis and trend exploration.
Web Chart also offers a wider range of chart types, such as Candlestick, Spline, Waterfall and others for robust data visualization.
Features
Web Chart features are as follows:
| Feature | Description |
|---|---|
Actual values |
Actual values are the last known values of the item, they are displayed on the right corner of the Legend section. |
Auto-refresh |
Auto-refresh is used with fixed time periods. When auto-refresh is enabled, new data will be loaded without moving the time period. This feature is great if you want to compare previous year/month/week/day with current performance. Lock x-axis which is assigned to the past period and use auto-refresh as the current period progresses to get the new data plotted on the chart. |
Live chart streaming |
Live chart streaming is an option to play the selected chart. When play button is pressed the actual values are incoming with a 10 second interval and are directly displayed on your screen as a number value and as a chart. |
String value support |
String values can be displayed on the same graph as numeric values. Any relevant information e.g. batch start and end time, can be stored as a tag an displayed on the graph with numeric production values. |
Files in the Web Chart |
Objects containing files can be added to Web Chart. Files will be displayed on the same graph as a numeric values in the inmation:webchart. File preview and save options are also available directly from the Web Chart. For more information check File Browser section. |
Saving charts |
Web Chart application allows saving charts. In order to organize your charts, you can create, modify and delete folders in the Model. |
Shift, stretch and compress |
Shift, stretch and compress functionality allows setting fixed start or end time. You can shift, stretch and compress graph by using the Hand icon from the Top Bar. Dragging graph from the middle section will shift graph with it’s time frame. Moving graph from the right or the left side of the chart, will set start or end time to fixed point, this way compressing time window. |
Range |
With Range option user can control chart’s width (range). Range can be found in the Trend Inspector → Y Axis → click on selected axis. There are four set up options: 1. Auto-size - if Max and Min values are set to auto size chart’s width will be calculated automatically to fill the entire screen or designed Y Axis section. 2. Fixed value - user can manually set desired value. 3. At least or more for Max value and at least or less for Min value. 4. Flat or shrink - with this option user can "stretch" the chart by setting a Min and a Max values to be plotted. If Min is higher than Max chart will be flipped. Range has to be set for each Y Axis separately. |
Share option |
Your tailor made chart can be shared through a share option. To share click on </> icon. Share icon is located in the Top Bar. Share option allows user to choose whether or not he wishes to share chart with KPI Model, Include Credentials, enable Visual KPI or share Actual Values. |
Application sections
Web Chart application is organized into five sections:
| Section | Description |
|---|---|
1. Top Bar |
At the top bar, main controls such as starting a new chart, refreshing the chart, date picker, cursor, zooming in and zooming out (ALT + zoom icon), generating chart’s share link, connectivity, language and display settings can be found. |
2. Model |
Model is on the left side of the screen. Model displays item tree with your folders, saved charts and tag table containing items. |
3. Trend Inspector |
Trend Inspector is on the right side of the screen. In the Trend Inspector user can add, edit or delete Pen, axis and cursors. Read more about Pen, axis and cursors configuration options bellow. |
4. Legend |
Legend is at the bottom of the screen, by default it shows Pen Name and Actual Value. User can switch Pen Name to Object Name, Description or Path by clicking directly on the text. |
5. Chart Display Screen |
Chart display screen is the main application screen. User can maximize Chart Display Screen by reducing Model, Trend Inspector and Legend sections. Control buttons to reduce these components are on the right side of the Top Bar. |
Launching
Web Chart is shipped together with inmation Web API. Make sure Web API is installed and running on your system. To install Web API follow installation guide here.
After your system is set up, you can start using inmation:webchart. Web Chart can be accessed via the following URL links:
| Description | URL |
|---|---|
Base URL |
|
Model view |
The base address in the above examples is Web API address made up of hostname (or IP address). For example, http://localhost:8002/apps/webchart
Alternatively, Web Chart is available on app.inmation.com.
|
Creating a Web Chart
To create a new chart click on the New Chart icon in the Top Bar. Chart Display Screen and Trend Inspector will open. All controls for chart creation can be accessed from the Trend Inspector and viewed on the Chart Display screen. After a new chart has been started name your chart and start Pen, x and y-axis configuration.
Pen configuration
Pen controls are located in the Trend Inspector Pens section.
| Action | Description |
|---|---|
Add |
User can add Pens in two ways: 1. by clicking on the plus sign in the Pens section and entering item’s path, 2. or by selecting Pens from the Tag table. Click on a Tag table icon in the Model view, select which Pens you want to add to the chart and confirm your choice with Apply button. Tag table option is available when user has configured Tag table in his Model. Read how to create a Tag table in the section "Creating Tag table". |
Edit |
Edit Pens by clicking on the selected Pen in the Trend Inspector. Pen editor allows changing Pen Color, Aggregate, Line Thickness, Markers and turning on or off specific x and y-axis. |
Delete |
To delete a Pen, click on the pencil icon, select a Pen which you want to delete and confirm your choice by clicking on the garbage can icon. |
Pens can be rearranged by clicking on the Pencil icon and dragging Pens up or down. The first Pen on the list will be drawn as first on the chart. When trends offset each other, you can choose which Trend should be drawn on top, by rearranging them.
X-axis configuration
With multiple x-axis user can assign different time periods to different Pens. Controls are located in the Trend Inspector x-axis section.
| Action | Description |
|---|---|
Add |
Add multiple x-axis by clicking on a plus sign and naming the axis. Axis can be individually assign to different Pens and time periods, a call to the server will be executed to fetch the correct time period and aggregation. |
Edit |
You can edit axis color, add grid, change display margin, rotate title orientation and change the alignment. User can also lock axis, locking axis will prevent editing. As well as time period shifting in play mode or in auto-refresh mode, only the unlocked axis will be auto-refreshed or "played". |
Delete |
Pencil icon allows deleting the axis. Pencil icon also allows rearranging axis. |
Y-axis configuration
With multiple y-axis user can assign different frequencies to Pens. Y-axis controls are located in the Trend Inspector y-axis section.
| Description | |
|---|---|
Add |
Add multiple y-axis by clicking on a plus sign and naming the axis. Y-axis can be individually assign to Pens in the Pen edit section. |
Edit |
You can edit axis color, add grid, change display margin, rotate title orientation and change the alignment. User can also lock all editing options before saving the chart. |
Delete |
Pencil icon allows deleting and rearranging axis. |
Cursors
Cursor is a solid line you see on the chart. It helps to see precise time and value corresponding to the point in the chart, it also provides interactivity to the charts. Cursor will displayed different information based on the trend type. For line and area trend types time, value and quality will be displayed. For other trend types time, quality and minimum and maximum value or open, high, low, close values are shown.
To add cursors click directly on the x-axis. Time and value corresponding to the cursor will be displayed in the cursor tab. If you have multiple pens, information of all pens at that point in chart will be displayed. To edit cursors click on the pen icon. Here you can delete selected cursors by click on the stop sign → confirming by pressing on → the trash can icon. To delete all cursors click on → the select all icon.
Saving chart
Charts can be saved together with all configured properties. To support save functionally Web Chart allows folder creation in the Model view. Users with specific rights will see the Ellipse button next to the folder to which they have access rights to. By clicking on the Ellipse button user will be presented with four options:
-
New Folder. To create a new folder, type folder name and confirm by clicking Create.
-
Save Chart. Click on Save Chart next to the Folder where you wish to save currently opened chart.
-
Modify. This option allows folder renaming.
-
Delete. Delete folder or chart depending on your location in the Model.
Required inmation access rights to save, modify and delete folders or charts - Write, Modify or Delete sequentially.
Creating Tag table
A tag table is a table containing objects from the system:inmation DataStudio I/O model. Tag tables can be created by adding a custom table property to KPI Model objects. This can be done in DataStudio by selecting any node object in the KPI Model (KPI Group, Site, Enterprise, etc.) and opening the Custom Options property compound in the Object Properties panel. Select the Custom Table property and click the "+" sign to add a custom table.
The custom table name should be added as "tagtable" and the Table data should be 3 columns with the titles "Name", "Path" and "Description". Tags from the I/O Model can be dragged into the "Path" column and a user defined "Name" and "Description" for each tag can be given. Click OK to save the Table data and then click Apply in the Object Properties panel to confirm the changes.
Refreshing the Model section in the Web Chart will make the tag table available next to the relevant KPI Model object. Click on the table icon and the tags can now be added to the Web Chart.