Customize Apex charts

Hello,
I'm an Oracle DBA thats slowly learning Apex. our company wants to use Apex for forms and various reports. I have absolutely no XML, Java, HTML or any such knowledge that would be usefule for webdesigners. i rely mostly on the settings Apex provides, but i'm learning a few tricks here and there.
my question is, how to customize/edit charts? here are open issues:
- i have a 3D stacked bar chart (flash chart). i want to be able to
- add a line to this chart for the same data. the line can be a "trendline" or some fixed value. i saw a website (AnyChart) that offers this soultion, but have no idea how to incorporate this. in any case, i did some tests, and it didn't work.
- changing the Legend: we want to be able to change the order of the legend, so that it fits the chart! seems like a simple thing, but Apex does not offer this. it shows the legend in reverse order to the chart.
Also, the Legend seems to fix a capital letter to the first character of a word, the rest is small.
ex: we want a legend definition "AA KCOO" and we get "Aa Kcoo". we define this in the SQL Query, but it doesn't accept this.
i suppose all this can be changed in XML coding, but how, and more important, why? shouldn't a tool like this have that option of changing these things? the GUI tool seems so limited here. its nice that you can customize in XML, but i think these are missing options..
can anyone help, or guide me to the right documentation?
thanks,
mike

Hi Dimitri,
thanks for the tip.
first of all, getting the item in like you mentioned did not work. i tried with and without the single quotes
without quotes (<line value=&P8_LINIE etc) gives me an "XML Error was malformed" message, and with the quotes (<line value='&P8_LINIE' etc) gives me a completely differnt number! it draws a line at the very top of the scale, fixed at 160 in my case.
i did another tes, redoing the flash chart in a different region. exact same error, only this time, since i set my y- axis max value at 180, then the line was drawn at the top again - so it seems like the line is automatically drawn at the place where the chart value was defined for maximum...
oh well, no idea where this comes from...
as far as Anychart goes - i took a look at the website - it costs a fair bit for this newer version! for one developer license 500 USD, for 4 developers 1000 USD!
my question is: will a future Apex have the newer version? would it make sense to buy this or should we wait until Apex 4.0 comes out?
i have since discovered another thorny issue with Apex charts, but i will open a new thread for that. see my "remove marker from 2D Line flash chart" thread
so far, i'm quite frustrated at the lack of modification options available to this GUI tool. perhaps in future versions, Apex graphs will be better...
mike

Similar Messages

How to use the d3.js library with Apex Charting

Hello.
I am using Apex 4.1.0 with Oracle 11gR2 and Oracle App Server (mod_plsql).
I'm trying to incorporate the d3.js library (a visulaization framework) in my Apex charts but am not having much success.
I found this article in which David Mann uses the library within an Apex 4.x application:
http://ba6.us/d3js_application_express_basic_dynamic_action
I replicated his exact steps in my own application but without success. I do not see how he was able to get his application to work. Indeed, the tutorial does not even use a dynamic action despite what the article title says.
Has any one used the d3.js library with their Apex application. If so, would you be willing to share how you went about it?
Thank you very much.
Elie

EEG wrote:
Hello fac586.
Thank you very much for responding/helping.
In the article I referenced I did note David's statement about using a "modern" browser with d3.js (one that recognizes css3 syntax); otherwise, the framework will not respond. And so, I was careful to run my Apex application in IE9.x as well in Firefox 16.x. But all I see is an empty region with a title. No chart. Nothing.
I suspect my one of my problems here is in getting the chart to refresh every "n" seconds. For this, I think the dynamic action would be used, though I'm not sure how to go about doing so.That's included in the sample code (line 99). Strangely Dynamic Actions don't seem to include a native timer event...however there is a plug-in.
More problematic, though, is that I am not seeing any chart whatsoever in the region. I would have expected to see some chart data, even if it is not automagically refreshing.
I've created my example in my EEG workspace on apex.oracle.com:
Workspace: EEG
Username: [email protected]
Password: galaxy (note: all lowercase)
Please see application 27083 called Elie_Goodies, page 25. This page has an associated tab called, appropriately enough, "d3.js Library". The Safari console showed a couple of JavaScript errors.
1. The URL used to include the d3 code in the blog article:
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>is returning HTML, not JavaScript. Changing it to that given on the d3js.org site:
<script src="http://d3js.org/d3.v2.js"></script>includes the correct script.
2. There was a syntax error in a script in the Run Code region. I think there was some kind of issue arising from copying from the blog article: it looked like line endings hadn't been respected as the code wasn't formatted properly. Pasting it from the blog into Coda's editor and then into the APEX Region Source text area fixed the format, and it then ran first time.
Thanks for the heads-up. I'll also be looking further into d3.

