Ask AI
Skip to main content

Add data set to Bar chart

Function: Add data set to Bar chart​

This action allows you to add a complete set of data to an existing Bar chart UI element on your application page. This is useful for dynamically displaying new information or updating charts with fresh data, making your visualizations interactive and responsive.

Input​

  • Bar chart UI element (Type: PART, Required): This is the specific Bar chart component on your page where you want to add the new data. You'll typically select this directly from your application's UI.
  • Code (Type: STRING, Required): A unique identifier or "code" for this new data set. This helps the system distinguish it from other data sets within the same chart.
  • Name (Type: STRING, Required): The display name for this data set, which will appear in the chart's legend or tooltips. If not provided, the "Code" will be used as the name.
  • Points (Type: STRING, Required): A list of numbers, separated by semicolons (e.g., "10;25;15;30"). These numbers represent the heights of the bars (y-axis values) for this data set. The bars will be drawn in the order you provide the numbers, and the x-axis labels will be generated automatically (first number = first bar, second number = second bar, etc.). If not provided, the data set will start without any points.
  • Color (Type: STRING, Optional): The color you want to use for the bars in this data set. You can provide a hexadecimal color code (e.g., "#FF0000" for red) or a standard color name. If not provided, a default color will be used.
  • Stack (Type: STRING, Optional): If you want this data set to be "stacked" on top of other data sets in the bar chart, provide a common value here. All data sets with the same "Stack" value will be grouped and displayed as stacked bars.

Output​

This action does not produce a direct output value. Instead, it modifies the specified Bar chart UI element directly by adding the new data set to it.

Execution Flow​

Real-Life Examples​

Here are some examples of how you might use the "Add data set to Bar chart" action in your application:

Example 1: Displaying Monthly Sales Data

Imagine you have a Bar chart on your dashboard showing sales performance. You want to add a new data set for "Online Sales" for the current quarter.

  • Inputs:
    • Bar chart UI element: SalesPerformanceChart (selected from your page)
    • Code: OnlineSalesQ3
    • Name: Online Sales - Q3
    • Points: 12000;15000;13500 (representing sales for July, August, September)
    • Color: #4CAF50 (a shade of green)
    • Stack: (left blank)
  • Result: The SalesPerformanceChart will now display a new set of green bars representing "Online Sales - Q3" alongside any existing data, showing the sales trend for each month.

Example 2: Tracking Website Visitor Sources

You have a Bar chart visualizing website traffic. You want to add a data set for "Social Media Referrals" to see how it compares to other sources.

  • Inputs:
    • Bar chart UI element: WebsiteTrafficChart (selected from your page)
    • Code: SocialMediaTraffic
    • Name: Social Media
    • Points: 500;750;600;800 (representing visitors from social media over four weeks)
    • Color: #2196F3 (a shade of blue)
    • Stack: (left blank)
  • Result: The WebsiteTrafficChart will update to include a new series of blue bars labeled "Social Media," allowing you to visually compare social media traffic with other sources like direct or organic search.

Example 3: Comparing Regional Product Sales (Stacked)

You have a Bar chart showing total product sales per month. You want to break down these sales by region (North, South, East, West) and show them as stacked bars to see the contribution of each region to the total.

  • Inputs (for "North Region" data set):
    • Bar chart UI element: ProductSalesByMonth (selected from your page)
    • Code: SalesNorth
    • Name: North Region
    • Points: 200;250;180
    • Color: #FFC107 (yellow)
    • Stack: RegionalSales
  • Inputs (for "South Region" data set):
    • Bar chart UI element: ProductSalesByMonth (selected from your page)
    • Code: SalesSouth
    • Name: South Region
    • Points: 150;100;200
    • Color: #E91E63 (pink)
    • Stack: RegionalSales
  • Result: The ProductSalesByMonth chart will display stacked bars for each month. The yellow segment will represent "North Region" sales, and the pink segment will be stacked on top, representing "South Region" sales. You would repeat this action for "East" and "West" regions, all using the RegionalSales stack value, to build a complete stacked bar chart.