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 define the data points, appearance, and behavior of a new line or update an existing one within your chart.

Input​

  • Line chart ui element (PART, required): The specific Line chart component on your page where you want to add or update a data set.
  • Code (STRING, required): A unique identifier for this data set. If a data set with this code already exists in the chart, it will be updated; otherwise, a new one will be added.
  • Name (STRING, required): The display name for this data set, which will typically appear in the chart's legend.
  • Line width (STRING, optional, default: "2"): The thickness of the line for this data set, specified as a number (e.g., "3").
  • Line type (SELECT_ONE, optional, default: "Solid"): The visual style of the line.
    • Solid: A continuous line.
    • Dashed: A line composed of dashes.
    • Dotted: A line composed of dots.
  • Line color (STRING, required): The color of the line, specified as a hexadecimal color code (e.g., "#FF0000" for red).
  • Area color (STRING, optional): A hexadecimal color code (e.g., "#ADD8E6" for light blue) to fill the area beneath the line. If left empty, no area will be filled.
  • Area transparency (NUMBER, optional, default: 0): Controls how transparent the filled area beneath the line is. Enter a value between 0 (completely transparent) and 1 (fully opaque).
  • Smooth lines (BOOLEAN, optional, default: False): Set to True if you want the line to appear smooth and curved, rather than sharp and angular.
  • Stack (STRING, optional): Assign a common text value here to stack this data set with other data sets that have the same 'Stack' value. This is useful for showing cumulative totals.
  • Points (STRING, required): A list of numbers, separated by semicolons (e.g., "10;25;15;30"). These numbers represent the Y-axis values for the data points. The X-axis labels are automatically generated based on the order of points (first point = first label, second point = second label, etc.).

Output​

This action does not produce a direct output value. Instead, it modifies the specified "Line chart ui element" by adding or updating the data set and its visual style.

Execution Flow​

Real-Life Examples​

Example 1: Adding Sales Data for Q1​

Imagine you have a Line Chart on your dashboard named "Quarterly Sales" and you want to display the sales figures for the first quarter.

  • Inputs:
    • Line chart ui element: Quarterly Sales Chart
    • Code: Q1_Sales
    • Name: Q1 Sales
    • Line width: 3
    • Line type: Solid
    • Line color: #4CAF50 (Green)
    • Area color: #C8E6C9 (Light Green)
    • Area transparency: 0.5
    • Smooth lines: True
    • Points: 12000;15500;13000
  • Result: The "Quarterly Sales Chart" will now display a smooth, green line representing Q1 sales, with a semi-transparent light green area beneath it, showing data points for January ($12,000), February ($15,500), and March ($13,000).

Example 2: Tracking Website Visitors with a Dashed Line​

You want to add a new data set to your "Website Traffic" chart to show daily unique visitors with a dashed blue line.

  • Inputs:
    • Line chart ui element: Website Traffic Chart
    • Code: UniqueVisitors
    • Name: Unique Visitors
    • Line type: Dashed
    • Line color: #2196F3 (Blue)
    • Points: 500;550;480;620;700;680;590
  • Result: The "Website Traffic Chart" will update to include a new dashed blue line, illustrating the unique visitor count for each day of the week.

Example 3: Comparing Monthly Expenses with Stacking​

You have a "Monthly Budget" chart and want to show different expense categories (Rent, Utilities, Groceries) as stacked lines to see the total monthly expenditure.

  • Inputs (for Rent data set):
    • Line chart ui element: Monthly Budget Chart
    • Code: RentExpenses
    • Name: Rent
    • Line color: #FFC107 (Amber)
    • Stack: MonthlyExpenses
    • Points: 1000;1000;1000
  • Inputs (for Utilities data set):
    • Line chart ui element: Monthly Budget Chart
    • Code: UtilityExpenses
    • Name: Utilities
    • Line color: #9C27B0 (Purple)
    • Stack: MonthlyExpenses
    • Points: 150;180;160
  • Inputs (for Groceries data set):
    • Line chart ui element: Monthly Budget Chart
    • Code: GroceryExpenses
    • Name: Groceries
    • Line color: #00BCD4 (Cyan)
    • Stack: MonthlyExpenses
    • Points: 300;320;280
  • Result: The "Monthly Budget Chart" will display three lines for Rent, Utilities, and Groceries. Because they all share the 'MonthlyExpenses' stack value, the Utilities line will appear stacked on top of the Rent line, and the Groceries line will stack on top of Utilities, visually representing the cumulative total of these expenses each month.