Using anycharts 4 with APEX 3.1

If you haven't noticed before, Interactive Reports use Anycharts 4.2.1 ! While the normal flash chart regions are still using Anycharts 3.3!

The 4.2.1 version has much cooler features, as saving to image or to pdf with the right click menu. It also looks better and more organized. Why are normal flash chart regions still using 3.3? Well, probably because the XML source definition has changed! With APEX release 4.0 I think we can use Anycharts 4 with normal regions (Could be 3.2 but I think they have their hands full with Forms2Apex)

So what are we to do? While waiting is an option, trying to hack into Anycharts 4 is way much more fun! First some background info!

Read More!

Anycharts 3 & APEX architecture
Anycharts3 is using an .swf file for almost every different type of chart (and can be found in the /i/flashcharts directory). For every chart an .xml file has to be provided with the specific layout and data properties. Here's where APEX kicks in, the xml definition is generated by a procedure that is called APEX_UTIL.flash (Who's in charge off naming things over there at the APEX Dev Team?). There are some parameters provided, like the APP_ID, PAGE_ID, SESSION etc. More important is this parameter: FLOW_FLASH_CHART_R#REGION_ID#. And it's more important because it provides the apex_util.flash procedure with the region ID where you defined all your settings in a Charts Region (Like labels an colors). This ID is probably used in the procedure to get these values, and use them to generate a xml definition.

The resulting xml from apex_util.flash is parsed on a HTTP request! Just like any other page, the chart just shows the xml definition as a text/xml content type in your browser if you put the reference in the URL. This reference (with absolute path) looks like this: http://10.0.0.1:8080/pls/apex/apex_util.flash?p=105:8:985557025495156:FLOW_FLASH_CHART_R5188815604017627_en-us
In anycharts 3 the path is added as a parameter called XMLFile (remember that one) and is passed to the swf flash file.


