What JET data visualization offers
Oracle JET (JavaScript Extension Toolkit) is the UI framework underlying VBCS. Its data visualization library includes bar, line, pie, area, scatter, bubble charts; gauges (dial, status meter); sparklines; and timeline components. All are available as drag-and-drop components in VBCS.
Connecting a chart to business data
Charts bind to an oj-chart component with a series and groups data model:
[
{ "name": "Q1 Revenue", "items": [420000, 380000, 510000] },
{ "name": "Q2 Revenue", "items": [460000, 420000, 550000] }
]
In VBCS, create a page variable of type Array to hold chart data, populate it via a service connection call on page load, and bind it to the chart component’s series property.
Transforming REST response data into chart format
Fusion REST responses rarely match the chart’s expected data structure. Transform in an action chain using a JavaScript action:
var items = input.orders;
var monthly = {};
items.forEach(function(order) {
var month = order.orderDate.substring(0, 7);
monthly[month] = (monthly[month] || 0) + order.amount;
});
return Object.keys(monthly).sort().map(function(m) {
return { label: m, value: monthly[m] };
});
Status meter gauge for KPIs
Status meter gauges work well for utilisation metrics (headcount vs capacity, budget consumed vs allocated):
<oj-status-meter-gauge
value="[[ $page.variables.budgetUsed ]]"
min="0"
max="[[ $page.variables.totalBudget ]]"
orientation="horizontal"
thresholds="[[ $page.variables.thresholds ]]">
</oj-status-meter-gauge>
Define thresholds as an array: [{max: 70, color: 'green'}, {max: 90, color: 'orange'}, {max: 100, color: 'red'}].
Responsive chart sizing
Charts need explicit height to render. Use CSS variables for responsive sizing:
.my-chart { height: clamp(200px, 30vh, 400px); width: 100%; }
Avoid fixed pixel heights — charts look broken on narrow screens or small embedded panels.
Performance with large datasets
JET charts rendering 10,000+ data points become slow. Server-side aggregate your data before returning it to VBCS. A monthly summary (12 data points) renders instantly; raw daily transactions (3,650 points) renders slowly and provides no additional insight.