Monday, May 18, 2009

Replacing Anychart 3 with Anychart 4 Charts

With the current APEX version you can create nice looking Charts using Anycharts 3. The charts you create with Interactive Reports use Anycharts 4. These charts look better than the regular ones, and we - my colleague Rutger and I - started to investigate the options for enhancing the regular charts. Of course we could wait for APEX 4.0 or go for Anycharts 5, using the Anychart Integration Kit, but we love a quick and more cost neutral (as in 'free') solution...

So let's go:
Create a simple chart using the "SELECT NULL LINK, ENAME LABEL, SAL VALUE FROM EMP ORDER BY ENAME" query. Now make let's make some changes in the generated Region Source to use Anychart 4:
Change
<param name="movie" value="#IMAGE_PREFIX#flashchart/#CHART_TYPE#.swf?XMLFile=#HOST#apex_util.flash?p=&APP_ID.:&FLOW_PAGE_ID.:&APP_SESSION.:FLOW_FLASH_CHART_R#REGION_ID#">
to
<param name="movie" value="#IMAGE_PREFIX#flashchart/swf/AnyChart.swf">
and
<param name="FlashVars" value="waiting=#FLASH_WAITING#&loading=#FLASH_LOADING#">
to
<param name="FlashVars" value="XMLFile=#HOST#apex_util.flash2?p=&APP_ID.:&APP_PAGE_ID.:&APP_SESSION.:FLOW_FLASH_CHART_R#REGION_ID#">
twice - once in the <object> section and once in the <embed> section.

Now replace the standard Chart XML with the very minimal setting of:

<anychart>
<settings>
<animation enabled="True"/>
</settings>
<charts>
<chart use_anychart3_data_model="true" >
#DATA#
</chart>
</charts>
</anychart>

Especially the use_anychart3_data_model="true" is important - as APEX generates Anychart 3 type XML. This setting tells Anychart 4 to "understand" that XML. And you're done. Almost...

Update (20/5): The #1085 Error was caused by a wrong "FlashVars" parameter. &APP_ID.:1: should be replaced by &APP_ID.:&APP_PAGE_ID.: Now it works perfect - no need for refreshing the chart anymore!
BTW I am working on a more extensive example on apex.oracle.com, showing more types of charts. I'll do another post when that goes public...

I guess you can't create all the Charts you want, but you can get some nice things like the picture to the left - without any extra costs...

You can see an example here. I wouldn't advice to immediately change all your Charts to Anychart 4, but it is nice to play with!
Post a Comment