The Oracle APEX Jet Charts

JET charts are built on top of the Oracle JET charting library, which is a modern JavaScript, CSS3, and HTML5 design and development platform. JET charts are fully HTML5 capable and work on any modern browser regardless of platform, screen size, or features.

JET charts come in a variety of types, including bar, column, line, pie, and donut charts. You can also create combination charts, which are charts that combine two or more chart types. For example, you could create a bar chart that also has a line chart overlayed on top of it.

To add a JET chart to your APEX application, you first need to create a new page. Then, click on the "Charts" region type and add a new chart to the page.

In the "Type" field, you'll need to select the type of chart that you want to create. In the "Series" field, you'll need to select the data that you want to use to populate the chart. You can also add a title and description to the chart.

Once you've added the chart to the page, you can preview it to see how it looks. You can also click on the "Edit" button to change the chart type, series, or any other options.

There are a variety of options that you can use to customize your JET chart. For example, you can change the colors, add a legend, and change the axis labels. You can also add animations and interactivity to your charts.

To add an animation to a JET chart, you first need to select the "Animation" tab. Then, you can choose from a variety of animation types, including "fade in", "slide up", and "zoom in".

Download Charts as Image

The APEX JET Chart is based on SVG, which is a vector graphic format. This means that the JET Chart will look good on any screen size, whether it's a small mobile device or a large desktop monitor. It is also compatible with a variety of different browsers, so you won't have to worry about compatibility issues.

1. On the Chart page set a static ID ( MY_CHART ) to the Chart and add the code below into the page javascript section

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;
}

1. Create a button calling the link below

javascript:saveJetChart('MY_CHART');

We can now just click the new button to download the Chart as Image.