How to create a Line Chart?

How to create a Line Chart

Go to the Real-time application and select Designer in the main menu.


Click "+ Add Widget" and a popup window will open.In the popup window you have to choose "Line Chart"

You will now see a pop-up where you need to define the data that you wish the line chart to display.


Field explanation:

  1. Chart type: Choose the type of chart that you wish to see. You have the following options:
    1. Line chart (linear interpolation)
    2. Spline chart (spline cubic interpolation)
    3. Area chart (linear interpolation)
    4. Area spline chart (spline cubic interpolation)
    5. Column chart
  2. Real Time / Historical
    1. Choose Real Time to see data from the current time and a defined period back in time.
    2. Choose Historical to define a period of time. 
  3. Chart Engine / Data grouping
    1. It is now possible to define which Chart engine should be used to draw the graph
    2. With "Data grouping" it is possible to group the data
  4. Retention period: The field will be displayed if you have selected Real Time above. Define the time period that you wish to use, e.g. 30 minutes back in time.
  5. Historical: The field is used if you have selected Historical above. Here, you can enter a specific time period (date and time).
  6. Display Avg.: When activated, you will see an average line on the graph.
  7. Display Min.: When activated, you will see a line displaying the lowest value on the graph.
  8. Display Max.: When activated, you will see line displaying the highest value on the graph.
  9. Display Trendline: When activated, then the chart will display a trendline in the graph, which takes into account the data within the graph and the time period you are looking into.
  10. Allow custom dates filter: Enabling this will make it possible for the operators to set a custom data on the page "Main".
  11. Improved display on only send changes tags (beta): is useful when using "Only send changes" tags, where the graph will show data, even though there are no new data from the PLC or sensor.
  12. Show navigator: When activated, then a quick zoom possibility will be shown in the graph. This will make it quick and easy to zoom to 1 hour, 6 hours, 1 day, 1 week, 1 month. 

Data has to be selected to be added to be displayed in the graph. You can display multiple values in the same graph. Data selection can be found in the lower part of the popup window.


Field explanation

  1. Selection of data - expand the DIAP and select tag:
    1. DIAP: Select the DIAP that you wish to show data from.
    2. PLC: Choose PLC or sensor.
    3. Tag: Select the tag that you would like to visualize data from.

Remember to save changes. 

When you click "Save changes", the window will close and the chart will be displayed.

An example of setting up a Line Graph can be seen below:

Once "Save" has been pressed then a widget will be shown in the dashboard.

Manual Y-axis and setting this up

Once a tag has been chosen, then it is possible to set a manual Y-axis value by selecting the pencil for the tag: 

Activate the toggle if you want Y-axis to be manual. If you choose manual Y-axis, you need to enter the following information:

  1. Min. value: Defines the minimum value on the Y-axis.
  2. Max. value: Defines the maximum value on the Y-axis.
  3. Lower RED value: Defines a lower red area on the graph.
  4. Upper RED value: Defines an upper red area on the graph.

Repeat the process if you wish to visualize multiple tags and sensors in the same chart with multiple manual Y-axis.