Customize APEX components

Hi...
I want to customize apex components to meet my needs but the problem is that I can't find where apex store html templates for some components like interactive report.
so where can I find these templates
Thanks

Hi,
The simple rule of thumb is that we can customize Apex components only to the extent allowed in the Application Builder either in Shared Components or provisions made for "attributes" in substritution strings used in templates. Soe more can be achieved through custom CSS, too.
If it is not seen in Builder then it is coming from an Apex package, and that ususally means " you cannot change it directly". The tabular forms date picker, IR report, etc are some such components.
Having said that , once the "default" component is load in the browser one can manipulate it with JS / Dynamic Actions, theoritically to any extent but limited by the effort required and the complexity of building and supporting all the complex stuff.
So , its better to try and use the features provided within Apex and try to meet your requirement within the Apex framework. 90% of the time you will find you can do it.
If you state what you need to "customize for" I believe there are folks on the forum you will give a way / workaround within available Apex features.
Regards,

Apex Chart with multiple y-axis

Hi,
I am using the build-in flash Apex chart which I understand to be a subset of the Anychart.
I have the following problem, I have two series, which I am displaying in a 3D Bar Chart on a horizontal view with two Y-Axis. This works well, the problem is that each Y -Axis has a different scale. I am not setting the min or max value range for either of the y-axis as I do not know what this value range may be at the time of rendering the chart to the application user.
So as it turns out, the left y-axis has a value range from zero to 100 and the right y-axis has a value range from zero to 50 and the application users are finding this difficult and confusing as they are only looking at the bars represented in the chart and assuming that as the two bars, i.e. one form each series look similar in size, they have the same value and this can not be further from the true, as one y-axis is showing a value range twice as big as the other y-axis.
So my question is how do you customise the chart so that the value range on both y-axis is the same. i.e., the largest of the two?
Application Express 4.0.2.00.07
Thank you

You can't get axis scale variables to work in the APEX declaritive GUI because it's not designed for that. You will have to switch to custom XML.
Set everything you want -- that you can set -- because once you switch to XML, if you switch back I think you lose all those custom settings. Then when you set Custom to "Yes", drag the window widget to enlarge the window so you can edit more easily.
Find the y_xis section of the XML.
        <axes>
          <y_axis >
            <scale   mode="Normal"    />
            <title>
              <text>Directory Size (Gigabytes)</text>
              <font family="Tahoma" size="16" color="0x000000" />
            </title>
            <labels enabled="true" position="Outside">
              <font family="Tahoma" size="10" color="0x000000" />
              <format><![CDATA[{%Value}{numDecimals:1,decimalSeparator:.,thousandsSeparator:\,}]]></format>
            </labels>
            <major_grid enabled="True" interlaced="false">
                <line color="Black" />
              </major_grid>
<minor_grid enabled="True">
              </minor_grid>
          </y_axis>You want to change the scale line between <y_axis>   </y_axis> to
