Jump to content

Help:RiskGraph

From RiskiPedia

The RiskGraph tag creates interactive, responsive line graphs that visualize how RiskModel outputs change as parameters vary. Graphs automatically update when users interact with sliders, dropdowns, and other input controls.

Basic Syntax

<riskgraph model="ModelName" type="line">
x-axis: parameter_name
x-min: 0
x-max: 100
x-step: 5
y-axis: {output_variable}
title: Graph Title
x-label: X Axis Label
y-label: Y Axis Label
</riskgraph>

Parameters

Required Parameters

  • model - Name of the RiskModel to graph (must exist on the current page or as a separate page)
  • x-axis - Parameter to sweep along the x-axis
  • x-min - Minimum value for the swept parameter
  • x-max - Maximum value for the swept parameter
  • x-step - Step size for the swept parameter
  • y-axis OR series - Output variable(s) to plot (see below)

Optional Parameters

  • type - Chart type (currently only "line" is supported, default: "line")
  • title - Graph title displayed above the chart
  • x-label - Label for the x-axis
  • y-label - Label for the y-axis
  • y-min - Minimum value for the y-axis (if not specified, auto-scales to fit data)
  • y-max - Maximum value for the y-axis (if not specified, auto-scales to fit data)

Y-Axis Range Control

By default, graphs auto-scale the y-axis to fit all data points. You can override this behavior using y-min and y-max to set a fixed range: 

<riskgraph model="RiskModel" type="line">
x-axis: age
x-min: 0
x-max: 100
x-step: 5
y-axis: {risk}
y-min: 0
y-max: 100
title: Risk (Always 0-100% Scale)
</riskgraph>

Use Cases

  • Consistent scale across graphs - When comparing multiple graphs, use the same y-min/y-max for visual consistency
  • Percentage displays - Set y-min: 0 and y-max: 100 for percentage values
  • Ensure zero baseline - Set only y-min: 0 to ensure the graph always starts at zero (y-max will auto-scale)
  • Highlight a specific range - Focus attention on a particular value range

Partial Range Specification

You can specify just one of y-min or y-max: 

# Only set minimum (max will auto-scale)
y-min: 0

# Only set maximum (min will auto-scale)
y-max: 100

Negative Values

Y-axis range values can be negative: 

y-min: -20
y-max: 50

Single-Series Graphs

For simple graphs with one line, use the y-axis parameter: 

<riskmodel name="LinearRisk"
  data-risk="{{#expr: 0.1 * {x} }}"
>
Simple linear risk model.
</riskmodel>

<riskgraph model="LinearRisk" type="line">
x-axis: x
x-min: 0
x-max: 10
x-step: 1
y-axis: {risk}
title: Risk vs X
x-label: X Value
y-label: Risk Level
</riskgraph>

Single-series graphs do not display a legend.

Multi-Series Graphs

To plot multiple lines on the same graph, use series lines instead of y-axis: 

<riskmodel name="RiskByGender"
  data-base_risk="{{#expr: 0.01 * {age} }}"
  data-male_risk="{{#expr: {base_risk} * 1.2 }}"
  data-female_risk="{{#expr: {base_risk} * 0.8 }}"
>
Risk model with gender differences.
</riskmodel>

<riskgraph model="RiskByGender" type="line">
x-axis: age
x-min: 20
x-max: 80
x-step: 5
series: Males|{male_risk}||color=#0066CC
series: Females|{female_risk}||color=#CC0066
title: Risk by Age and Gender
x-label: Age (years)
y-label: Risk Level
</riskgraph>

Series Syntax

Each series line has the format: 

series: Label|{output_variable}|param1=value1,param2=value2|color=#RRGGBB

