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
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
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
Matthias 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 Amorim 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 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

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

Filtering in the APEX Interactive Grid

Remember Oracle Forms? One of the nice features of Forms was the use of GLOBAL items. More or less comparable to Application Items in APEX. These GLOBALS where often used to pre-query data. For example you queried Employee 200 in Form A, then opened Form B and on opening that Form the Employee field is filled with that (GLOBAL) value of 200 and the query was executed. So without additional keys strokes or entering data, when switching to another Form a user would immediately see the data in the same context. And they loved that. In APEX you can create a similar experience using Application Items (or an Item on the Global Page) for Classic Reports (by setting a Default Value to a Search Item) and Interactive Reports (using the  APEX_IR.ADD_FILTER  procedure). But what about the Interactive Grid? There is no APEX_IG package ... so the first thing we have to figure out is how can we set a filter programmatically? Start with creating an Interactive Grid based upon the good old Employ

Stop using validations for checking constraints !

 If you run your APEX application - like a Form based on the EMP table - and test if you can change the value of Department to something else then the standard values of 10, 20, 30 or 40, you'll get a nice error message like this: But it isn't really nice, is it? So what do a lot of developers do? They create a validation (just) in order to show a nicer, better worded, error message like "This is not a valid department".  And what you then just did is writing code twice : Once in the database as a (foreign key) check constraint and once as a sql statement in your validation. And we all know : writing code twice is usually not a good idea - and executing the same query twice is not enhancing your performance! So how can we transform that ugly error message into something nice? By combining two APEX features: the Error Handling Function and the Text Messages! Start with copying the example of an Error Handling Function from the APEX documentation. Create this function