Daily Revenue Trend - H1 2024

Basic time series showing 6-month revenue trend

Data: revenue_data

Monthly Sales Comparison Across Years

Multiple series chart with custom colors: 2022 (blue), 2023 (green), 2024 (red)

Data: sales_data

Department Productivity by Month

Custom colors for departments, default colors for metrics. Interactive filters allow selection.

Data: metrics

Department Performance (Single Metric Selection)

This example demonstrates the difference between choices and filters: - **Metric (choice)**: Single-select dropdown - pick exactly ONE metric at a time - **Quarter (filter)**: Multi-select dropdown - can select multiple quarters Use choices when the user must select exactly one option (like choosing a strategy or metric type).

Data: metrics

Shorthand Choices Syntax

**Shorthand syntax for choices:** Instead of `Dict{Symbol,Any}(:Metric => :Productivity)`, you can simply use `[:Metric, :Quarter]`. JSPlots automatically selects the first unique value from each column as the default. This is equivalent to: `Dict{Symbol,Any}(:Metric => first(unique(df.Metric)), :Quarter => first(unique(df.Quarter)))`

Data: metrics

example_visual

Example visualization image

Source: /home/stuart/Dropbox/library_julia/JSPlots.jl/examples/pictures/images.jpeg

images.jpeg

Sales by Product (Facet Wrap)

Facet wrap creates a grid of subplots, one for each product. Similar to ggplot2's facet_wrap.

Data: facet_data

Sales by Product and Region (Facet Grid)

Facet grid creates a 2D grid of subplots. First facet variable (Product) defines rows, second (Region) defines columns. Similar to ggplot2's facet_grid.

Data: facet_grid_data

Dynamic Controls Demo - Stock Returns

Use the dropdown menus to dynamically change: (1) Color by, (2) Line type by, (3) Aggregator, (4) Facet 1, (5) Facet 2.

Data: dynamic_data

Aggregation Demo - Multiple Observations per X

This dataset has 5 observations per month. Use the Aggregator dropdown to switch between: none (all points), mean, median, count, min, max.

Data: agg_data

Multi-Dimensional Weather Data - Dynamic X and Y Selection

Use the dropdowns to dynamically switch between different time scales (X) and measurements (Y). This demonstrates how you can provide multiple options for both axes and let users explore different views of the same dataset.

Data: multi_data

Sales with Continuous Range Filters

This example demonstrates jQuery UI range sliders for continuous variables. Use the Product dropdown for categorical filtering, and the Profit Margin and Units sliders to filter by numeric ranges. Each slider has two handles for min/max values.

Data: continuous_filter_data

Stock Prices from Struct Data Source

This chart demonstrates using a struct as a data source. The FinancialData struct contains both prices and volumes DataFrames. Charts reference struct fields using dot notation in the data_label (e.g., Symbol("financial.prices")).

Data: financial.prices

Smoothing Transforms Demo (EWMA, EWMSTD, SMA)

Use the **Y Transform** dropdown to apply smoothing: - **ewma**: Exponentially Weighted Moving Average — smooths prices with configurable weight (lower = smoother) - **ewmstd**: Exponentially Weighted Moving Std Dev — shows rolling volatility - **sma**: Simple Moving Average — trailing average over N periods Each smoothing transform reveals a parameter input box where you can adjust the weight or window size. The chart updates immediately when you change the parameter.

Data: smoothing_data