lc_widget Hour Week Month

Time-Based Visualization with `lc_hoursday_`, `lc_hoursweek_`, `lc_hoursmonth_*`

These are prefixes used for the IDs of SVG elements that need to display time-based data visualization in different temporal formats, ideal for showing activity patterns, performance metrics, and temporal trends across different time scales.

Time-Based Chart Types

Cast supports three types of time-based chart visualizations with different data formats:

hoursday (lc_hoursday_*): Single day hourly data visualization using same date with different hours (e.g., 2025-07-01T06:00:00, 2025-07-01T07:00:00, 2025-07-01T08:00:00)
hoursweek (lc_hoursweek_*): Weekly visualization using different dates across the week (e.g., 2025-07-20, 2025-07-19, 2025-07-26)
hoursmonth (lc_hoursmonth_*): Monthly visualization using different dates across the month (e.g., 2025-07-20, 2025-07-19, 2025-07-26)

Data Format Differences

Daily format: Same date with different hour timestamps for hourly patterns within a single day
Weekly/Monthly format: Different dates with timestamps for patterns across days/weeks/months

Use Cases

Activity patterns and usage analytics over time
Performance monitoring across different time periods
Temporal data analysis and trend identification
Time-based business intelligence and reporting
User engagement patterns and behavioral analysis
Operational metrics and system monitoring
Daily, weekly, and monthly performance tracking

Element Identification

The target element must be a <rect> with an ID that starts with one of:

lc_hoursday_* for single day hourly data visualizations
lc_hoursweek_* for weekly hour visualizations
lc_hoursmonth_* for monthly day visualizations

Input Format

The input value must be provided as a JSON array of objects with the following structure:

Note: While the JSON structure is the same for all three chart types, the data format differs:

lc_hoursday_* uses same date with different hours (e.g., 2025-07-01T06:00:00, 2025-07-01T07:00:00)
lc_hoursweek_* and lc_hoursmonth_* use the same format with different dates (e.g., 2025-07-20, 2025-07-19, 2025-07-26)

JSON Format

A JSON string containing an array of objects with the following structure:

[
  {
    "value": "25",
    "name": "2025-07-01T06:00:00",
    "title": "Early Morning",
    "chartColor": "yellow"
  },
  {
    "value": "60",
    "name": "2025-07-01T07:00:00",
    "title": "Morning Rush"
  },
  {
    "value": "35",
    "name": "2025-07-01T08:00:00",
    "title": "Early Morning"
  },
  {
    "value": "80",
    "name": "2025-07-01T09:00:00"
  }
]

Dataset/CSV Format

Alternatively, you can use tabular data from your datasets with the following columns:

name	value	title	chartColor
2025-07-01T06:00:00	25	Early Morning	yellow
2025-07-01T07:00:00	60	Morning Rush	blue
2025-07-01T08:00:00	35	Early Morning	-
2025-07-01T09:00:00	80	Dawn Activity	green
2025-07-01T10:00:00	95	-	orange

Dataset Usage:

Connect your time-based chart to a dataset containing the required columns
The system will automatically map the columns to the appropriate chart properties
Filter data by time ranges or other criteria to show relevant time-based charts
Multiple rows create multi-point time series for hourly, weekly, or monthly visualization

Important Notes:

Column names must match exactly as shown in the example (value, name, title, chartColor)
Column names are case-sensitive and must be spelled exactly as specified
If data is not passed in the correct format or column names don’t match, the element will display as a plain <rect> without any time-based visualization
The name field must contain valid timestamp or date strings for proper temporal ordering

Implementation Steps for Dataset Usage

To use dataset/CSV format with time-based charts, follow these steps:

Create Dataset: Import your data containing the required columns (value, name, title, chartColor)

Create Field: Create a field from your dataset that contains the time-based chart data

Set Value Formatting: In the field settings, set Value Formatting to “JSON” - this is crucial for proper data formatting

Override SVG Variables: In the SVG slide design tab, go to “Override SVG Variables”

Select Variable: Choose your time-based chart variable and use the format:

Include JSON Filter: Critical: Always include the | json filter with your field, otherwise the time-based chart will not work

Configuration Properties

Required Properties:

value: Numeric value for the data point (mandatory)
name: Timestamp or date string for temporal positioning (mandatory)

