Skip to main content

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!

Comments

Gerben said…
I hope the example page does not include your javascript footer region solution. I am getting the Error#1085 over and over again.
Roel said…
I doubled the timeout, so it should work better now.
Dimitri Gielis said…
Hi Roel,

The Anychart Integration kit for APEX is free... we don't charge anything for that.
The problem is we couldn't use the Anychart version (3.3 and 4.0) that is licensed with APEX as it doesn't has all features and bugs are not fixed anymore.

Nevertheless you did a good try, I think you looked at what we are doing as you used some unknown parameters ;-)

APEX 4 will give you the new charts too, but it will stay limited and won't include the latest version of Anychart.

Dimitri
Roel said…
Hello Dimitri,
I know the Integration Kit is free, but Anycharts is not free.... And sure, I looked at the demo's and discovered the undocumented parameters...
Rutger said…
Hi Dimitri,

Sure the Integration Kit is free, but that's not really an argument when the version it is integrating with is payed for. The integration kit is not a cost free solution. While the anychart 4 functionality might be inferior to the anychart 5 functionality, I think for about 75% of the time you could just use anychart 4 functionality and charts.
The method Roel described is just the start of our exploration, and I can say that there will be more news on this subject very soon!

P.S. Kudos for what you did with the Integration Kit!

Greetings,
Rutger
Tobias said…
Is there a way to choose some other chart type than "CategorizedVertical" using this method?
Roel said…
@Tobias
I am working on an example with more chart types. Once it is finished I'll post the link.
Kathryn said…
This works great for me (and its TOTALLY free which is good as I'm working for a charity), just use the anychart documentation to tweak things.

A big bonus that you've not mentioned is that AnyChart 4 allows the user to save the image as a pdf or a png file just by right clicking - that's something my users are always asking for and until now its been limited to the charts produced by the interactive reports.
Pedro Mendez said…
Hello Roels, this works very well and i was gladly surprised when i saw the apex.oracle.com examples. The image quality and the functionality is impressive when APEX and jquery are put together.

Is it possible to explain how you made the bar at the bottom with a Mac look and feel?

Regards Pedro.
Roel said…
Hi Pedro
For an explanation on the Mac menu thingy: you can click on the fourth icon in that menu (chart + compass) and it'll bring you to another page where that part is explained.
Glad you like it!
Roel
ram said…
hi ,
i followed ur example of replacing-anychart-3-with-anychart-4.html but i got error
"NO CHART DATA AVAILBLE "
can u help me in solving this


thanks ,
with regards ,
ram
Roel said…
Hi Ram,
What type of chart are you using? And what's the query for the chart?
Roel
ram said…
hi
i m using
Chart (Flash Chart)

this was the query i m using
SELECT NULL LINK, ENAME LABEL, SAL VALUE FROM EMP ORDER BY ENAME

the region source is


param name="movie" value="#IMAGE_PREFIX#flashchart/swf/AnyChart.swf"
param name="quality" value="high"
param name="allowScriptAccess" value="sameDomain">
param name="allowNetworking" value="all">
param name="scale" value="noscale">
param name="wmode" value="transparent">param name="FlashVars" value="XMLFile=#HOST#apex_util.flash2?p=&APP_ID.:&APP_PAGE_ID.:&APP_SESSION.:FLOW_FLASH_CHART_R#REGION_ID#">

embed src="#IMAGE_PREFIX#flashchart/#CHART_TYPE#.swf?XMLFile=#HOST#apex_util.flash?
p=&APP_ID.:&APP_PAGE_ID.:&APP_SESSION.:FLOW_FLASH_CHART_R#REGION_ID#"
quality="high"
width="#WIDTH#"
height="#HEIGHT#"
name="#CHART_NAME#"
scale="noscale"
align=""
allowScriptAccess="sameDomain"
allowNetworking="all"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer"
wmode="transparent"
FlashVars="XMLFile=#HOST#apex_util.flash2?p=&APP_ID.:&APP_PAGE_ID.:&APP_SESSION.:FLOW_FLASH_CHART_R#REGION_ID#">
embed>
object>
#CHART_REFRESH#

XML FILES IS :



anychart>
settings>
animation enabled="True"/>
/settings>
charts>
chart use_anychart3_data_model="true" >
#DATA#
/chart>
charts>
anychart>
Mike said…
Hey I'm trying to manipulate the data based off your example here. Is it possible to make 2 y-axis with it? I'm seeing examples in the Any Chart documentation but when I try and paste that XML into my app it doesn't work...Also how can you access a particular series data? All the any chart examples have manually entered values for the charts and the only way i can access currently is #DATA#. Thanks for any help.

Mike
Roel said…
Mike, Ram,
You could (or should) try the solution posted on http://apexacp.blogspot.com. That plug-in has far more flexibility and functionality than the one I provided: the solution is based on my post, but uses the APEX Repository definition to create the charts!
Roel
Peter said…
Hi Roel,

thanks 4 ur great blog.
i've already tried it out->works really great (after some installation hazzle; did'nt have anychart available in the apex/images/flashchart directoty ;-)
but where can i find a users guide (or xml reference). i'm afraid the one at anychart.com does not realy fit the version which comes whith apex 3.2.
i wasn't able to get a legend for an easy query.
i inserted legend enabled="True" Tag to my xml but nothing happend. any idea?

