Skip to main content

Creating the Line Chart and Stacked Line Widgets

Updated

When to use the Line Chart widget

The Line Chart widget is used to highlight key data and identify actionable items. It is very helpful when you want to visualize data trends and measure the impact of these trends on MSP operations and goals.

Line Chart-5.jpg

The Stacked Line Chart widget helps you visualize the relative contributions of different variables over a specified period of time. You can follow the steps to create a line graph and choose the Stacked Area Style option in the Design section of the MSPbots app to create this type of chart.

Line Chart-4.jpg

How to design a line chart widget

  1. Log in to MSPbots as an admin.
  2. Navigate to Widgets on the MSPbots app menu and click New Widget. 

    widgets.jpg
  3. On the New Widget window, select the Line Chart widget type. 

    Line Chart Widget
     
  4. When the Widget Builder window opens, provide the following:
    • Name - Give the widget a Name.
    • Description - Provide a short Description.
    • More Info
    • Role - Select User or Admin.
    • Tag

      Widget Builder

      If you want to create or edit a Line Chart widget or a Stacked Line chart widget using the New Widget Builder mode, refer to How to Create a Line Chart Widget Using the New Widget Builder.

      Line Chart.jpg
  5. Click the Apply button.
  6. Go to Dataset and click the + button. 

    data source
  7. When the Add New Layer window appears, click New Layer. 

    add new layer
  8. Do the following in the Dataset window: 
    1. Select a dataset.
    2. Provide a name for the selected dataset.
    3. Add columns by selecting an option from the Column Name dropdown list and assigning an Alias and Business Type for each. Click the add + icon to add more rows.  
    4. Add filters, measures, and dimensions.
    5. Choose a value for Order By and input a value for Row Limit, if necessary. 
  9. Click the Save button.

    dataset
  10. Click Apply. This will show a default preview of the line chart that you created. 
  11. Next, go to the Config tab. Provide data for the following fields:
    • Line Chart Title - Provide a title for the data being presented. 
    • Show as Cumulative - When checked, on the y-axis, the data in the back will automatically add the data in the front. For example, on the y-axis, the value of 'a' is 1, 'b' is 2, 'c' is 3. When checked, 'a' remains 1, 'b' becomes 3, 'c' becomes 6.
    • Dimension - Select the data for the x-axis (horizontal). 
    • Multiple Measure
      • If not selected, the y-axis will have one measure.
      • If selected, multiple measures will appear on the y-axis, such as the left y-axis and the right Y-axis.
    • Set Goal - Provide a preferred set goal, if necessary.
    • Goal Color - Select an appropriate color for the set goal.
    • Set Smooth - Select the Set Smooth box to apply smooth lines for the line chart.
    • Measure- Select the data for the y-axis (vertical) of the bar chart. 
    • Dimension Group - Select a preferred dimension group from the dropdown list, if necessary. 
    • Trend Line - Select a preferred trend line from the dropdown list, if necessary. 
    • Dimension Name - Provide the name for x-axis of the line chart. 
    • Measure Name - Provide the name for the y-axis (vertical). 
    • Y-Axis Name Location - Select a preferred location for the Measure Name (Start, Center, or End) from the dropdown list, if necessary. 
    • Y-Axis Name Gap - Provide a preferred number of gaps for Measure Name, if necessary. 
    • Y-Axis Percentage - Selecting this option will display the percentage on the y-axis.
    • Right Y-Axis Coordinate - If selected, it will display the coordinates on the right x-axis.
      • Use Right Y-Axis Measure - Select the measure for the right y-axis.
      • Right Y-Axis Label Name - Enter the label name for the right y-axis.
      • Right Y-Axis Min - Enter the minimum value for the right y-axis.
      • Right Y-Axis Max - Enter the maximum value for the right y-axis.
      • Right Y-Axis Percentage - Select to display the percentage on the right y-axis.
    • X-Axis Name Rotate - Provide the preferred orientation for Dimension Name, if necessary. 
    • Y-Axis Value - Set the maximum value, minimum value, and interval value for the yAxis.
    • Connect Null Value - When checked, dimensions with null values will still be connected to form a line chart.
    • Split Line Show - Select the checkbox for Split Line Show if you wish to show the split lines.
    • Show Label - The default is to show the labels. Remove the selection for the Show Label checkbox if you prefer not to show these.
    • Stacked Area Style - When checked, the Line Chart will be displayed in Stacked Line Chart style.
  12. If you want to change the text or background color when the fields and measures meet specific conditions, set a conditional formatting rule for your line chart. Go to Conditional Formatting and add rules to define the conditions. Once a rule is set, click Apply on the widget rule window. 

    Conditional Formatting
  13. Lastly, click Apply on the widget to preview the widget.

How to create a stacking line widget 

Stacked line charts help you visualize the relative contribution of different variables over a specified time. You can create this kind of chart for your widget by following the procedure for creating a line chart and selecting the Stacked Area Style option in the MSPbots app Widget Builder. 

After filling the fields under the Config tab in Step 11 for creating a line chart, scroll down, and select the Stacked Area Style option.  

Line Chart-1.jpg

Video Instructions

Watch this video or follow the procedure below to create a line chart widget.

 

Related articles