Creating a 3D bar chart in Oracle APEX involves a few steps. Oracle APEX itself does not natively support 3D charts directly, but you can achieve this by integrating third-party charting libraries like **Chart.js**, **D3.js**, or **Highcharts**. Below is a step-by-step guide to creating a 3D bar chart using **Highcharts** in Oracle APEX:
---
### Steps to Create a 3D Bar Chart in Oracle APEX:
#### 1. **Prepare Your Data**
- Ensure your data is available in a table or SQL query. For example:
```sql
SELECT department, sales_amount
FROM sales_data;
```
#### 2. **Create a Blank Page in Oracle APEX**
- Go to your APEX application.
- Create a new blank page or use an existing page.
- Add a **Static Content** region to the page.
#### 3. **Include Highcharts Library**
- In the **Static Content** region, include the Highcharts library by adding the following code to the **HTML Header** section of your page:
```html
```
#### 4. **Add a Chart Container**
- In the **Static Content** region, add a `
` element to serve as the container for the chart:
```html
```
#### 5. **Write JavaScript to Render the Chart**
- Add a **Dynamic Action** or **JavaScript Code** to render the chart. Use the following example code:
```javascript
document.addEventListener("DOMContentLoaded", function() {
Highcharts.chart('3d-bar-chart', {
chart: {
type: 'column',
options3d: {
enabled: true,
alpha: 15,
beta: 15,
depth: 50,
viewDistance: 25
}
},
title: {
text: '3D Bar Chart in Oracle APEX'
},
xAxis: {
categories: ['Department A', 'Department B', 'Department C', 'Department D']
},
yAxis: {
title: {
text: 'Sales Amount'
}
},
plotOptions: {
column: {
depth: 25
}
},
series: [{
name: 'Sales',
data: [12000, 15000, 8000, 20000]
}]
});
});
```
#### 6. **Bind Data from SQL Query**
- If you want to dynamically bind data from a SQL query, use an **AJAX callback** or **APEX server-side logic** to fetch the data and pass it to the chart. For example:
```sql
SELECT department, sales_amount
FROM sales_data;
```
- Modify the JavaScript to fetch data dynamically:
```javascript
apex.server.process('GET_CHART_DATA', {}, {
success: function(data) {
Highcharts.chart('3d-bar-chart', {
chart: {
type: 'column',
options3d: {
enabled: true,
alpha: 15,
beta: 15,
depth: 50,
viewDistance: 25
}
},
title: {
text: '3D Bar Chart in Oracle APEX'
},
xAxis: {
categories: data.departments
},
yAxis: {
title: {
text: 'Sales Amount'
}
},
plotOptions: {
column: {
depth: 25
}
},
series: [{
name: 'Sales',