Create a real time dashboard

Data from EFM can be visualized at multiple places:

  • On-prem: DGLux or any other visualization tool that can receive data from EFM via a DSLink
  • Cloud: via connecting to DCM or other cloud apps like IBM Watson, Microsoft Azure and Google Cloud.

Complete the following steps to create a real-time dashboard in DGLux that visualizes the data point(s) from EFM.

The DGLux Designer toolkit is included with EFM, but the license for the designer is an optional SKU.

The steps below will build from the average CPU utilization dataflow that was built in the previous page.

  1. Open the dataflow.html page at https://EFMBrokerIP:8443/dataflow.html.

  2. Open the DGLux Designer page at https://EFMBrokerIP:8443

  3. If needed, request a trial license.

    • You can try it out by requesting a 180 day trial license.

      EFM

  4. Select the CREATE NEW option to create a new project.

  5. Select Blank Project (either double click on it or click Choose).

  6. Enter the name UI_Test for this new project.

    EFM

  7. Click File > Save As.

  8. Enter the name of the new page name Realtime_dashboard.dg5.

  9. Click Save.

    EFM

  10. Click the Dashboard menu in the bottom panel.

  11. Select the Gauges widgets.

  12. Click and drag the second Gauge onto the canvas.

    EFM

  13. Select the Data tab on the top left.

  14. Select the data node.

  15. In the metrics tab, select CPU_Moving_Average.

  16. Drag and drop it onto the Value property in the Properties panel on the right.

  17. On the binding dialog, select Formatted.

  18. Select OK.

  19. On the Properties panel, change “precision” to 2.

    EFM

  20. Right click on the canvas and choose Insert > Charts > Chart.

    EFM

  21. In the Outline panel on the bottom right, right click Chart and select Dataflow.

  22. Drag CPU_Moving_Average from the Metrics panel onto the dataflow canvas.

    EFM

  23. Drag a Realtime Recorder block onto the dataflow canvas.

  24. Bind the “value” property of the “CPU_Moving_Average” block to the “value 0” property of the realtimeRecorder block.

  25. Set the realtimeRecorder block properties to the following:

    • bufferSize—0

    • timeWindow—60

    • name 0—CPU Utilization

      EFM

  26. Click the table button on the “output” property of the realtimeRecorder block.

  27. Close the dataflow.

  28. Select the Chart component in the “outline” panel.

  29. Drag the CPU Utilization column from the table to the graph in the canvas.

    EFM

  30. In the pop-up window, in the topmost drop down window, select Column Series and then select Line Series again.

    EFM

  31. For the y-axis, select CPU Utilization from the bottom pulldown.

  32. Select OK.

  33. Close the table.

  34. Press cntrl-S to save the file.

    EFM

Now you have a Gauge and Chart with data from the System DSLink.

EFM