Plugins for Oracle APEX

Overview

Improve and Extend your Oracle Apex applications with beautiful highly interactive visualizations. Choose from dozens of chart types with nearly limitless design and customization options. Gallery of hundreds of live examples makes it easy to get started with AnyChart.

Build robust charts inside of your Oracle APEX environment. All the charts are responsive to deliver the same experience across PCs, Macs, iPhones, iPads, and Android devices.

Large data sets and rendering performance have always been our strong suit. Access to every parameter of chart rendering gives you complete flexibility to customize visuals according to your wish.

it is very easy to download and export all your JavaScript charts/dashboards to any format - JPEG, PNG, PDF or SVG. Drill-down functionality allows to dig into your data to quickly discover business insights.

We currently provide charting solutions to thousands of companies in over 100 countries across all industries. Leaders trust us. With our extensive Partner Program our solution enhances the visualization for their clients with an out of the box solution to their specific needs.

Download

Documentation

Step 1. Importing the plug-in into your application

• Navigate to Shared Components Other Components Plugins
  
• Click on Import
  

Step 2: Inputting your License Key

Once the AnyChart plugin is installed, a license key is required in order to remove the watermark from your charts;

• Navigate to “Component Settings” under Shared Components
• Click on “ACPLG [Plug-in]”
• Input your license key:
  

Step 3. Adding a chart to your page using the plugin

Using Page Designer, you will now see a new region type called “ACPLG [Plug-In]”

After dragging and dropping a new “ACPLG [Plug-In]” region into Content Body, you will need to specify 2 attributes – first, source SQL where data will be retrieved from; second, chart options.

As you can see, the plugin has 2 main attributes:

• Source Type
• Chart Options

You can also set the chart Height and Width.

Source Type:

The Source Type parameter allows a user to specify the source of the data being used. You may provide data either in JSON format, or a valid SQL Query.

If you select JSON, you will be asked to provide your data in JSON format:

If you select SQL query, you must provide a valid query as your data source:

Chart Options:

The Chart Options parameter will determine what sort of AnyChart Chart you will render, based on the provided data.

Please refer to the documentation on the AnyChart site in order to set these options as required.

https://www.anychart.com/products/anychart/gallery/

For example, in order to render a simple bar chart, you might use these chart options:

chart = anychart.bar();
chart.title("Total Sales by Category");

var xAxis = chart.xAxis();
xAxis.title("Category");

var yAxis = chart.yAxis();
yAxis.title("Sales");

var series = data.mapAs({x: [0], value: [1]});

chart.bar(series);
                

For a multi-series bar chart, you might have:

chart = anychart.bar3d();
chart.title("Bar Chart");

var xAxis = chart.xAxis();
xAxis.title("Retail Channel");

var yAxis = chart.yAxis();
yAxis.title("Sales");

var June = data.mapAs({x: [0], value: [1]});
var series1 = chart.bar(June);
series1.name("June Sales");

var July = data.mapAs({x: [0], value: [2]});
var series2 = chart.bar(July);
series1.name("July Sales");

var legend = chart.legend();
legend.enabled(true);
                

You might sometimes want to put information from the database into your chart options. For example, a MAX VALUE, MIN VALUE, etc.

To do this, you can create hidden items on your page and have their source value pull from the database.

You can then refer to their values in your chart options using substitution strings:

chart = anychart.bar();
chart.title("Bar Chart");

var xAxis = chart.xAxis();
xAxis.title("Products");
xAxis.orientation("right");

var yAxis = chart.yAxis();
yAxis.title("Total Sales");
yAxis.orientation("top");

var yScale = chart.yScale();
yScale.inverted(true);
yScale.minimum(0);
yScale.maximum(&P1_MAX_VALUE.);

var series = data.mapAs({x: [0], value: [1]});
chart.bar(series);
                

Drill through capability:

Adding drill-through capability to your chart is simply a question of adding a column containing the URL to your query, and then adding a few lines to your chart options.

Using this as Source Query:

select category as label,
sum(unit_price*quantity) as total_sales,
'f?p=81111:10:11954785023323:::10:P10_CATEGORY:'||category as url
from demo_order_items dos, demo_product_info dpi where
dos.product_id=dpi.product_id group by category
                

These chart options would allow the user to click on any value and navigate to the URL:

chart = anychart.bar();
chart.title("Single series Bar Chart Including Drill Through");

var xAxis = chart.xAxis();
xAxis.title("Category");

var yAxis = chart.yAxis();
yAxis.title("Sales");

var series = data.mapAs({x: [0], value: [1], url:[2]});
chart.bar(series);

chart.listen('pointClick', function(e){
    var new_value = e.iterator.get('url');
    window.open(new_value,"_blank");
});
                

See the Single Series Bar Chart including drill through at: https://apex.oracle.com/pls/apex/f?p=81111:4

The options are almost limitless and too extensive to go into here, but please refer to our demo application for examples of different charts rendered using the plugin, as well as their chart options:

https://apex.oracle.com/pls/apex/f?p=81111

Examples

License

© AnyChart.com - JavaScript charts. All rights reserved.