Anycharts 4 & APEX Architecture
In Anycharts 4, all different types of charts are collected in one .swf file. This is again, combined with an xml definition file, telling how to layout the chart and what data is in there. The anycharts 4 xml files are different from the anycharts 3 xml files, because it has a different buildup. The anycharts 4 xml file is also generated from APEX! The procedure taking care of this is APEX_UTIL.flash2 (Honestly, who's in charge of naming, common!! ;) ). It is also called from the page object, but this time it is different. It is passed in the "flashvars" parameter as "XMLFile=http://10.0.0.1:8080/pls/apex/apex_util.flash2?p=etc. etc"
And this time, the XML defines what type of chart it is ! Not the flash file! So this adds great flexibility to developers!


Using anycharts 4
There are several ways to use anycharts 4. Here's what I was able to do:

1. Create anycharts 4 from anycharts 3 region (but has some drawbacks)
2. Reference an anychart 4 chart from an interactive report
3. Create your own definition and put it in the images directory
4. Create your own definition and reference it trough a procedure (just like APEX_UTIL.flash2)

1. Create anycharts 4 from anycharts 3 region
Why not change the APEX_UTIL.flash procedure to APEX_UTIL.flash2? That's also the first thing I was thinking. But you have to make some more adjustments.

• Create a chart region with the APEX wizards
  
• Just create a normal HTML region
• Check out the code of the chart region at runtime (with Firebug offcourse)
  
• Copy the code between the OBJECT tags (include the
• Cut the swf variables ?XMLFile=etc. to the Flashvars param (and remove the "?")
• Change the APEX_UTIL.flash to APEX_UTIL.flash2

This tries to give you the definition of the Anychart 4 xml, interpreted by the anychart 3 settings you did in the charts region. Major drawbacks of this approach is that you cannot define the type of chart. It just gets the first one, wich is "CategorizedVertical". But colors and labels are added to the chart! Also, you have to have the anycharts 3 region in your page for this to work, but you can hide it if you want!


2. Reference an anychart 4 chart from an interactive report
If you create a chart in an interactive report, you can reference this in a HTML region. Changes made in the IR are also changed in the chart. If you want a dynamic anycharts 4 chart, this is a great way to do it!

• Create an interactive report
• Create a chart in the IR
• Save it as default!
• Copy the code below




• Paste it into a HTML region
• Change the parameters in the XMLFile parameter (page 6 is where the IR was, so change that to the page that your IR is)
  

The only drawback of this approach is that you don't have direct control over the layout of the chart. (like borders and backgrounds)


3. Create your own definition and put it in the images directory
You can also just skip the APEX generation bit, and create your own XML file. You just have to reference it in the code for the swf file.

• Just create an XML file with for example the following code:

	
		
			
				
					
						
							
2601
						
					
					
						
							
2739
						
					
					
						
							
2790
						
					
					
						
							
2908
						
					
				
				
					
						
							
2925
						
					
					
						
							
2465
						
					
					
						
							
2231
						
					
					
						
							
2426
						
					
				
				
					
						
							
2231
						
					
					
						
							
2101
						
					
					
						
							
2084
						
					
					
						
							
2685
						
					
				
			
		
			
			
			
			
			
			
				
					
				
				
					
						
					
				
			
		
			
				
					
{%Name}{enabled:False}  {%FValue}{enabled:False}
				
			
		
		
	

• Next put the file in your /i/ directory
• Just copy the previous OBJECT code
  
• Reference your xml file in the XMLFile parameter as /i/yourxml.xml instead of the APEX_UTIL.flash2 string

4. Create your own definition and reference it trough a procedure
Now for the really interesting one! And this requires some additional settings. But what if you could just work the same way APEX works, with a packaged procedure, referenced in the URL (APEX_UTIL.flash2). But now we want to define our own procedure, which parses AnyChart 4 XML instead of 3, but now we can control it ourself! (Unlike flash2).

• Create a package (like "anycharts_xml_generator")
• Create a procedure in this packaged with a parameter XMLCallData number(like "procedure simple_xml(XMLCallDate IN NUMBER DEFAULT NULL)")

*XMLCallDate is a parameter that is added at runtime, probably by Anycharts. It is important to add it ! Otherwise you will get an "IO Error" message, and it takes a while to find the problem!

• Put in the following body

procedure p_simple_xml(p_param IN number default null, XMLCallDate IN number default null) IS

BEGIN



owa_util.mime_header('text/xml', FALSE, 'utf-8');

owa_util.http_header_close;

htp.p('');



htp.p('







 

   

   

   

   

   

 





 

 

   

     

   

   

     

     

   

 


















');
END;

• Next you need to make this procedure callable, so go to the FLOWS030100 schema
• Go to the Function WWV_FLOW_EPG_INCLUDE_MOD_LOCAL
• Add the "ANYCHART_XML_GENERATOR.SIMPLE_XML" to the following piece of code:

if upper(procedure_name) in (

   'ADD_AS_A_FRIEND', 'ANYCHART_XML_GENERATOR.P_SIMPLE_XML') then

 return TRUE;

else

 return FALSE;

end if;

• The above code makes sure that you can call the procedure from the URL
• Next we need to change the reference for the XMLFile in the HTML region.
  
• Change the XMLFile parameter to:

  http://yourIP:port/pls/apex/anychart_xml_generator.simple_xml?p_param=void

* Thanks to Mario Jozak, who pointed out to me that there HAS to be a parameter present, because the XMLCallDate is pasted as "&XMLCallDate" to the call. If this was the only parameter you will get an IO Error because the call would look like "p_simple_xml?&XMLCallDate" which is wrong! So thanks again, to Mario.
• Run the page!

Final thoughts
As you can see, Anycharts 4 is a huge improvement over 3.0, not only on the visual side, but also with the functionality and flexibility it gives.
With the 4th way to get AnyCharts 4, it is is possible to create a Anycharts 4 generator, just like APEX_UTIL.flash2. So if some of the charts just aren't good enough for you, you can create them yourself!

Let me know, if you start using Anycharts 4, as I'm currently checking if I can create a generator!