Parts are separated by pipe characters (|):

  1. Label - Display name for this series in the legend (required)
  2. {output_variable} - Variable to plot from the model (required, use curly braces)
  3. Parameters - Optional: Series-specific parameter values (format: param=value, separated by commas)
  4. Color - Optional: Hex color code (format: color=#RRGGBB)

Series-Specific Parameters

You can override parameter values for individual series. This allows comparing different scenarios on the same graph: 

<riskmodel name="PregnancyRisk"
  data-pregnancy_risk="{{#expr: 100 * 0.33 * (2.718281828^(-0.5*(({day}-14)/2.5)^2)) * {age_multiplier} }}"
>
Pregnancy risk by day of menstrual cycle and age.
</riskmodel>

<riskgraph model="PregnancyRisk" type="line">
x-axis: day
x-min: 1
x-max: 28
x-step: 1
series: Under 25|{pregnancy_risk}|age_multiplier=1.0|color=#1f77b4
series: 25-30|{pregnancy_risk}|age_multiplier=0.9|color=#ff7f0e
series: 31-39|{pregnancy_risk}|age_multiplier=0.65|color=#2ca02c
series: 40+|{pregnancy_risk}|age_multiplier=0.25|color=#d62728
title: Pregnancy Risk by Day of Cycle and Age
x-label: Days from Period Start
y-label: Probability of Pregnancy (%)
</riskgraph>

Each series uses the same formula ({pregnancy_risk}) but with different age_multiplier values.

Colors

Colors are optional. If not specified, Chart.js uses default colors:

  • First series: Blue (#1f77b4)
  • Second series: Orange (#ff7f0e)
  • Third series: Green (#2ca02c)
  • Fourth series: Red (#d62728)
  • And so on...

Custom colors must be in hex format: color=#RRGGBB

Limitations

  • Maximum 10 series per graph
  • Maximum 1000 data points per graph (across all series)
  • Series parameters cannot override the swept parameter (x-axis)

Interactive Behavior

Graphs automatically update when users interact with page controls like sliders and dropdowns: 

<riskmodel name="InteractiveRisk"
  data-risk="{{#expr: {age} * {multiplier} * 0.001 }}"
>
Risk affected by age and a user-controlled multiplier.
</riskmodel>

Risk multiplier: <slider name="multiplier" min="0.5" max="2.0" step="0.1" default="1.0" />

<riskgraph model="InteractiveRisk" type="line">
x-axis: age
x-min: 0
x-max: 100
x-step: 5
y-axis: {risk}
title: Risk by Age (Interactive)
x-label: Age (years)
y-label: Risk Level
</riskgraph>

When the user moves the slider, the graph immediately recalculates and re-renders.

Fixed Parameters

You can fix parameter values for the entire graph using data- attributes on the tag: 

<riskgraph model="RiskByGender" type="line" data-gender="male">
x-axis: age
x-min: 20
x-max: 80
x-step: 5
y-axis: {risk}
title: Male Risk by Age
</riskgraph>

This sets {gender} to "male" for all calculations in this graph.

Chart.js Integration

RiskGraph uses Chart.js for rendering. Charts are:

  • Responsive - Automatically resize to fit the container
  • Interactive - Hover over data points to see exact values
  • Accessible - Includes ARIA labels and keyboard navigation

Legend Behavior

  • Multi-series graphs (2+ series): Legend is shown
  • Single-series graphs (1 series): Legend is hidden (redundant)

Model Requirements

The referenced RiskModel must:

  1. Exist on the current page, or be accessible via model resolution
  2. Define all variables referenced in the graph's y-axis or series
  3. Use the data- attribute syntax for defining variables

Example of a properly defined model: 

<riskmodel name="MyModel"
  data-result="{{#expr: {input} * 2 }}"
  data-squared="{{#expr: {input} ^ 2 }}"
>
Documentation about what this model calculates.
</riskmodel>

Variables must be defined as data-variable_name attributes, not in the tag content.

Common Patterns

Comparing Scenarios

Use multi-series with different parameter values: 

series: Best Case|{result}|success_rate=0.9|color=#28a745
series: Average Case|{result}|success_rate=0.5|color=#ffc107
series: Worst Case|{result}|success_rate=0.1|color=#dc3545

Age-Stratified Risks

Graph the same risk across different age groups: 

series: 20-30|{risk}|age_group_multiplier=0.8
series: 31-50|{risk}|age_group_multiplier=1.0
series: 51-70|{risk}|age_group_multiplier=1.5
series: 71+|{risk}|age_group_multiplier=2.0

Sensitivity Analysis

Show how outputs vary with different parameter assumptions: 

series: Conservative (Low)|{estimate}|uncertainty_factor=0.7
series: Central Estimate|{estimate}|uncertainty_factor=1.0
series: Aggressive (High)|{estimate}|uncertainty_factor=1.3

Percentage Graphs with Fixed Scale

For graphs showing percentages, use y-min and y-max to ensure a consistent 0-100% scale: 

<riskgraph model="RiskModel" type="line">
x-axis: age
x-min: 0
x-max: 100
x-step: 5
y-axis: {probability}
y-min: 0
y-max: 100
title: Probability by Age
y-label: Probability (%)
</riskgraph>

Troubleshooting

"Model not found" error

Problem: The specified model doesn't exist or isn't accessible.

Solutions:

  • Verify the model name matches exactly (case-sensitive)
  • Ensure the model is defined on the current page, or exists as a separate page
  • Check that the model uses the correct data- attribute syntax

"Variable not found" error

Problem: A variable referenced in y-axis or series doesn't exist in the model.

Solutions:

  • Check that the variable is defined as data-variable_name in the <riskmodel> tag
  • Verify the variable name matches exactly (including underscores)
  • Use curly braces: {variable_name}

Graph not updating

Problem: Graph doesn't respond to slider/dropdown changes.

Solutions:

  • Verify the slider/dropdown uses the name attribute
  • Check that the model references the parameter: {parameter_name}
  • Clear your browser cache (hard refresh: Ctrl+Shift+R or Cmd+Shift+R)

"Too many data points" error

Problem: The graph would generate more than 1000 data points.

Solutions:

  • Increase the step size (e.g., change x-step: 0.1 to x-step: 1)
  • Reduce the range (smaller difference between x-min and x-max)
  • Split into multiple graphs with different ranges

Colors not showing

Problem: Custom colors aren't applied to series.

Solutions:

  • Verify color format: color=#RRGGBB (must include the #)
  • Use uppercase or lowercase hex digits (both work)
  • Don't use color names (e.g., "red") - only hex codes

Empty graph / "Loading..." message

Problem: Graph never renders, shows "Loading graph..." indefinitely.

Solutions:

  • Check the browser console for JavaScript errors
  • Verify Chart.js is loading (check Network tab in DevTools)
  • Ensure the model has valid expressions (test with RiskDisplay)

Examples

See these test pages for working examples:


See Also

Retrieved from "https://riski.wiki/index.php?title=Help:RiskGraph&oldid=91718"