Creating a Bar Graph Symbol

Scenario: You want to create an animated bar-graph Symbol so that you can use it on a graphic or graphic template. The Symbol will support drag-and-drop, so that when an object is dragged onto the drawing canvas the Symbol will appear with the correct object reference.

In this workflow, the following conditions are used to create the Symbol:

  • From -30 to 80 and back, the graph rises from 10% to 100% and fall from 100% to 10%
  • If the value is <=10 the graph color is blue.
  • If the value is >=50 the graph color is red.

Reference: For background information, see Creating Advanced Symbols

Workflow Diagram:

 

Prerequisites:

Steps:

1 – Draw the Bar Graph Symbol
  1. From the File menu, select New Symbol.
  1. From the Element Tree, next to the Anchor, click the Visible checkbox.
  • The anchor is enabled.
  1. From the Ribbon’s Elements group, using the Rectangle element, draw a vertical rectangle on the canvas.
  • Tip: Rectangle Properties: Layout properties: Width: 30 Height: 175
  1. On the canvas, click and drag the anchor to the top-left corner of the rectangle element.
  • NOTE: The anchor provides the basis on which the Symbol is positioned. See Symbol Basics.

 

2 – Create the Fill and Clip Evaluations
  1. With the rectangle selected, navigate to the Evaluation Editor.
  1. From the Property drop-down menu, select Fill.
  1. From the Type drop-down menu, select Discrete.
  1. From the Type drop-down menu, select Script and then type or copy-and-paste the script, at the end of this topic, in the Expression space.
  1. Enter the conditions as follows:
  • Condition: 1 Value: Blue
  • Condition: 2 Value: Red
  • TIP: To add a condition, click the Insert New Condition icon in the bottom of the view.
  1. With the rectangle element still selected, create a Linear evaluation for a Clip top property that will animate the rectangle to rise and fall.
  1. From the Property drop-down menu, select Clip top.
  1. From the Type drop-down menu, select Linear.
  1. In the Expression field, type : dp
  • You will use this text to test the evaluations in the next procedure.
  1. Make sure the Auto-Range checkbox is not selected.
  1. Enter the Range values as follows:
  • Min: -30 Value: 90
  • Max: 80 Value: 0
    NOTE: The range to which the Clip is set determines how much of the element is covered. When the Clip value = 0, the element is 100% uncovered (i.e. fully visible); when Clip = 100, the element is 100% covered (i.e. completely hidden). Configure this evaluation to have 10% of the element visible at the minimum value.
  • Copy the script below for Step 4:
    var ActualValue = Read("{*}");

    var FillColor = 0

    if (ActualValue <=10)

    {{ FillColor = 1; }}

    else if (ActualValue >=50)

    {{ FillColor = 2; }

    FillColor;

 

3 – Test the Animation
  • The Value Simulator view is displayed.
  1. From the Ribbon’s Home tab, in the Modes group, select Test mode.
  1. Navigate to the Value simulator.
  1. Expand the Manual section, uncheck the Auto-Range checkbox, and enter the min/max range you have set in the Evaluation Editor: Min: -30 Value: 90.
  1. Expand the Object Selection section.
  1. From the list of objects, click the data point you are testing, scroll to the right and uncheck the Simulated checkbox associated with it.
  1. Click the slider and move it to increase and decrease the value.
  • The bar graph rises and falls according the current value.

 

4 – Save and Add the Star Substitution

Add the star substitution to the Clip Top property, so that whatever object reference the parent Symbol has in the future, is passed down to the bar graph.

  • You have tested the bar graph evaluations using the “dp” text Expression.
  1. From the Ribbon’s Home tab, in the Modes group, click the Design mode icon.
  1. Select the rectangle on the graphic, and from the Evaluation Editor, click the arrow buttons until the Clip Top evaluation you created displays.
  1. In the Expression field, replace the “dp” text with the star substitution syntax: {*}
  1. From the toolbar menu, click .
  1. In the Save As dialog box, select the Libraries folder and navigate to the appropriate Library and Symbols subfolder.
  1. In the Name field type the new Symbol name according to your project’s conventions.
  • The Symbol is now stored in the Library Browser.
5 – (Optional) Test the Symbol Instance
  1. From the Library Browser, drag-and-drop the Symbol to a graphic.
  1. With the Symbol instance selected on the graphic, from System Browser, drag a data point node into the Symbol Instance Properties > Symbol Instance > Object Reference field.
  1. From the Home tab, in the Modes group, click the Runtime icon.
  • You should observe the color and height of the bar chart change as the data point’s value changes.
6 – Add Navigation to the Object Reference
  • The Bar Chart Symbol you created is open in the Graphics Editor.
  1. Select the Rectangle element
  1. With the rectangle selected on the graphic, navigate to the Evaluation Editor.
  1. From the Property drop-down menu, select Selection Reference.
  1. From the Type drop-down menu, select Simple.
  1. In the Expression field, type the star substitution syntax: {*}
7 – Add the Symbol to a Function or Object Model
  1. In System Browser, select the data point associated with the Symbol.
  1. In the Primary pane, click the Object Configurator tab.
  1. In the Main section, do one of the following:
  • Double-click the Function text.
  • Double-click the Object Model text.
  1. Click the Models & Functions tab.
  1. In System Browser > System Settings > Libraries navigate to the library you saved the Symbol in.
  1. Right-click the Symbols folder, and from the context menu select Send to Secondary Pane.
  • The Symbols Library Browser folder displays in the Secondary pane.
  1. Drag the Symbol into the Symbols section of the Function or Object Model editor.
  1. Right-click the Symbol and from the context menu do the following:
  • Select Set as Default
  • Select Style and select the preferred style, for example: 2D
  1. From the toolbar, click Save .
  1. (Optional) To test that the object to Symbol association is working, from System Browser drag the Symbol onto a graphic or canvas and from the Ribbon’s Option tab > Symbol Options group, select the corresponding Symbol style.
  • The bar chart Symbol you created and associated with the data point’s object model or Function, displays as it’s default graphic for that style.