1. Overview
This document will teach the details about how to Download APEX Chart as IMAGE format using java script in Oracle Apex. Question may rise why do we need to build Custom navigation from page item to Interactive grid specific column in Oracle Apex?
The answer for this question would be, After creating chart we need to share to anyone through mail so, we can download that chart in form of image and send to anyone easily.
2. Technologies and Tools Used
The following technology has been used to perform.
- Oracle APEX (Dynamic Action)
- JavaScript
3. Use Case
- To build a Download APEX Chart as IMAGE format using java script in Oracle Apex based on our application requirements.
4. Steps with Screenshot
Step 1: First create chart on page where you need after that give static id to chart ‘MY_CHART’ as below screen-shot.
Step 2: Create button to download chart.
Step 3: Create Dynamic action on button.
When
Event: Click
Selection Type: Button
Button: Button_Name
True Action:
Action: Execute Javascript Code
javascript:saveJetChart('MY_CHART');
Step 5: Add Below code in Function and Global Variable Declaration.
function saveJetChart(regionId) {
// get jet chart region
var svg = document.querySelector('#'+regionId+'_jet > svg'),
svgString = new XMLSerializer().serializeToString(svg),
chartTitle = $('#'+regionId+'_heading').text();
let {
width,
height
} = svg.getBBox();
// create an empty canvas
var canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
var ctx = canvas.getContext("2d");
// fill the svg current transparent background with white
ctx.fillStyle = "#ffffff";
ctx.fillRect(0, 0, canvas.width, canvas.height);
// create a blob image
var DOMURL = self.URL || self.webkitURL || self;
var img = new Image();
var svg = new Blob([svgString], {
type: "image/svg+xml;charset=utf-8"
});
var url = DOMURL.createObjectURL(svg);
// when the image is fully created convert to base64 jpg
img.onload = function() {
ctx.drawImage(img, 0, 0);
var jpg = canvas.toDataURL('image/jpeg', 1.0);
var link = document.createElement("a");
document.body.appendChild(link); // for Firefox
link.setAttribute("href", jpg);
link.setAttribute("download", chartTitle+'.jpg');
link.click();
// call an AJAX callback passing the base64 string
};
img.src = url;
}
Step 4: Now we have create Download APEX Chart as IMAGE format using java script in Oracle Apex which will provide the functionality like download chart in the image format. If any further customization’s are needed in this then, we can design accordingly by having this design as a base.
5. Conclusion
In Below Screen-shot it download the chart in Image format.
- Hope you all get the clear information about the Download APEX Chart as IMAGE format using java script in Oracle Apex. Thanks for reading …..
