Categories
Oracle Analytics

HTML Visualisations with iFrames in Oracle OAC

Introduction

The May 2026 update to Oracle Analytics Cloud (OAC) introduced the iFrame visualisation. The documentation describes this as a way to embed external content in a workbook canvas using either a URL or inline HTML. “Use an iframe visualization to securely embed external content in a workbook canvas. Embed the content using either a URL for a website or inline HTML. See Embed External Content in a Workbook Canvas Using an iframe.”

The ability to link to external content depends on how your specific OAC instance is configured. Many organizations restrict outbound content loading for security reasons, and the instance I am using has that restriction, which is the main reason I looked that the “doc” (HTML) options and found that to be really interesting.

The HTML option should work on all instances regardless of security configuration as it allows you to drop your own HTML into the iFrame properties. The HTML renders on the canvas, co-existing with any live visualisations, and has the same positioning and layout control as any other visualisation.

Once I started using it, I found it a really cool way to embed relevant, static ( or periodically updated data ) by changing the HTML. Using a few examples that you can directly cut and paste into your own application, here’s some examples of why I think you’ll find it interesting too being able to juxtapose visuals from your semantic data and smart looking HTML data visualisations for multiple comparison purposes.

So why would you want static HTML on a dashboard?

Whilst the usual raison d’etre of dashboards tends to show live ( or close to ) data, pasting in a fixed HTML block feels a bit “interesting”; however there’s a practical problem it addresses. Here are three specific situations where an HTML panel on the canvas is actually a great choice.

Scenario 1 – Targets and thresholds set by people rather than calculated from data.

A sales target for the second half of the year isn’t something you may have in the database as it is likely decisions made by a leadership team and approved by finance. Putting it on the same canvas as live charts can provide the viewer with useful external data.

KPIs from systems that OAC isn’t connected to.

As much as a lot of people would like to, not every number flows through one platform. The sales pipeline figures might be in a non-integrated CRM and the headcount might come from an HR system that’s not yet integrated either and a forecast might come from a spreadsheet that someone updates manually each month. Whilst developing out full data pipelines, a HTML panel lets you put those numbers on the canvas now, updated by whoever owns them, without waiting for an integration project to complete.

Director-level commentary.

A chart showing that the North West region is 16% behind target is great (well, maybe “insightful” is the better word!), but doesn’t tell the viewer what’s being done about it. Three bullet points from the sales director explaining the response plan turns an observation into something the viewer can act on. That’s really what a board-level dashboard is for, and it’s the piece that usually ends up in a separate email rather than on the canvas.

How to add an iFrame visualisation

In the visualisation panel find iFrame and drag it onto the canvas. In the properties pane, set Source Type to SRCDOC. You’ll then see an HTML field where you paste your code ( it is a bit restrictive to actually write and validate it in there).

Example 1: A RAG status targets table

What it does

The HTML produces a five row table with regional sales figures alongside H2 targets and a Status column with colour coded badges. The colours are meaningful and show “Green” for On Track, “Amber” for At Risk and “Red” for Behind. Alternating row colours make it easier to read.

This is the sort of table a finance / sales director would possibly have sent as an attached spreadsheet. With this approach of embedding using an iFrame it can be situated on a canvas adjacent to the sales chart it relates to, and it exports to the same PDF.

The code

<body style="font-family:Arial,sans-serif;margin:12px;background:#fff;">

<p style="color:#C74634;font-size:14px;font-weight:bold;margin:0 0 8px 0;
   border-bottom:2px solid #C74634;padding-bottom:6px;">
  H2 2026 Regional Sales Targets
</p>

