# How to Configure Charts and Graphs

## Overview

Charts and Graphs allow you to visualize patient data trends over time in the Care app. By configuring charts, you enable care team members and patients to see how key metrics are progressing (or regressing) and make data-informed clinical decisions. Charts pull data from Custom Data Types with numeric fields (Integer or Float) or from assessments with scoring conditions.

Supported visualization types include line graphs, bar graphs, and pie charts, each suited to different data patterns and clinical needs.

## Key Concepts

* **Data Source** – The CDT or assessment providing the numeric data
* **Data Point** – A single measurement/entry at a specific point in time
* **Time Range** – How far back to look for data (e.g., "Last 90 days")
* **Chart Type** – Visualization method (line, bar, pie)
* **Metric** – The specific field being visualized
* **Scoring** – Numeric values assigned to assessment answers

## Prerequisites

1. You have created Custom Data Types with Integer or Float fields, OR
2. You have created assessments with Scoring conditions
3. You have appropriate permissions to create visual components in Designer
4. You understand your data structure

For information on creating CDTs, see [Custom Data Types (CDT): Designer](/designer/custom-data-types/custom-data-types-cdt-designer.md). For scoring, see [Designer: How to Configure Scored Assessments](/designer/documents-and-assessments/designer-how-to-configure-scored-assessments.md).

## Step-by-Step: Create a Chart or Graph

### Step 1: Access Charts & Graphs Configuration

1. Log into Designer
2. Click **Create Draft** to start a new configuration draft
3. Navigate to **Visual Components** > **Charts and Graphs** in the left sidebar
4. Click **+ New** in the upper right corner

### Step 2: Enter Basic Chart Information

#### Title

* Display name shown in Care app
* Should be clear and descriptive
* **Examples:**
  * "Blood Pressure Trend"
  * "Weekly Weight Tracking"
  * "Depression Screening Scores"
  * "Exercise Minutes per Week"

#### Name

* Internal system name (lowercase, numbers, underscores, hyphens)
* Auto-populates from Title
* **Examples:** `blood-pressure-trend`, `weekly-weight`

### Step 3: Configure the Data Source

#### Define Default Time Range

1. **Select "# of Days"** – How many days of historical data to display by default
   * Options typically: 7, 14, 30, 60, 90, 180, 365 days, or custom
   * This becomes the default view; users can adjust in Care
   * **Recommendation:** Choose range showing meaningful trends (90 days for most metrics)

#### Select the Data Source

1. **Choose CDT or Assessment** – Select where data comes from
   * Option A: **Custom Data Type** – Use a numeric field from a CDT
   * Option B: **Scored Assessment** – Use scoring from an assessment

**For CDT Data Source**

1. Select the **CDT** containing your data
2. Select the **Field** to visualize (must be Integer or Float type)
3. The chart will display all recorded values for this field over time

**Example:**

* CDT: `vital-signs`
* Field: `systolic-pressure` (Integer)
* Shows all blood pressure readings over time

**For Scored Assessment Data Source**

1. Select the **Assessment/Form**
2. Select the **Scored Field** (must have scoring configured)
3. The chart displays the score each time the assessment is completed

**Example:**

* Assessment: `Depression Screening (PHQ-9)`
* Scored Field: `total-depression-score`
* Shows PHQ-9 score each time patient completes the assessment

### Step 4: Choose Chart Type

Select the visualization type most appropriate for your data:

#### Line Graph

**Best for:** Tracking trends over time (most common)

**Use cases:**

* Weight progression
* Blood pressure readings
* Medication adherence percentages
* Test scores over time
* Progress on goals

**Features:**

* Shows continuous progression
* Easy to see trends and patterns
* Connects data points with lines
* Can display multiple metrics on same chart

**Configuration:**

* X-axis: Time (dates)
* Y-axis: Numeric values
* Optional: Add target line showing goal or normal range

#### Bar Graph

**Best for:** Comparing values across categories or time periods

**Use cases:**

* Monthly exercise minutes
* Weekly medication adherence counts
* Exercise sessions completed per week
* Comparison between two time periods
* Categorical comparisons

