The previous section covered the region definition, but more importantly, if you want to change the appearance and behavior of a chart, this can be done via the Chart Attributes (second tab on the Edit Region page or right-click in page Tree view and Edit Chart).
Depending on the chart type chosen, you have different sections in the chart attributes (Figure 2-18):
• Chart Settings
• Chart Series
• Display Settings
• Axes Settings (not for 3D Pie, 2D Pie, 2D Doughnut)
• Gantt Settings (only for Gantt charts)
• Legend Settings (not for Dial or Gantt charts)
• Font Settings
• Chart XML
• Refresh
CHAPTER 2 ORACLE APEX 4.0 CHARTS INSIDE OUT
Figure 2-18. The different sections of the chart attributes
The Chart Settings allow you to change the chart type, the title, the size of the chart and the look and feel. Figure 2-19 shows the settings, which you can use as follows:
• Chart Type: Enables you to change between chart types in a given family. For example, you can change between 3D Stacked Column, 3D Bar Chart, 3D Stacked Bar Chart, and so forth.
• Chart Width and Height: Specify the size of the region in which the chart is rendered.
• Chart Margin: Lets you specify the amount of blank space surrounding the chart.
Values are in pixels.
• Color Scheme: Lets you select one of the built-in color schemes for your chart.
Single-series charts use a different color for each data point. Multiple-series charts use a different color for each series. Select the Custom option to define your own color scheme.
• Hatch Pattern: Allows you to toggle hatch patterns off and on. In a multi-series bar chart for example, you can show one series as bars with lines in them, another series as bars with stripes, and so forth.
Figure 2-19. The main settings of the chart in Chart Settings
The Chart Series holds the select queries which are used to feed the chart with data. You can have one or more series defined. To edit an existing series you click the Edit icon, while to add a new series you click the Add Series button (Figure 2-20). In the next section, “Adding Multiple Series,” we go into more detail about the series.
Figure 2-20. One or more series per chart in chart series
In the Display Settings you define the main look and feel of the chart and the different features you want to enable. Figure 2-21 shows the following settings that you can control:
• Animation controls the initial appearance of this chart. There are thirty different types of animation available, for example, Side from Left, Scale Y Top, etc.
• Marker is an object with a specified shape, size, and color used to mark and to identify values on your chart. There are 14 different types of Marker, for example, including Cross, Triangle Up, Triangle Down, etc.
Caution At the time of writing, Oracle APEX 4.0.2.00.07 does not support the display of markers on a bar or
column chart. The workaround to include the markers is to adapt the XML manually and change
marker type="None"to the marker you want (for example,
marker type="Cross").
• Style defines the visual appearance of the data element, which is most apparent in 2D Bar and Column charts. There are four different styles available in APEX 4.0:
Default, Aqua Dark, Aqua Light, and Silver.
• Background Type has three choices. Transparent makes the chart background transparent. Solid Color uses the color specified in Background Color 1 for the background of the chart. Gradient uses Background Color 1 and 2 and fades between them depending the gradient angle specified lower down in Gradient Angle.
• Include on Chart allows you to select the options you want to display on your chart. Depending on the chart type, some options might not be available.
Following are the options:
• Hints: Check this box if you want to see the label and value when you hover your cursor over the chart.
• Values: Check this box if you want to show the values next to your chart data.
• Labels: Check this box if you want to see the labels along the chart axis.
• Group by Series: Check this box if you want to see your series split. Instead of seeing your data grouped by column (Allen: SAL, COMM – Blake: SAL, COMM – Clark: SAL, COMM), you will see it grouped by series first and after that by column.
CHAPTER 2 ORACLE APEX 4.0 CHARTS INSIDE OUT
• Major Ticks: Check this box if you want to see the big tick marks in a gauge or dial chart.
• Minor Ticks: Check this box if you want to see the small tick marks between the big tick marks on your gauge (or dial) chart.
• Tick Labels: Check this box if you want to see the values corresponding to the tick marks.
• Multiple Y-Axes: Check the box if you want to see an extra Y-Axis positioned opposite to the existing Y-Axis on the chart. On a multi-series chart, the extra Y-Axis will be associated with the second series of the chart.
• Invert X-Axis Scale: Check this box if you want the sorting to be reversed. For example, Adams – Ward becomes Ward – Adams.
• Invert Y-Axis Scale: Check this box if you want the Y-Axis scale in an inverted mode. For example, checking the box will cause a bar chart to go down instead of up.
• Invert Scale: Check this box if you want the numbers to start from high to low on a Gauge (or Dial) chart.
• Show Scrollbars controls whether a scrollbar will be displayed on your chart. You can show a scrollbar on the X-Axis, the Y-Axis, or on both.
• Show Grid controls whether a value grid will be displayed on your chart. You can show the grid for the X-Axis, the Y-Axis, or for both.
• Gradient Angle defines the angle for the background type of Gradient. A value of 0 degrees results in a horizontal gradient with the first background color on the left and the second background color on the right. A value of 90 degrees results in a vertical gradient with first background color at the top and the second background color at the bottom.
Caution At the time of writing, APEX 4.0.2.00.07 has a bug where the gradient angle is not rendered correctly
as degrees. The current workaround is to change the XML manually to include the angle you want:
<gradient angle="90" type="Linear">(if you want the angle to be 90 degrees).
• X-Axis Label , Y-Axis Label, and Values Rotation define the amount of rotation, in degrees, for the chart labels. Positive values indicate clockwise rotation. Negative values indicate counter-clockwise rotation. The Font Face setting for labels does not apply to rotated text. If the Y Axis Title contains non-ASCII characters, make sure you don’t have a value specified in the Y-Axis Label Rotation.
Figure 2-21. Define the main look and feel of the chart in display settings.
In the Axes Settings shown in Figure 2-22, you define the title of the Axis, the interval, and the format of the values.
• X-Axis Title and Y-Axis Title are used to describe the labels along the horizontal and vertical axis of your chart.
• X-Axis Min and Max, and Y-Axis Min and Max, define the smallest and largest data value you want to appear on the corresponding Axis. You see these items
depending on the chart type, for example, Column Chart.
Caution Oracle APEX 4.0.2.00.07 has a bug where the X-Axis Min and Max items are visible for bar charts, instead of the Y-Axis Min and Max items. To define a data range for a bar chart, Y-Axis Min and Max values should be supplied. Values defined in the X-Axis Min and Max items are not taken into account for bar charts. The workaround is to set your chart type to Column Chart first, define the value for the Y-Axis, apply the changes, and edit the chart again to set the chart type back to Bar Chart. If you use Scrollbars, make sure there is no value defined in the hidden value for the X or Y-Axis Min.
• X-Axis Prefix and Y-Axis Prefix define text to display before values on the corresponding axes. This text prefix will appear before grid labels, value labels, and hint text. For example, you can enter a currency symbol as a prefix.
CHAPTER 2 ORACLE APEX 4.0 CHARTS INSIDE OUT
• X-Axis Postfix and Y-Axis Postfix define text to display after values on the
corresponding axes. This text postfix will appear after grid labels, value labels and hint text. For example, you can enter a percentage symbol as a postfix.
• X-Axis Minor and Major Interval, and Y-Axis Minor and Major Interval settings control the minor and major scale steps, used for the axis labels, the tick marks, and the grid on your chart. If not set, the steps are calculated automatically. Values entered must be positive. These settings will only be used when Show Grid in Display Settings is set.
• Decimal Places defines the number of decimal places to be used in the Y Axis values.
Note All these settings are static, so you can’t use page items to dynamically set them. However, if you want to set, for example, the Y Axis Min value dynamically depending the data you return, you can set Custom XML to Yes on the Chart XML page, and include your substitution strings there (for example,
&PAGE_ITEM).
Figure 2-22. The Axes Settings
In the Legend Settings (see Figure 2-23) you specify whether you want a legend and where it should appear and what the look and feel of it is.
• Show Legend specifies whether a legend is displayed on your chart. Possible positions are: Left, Right, Top, Bottom or Float.
• The Legend Title is the title of the Legend. If no Legend Title is entered, the title will be empty.
• Legend Element Layout defines if the items of the legend will appear next to each other or under each other. The Legend Element Layout is only applicable when Show Legend is set to Top or Bottom.
• Show Legend Background specifies whether the legend background (white) is visible on your chart or that the legend is transparent.
Figure 2-23. Define where the legend should appear
In the Font Settings you define the font face, font size, and font color of the different labels, values, hints, legend, and titles (Figure 2-24).
Caution At the moment of writing, Oracle APEX 4.0.2.00.07 has a bug where the Grid Label items should not be visible. The X Axis Labels and Y Axis Labels items can be used to control the appearance of the labels on the respective chart axes.
Figure 2-24. The font settings of the different text on the chart
The Chart XML page shows the XML that APEX will send to the AnyChart SWF file (more on that in the section “Behind the Scenes”. See Figure 2-25.)
Based on the previous settings, APEX will generate XML, so any change you make in the chart settings will be translated into some XML. At any time you can overwrite the generated XML of APEX by setting the Use Custom XML setting to Yes. If you select to use custom XML, attributes under Display Settings, Axes Settings, Legend Settings, Font Settings, and Chart Title are not used and are made hidden. If you set Use Custom XML back to No, all the settings will appear again as they were last saved.
For a complete reference of the XML that can be used and a detailed explanation, see the AnyChart website at http://www.anychart.com/products/anychart/docs/xmlReference/index.html.
CHAPTER 2 ORACLE APEX 4.0 CHARTS INSIDE OUT
Figure 2-25. The Chart XML
In the Refresh section, you can set Asynchronous Update to Yes to give the chart new data at an interval you specify (Figure 2-26). This is very useful if you always have the same page open with a dashboard, and want to see the latest data updated every few seconds without having to reload the page.
You can enter the interval in seconds between chart updates, but Updates Intervals less than 2 seconds are discouraged as that would mean APEX has to constantly retrieve the data. The maximum value for this setting is 99999.
Figure 2-26. The region definition of the chart line by line
When the page is run the #CHART_REFRESH# token from the Region Attributes will be replaced by the following JavaScript:
<script type="text/javascript" language="javascript">
function chart_r10604411968639592_InitRefresh(pNow) {
setTimeout("chart_r10604411968639592_InitRefresh(true)",10000);
if (pNow){apex_RefreshFlashChart (2, '10604411968639592', 'en');}
}
apex_SWFFormFix('c10604411968639592');
addLoadEvent(chart_r10604411968639592_InitRefresh(false))
</script>
The big number is the id of the chart and you will only see the addLoadEvent when the Asynchronous Update select list is set to Yes. The addLoadEvent enables the function. In the section “Customizing Charts by using Custom XML, Dynamic Actions and JavaScript” we will customize this JavaScript.
You can now apply what you know and change some settings of the chart to include a pattern on the bars (hatch), get a smoother look (Aqua style), have a gradient background, have different colors and rotate the labels, play with the axes and add a legend:
• Color Scheme: Look 7
• Hatch Pattern: Yes
• Style: Aqua Light
• Background Type: Gradient with Background colors: #CCCCFF and #CCFFCC
• Include on Chart: Hints, Values, Labels, Multiple Y-Axes, Invert Y-Axis Scale
• Show Scrollbars: X-Axis
• Gradient Angle: 0 Degrees
• X-Axis Label Rotation: 45 Degrees
• Values Rotation: 90 Degrees
• Y Axis: Min: 200
• Y Axis: Prefix: $
• Y-Axis: Major Interval: 400 and Minor Interval: 200
• Decimal Places: 2
• Show Legend: Left
• Legend Title: Legend
• Legend Element Layout: Vertical
• Show Legend Background: checked
• Font Settings: a different color starting with #000011 end with #0000FF The result is shown in Figure 2-27.
CHAPTER 2 ORACLE APEX 4.0 CHARTS INSIDE OUT
Figure 2-27. An example of a modified chart