• Video Tutorials
• Frequently Asked Questions
• Creating an Interface
  • Actions and Navigation Components
    • Button
    • Timer
  • Advanced Components
    • Compare Runs Table
    • Histogram
    • Login Component
    • Run Table
  • Charts, Tables, and Data Components
    • Area Chart
    • Comparison Bar Chart
    • Data Table
    • Financial Table
    • Line Chart
    • Pie Chart
    • Sparkline
    • Time Bar Chart
    • Value
  • Decision Input Components
    • Checkbox Decision
    • Drawable Line Chart
    • Radio Button Decision
    • Scenario Selector
    • Slider Decision
    • Text Decision
  • Drawing Objects Components
  • Interface Designer Overview
  • Text, Images, and Video Components
    • Images
    • Text
    • Video
• Writing a Model
  • Language Overview
  • Function Reference
• Importing a Model From Another Program
  • Overview
  • Specific Programs

How to Setup a Drawable Line Chart?

The drawable line chart allows users to enter a decision using a chart. This component gives you the option to choose from a variety of graph displays, such as a line graph, area graph, and a bar graph.

Setting up a Line Chart

This section explains how to setup a drawable line chart, and provides examples of the available display options.

1. Begin by clicking the horizontal 'Decision Inputs' tab of the 'Add a Component' tab in the component panel (shown below).
   
   

   Drawable Line Chart Component
   

   
   
   
   
2. Click and drag the drawable line chart component to the canvas area of the UI designer. This will open the 'Drawable Line Chart Settings' tab. Click on the horizontal tab titled 'Series'.
   
   

   Drawable Line Chart Settings: Series Tab
   

   
   
   
   
3. Add a series by clicking the 'Variable Name' drop-down menu, and then click 'Browse' to view the variables in the 'Browse' screen. Click on a variable, and then click 'Select'.
   
   
4. Click on the 'Color' box to choose a color (optional).
   
   
5. Enter a number to adjust the line thickness in the text entry box (or use the spinbox arrows).
   
   
6. Choose one of the following three display styles:
   
   I. Line Graph
   The line graph option displays the user's decision as a line graph (see example below).
   
   

   
   

   
   
   
   II. Area Graph
   The area graph option displays the user's decision as an area graph (see example below).
   
   

   
   

   
   
   
   III. Bar Graph
   The bar graph option displays the user's decision as a bar graph (see example below).
   
   

   
   

   
   
   
   
7. Place a check in the 'Snap to Grid' checkbox to force the graph lines to be aligned with the chart's increments when a user is making a decision (optional).

Labeling the Drawable Line Chart

Labels can be added to the drawable line chart component to name the chart, name the axes, and display the chart increments for the user's decision. To access the properties used for naming the chart, customizing the labels, setting the number format, and adjusting the margin placement, click the ‘Title and Axes’ tab in the component panel. Note that the properties listed below are all optional.

Viewing the 'Title and Axes' properties requires expanding the component panel (shown below).

Example: Expanding the component panel

Title and Axis Property Options

• Chart Title - Enter a chart title for the drawable line chart in the 'Chart Title' text entry box.
  
  
• (X-Axis) Title - Enter a title in the 'Title' text entry box to label the drawable line chart X-axis.
  
  
• (X-Axis) Grid Color - Click the 'Grid Color' box to choose a color for the vertical lines of the drawable line chart grid.
  
  
• (Y-Axis) Title - Enter a title in the 'Title' text entry box to label the drawable line chart Y-axis.
  
  
• (Y-Axis) Minimum - Enter a number in the 'Minimum' text entry box to appear at the bottom label of the drawable line chart Y-axis.
  
  
• (Y-Axis) Maximum - To manually enter a maximum in the ‘Maximum’ text entry box, the ‘Auto Calculate Max’ checkbox (located below the 'Remove Label' button) must be unchecked.
  
  
• (Y-Axis) Num Labels - Enter a number in the 'Num Labels' text entry box to determine the number of labels for the drawable line chart Y-axis.
  
  
• (Y-Axis) Grid Color - Click the 'Grid Color' box to choose a color for the horizontal lines of the drawable line chart grid.
  
  
• Use Custom X-Axis Labels - Place a check in the ‘Use Custom X-Axis’ checkbox to use custom X-axis labels. The custom X-axis labels are located in the 'Custom X-Axis Labels' list box. The custom X-axis labels are added using the 'Add Label' button located below the list box.
  
  
• X-Axis Number Format - Use the 'X-Axis Number Format' text entry box to change the number format. For example, to change the default format to dollars, enter: $#,##0.
  
  
• Y-Axis Number Format - Use the 'Y-Axis Number Format' text entry box to change the number format. For example, to change the default format to dollars, enter: $#,##0.
  
  
• Y-Axis Rounding Increment - Enter the increment progression of the Y-axis in the 'Y-Axis Rounding Increment' text entry box (for example, entering a '1' will make the Y-axis increment progression be 1, 2, 3, 4 ...; entering a '2' will make the Y-axis increment progression be 2, 4, 6, 8...)
  
  
• Add Label - Add a label to the ‘Custom X-Axis Labels’ list box by entering a label name in the text entry box on the right of the ‘Add Label’ button, and then clicking the ‘Add Label’ button.
  
  
• Remove Label - Select a label in the list box above the 'Add Label' button, and then click 'Remove Label' to remove the label from the list box.
  
  
• Left Margin - Enter a number in the 'Left Margin' text entry box to control the margin distance between the left side of the drawable line chart and the left side of the drawable line chart border.
  
  
• Right Margin - Enter a number in the 'Right Margin' text entry box to control the margin distance between the right side of the drawable line chart and the right side of the drawable line chart border.
  
  
• Top Margin - Enter a number in the 'Top Margin' text entry box to control the margin distance of the top of the drawable line chart from the top of the drawable line chart border.
  
  
• Bottom Margin - Enter a number in the 'Bottom Margin' text entry box to control the margin distance of the bottom of the drawable line chart and the bottom of the drawable line chart border.
  
  

