WS Line Chart

The WS Line Chart Widget is used to visualize data trends over time or across categories using a continuous line. Each data point on the line represents a value at a specific category or time interval. This widget is perfect for displaying trends such as sales, temperature, stock prices, and more, with a focus on showing the progression of values over a period.

Step 1: Add the Widget

Open the Widget Panel on the left, go to the Charts & Tables section, and select the WS Line Chart Widget onto your page.

Step 2: Connect to Data Model

With the WS Line Chart selected, navigate to the Property Editor. In the Data Model field, choose a data source that contains both categorical (for the X-axis) and numerical data (for the Y-axis), such as time-series data (e.g., sales over time, stock price history, etc.).

Step 3: Configure Row (X-axis)

Set up the Row (X-axis), which defines the categories or time intervals for the chart. This could be a field such as date, time, month, or category.

• You can choose multiple fields to break down the data further. For example, using year and month will allow the X-axis to display data over multiple time levels, like 2022 -> January, February, March, etc.

If Drilldown is enabled, clicking on a data point will allow you to drill down to more granular details (e.g., from Year to Month, from Region to City).

Step 4: Add and Configure Datasets

Under the Datasets section, define which numerical data will be represented by the line(s) on the chart.

• Column: Choose a numerical field (e.g., sales, temperature, revenue) to plot on the Y-axis.

• Summarize By: Select the aggregation method for the data (e.g., sum, average, etc.).

You can add multiple datasets, each of which will be represented by a separate line on the chart. Each dataset’s line will be drawn based on its values, and the Y-axis automatically scales to accommodate the highest value across all datasets.

You can further customize the display, layout, and behavior of the chart using additional chart properties. For a full list of customization options, refer to the Common Properties.

Step 5: Preview and Interact

After configuring your chart, use Run Mode to preview it on your page. Interact with the chart just like an end user would:

• Hover over points on the line to view tooltips with exact values.

• Click on a data point or line to trigger drilldowns or zoom into more detailed data.