<table style="width:100%;border-collapse:collapse;font-size:12px;">
  <tr>
    <th style="background:#1B6CA8;color:#fff;padding:7px 10px;text-align:left;">Region</th>
    <th style="background:#1B6CA8;color:#fff;padding:7px 10px;text-align:left;">H1 2026 Actual</th>
    <th style="background:#1B6CA8;color:#fff;padding:7px 10px;text-align:left;">H2 2026 Target</th>
    <th style="background:#1B6CA8;color:#fff;padding:7px 10px;text-align:left;">Growth Required</th>
    <th style="background:#1B6CA8;color:#fff;padding:7px 10px;text-align:left;">Status</th>
  </tr>
  <tr style="background:#E8EFF8;">
    <td style="padding:7px 10px;border-bottom:1px solid #ddd;">South (London)</td>
    <td style="padding:7px 10px;border-bottom:1px solid #ddd;">£1,642,000</td>
    <td style="padding:7px 10px;border-bottom:1px solid #ddd;">£1,850,000</td>
    <td style="padding:7px 10px;border-bottom:1px solid #ddd;">+12.7%</td>
    <td style="padding:7px 10px;border-bottom:1px solid #ddd;">
      <span style="background:#C8E6C9;color:#1B5E20;font-weight:bold;
        padding:3px 8px;border-radius:4px;">&#10003; On Track</span>
    </td>
  </tr>
  <tr style="background:#fff;">
    <td style="padding:7px 10px;border-bottom:1px solid #ddd;">Midlands</td>
    <td style="padding:7px 10px;border-bottom:1px solid #ddd;">£1,105,000</td>
    <td style="padding:7px 10px;border-bottom:1px solid #ddd;">£1,260,000</td>
    <td style="padding:7px 10px;border-bottom:1px solid #ddd;">+14.0%</td>
    <td style="padding:7px 10px;border-bottom:1px solid #ddd;">
      <span style="background:#C8E6C9;color:#1B5E20;font-weight:bold;
        padding:3px 8px;border-radius:4px;">&#10003; On Track</span>
    </td>
  </tr>
  <tr style="background:#E8EFF8;">
    <td style="padding:7px 10px;border-bottom:1px solid #ddd;">North</td>
    <td style="padding:7px 10px;border-bottom:1px solid #ddd;">£842,000</td>
    <td style="padding:7px 10px;border-bottom:1px solid #ddd;">£980,000</td>
    <td style="padding:7px 10px;border-bottom:1px solid #ddd;">+16.4%</td>
    <td style="padding:7px 10px;border-bottom:1px solid #ddd;">
      <span style="background:#FFF9C4;color:#7B5800;font-weight:bold;
        padding:3px 8px;border-radius:4px;">&#9888; At Risk</span>
    </td>
  </tr>
  <tr style="background:#fff;">
    <td style="padding:7px 10px;border-bottom:1px solid #ddd;">Scotland</td>
    <td style="padding:7px 10px;border-bottom:1px solid #ddd;">£412,000</td>
    <td style="padding:7px 10px;border-bottom:1px solid #ddd;">£490,000</td>
    <td style="padding:7px 10px;border-bottom:1px solid #ddd;">+18.9%</td>
    <td style="padding:7px 10px;border-bottom:1px solid #ddd;">
      <span style="background:#FFF9C4;color:#7B5800;font-weight:bold;
        padding:3px 8px;border-radius:4px;">&#9888; At Risk</span>
    </td>
  </tr>
  <tr style="background:#E8EFF8;">
    <td style="padding:7px 10px;border-bottom:1px solid #ddd;">Wales</td>
    <td style="padding:7px 10px;border-bottom:1px solid #ddd;">£298,000</td>
    <td style="padding:7px 10px;border-bottom:1px solid #ddd;">£360,000</td>
    <td style="padding:7px 10px;border-bottom:1px solid #ddd;">+20.8%</td>
    <td style="padding:7px 10px;border-bottom:1px solid #ddd;">
      <span style="background:#FFCDD2;color:#7F0000;font-weight:bold;
        padding:3px 8px;border-radius:4px;">&#10007; Behind</span>
    </td>
  </tr>
</table>

<p style="font-size:10px;color:#888;margin-top:10px;">
  Source: Finance &bull; Updated June 2026 &bull; Targets approved by Sales Director
</p></body>

How it works

