How to Filter Chart Values Using SelectForm and Plotly

This example demonstrates how to filter chart data using population statistics from the United States. The following filters are applied:

• A date picker to filter by date
• A select form to filter by state

Code

Python

import numpy as np
import pandas as pd
import plotly.express as px

import morph
from morph import MorphGlobalContext

@morph.func
def generate_population_data(context: MorphGlobalContext):
    # Initialize
    dates = pd.date_range(start="2022-01-01", end="2024-12-31", freq="M").strftime("%Y-%m-%d")
    states = ["California", "Texas", "Florida", "New York", "Illinois"]  # List of states

    # Generate dummy data
    data = pd.DataFrame({
        "date": np.tile(dates, len(states)),  # Repeat dates for all states
        "state": np.repeat(states, len(dates)),  # Repeat each state for all dates
        "population": np.random.randint(100000, 10000000, size=len(dates) * len(states))  # Generate random population data
    })
    return data

@morph.func
@morph.load_data("generate_population_data")
def filter_plotly_chart(context: MorphGlobalContext):
    data = context.data["generate_population_data"]
    start_date = context.vars["start_date"]
    end_date = context.vars["end_date"]
    state = context.vars["state"]

    # apply filter
    df = data[data["date"].between(start_date, end_date)]
    if state != "all":
        df = df[df["state"] == state]
    fig = px.bar(df, x="date", y="population", color="state", title="Population Over Time by State")
    return fig

SQL

{{
    config(
        name = "get_state_list"
    )
}}

select
    distinct state
from
    {{load_data("generate_population_data")}}

MDX

export const title = "Filter plotly chart";

import { defineState } from "@morph-data/components";

export const { dateStart, dateEnd, state } = defineState({
  dateStart: "2024-01-01",
  dateEnd: "2024-09-30",
  state: "all",
});

# Filter plotly chart

This example shows how to filter a plotly chart.

<div className="p-4 border border-gray-300 rounded-lg shadow-md">
  <Grid cols="2">
    <div>
      <DataTable loadData="generate_population_data" />
    </div>
    <div>
      <div className="flex items-center gap-3">
        Date Range
        <div className="flex-1">
          <DateRangePicker state={[dateStart, dateEnd]} />
        </div>
      </div>
      <div className="flex items-center gap-3">
        State
        <div className="flex-1">
          <Select state={state}>
            <SelectItem value="all">Not Selected</SelectItem>
            <SelectItems
              loadData="get_state_list"
              valueKey="state"
              labelKey="state"
            />
          </Select>
        </div>
      </div>
      <Embed
        loadData="filter_plotly_chart"
        variables={{
          start_date: dateStart.value,
          end_date: dateEnd.value,
          state: state.value,
        }}
        height={400}
      />
    </div>
  </Grid>
</div>

Result