regards
Peter
Peter said…
Roel,
did u get my bug report 4 the acp?
plz have a loook

grtz
peter
mhoys said…
Roel,

I'm also getting the "No chart data available" error when trying to convert to Anychart 4. Would it be possible to post the complete region source code of your working example?

Matthias
Roel said…
Hi Matthias,

I'm getting the same error on apex.oracle.com. I think it has something to do with the upgrade to Anycharts 5 that's now used.
I suggest you take a look at our Anycharts Conversion Package website (http://apexacp.blogspot.com/). That stuff is still working...

Roel
Bruno said…
Hi,

it is possible to use gauges with anychart?

Thanks, Bruno.
Roel said…
@Bruno
In version 5 you can. Look at
http://www.anychart.com/blog/2008/07/24/anychart-50-release-featuring-interactive-circular-angular-and-linear-horizontal-and-vertical-gauges/
They look awesome!
And..in the current APEX version Anychart 5.1.3. is included. So you can use them if you like (using custom XML).
Matthias Hoys said…
Hi Roel,

I now installed the APEX ACP package in the parsing schema of my workspace but when I try to convert a v3.3 scatter chart it just displays an empty chart, and the chart shows "version 5.1.3". Are you sure this still works with APEX 3.2.1? I'm almost sure I did everything right.

Matthias
Roel said…
Hi Matthias,
Maybe you can try it with another chart type, like bars or lines?
Roel

Popular posts from this blog

Refresh selected row(s) in an Interactive Grid

In my previous post I blogged about pushing changed rows from the dabatase into an Interactive Grid. The use case I'll cover right here is probably more common - and therefore more useful!

Until we had the IG, we showed the data in a report (Interactive or Classic). Changes to the data where made by popping up a form page, making changes, saving and refreshing the report upon closing the dialog. Or by clicking an icon / button / link in your report that makes some changes to the data (like changing a status) and ... refresh the report.  That all works fine, but the downsides are: The whole dataset is returned from the server to the client - again and again. And if your pagination size is large, that does lead to more and more network traffic, more interpretation by the browser and more waiting time for the end user.The "current record" might be out of focus after the refresh, especially by larger pagination sizes, as the first rows will be shown. Or (even worse) while you…

Dockerize your APEX development environment

Nowadays Docker is everywhere. It is one of the main components of Continuous Integration / Continuous Development environments. That alone indicates Docker has to be seen more as a Software Delivery Platform than as a replacement of a virtual machine.

However ...

If you are running an Oracle database using Docker on your local machine to develop some APEX application, you will probably not move that container is a whole to test and production environments. Because in that case you would not only deliver a new APEX application to the production environment - which is a good thing - but also overwrite the data in production with the data from your development environment. And that won't make your users very excited.
So in this set up you will be using Docker as a replacement of a Virtual Machine and not as a Delivery Platform.
And that's exactly the way Martin is using it as he described in this recent blog post. It is an ideal way to get up and running with an Oracle database …

apex_application.g_f0x array processing in Oracle 12

If you created your own "updatable reports" or your custom version of tabular forms in Oracle Application Express, you'll end up with a query that looks similar to this one:
then you disable the "Escape special characters" property and the result is an updatable multirecord form.
That was easy, right? But now we need to process the changes in the Ename column when the form is submitted, but only if the checkbox is checked. All the columns are submitted as separated arrays, named apex_application.g_f0x - where the "x" is the value of the "p_idx" parameter you specified in the apex_item calls. So we have apex_application.g_f01, g_f02 and g_f03. But then you discover APEX has the oddity that the "checkbox" array only contains values for the checked rows. Thus if you just check "Jones", the length of g_f02 is 1 and it contains only the empno of Jones - while the other two arrays will contain all (14) rows. So for processing y…