Ask AI
Skip to main content

Add data set to Line chart

Function: Add data set to Line chart​

Enables the addition of a complete data set to a "Line chart UI element", facilitating dynamic data visualization. This action allows you to populate your line charts with specific data points, customize the appearance of the line, and even fill the area beneath it.

Input​

  • Line chart UI element (Required, PART): The specific Line chart component on your page where you want to add new data.
  • Code (Required, STRING): A unique identifier for this new data set. This helps the system distinguish it from other data sets in the same chart.
  • Name (Required, STRING): A display name for this data set, which will appear in the chart's legend.
  • Points (Required, STRING): A list of numbers, separated by semicolons (e.g., "10;25;15;30"), representing the Y-axis values for each point in the line. The X-axis labels will be automatically generated (e.g., "Point 1", "Point 2", etc.).
  • Line color (Required, STRING): The color of the line for this data set, specified as a hexadecimal color code (e.g., "#FF0000" for red).
  • Line width (Optional, NUMBER): The thickness of the line, specified as a whole number (e.g., 2 for a standard line). Default is 2.
  • Line type (Optional, SELECT_ONE): The style of the line. You can choose from "Solid", "Dashed", or "Dotted". Default is "Solid".
    • Options: Solid, Dashed, Dotted
  • Area color (Optional, STRING): If you want to fill the area beneath the line, specify its color using a hexadecimal code.
  • Area transparency (Optional, NUMBER): If an area color is set, this controls how transparent the filled area is. Enter a value between 0 (completely transparent) and 1 (fully opaque).
  • Smooth lines (Optional, BOOLEAN): Choose True if you want the line to appear smooth and curved, or False for sharp, angular lines. Default is False.
  • Stack (Optional, STRING): Assign a common text value here to stack this data set on top of others that have the same "Stack" value. This is useful for showing cumulative totals.

Output​

This action directly modifies the specified "Line chart UI element". There is no explicit output value returned by this action.

Execution Flow​

Real-Life Examples​

Example 1: Tracking Monthly Sales Performance​

Imagine you have a "Sales Trend" line chart on your dashboard and you want to add the sales data for the current year.

  • Inputs:
    • Line chart UI element: MySalesTrendChart
    • Code: Sales2023
    • Name: 2023 Sales
    • Points: 100;120;110;130;150;140;160;170;180;190;200;210 (representing monthly sales figures)
    • Line color: #4CAF50 (a shade of green)
    • Smooth lines: True
  • Result: The "MySalesTrendChart" will now display a new, smooth green line labeled "2023 Sales", showing the monthly sales performance for the year.

Example 2: Comparing Website Visitors with an Area Fill​

You want to compare website visitor numbers for two different years on a "Website Traffic" chart, highlighting the area under one of the lines.

  • Inputs (for 2022 Visitors):
    • Line chart UI element: WebsiteTrafficChart
    • Code: Visitors2022
    • Name: 2022 Visitors
    • Points: 500;550;520;600;650;630;700;720;750;780;800;820
    • Line color: #2196F3 (blue)
    • Area color: #BBDEFB (light blue)
    • Area transparency: 0.5
  • Inputs (for 2023 Visitors):
    • Line chart UI element: WebsiteTrafficChart
    • Code: Visitors2023
    • Name: 2023 Visitors
    • Points: 600;680;650;720;780;750;820;850;880;900;930;950
    • Line color: #FFC107 (yellow)
    • Line type: Dashed
  • Result: The "WebsiteTrafficChart" will show two lines: a blue line for "2022 Visitors" with a semi-transparent light blue area filled underneath, and a dashed yellow line for "2023 Visitors", allowing for easy visual comparison.

Example 3: Visualizing Project Phase Progress (Stacked)​

You have a "Project Progress" chart and want to show the cumulative progress of different project phases (Design, Development, Testing) as stacked lines.

  • Inputs (for Design Phase):
    • Line chart UI element: ProjectProgressChart
    • Code: DesignPhase
    • Name: Design
    • Points: 10;20;30;40;50
    • Line color: #FF5722 (orange)
    • Stack: ProjectA
  • Inputs (for Development Phase):
    • Line chart UI element: ProjectProgressChart
    • Code: DevPhase
    • Name: Development
    • Points: 5;10;15;20;25
    • Line color: #00BCD4 (cyan)
    • Stack: ProjectA
  • Inputs (for Testing Phase):
    • Line chart UI element: ProjectProgressChart
    • Code: TestPhase
    • Name: Testing
    • Points: 2;5;8;10;12
    • Line color: #8BC34A (light green)
    • Stack: ProjectA
    • Line width: 3
  • Result: The "ProjectProgressChart" will display three lines (Design, Development, Testing) that are stacked on top of each other, showing the cumulative progress of "ProjectA" over time. The "Testing" line will be thicker.