Optional Properties:

title: Text title for the chart (optional)
chartColor: Color specification for chart elements (optional)

Color Specifications

Single Color:

Provide a single color value: "red", "#FF0000"
Uses CSS color names or hex values

Color Priority and Behavior:

First Object Rule: The system will only use the chartColor from the first object in the JSON array
If the first object has a chartColor specified, that color will be used for the entire visualization
If the first object does not have a chartColor (or it’s empty), the system will fall back to appearance settings and project color palette
chartColor values in subsequent objects (second, third, etc.) are ignored

Default Behavior:

If no color is provided in the first object, colors will be taken from the appearance settings and Color Palette
This ensures consistency with your overall design palette

Time-Based Chart Types

Single Day Hourly Data with `lc_hoursday_*`

lc_hoursday creates single day hourly data visualizations in a radial clock format, ideal for showing daily activity patterns, usage peaks, and hourly performance metrics.

Best for:

Daily activity patterns and usage analytics
Hour-by-hour performance monitoring
Daily operational metrics and system load
User engagement patterns throughout the day
Business hours analysis and optimization

Implementation:

Each data point represents an hour within the same day
Displays data as bars radiating from center with time markers
All timestamps should be for the same day with different hour values

Weekly Hour Visualization with `lc_hoursweek_*`

lc_hoursweek creates hour-by-hour visualizations across a week in a circular segment format, ideal for showing weekly activity patterns, recurring trends, and hourly performance across multiple days.

Best for:

Weekly activity patterns and recurring trends
Cross-day performance comparison
Weekly operational analytics
User behavior patterns across the week
Business cycle analysis and planning

Implementation:

Each data point represents different days within the week
Displays data as colored segments in circular pie-chart format
Different dates across the week with various time stamps

Monthly Day Visualization with `lc_hoursmonth_*`

lc_hoursmonth creates day-by-day visualizations across a month in a grid/heatmap format, ideal for showing monthly trends, daily performance patterns, and month-long activity analysis.

Best for:

Monthly trends and performance tracking
Daily activity patterns across the month
Monthly business intelligence and reporting
Long-term trend analysis and forecasting
Monthly operational metrics and KPIs

Implementation:

Each data point represents a day within the month
Displays data as colored squares in calendar-like grid layout
Different dates across the month for comprehensive monthly view

Implementation Notes

Time-based charts automatically scale to fit the container dimensions
Data points are ordered chronologically based on the name field timestamps

Compatibility: Works with <rect> elements only

Example Usage

Basic Hourly Chart:

[
  { "value": "25", "name": "2025-07-01T06:00:00" },
  { "value": "60", "name": "2025-07-01T07:00:00" },
  { "value": "35", "name": "2025-07-01T08:00:00" }
]

Styled Weekly Chart:

[
  {
    "value": "250",
    "name": "2025-07-20T03:00:00",
    "title": "12-Hour Format",
    "chartColor": "yellow"
  },
  {
    "value": "280",
    "name": "2025-07-19T04:00:00",
    "title": "Weekly Performance"
  },
  {
    "value": "320",
    "name": "2025-07-26T05:00:00",
    "title": "Weekly Performance"
  }
]

Monthly Trend Chart:

[
  {
    "value": "250",
    "name": "2025-07-20T00:00:00",
    "title": "Monthly Trends",
    "chartColor": "yellow"
  },
  {
    "value": "280",
    "name": "2025-07-19T00:00:00",
    "title": "Monthly Trends"
  },
  {
    "value": "320",
    "name": "2025-07-26T00:00:00",
    "title": "Monthly Trends"
  }
]

Time-Based Visualization with lc_hoursday_*, lc_hoursweek_*, lc_hoursmonth_*

JSON Format

Dataset/CSV Format

Implementation Steps for Dataset Usage

Time-Based Chart Types

Single Day Hourly Data with lc_hoursday_*

Weekly Hour Visualization with lc_hoursweek_*

Monthly Day Visualization with lc_hoursmonth_*

Time-Based Visualization with `lc_hoursday_`, `lc_hoursweek_`, `lc_hoursmonth_*`

Single Day Hourly Data with `lc_hoursday_*`

Weekly Hour Visualization with `lc_hoursweek_*`

Monthly Day Visualization with `lc_hoursmonth_*`