**Features:**

* Shows distinct values for each period
* Good for comparing quantities
* Can stack bars for multiple metrics

**Configuration:**

* X-axis: Time periods or categories
* Y-axis: Numeric values
* Optional: Stack multiple metrics

#### Pie Chart

**Best for:** Showing composition or proportions

**Use cases:**

* Assessment question responses (% answering each option)
* Distribution of medication adherence (% full/partial/none)
* Service utilization breakdown
* Risk factor prevalence
* Symptom prevalence in population

**Features:**

* Shows proportions as slices
* Easy to see relative sizes
* Typically shows one metric only

**Configuration:**

* Data source: Assessment responses or categorical counts
* Shows percentage each option represents

### Step 5: Configure Display Options

Depending on chart type, configure:

#### Labels and Titles

1. **Y-axis Label** – What the numbers represent (e.g., "mmHg", "Score", "Pounds")
2. **Chart Legend** – Show/hide metric names
3. **Data Point Labels** – Show/hide values at each data point

#### Scaling and Ranges

1. **Y-axis Scale** – Auto-calculated or manual
   * Auto: System determines min/max based on data
   * Manual: You set minimum and maximum values
   * Useful if you want to show goal range or normal limits
2. **Goal Line/Target Range** (optional)
   * Display a reference line showing target value or goal
   * **Example:** Blood pressure chart with line at 140 systolic showing hypertension threshold
   * **Example:** Weight chart with line showing goal weight

#### Colors and Styling

1. **Metric Color** – Choose color for line/bar/pie slice
2. **Goal Line Color** – Color for reference/target line
3. **Background** – Light or dark theme

### Step 6: Configure Multiple Metrics (Optional)

Some charts can display multiple metrics together:

#### Adding a Second Metric

1. Click **+ Add Metric** or **+ Add Series**
2. Select another CDT field or scored field
3. Choose a different color
4. The chart now displays both metrics overlaid

**Example: Dual-Metric Blood Pressure Chart**

```
Metric 1: Systolic pressure (blue line)
Metric 2: Diastolic pressure (red line)
```

Both display on same chart for easy comparison.

**Important:** Ensure metrics have compatible scales

* Example: Don't mix weight (100-200 lbs) with heart rate (60-100 bpm) without scaling adjustments
* Consider creating separate charts if scales are very different

### Step 7: Review and Save

1. Preview the chart configuration (if preview available)
2. Verify:
   * Title is clear
   * Data source is correct
   * Chart type matches your data
   * Time range is appropriate
3. Click **Save** to save in draft

### Step 8: Test and Publish

1. In Care app, navigate to a test patient with data
2. Find the new chart in their profile
3. Verify:
   * Data displays correctly
   * Trends are visible
   * Chart is readable
   * Colors are appropriate
4. Return to Designer
5. Click **Publish** to make chart available to all users

## Common Chart Configurations

### Configuration 1: Simple Weight Tracking

```
Title: Weight Trend
Chart Type: Line Graph
Data Source: CDT "biometric-measurements" → field "weight"
Days: 180 (6 months)
Y-axis Label: Pounds (lbs)
Goal Line: 180 lbs (set by care team)
Display: Show current weight label
```

**Result:** Care team sees patient's weight progression over 6 months with visual goal marker.

### Configuration 2: Dual Vital Signs

```
Title: Blood Pressure Trend
Chart Type: Line Graph
Data Source: CDT "vital-signs"
Metric 1: systolic_pressure (blue)
Metric 2: diastolic_pressure (red)
Days: 90
Y-axis Label: mmHg
Goal Lines:
  - 130 (systolic threshold)
  - 80 (diastolic threshold)
```

**Result:** Clear view of both BP components with threshold references.

### Configuration 3: Assessment Score Over Time

```
Title: Depression Screening Scores
Chart Type: Line Graph
Data Source: Assessment "PHQ-9 Depression Screening" → score field
Days: 365 (1 year)
Y-axis Label: PHQ-9 Score (0-27)
Y-axis Range: 0-27
Goal Line: 10 (moderate threshold)
```

