Add anychart to Apex 5 using Java Script

Question

I want to have a 100% customizable chart on my Apex application. For this purpose I want to add an Anychart with Java Script and use custom xml.

I added the OracleAnyChart.swf and Preloader.swf files to Shared Components -> Static Application Files.

I have this code under "Execute when Page Loads"

AnyChart.renderingType = anychart.RenderingType.SVG_PREFERRED;   
var chart = new AnyChart('#APP_IMAGES#OracleAnyChart.swf','#APP_IMAGES#Preloader.swf', 'be_chart');
chart.width = 600;
chart.height = 150; 
chart.messages = {
loadingConfig: "Loading config...",
waitingForData: "Waiting for data..."}
console.log('ID = ' || chart.id);

var jqxhr =  apex.server.process( 'GET_BEXML',
                                { 
                                    pageItems: "#BE_DATA"
                                },
                                {
                                    dataType : 'text'
                                }
                                );  
jqxhr.done(function(pData) {
                       console.log(chart.id);
                       chart.setData($v('BE_DATA'));
                       chart.write('container_be');  
                       //chart.refresh(); 
    }         
    );

My On demand process "GET_BEXML" sets the item BE_DATA with correct XML, but the chart does not render.

I tried to call

var chart = getChartById('be_chart');
chart.setData($v('BE_DATA'));
chart.refresh();

from a Dynamic action but it appears that I cant call any anychart functions in the Dynamic actions' scope, it says "getCharById its not defined".

Am I missing something?

Howd · Answer 1 · 2017-07-27T12:11:13.610

You are calling a method that doesn't exist. You need to reference the AnyChart object like this (and maybe change the variable name so you don't overwrite your original chart object):

var mychart = AnyChart.getChartById('be_chart');

Actually...
I responded to the reason for you failed getChartById call.
I've realized that wasn't the actual question.

Have you tried passing the data directly in to the done() callback function?
This method works. And what is REALLY great about it, is there is NO 32K LIMIT on the data you can return.

-- Apex Application Process "GET_BEXML"
declare
    v_limit constant pls_integer := 32767;
    v_buff  varchar2(32767);
    v_data  clob;
    v_os    pls_integer := 1;
    v_len   pls_integer := 0;
begin
    v_data := get_anydata_xml_doc;  -- a PL/SQL function returning your AnyData xml
    v_len  := dbms_lob.getlength(v_data);
    while v_os < v_len
    loop
        dbms_lob.read(v_data, v_limit, v_os, v_buff);
        htp.prn(v_buff);
        v_os := v_os + v_limit;
    end loop;
end;

// "Execute when Page Loads"
    var jqxhr = apex.server.process('GET_BEXML', {}, {dataType:'text'});
    jqxhr.done(function(pData) {
        console.log(pData.substring(1,50));
        chart.setData(pData);
        chart.write('container_be');
    });

Of course you could create you AnyData xml clob on the fly within Apex as well.

Add anychart to Apex 5 using Java Script

1 Answers1