The Line Chart element allows you to analyze data changes over time in an intuitive and effective way. By connecting points with lines, trends, fluctuations, and critical periods can be easily observed. It is used for performance analysis, time series reporting, and comparative charts.

The Line Chart element is supported in both web and mobile applications.

Areas of Use

• Viewing daily, weekly, or monthly sales trends,
• Analyzing website traffic,
• Tracking changes in conversion rates over time,
• Comparing performance metrics, etc.

Website Traffic Tracking

The Line Chart is used to track the daily number of visitors and conversion rate of an e-commerce site.

• An action that pulls daily visitor and conversion data is connected as the data source.
• Data Field → Number of visitors
• Second Data Field → Conversion rate
• Different colors are assigned to each data series (e.g., visitors → blue, conversion → green).
• Both visitor and conversion data are displayed in the tooltip.
• If Show Data Labels is enabled, the value of each point can be seen.
• The Y-axis starts from zero, and the maximum value is determined dynamically.

Connecting the Data Source

1. Go to the Datasources module.
2. Click the + icon next to the Tables heading and name the table “TrafficData”.
3. Create the following table.

4. Then click SQL Actions and name the action “TrafficData”. You can also create it with C#.
5. Use the following SQL example:

SELECT ‘2025-09-01’ AS Day, 1200 AS Visitors, 3.5 AS ConversionRateUNION ALLSELECT ‘2025-09-02’, 1500, 4.2UNION ALLSELECT ‘2025-09-03’, 1100, 2.8UNION ALLSELECT ‘2025-09-04’, 1700, 3.9UNION ALLSELECT ‘2025-09-05’, 1600, 4.0‍

UI Design Module Operations

1. Click the Add Action button on the right side of the application screen.
2. Select the Custom > TrafficData action.
3. Add the Line Chart element.
4. Select the TrafficData action from the Properties panel Datasource field.

Using Properties in the Scenario Context

• Datasource
  
  • Description: Specifies the source of the data to be used in the chart.
  • Example: Select the “TrafficData” data.
• Data Label
  
  • Description: Data label to be displayed on the points.
  • Example: “1200, 1500, 1700...”
• Tooltip Custom Title Data Label
  
  • Description: Data to be displayed in the tooltip title.
  • Example: Tooltip → “2025-09-02”
• Tooltip Custom Content Data Label
  
  • Description: Additional data field for detailed explanations in the tooltip content.
  • Example: “Visitors: 1500 — Conversion: 4.2%”
• Multi Tooltip Content Fields
  
  • Description: You can display multiple fields in the tooltip.
• Data Field
  
  • Description: Main data series.
  • Example: Visitors
• Data Bg Color
  
  • Description: Line and point color.
  • Example: Visitors → Blue (#00BFFF)
• Second Data Field / Second Data Bg Color
  
  • Description: Second data series.
  • Example: ConversionRate → Green (#28a745)
• Third Data Field / Third Data Bg Color
  
  • Description: Third data series (optional).
• Legend
  
  • Description: Shows the names of the data series.
  • Options: top, bottom, left, right
• Left Axis / Right Axis
  
  • Description: Show/hide the Y/X axes.
• Begin At Zero
  
  • Description: Starts the graph at zero.
• Max Y Axis Value
  
  • Description: Sets the maximum value on the Y axis.
• Show Data Labels (web only)
  
  • Description: Shows values above the points.
• Data Label Formatter (web only)
  
  • Description: Allows you to select the label format.
  • Options: Money, Percent, Fractional
• Line Color / Thickness / Dot Width (web only)
  
  • Description: Sets the line color, thickness, and dot size.
• Data Label Position (web only)
  
  • Description: Determines the label position (top, bottom, left, right).

When the Scenario Step is Complete

• On the X-axis: Days → September 1–5
• On the Y-axis: Visitor counts and conversion rates
• Two separate lines (Visitors & ConversionRate) appear in different colors.
• Category + value information is displayed when the tooltip is opened.
• Users can easily analyze web traffic trends.

Limitations

• “Show Data Labels,” “Data Label Formatter,” and line styles only work in web applications.
• On mobile, data points are only displayed via tooltip.

Tips and Best Practices

Do not attempt to define properties without adding a datasource.

• Keep color contrasts high (especially in multiple series).
• Adding too many data points can make the graph complex.
• Ideal number of points: 7–30.
• Limit data queries to improve performance with large data sets.