This page demonstrates the key features of LineChart plots in JSPlots.
Basic time series: Simple line chart with date axis
Multiple series: Comparing multiple lines with color dimension
Interactive filters: Dropdown menus to filter data dynamically
Dynamic controls: Change color, aggregation, and faceting on the fly
Aggregation: Handle multiple observations per x value
Faceting: Facet wrap (1 variable) and facet grid (2 variables)
Integration: Combining charts with images and text
Daily Revenue Trend - H1 2024
Basic time series showing 6-month revenue trend
Plot Attributes
Axes
Date
Revenue
0.4(0.25 - 2.5)
Data: revenue_data
Monthly Sales Comparison Across Years
Multiple series chart demonstrating color dimension to compare years
Plot Attributes
Axes
Month
Sales
0.4(0.25 - 2.5)
Data: sales_data
Department Productivity by Month
Interactive filters allow you to select different departments and quarters
Filters
Plot Attributes
Axes
Month
Value
0.4(0.25 - 2.5)
Data: metrics
example_visual
Example visualization image
images.jpeg
Sales by Product (Facet Wrap)
Facet wrap creates a grid of subplots, one for each product. Similar to ggplot2's facet_wrap.
Plot Attributes
Axes
Month
Sales
Facets
0.4(0.25 - 2.5)
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.
Plot Attributes
Axes
Month
Sales
Facets
0.4(0.25 - 2.5)
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.
Plot Attributes
Axes
Month
Return
Facets
0.4(0.25 - 2.5)
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.
Plot Attributes
Axes
Month
Sales
0.4(0.25 - 2.5)
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.
Plot Attributes
Axes
0.4(0.25 - 2.5)
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.
Filters
122.16 - 999.08
5.28 - 49.48
Plot Attributes
Axes
Month
Sales
0.4(0.25 - 2.5)
Data: continuous_filter_data
Struct Data Source Example
JSPlots supports using custom structs containing DataFrames as data sources. This is useful when:
You have related DataFrames that belong together (e.g., prices and volumes)
You want to pass complex data structures without unpacking them
Multiple charts need to reference different parts of the same data
Pass the struct to JSPlotPage and reference fields using dot notation: Symbol("struct_name.field_name")
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")).
Plot Attributes
Axes
Date
Price
0.4(0.25 - 2.5)
Data: financial.prices
Key Features Summary
Dynamic X and Y dimensions: Choose which variables to plot on X and Y axes from dropdowns
Time series support: Automatic date formatting and axis scaling
Dynamic color grouping: Choose which variable to color by from dropdown
Aggregation: Handle multiple observations per x value with mean, median, count, min, max, or none
Interactive filters: Dropdown menus for categorical filtering and jQuery UI range sliders for continuous numeric filtering
Continuous range sliders: Single slider bar with two draggable handles for min/max values (powered by jQuery UI)
Dynamic faceting: Choose 0, 1, or 2 variables for faceting on the fly
Customization: Control titles, labels, line width, and markers
Integration: Combine with other plot types, images, and text