<scale mode="Normal" maximum="100" minimum="0" />Or maybe it's just <scale maximum="100" minimum="0" />Except instead of constants, you want variables. I'm not sure you can use bind variable (:P7_YMAX, :P7_YMIN) you may have to use (#YMAX#, #YMIN#) variables.
I would make a new page and experiment with some VERY simple data -- maybe constants in a SELECT -- SELECT ..., 1, 2, 3 from dual ...... until you get what works.
And, again. This assumes you decide on some computation to compute the values of (:P7_YMAX, :P7_YMIN) or (#YMAX#, #YMIN#) you want it to use.
Howard

How to customize line chart series and symbols?

Hello Forum,
who can help me to customize line chart series and symbols color?
I need to customize this in dynamic way.
Thanks in advanced.

See example 8-10 (Example 8-10 Changing Chart Symbol Color) from http://docs.oracle.com/javafx/2.0/charts/css-styles.htm#CIHGIAGE (reproduced here).
The linked tutorial document contains a picture of how this example renders.
.chart-series-line {
    -fx-stroke-width: 2px;
    -fx-effect: null;
.default-color0.chart-series-line { -fx-stroke: #e9967a; }
.default-color1.chart-series-line { -fx-stroke: #f0e68c; }
.default-color2.chart-series-line { -fx-stroke: #dda0dd; }
.default-color0.chart-line-symbol { -fx-background-color: #e9967a, white; }
.default-color1.chart-line-symbol { -fx-background-color: #f0e68c, white; }
.default-color2.chart-line-symbol { -fx-background-color: #dda0dd, white; }Note the two comma separated colors listed for each -fx-background-color for the chart-line-symbol.
The first color is the color or the outside of the symbol, the second is the inside of the symbol.
In the sample css you provided you only supply a single background color for the chart-line-symbol, when two colors are required.

Scrollable APEX chart legends

I'm using various apex charts for a dashboard application, and am utilizing the legend. However, on some of the charts, the dynamically generated legend has numerous items that exceed the height of the chart region. I noticed a scrollable tag in the xml, which would be ideal, but when I set it to yes it just displays a non-functioning scroll bar, and adding width and heighth parameters doesn't seem to change anything. Does anyone have any suggestions for this?
Thanks!

You can't get axis scale variables to work in the APEX declaritive GUI because it's not designed for that. You will have to switch to custom XML.
Set everything you want -- that you can set -- because once you switch to XML, if you switch back I think you lose all those custom settings. Then when you set Custom to "Yes", drag the window widget to enlarge the window so you can edit more easily.
Find the y_xis section of the XML.
        <axes>
          <y_axis >
            <scale   mode="Normal"    />
            <title>
              <text>Directory Size (Gigabytes)</text>
              <font family="Tahoma" size="16" color="0x000000" />
            </title>
            <labels enabled="true" position="Outside">
              <font family="Tahoma" size="10" color="0x000000" />
              <format><![CDATA[{%Value}{numDecimals:1,decimalSeparator:.,thousandsSeparator:\,}]]></format>
            </labels>
            <major_grid enabled="True" interlaced="false">
                <line color="Black" />
              </major_grid>
<minor_grid enabled="True">
              </minor_grid>
          </y_axis>You want to change the scale line between <y_axis>   </y_axis> to
<scale mode="Normal" maximum="100" minimum="0" />Or maybe it's just <scale maximum="100" minimum="0" />Except instead of constants, you want variables. I'm not sure you can use bind variable (:P7_YMAX, :P7_YMIN) you may have to use (#YMAX#, #YMIN#) variables.
I would make a new page and experiment with some VERY simple data -- maybe constants in a SELECT -- SELECT ..., 1, 2, 3 from dual ...... until you get what works.
And, again. This assumes you decide on some computation to compute the values of (:P7_YMAX, :P7_YMIN) or (#YMAX#, #YMIN#) you want it to use.
Howard

Apex Chart - Y Axis Scale customization

Hi all,
For a chart in Apex, is it possible to have the Y-Axis scale customized? (Let's say to present all values form 2 and 2 units for instance).
Thank you,
Ana-Maria

Hi Prashant Khadatkar,
As per my understanding, you created a line chart, you added JobStartTime and JobEndTime to values area, and added JobStartDate to category groups. You want to display data of y axis from PM to AM. In order to improve the efficiency of troubleshooting, I
need to ask several questions:
What’s the data type of JobStartTime and JobEndTime?
Is the data stored in database the same as you provided?
What’s the state of report now? Please provide some more detailed information of the report. I would be appreciated it if you could provide sample data and screenshot of the report.
This may be a lot of information to ask for at one time. However, by collecting this information now, it will help us move more quickly toward a solution.
Thanks,
Wendy Fu
Wendy Fu
TechNet Community Support

How to customize Flash Chart color scheme (Look 1 etc..)

Hi,
Is their any way I can customize the Flash Chart color schemes (Look 1, Look 2). I know there's a "Custom" option but I'd like to define what Look 1 is so that I don't need to use custom values for each chart.
Thank you,
Martin
[http://apex-smb.blogspot.com/]

Thank you Dimitri
What you suggest is what I am currently doing.
But let's say I have to change the colors in all my graphs, I would have to go through all of them and change the "Custom Colors".
I was looking for something similar to a template where I would only have to change the color definition in one place...

Need EXPERT's suggestion for APEX CHART SERIES

Hello Everyone,
I have been trying to solve an issue with my apex line chart. The scenario is as follows:
I have a table called revenue. revenues per year are saved in it. and revenues are generated from three sources which are also saved in the same table.
I have made a line chart on it. works well.
Now I have to show that if the value of one of the sources had fallen, how must have it affected the total. I made a number field that takes an estimated change value, and build my sql query with it. it works but the problem is that it changes the non-affected source too. it must change the value of the affected source only and hence the total value.
I hope I make sense and anybody can suggest something.
bold or I will put it this way, how can I write a select statement for a chart series so that one of the rows value does not change and the other two change. ... ?
Edited by: Samooray92 on May 30, 2013 2:41 PM

Samooray,
Let's work with this question since there is more detail here than in the other one. {thread:id=2543702}
First it's always help to know:
Full APEX version
Full DB/version/edition/host OS
Web server architecture (EPG, OHS or APEX listener/host OS)
Browser(s) and version(s) used
And sometimes this information as well.
Theme
Template(s)
Region/item type(s)
When a question goes unanswered for a while, there is no need to reply to it or to start a new question. You can edit the original question and just add "Bump" at the bottom and save the changes. This will bump it back to the top of the question list. And by that time, you might think of additional information you can add to the question.
Say, why would a question go unanswered? Well, easy questions and frequently asked questions with well-known answers can be answered right away. Your question seems more complicated and I don't think we have all the information we need to understand exactly what the question is.
You are doing a "series" chart. What kind of series chart: bar, column, line? What is each series? For example, components of revenue might be 1) sales, 2) licensing revenue and 3) other. Then you might have one series for sales, a second for licensing revenue and a third for other.
Could you mock up a trivial example on apex.oracle.com http://apex.oracle.com/pls/apex/f?p=4700:1:0::::: ?
Regards,
Howard

Apex charts - right click, save as image (not responding)

Hi,
Yesterday when our users attempted to right-click on an anychart produced by Apex, then save as image - they were able to identify a location to save to, however the infinity image labelled 'saving' was presented indefinitely.
At the same time, I noticed Anychart.com was down. This morning when I attempted the same action, now that Anychart.com is up, the process worked - correlation = causation?
A previous post seems to suggest it might be possible to localise whatever is converting the chart to images/pdf
Save as pdf/image does not work. It runs and runs ... Getting no output
Does anyone have any further details on this? I can't locate any existing references to anychart.com within my application, constructed source, /i/ folder etc.
Cheers
Scott

Hi Scott,
So, if i understand properly, making this change
<settings><pdf_export file_name="mychart.pdf" use_title_as_file_name="true" url="/i/AnyChart4_SaveAsPDF_php4/PDFSaver.php" image_type="jpg" />
will avoid atleast PDF issue? And as i dont have privileges to install or deinstall anything on /i/ folder, still this will work and URL path will remain same for each installation?
Adding another question, as you said "it sends base64 information when converting to PDF", does it mean i will not be able to convert to PDF, if i am using intranet and PC's not accessible to internet?
Thanks
Sunil Bhatia

Apex Charts - Pass Multiple Variables & Using GROUP BY

Hi, I'm using Apex 3.2.1 and have generated a chart with the following query -
select NULL link, PROXY label, count(*) value
from "INVENT_OWNER"."LMT_SPACE_EMAILS"
where RESPONSE = 'NO'
group by PROXY
This works fine.
I now want to link the 'PROXY' column to a new page but I can not get the query correct even if I use Apex to generate the chart query.
Apex generates it as -
select 'f?p=&APP_ID.:4:'||:app_session||'::::P4_REF,P4_PROXY:'||REF||','||PROXY||':' link, PROXY label, COUNT(REF) value
from "INVENT_OWNER"."LMT_CHECKS"
group by PROXY
but this will not parse and I get the error 'ORA-00979: not a GROUP BY expression'
Can anyone please help ?
Thanks in advance

I am currently working on my first chart creation in apex 4.
I am creating a 3D bar chart that shows the '%Complete' by Project and by Task by Project Title.
There is one Project for Project Title but there can be multiple Tasks for each Project Title.
My first series is called project -- and the series query is:
SELECT NULL LINK,
"F**"."PROJECT_TITLE" LABEL,
"F**"."%_COMPLETED" VALUE
FROM "F**"
where "F**"."PROJECT_LEVEL" = 'Project'
This works fine and returns the % complete for each Project.
But for the next series I use the series query below and it only returns one Task - even if there are mutiple tasks for the Project Title.
SELECT NULL LINK,
"F**"."PROJECT_TITLE" LABEL,
"F**"."%_COMPLETED" VALUE
FROM "F**"
where "F**"."PROJECT_LEVEL" = 'Task'
How do I show multiple tasks on the graph for each Project Title?
Thanks,
Joan

Need Resource On APEX Charts

I am new to APEX. I have v 3.2 on 10.2.0.4 database. I need to create some charts off of a reporting screen that I have. I am finding it very hard to find some documentation on how to do this. Can somone point me in the right direction?

You might find the following URL helpful:
http://apex.oracle.com/pls/apex/f?p=36648:37:3441103816120909
R/ Zaf

Oracle Apex Charts - Download Options

Hi All,
Am working on charts for my client to give pictorical representations of data and i have used custom XML and dynamic XML generation too to achieve this. Now my next requirement is, can we download the chart to PDF or CSV or Excel, similar to download an Interactive Report from Apex.
Am using Oracle Apex Version 4.0.2.00.07.
And DB, Oracle 10g.
Please advice upon this.
Thanks in advance.
Regards,
Sakthi.

Hi Tony,
Thanks for your valuable reply, it really helps me out to give a saolution to the customer.
But, in my application i have a parent HTML region and i have two chart region as child. Now i am able to use the option save as PDF for each chart region separately, but my client needs, there must be a single export button or anything like that which allows them to export the multiple charts (multiple char regions) in a single PDF file.
Is it possible in Apex? Please help me.
Thanks in advance.
Regards,
Sakthi.

Apex Charts custom XML integration

Hi All,
I found a chart in Anycharts.com and downloaded its XML.I wanted to integrate this chart with apex. But the XML,which i downloaded uses data from a .csv file. How to integrate this XML with apex. I found we can edit the default XML in the chart generated by. But How does XML take the values from the query which we write. There is only #DATA# at the end of the chart generated by apex and no clue on how and in what format this Data comes.
Please help me out.
Thanks,
Ajay

Ajay -
Others may be able to explain this process better than I but I'll give it my best.
The #DATA# tag that you see in the default custom xml for a chart is a substitution string. When your page is rendered, APEX runs the queries associated with your chart and then creates XML based on the chart type of the series. Next, it takes this XML that it generated and puts it in the chart custom XML where that #DATA# tag is located.
There are other ways to get custom data into your chart. You can create the XML yourself in a page item and then insert the contents of that page item into the custom XML of the chart. This can be an advanced topic, but it really isn't too bad once you get the hang of it. The following link contains some pretty good examples of the things you can do. It even shows you how to format your SQL to obtain similar results. Custom XML generation is in the MISC tab. http://apex.oracle.com/pls/apex/f?p=36648:1:2979429292819853::NO I am not responsible for putting this page together, another forum member is, and perhaps they will chime in.
Hope this helps
Austin

Apex charts and IPad

http://www.anychart.com/blog/2011/03/24/html5-version-of-anychart-coming-soon/
They will release AnyChart HTML5 version.
Is there any way to incorporate these charts into existing apex applications?
Goal is simple: get charts working on IPad...

By the way,
Anychart will release HTML5 charts this month.
So we can embed them into APEX.
This is answer from their Director of Sales:
Hello Alex,
Not at this time. We’ll be releasing our HTML5 charts later this month. We are in discussions with Oracle about including them as part of APEX but that would be some time away at this point. However, once the HTML5 comes out, you could implement them into your APEX environment directly just like our other charts.
Regards,
Mark
Mark Peters

Customize Apex charts

Similar Messages

Maybe you are looking for