cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

Community Tip - Need to share some code when posting a question or reply? Make sure to use the "Insert code sample" menu option. Learn more! X

How to Display Data in Charts Guide Part 3

No ratings

 

How to Display Data in Charts Guide Part 3

 

Step 6: Configure Charts

 

You now have a test Thing that has an Info Table Property and Time Series Property with values appropriate for display in various Chart Widgets, as well as a Mashup with those charts inside.

However, in order for the Widget to display data, you need to bind it to the data source.

 

Bring Data into the Mashup

 

  1. Select the Data tab in the top-right section of Composer.
    IoTProductMgmt_46-1658782589816.png

     

  2. Click the green + button under Data.
    IoTProductMgmt_47-1658782589818.png

     

  3. In the Entity Filter field, search for and select DDCThing.
  4. In the Services Filter field, type GetProperties.
  5. Click the right-arrow beside GetProperties
    • The GetProperties Service will now appear on the right under Selected Services.

Check the Execute on Load box under Selected Services.

    • This will cause the GetProperties Service to execute as soon as the Mashup is loaded.

IoTProductMgmt_48-1658782589819.png

 

6. In the Services Filter field, type QueryPropertyHistory.

7. Click the right-arrow beside QueryPropertyHistory.

8. Check the Execute on Load box under Selected Services.


IoTProductMgmt_49-1658782589821.png

9. Click Done to close the Add Data pop-up window.


IoTProductMgmt_50-1658782589821.png

 

Drag-and-Drop Data Bindings

 

  1. Under the Data tab, expand the Things_DDCThing > GetProperties service.
    IoTProductMgmt_51-1658782589822.png

     

  2. Drag GetProperties > InfoTableProperty to the Pie Chart Widget in the top-left section of the Canvas.
     
     23-ddc-drag-data-pie.png

    3. On the Select Binding Target pop-up, select Data.IoTProductMgmt_53-1658782589832.png

    4. Repeat steps 2-3 for the LabelProportional, and Bubble charts.
    • Note that the Bubble chart will be bound to DataSource1 rather than Data.
 

25-ddc-bind-more-data.png


 

5. Drag-and-drop QueryPropertyHistory > Returned Data > All Data to the Line Chart Widget in the bottom-middle section of the Canvas.

6. On the Select Binding Target pop-up, select Data.

26-ddc-bind-data-line.png

7. Repeat steps 5-6 for the Event Chart in the bottom-right of the Canvas.

 

Configure Chart Properties

 

  1. Click the Pie Chart in the top-left of the Canvas to select it.
  2. In the bottom-left section of Composer, showing the Properties of the Pie Chart, type LabelField in the Filter Properties field.
  3. For the LabelField drop-down, select Label.
    27-ddc-configure-pie-label.png

     

  4. In the Filter Properties window, type ValueField.
  5. In the ValueField drop-down, select Value.
    28-ddc-configure-pie-value.png
     
     

     

  6. Repeat steps 1-5 for each of the other charts, making the following Widget Property changes:

Chart

Property

Setting

Label

XAxisField

XAxis

Label

DataField1

Data

Proportional

XAxisField

XAxis

Proportional

DataField 1

ASensor

Proportional

DataField 2

BSensor

Proportional

DataField 3

CSensor

Bubble

XAxisField1

XValue

Bubble

YAxisField1

YValue

Bubble

BubbleValueField1

BubbleValue

Line

XAxisField

timestamp

Event

XAxisField

timestamp

Event

LabelField

TimeSeriesProperty

7. At the top, click Save.

8. Click View Mashup.

29-ddc-view-mashup.png

 
 

Step 7: Next Steps

 

Congratulations!  In this guide, you learned how to:

 

  • Create a Data Shape to format an Info Table
  • Create a Value Stream to record Property Value changes
  • Create a Thing with an Info Table Property and a Time Series Property
  • Create a Mashup with various Chart Widgets
  • Link your Thing's Properties to the Chart Widgets

 

This is the last guide in the Customize UI and Display Options to Deploy Applications learning path. 

 

Additional Resources

 

If you have questions, issues, or need additional information, refer to:

 

Resource

Link

Community

Developer Community Forum

Support

Widget Help Center

 

 

Version history
Last update:
‎Nov 29, 2022 02:40 PM
Updated by:
Contributors