The header row background (#1B6CA8) and the alternating row shading (#E8EFF8 on alternate rows) are applied with inline style attributes on each <th> and <tr> element respectively.

The status badges are <span> elements with background and text colours set inline, plus border-radius:4px for the rounded corners. The symbols are HTML entities: &#10003; for the tick, &#9888; for the warning triangle, &#10007; for the cross.

The source note at the bottom tells the viewer who approved the figures and when they were last updated, which is important when you’re putting manually maintained numbers on a canvas that may be showing other “live” data canvas so the viewers understand the context.

Example 2: A KPI scorecard row

What it does

This produces four tiles in a row, each showing a label, a large headline figure, and a supporting figure. We have “Blue” for revenue, “Green” for deals won, “Amber” for pipeline and “Red” for renewals at risk.

The code

<body style="font-family:Arial,sans-serif;margin:8px;background:#fff;">

<table style="width:100%;border-collapse:separate;border-spacing:8px;">
  <tr>
    <td style="background:#E8EFF8;border-radius:6px;padding:12px 10px;
      text-align:center;width:25%;">
      <div style="font-size:10px;color:#555;text-transform:uppercase;
        letter-spacing:0.5px;margin-bottom:4px;">YTD Revenue 2026</div>
      <div style="font-size:22px;font-weight:bold;color:#1B6CA8;">£3.3M</div>
      <div style="font-size:10px;color:#1B6CA8;margin-top:3px;">&#9650; 11.2% vs 2025</div>
    </td>
    <td style="background:#E8F5E9;border-radius:6px;padding:12px 10px;
      text-align:center;width:25%;">
      <div style="font-size:10px;color:#555;text-transform:uppercase;
        letter-spacing:0.5px;margin-bottom:4px;">Deals Won H1</div>
      <div style="font-size:22px;font-weight:bold;color:#2E7D32;">47</div>
      <div style="font-size:10px;color:#2E7D32;margin-top:3px;">&#9650; 8 vs H1 2025</div>
    </td>
    <td style="background:#FFF8E1;border-radius:6px;padding:12px 10px;
      text-align:center;width:25%;">
      <div style="font-size:10px;color:#555;text-transform:uppercase;
        letter-spacing:0.5px;margin-bottom:4px;">Pipeline H2 2026</div>
      <div style="font-size:22px;font-weight:bold;color:#E65100;">£5.1M</div>
      <div style="font-size:10px;color:#E65100;margin-top:3px;">Coverage 2.8x target</div>
    </td>
    <td style="background:#FFEBEE;border-radius:6px;padding:12px 10px;
      text-align:center;width:25%;">
      <div style="font-size:10px;color:#555;text-transform:uppercase;
        letter-spacing:0.5px;margin-bottom:4px;">Renewals at Risk</div>
      <div style="font-size:22px;font-weight:bold;color:#C62828;">6</div>
      <div style="font-size:10px;color:#C62828;margin-top:3px;">Value £281K</div>
    </td>
  </tr>
</table>

</body>

How it works

Each tile is a <td> with its background colour, border-radius:6px and padding set inline. The border-spacing:8px on the outer table creates the gaps between tiles without needing to set margins on each cell individually.

Inside each tile there are three <div> elements for the label, the value, and the sub-figure. The &#9650; entity gives you a solid upward-pointing triangle as a positive indicator. Use &#9660; if you need a downward arrow.

To update the numbers each month, change the values in the HTML and re-paste. I’d probably keep a master copy in a shared document and update it there before pasting into OAC.

Example 3: A director commentary panel

What it does

This looks the simplest, but has some good impact when adjacent to a chart showing relative data. It show a brief interpretation of the dataalongside the charts, attributed to a named person with a date. So the viewer isn’t just looking at numbers, they’re informed as to what the sales director thinks the numbers mean and what’s being done about them.

The priority items use a left border in different colours to signal urgency: red for items that are behind and need immediate attention, amber for things to watch, green for opportunities.

The code

<body style="font-family:Arial,sans-serif;margin:12px;background:#fff;">

<p style="color:#1B6CA8;font-size:13px;font-weight:bold;margin:0 0 6px 0;
   border-bottom:2px solid #1B6CA8;padding-bottom:5px;">
  Sales Director Commentary - June 2026
</p>

<p style="font-size:12px;color:#312D2A;margin:0 0 10px 0;line-height:1.5;">
  H1 2026 closed above plan in South and Midlands. North and Scotland
  require accelerated pipeline activity to reach H2 targets.
</p>

<p style="font-size:11px;font-weight:bold;color:#312D2A;margin:0 0 6px 0;">
  H2 Priorities:
</p>

<table style="width:100%;border-collapse:collapse;">
  <tr>
    <td style="padding:5px 8px;border-left:3px solid #C74634;
      color:#312D2A;font-size:11px;">
      Accelerate North pipeline - 3 new Enterprise deals by end Q3
    </td>
  </tr>
  <tr><td style="height:5px;"></td></tr>
  <tr>
    <td style="padding:5px 8px;border-left:3px solid #E65100;
      color:#312D2A;font-size:11px;">
      Wales renewal programme - all at-risk accounts reviewed by 31 July
    </td>
  </tr>
  <tr><td style="height:5px;"></td></tr>
  <tr>
    <td style="padding:5px 8px;border-left:3px solid #2E7D32;
      color:#312D2A;font-size:11px;">
      South upsell - AI Module cross-sell to existing Analytics Platform base
    </td>
  </tr>
</table>

<p style="font-size:10px;color:#888;margin-top:12px;">
  Last updated: 5 June 2026 &bull; Rachel Turner, Sales Director
</p>
</body>

How it works

The title uses border-bottom applied inline on the <p> element as a heading separator. The paragraph below uses line-height:1.5 for readability, which makes a real difference when you’re putting text into a relatively narrow panel.

The priority items are in a table with alternating content rows and empty spacer rows between them.

The left border colours are red (#C74634) for the most urgent item, amber (#E65100) for the watch item, green (#2E7D32) for the opportunity item.

The footer line with the attribution is the same pattern as the RAG table. Name, role, date.

Updating the content

These panels are static, so updating them means changing the numbers in the HTML and re-pasting. For something like a monthly board pack this is a reasonable overhead. In practice I’d probably keep a master copy of each HTML block in a shared document, update the numbers there, then paste the updated HTML into OAC as part of the monthly refresh cycle.

Who maintains it

The data analyst owns the OAC visualisations but the commentary, the targets, and the KPI headline numbers might be owned by different people. The way of working will depend on your specific circumstances. Possibly give those stakeholders a simple text template to fill in, then have the analyst paste the updated HTML into OAC as whilst it’s easy to change the numbers, if you want a chart with other visual cues that are colour coded then that would need some knowledge of HTML.

Summary

The iFrame inline HTML capability is possibly not being shown as a “marquee” feature, but it addresses a useful narrative gap and is a lot more flexible than the “text box” or by maintaining separate documents alongside the workbook.