**Result:** Tracks clinical response to depression treatment; care team can assess if treatment is working.

### Configuration 4: Medication Adherence

```
Title: Weekly Medication Adherence
Chart Type: Bar Graph
Data Source: CDT "medication-adherence-tracking" → field "doses_taken_this_week"
Days: 90
Y-axis Label: Doses Taken
Y-axis Range: 0-7
```

**Result:** Weekly bar chart showing adherence compliance; gaps are immediately visible.

### Configuration 5: Assessment Response Distribution

```
Title: Patient Satisfaction Responses
Chart Type: Pie Chart
Data Source: Assessment "Satisfaction Survey" → responses to question "Overall, how satisfied are you?"
```

**Result:** Shows % of patients responding Very Satisfied / Satisfied / Neutral / Dissatisfied.

## Best Practices

1. **Clear Titles** – Names should tell care team what they're looking at at a glance
2. **Appropriate Chart Types** – Match visualization to data type:
   * Trends over time → Line graph
   * Comparative amounts → Bar graph
   * Proportions/composition → Pie chart
3. **Meaningful Time Ranges** – Choose ranges showing enough data to identify trends
   * Too short (7 days) = noise, no pattern
   * Too long (2+ years) = patterns buried, hard to read
4. **Include Context** – Use goal lines, thresholds, or normal ranges to give data meaning
5. **Consistent Metrics** – On multi-metric charts, ensure metrics are compatible scales
6. **Patient-Friendly** – Use labels patients understand
   * "Weight (pounds)" instead of "kg"
   * "Depression Severity" instead of "PHQ-9 Score"
7. **Regular Data Entry** – Charts only useful if data is entered consistently
8. **Performance** – Charts with thousands of data points may load slowly
   * Consider limiting time range
   * Summarize data in some cases
9. **Testing** – Always test with real patient data before publishing
10. **Documentation** – Keep notes on why each chart was created and what it's meant to show

## Troubleshooting

### Chart Not Displaying Data

**Problem:** Chart appears but no data shows

**Solutions:**

* Verify selected CDT/field has data entered for the patient
* Check date range – ensure data falls within the range
* Confirm field type is Integer or Float (required for charts)
* Verify chart is published
* Check patient enrollment status (if chart uses assessment from restricted program)

### Chart Shows Incorrect Data

**Problem:** Chart displays wrong values or metrics

**Solutions:**

* Verify correct CDT/field is selected as data source
* Check field isn't being calculated incorrectly
* Review any formulas or scoring conditions
* Confirm field name hasn't been changed (would break chart reference)

### Chart is Hard to Read

**Problem:** Chart cluttered, overlapping, or difficult to interpret

**Solutions:**

* Reduce time range to show less data
* Remove non-essential metrics
* Change chart type (line to bar, etc.)
* Increase Y-axis range if data compressed
* Use different colors for clarity
* Add goal lines/thresholds for context

### Performance Issues

**Problem:** Chart is slow to load or unresponsive

**Solutions:**

* Reduce time range (e.g., 30 days instead of 365)
* Reduce number of metrics displayed
* Consider creating separate charts for different metrics
* Check if there are thousands of data points (consider data summarization)

## Related Topics

* [Charts & Graphs: Filter, Change Date, and by Data Point](/designer/charts-and-graphs/charts-graphs-filter-change-date-and-by-data-point.md) – Using charts in Care
* [Custom Data Types (CDT): Designer](/designer/custom-data-types/custom-data-types-cdt-designer.md) – Creating numeric fields for charts
* [Designer: How to Configure Scored Assessments](/designer/documents-and-assessments/designer-how-to-configure-scored-assessments.md) – Assessment scoring
* [Patient Data View](/designer/programs-and-profiles/patient-data-view.md) – How charts appear in Care
* [Create Formulaic Custom Data Type Fields](/designer/custom-data-types/create-formulaic-custom-data-type-fields.md) – Calculated fields for charts


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.welkinhealth.com/designer/charts-and-graphs/charts-graphs-how-to-configure.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.