Embed Charts via IFrames

Embed Grid Status charts in your applications with iframes.

Iframe embeds are a low-code way to add Grid Status data and visuals to your applications.

Iframe embeds are available only on Enterprise plans. Contact [e-mail] to add embeds to your account.

Build your own app or dashboard using charts from Grid Status.

How it works

To embed a chart, start with a publicly available Grid Status chart URL and convert it to an embed URL:

1. Change /charts/... to /embed/charts/....

2. Add embed_key=<your_embed_key> to the query string.

3. Use the resulting URL as the src for an iframe.

Use the embed key provided for your account. Each customer should use their own embed key.

Prebuilt chart examples

Fuel Mix

Original chart URL:

https://www.gridstatus.io/charts/fuel-mix?iso=caiso

Embed URL:

https://www.gridstatus.io/embed/charts/fuel-mix?iso=caiso&embed_key=<your_embed_key>

PJM ACE

Original chart URL:

https://www.gridstatus.io/charts/pjm-ace?iso=pjm

Embed URL:

https://www.gridstatus.io/embed/charts/pjm-ace?iso=pjm&embed_key=<your_embed_key>

Storage

Original chart URL:

https://www.gridstatus.io/charts/storage?iso=ercot

Embed URL:

https://www.gridstatus.io/embed/charts/storage?iso=ercot&embed_key=<your_embed_key>

LMP

Original chart URL:

https://www.gridstatus.io/charts/lmp?iso=pjm&location=PJM-RTO

Embed URL:

https://www.gridstatus.io/embed/charts/lmp?iso=pjm&location=PJM-RTO&embed_key=<your_embed_key>

Custom chart example

Custom charts use the same pattern. Change /charts/new to /embed/charts/new and add your embed key to the query string.

Original chart URL:

https://www.gridstatus.io/charts/new?graph_type=time_series&graph_settings={%22showLegend%22:true,%22enableZoomAndPan%22:false,%22graphFrequency%22:%22auto-linear%22}&table_settings={%22transposeTable%22:false,%22pinFirstColumn%22:true,%22sortColumn%22:%22Timestamp%22,%22sortDirection%22:%22desc%22,%22roundDecimals%22:2}&graph_series=[{%22yAxisIndex%22:0,%22data%22:{%22datasetId%22:%22ercot_spp_real_time_15_min%22,%22subseries_index_column%22:%22location%22,%22subseries_index_value%22:%22HB_HUBAVG%22,%22field%22:%22spp%22,%22resample_function%22:%22mean%22,%22externalSourceId%22:null,%22name%22:%22ERCOT+SPP+Real+Time+15+Min%22},%22seriesType%22:%22line%22,%22showSymbol%22:false,%22symbol%22:%22circle%22,%22lineStyleType%22:%22solid%22,%22connectNulls%22:true,%22seriesColor%22:%22%23276E0E%22,%22strokeWidth%22:2,%22lineStep%22:%22auto%22,%22name%22:%22%22,%22stackGroup%22:false},{%22yAxisIndex%22:1,%22data%22:{%22datasetId%22:%22ercot_fuel_mix%22,%22subseries_index_column%22:null,%22subseries_index_value%22:null,%22field%22:%22solar%22,%22resample_function%22:%22mean%22,%22externalSourceId%22:null,%22name%22:%22ERCOT+Fuel+Mix%22},%22seriesType%22:%22bar%22,%22showSymbol%22:false,%22symbol%22:%22circle%22,%22lineStyleType%22:%22solid%22,%22connectNulls%22:true,%22seriesColor%22:%22%23D77E25%22,%22strokeWidth%22:2,%22lineStep%22:%22auto%22,%22name%22:%22%22,%22stackGroup%22:false}]&y_axis_settings={}&secondary_y_axis_settings={}&reference_marks=[]

Embed URL:

https://www.gridstatus.io/embed/charts/new?graph_type=time_series&graph_settings={%22showLegend%22:true,%22enableZoomAndPan%22:false,%22graphFrequency%22:%22auto-linear%22}&table_settings={%22transposeTable%22:false,%22pinFirstColumn%22:true,%22sortColumn%22:%22Timestamp%22,%22sortDirection%22:%22desc%22,%22roundDecimals%22:2}&graph_series=[{%22yAxisIndex%22:0,%22data%22:{%22datasetId%22:%22ercot_spp_real_time_15_min%22,%22subseries_index_column%22:%22location%22,%22subseries_index_value%22:%22HB_HUBAVG%22,%22field%22:%22spp%22,%22resample_function%22:%22mean%22,%22externalSourceId%22:null,%22name%22:%22ERCOT+SPP+Real+Time+15+Min%22},%22seriesType%22:%22line%22,%22showSymbol%22:false,%22symbol%22:%22circle%22,%22lineStyleType%22:%22solid%22,%22connectNulls%22:true,%22seriesColor%22:%22%23276E0E%22,%22strokeWidth%22:2,%22lineStep%22:%22auto%22,%22name%22:%22%22,%22stackGroup%22:false},{%22yAxisIndex%22:1,%22data%22:{%22datasetId%22:%22ercot_fuel_mix%22,%22subseries_index_column%22:null,%22subseries_index_value%22:null,%22field%22:%22solar%22,%22resample_function%22:%22mean%22,%22externalSourceId%22:null,%22name%22:%22ERCOT+Fuel+Mix%22},%22seriesType%22:%22bar%22,%22showSymbol%22:false,%22symbol%22:%22circle%22,%22lineStyleType%22:%22solid%22,%22connectNulls%22:true,%22seriesColor%22:%22%23D77E25%22,%22strokeWidth%22:2,%22lineStep%22:%22auto%22,%22name%22:%22%22,%22stackGroup%22:false}]&y_axis_settings={}&secondary_y_axis_settings={}&reference_marks=[]&embed_key=<your_embed_key>

Iframe example

<iframe
  src="https://www.gridstatus.io/embed/charts/fuel-mix?iso=caiso&embed_key=YOUR_EMBED_KEY"
  width="100%"
  height="600"
  style="border: 0;"
  loading="lazy"
></iframe>

This is one common iframe configuration. Adjust the iframe attributes, height, loading behavior, and surrounding layout to fit your application.

Limitations

Embedded charts have the same permissions as anonymous Grid Status users.