FAQs

How do I change the number format?

Drawable Line Chart Settings: Series Tab

Changing the Chart Colors

Click the 'Styles' tab in the component panel to access the properties used to control the color to the drawable line chart, change the font of the labels on the chart, and to choose the colors for compared runs. Note that the properties listed below are all optional.

• Grid Background Color - Click the 'Grid Background Color' box to choose a color for the drawable line chart grid.
  
  
• Chart Background Color - Click the 'Chart Background Color' box to choose a color for the drawable line chart background.
  
  
• Font Family - Click the drop-down menu arrow to choose a font style for the drawable line chart label.
  
  
• Series Alpha - Enter a number in the 'Series Alpha' text entry box to adjust the opacity of the series.
  
  
  

Label Font Controls

• Label Font Size - Enter a number in the 'Label Font Size' text entry box to control the size of the X-axis and Y-axis increment labels.
  
  
• Label Font Color - Click on the 'Label Font Color' box to choose a color for the X-axis and Y-axis increment labels.

Axis Font Controls

• Axis Font Size - Enter a number in the 'Axis Font Size' text entry box to control the size of the X-axis and Y-axis titles.
  
  
• Axis Font Color - Click on the 'Axis Font Color' box to choose a color for the X-axis and Y-axis titles.

Title Font Controls

• Title Font Size - Enter a number in the 'Title Font Size' text entry box to control the size of the drawable line chart title.
  
  
• Title Font Color - Click on the 'Title Font Color' box to choose a color for the drawable line chart title.
  
  
• Show Border - Place a check in the 'Show Border' checkbox to make a border around the drawable line chart.
  
  

Drawable Line Chart Settings: Styles Tab

Size, Position, and ToolTip

Click the ‘Size, Position, and ToolTip’ tab in the component panel to access the properties used to adjust the size and position of the drawable line chart and provide tooltip information to the user. Note that the properties listed below are all optional.

• X - Enter a number in the ‘X’ text entry box to adjust the left and right positioning of the drawable line chart on the canvas. A higher number moves the drawable line chart to the right, and a lower number moves the drawable line chart to the left.
  
  
• Y - Enter a number in the ‘Y’ text entry box to adjust the up and down positioning of the drawable line chart on the canvas. A larger number will lower the position, and a smaller number moves the drawable line chart higher.
  
  
• Width - Enter a number in the ‘Width’ text entry box to adjust the drawable line chart width.
  
  
• Height - Enter a number in the ‘Height’ text entry box to adjust the drawable line chart height.
  
  
• Tab Index - Specifies the tab ordering of objects in a SWF file. The tabIe index property is -1 by default, meaning no tab index is set.
  
  
• Lock - Use the ‘Lock’ checkbox to lock the drawable line chart’s position in place on the canvas. A small lock icon will appear near the drawable line chart. Click on the lock icon or uncheck the lock checkbox to unlock the drawable line chart.
  
  
• Visible to Facilitator Only - Use the ‘Visible to Facilitator’ checkbox to restrict the drawable line chart‘s visibility to only be seen by facilitators.
  
  
• Tooltip - Enter in the details of the drawable line chart in the ‘ToolTip’ text entry box. The details entered will appear on the screen when a user places their mouse cursor on or across the drawable line chart.
  
  

Drawable Line Chart Settings: Size, Position, and ToolTip Tab

Related Links

Drawable Line Chart Properties

Back | Forward | Main Page