Hello! If you had play with Apex before, you know how easy is to build a simple report to present your data. But sometimes, your boss will ask you to build something more “graphical” or with a better design. But I never thought in color themes or pictures when I developed my simple reports in Sqlplus. Those colorful themes and design things are, most of the times, not familiar for DBA’s.
Thinking on that, I decide to write this article, always focusing in the standard Chart plugin that comes with Apex by default. Take a look on below chart.
First of all, to change Chart attributes, you must select in the left side, the item named “Attributes”. Only in this way you will see all chart properties, on the box at right side of Apex Development IDE.
After that, you should see Chart attributes in the right side box, like below pic:
So, what I’ve changed in above chart?
Rendering -> Apex5 comes with Html5 plugin, prefer this instead of old flash charts. Html5 are mobile friendly template, and should run better in modern browsers, with is standard right now.
Show Grid -> Which lines should be rendered? By default, chart shows only vertical lines. You can choose here, to display horizontal lines as well as secondary gray lines, between black main lines.
Marker -> You could change the marker for each serie, making the chart more clear. Several options are available: squares, circles, cross lines and many others. In the example I use Diamond marker.
Next challenge? I was asked how to invert the graphic, because their data represent ‘errors’, customer ask for lower values be on top of the list. My first ideia was to use math and multiply results for (-1 ). This way, graph line is inverted as necessary, but values don’t represent correct values.
The correct way to do it, is modifying X axis properties. Let’s take a look into available Axis properties.
Title, Prefix/Postfix -> Title doesn’t need explanation. Other modify how every value and hint are rendered in chart canvas.
Label Rotation -> to write label in top-down or even with inclination, like below example.
Label Font -> modify color and font face.
Invert Scale! Here is our wonder! Modify to change your chart scale, and achieve my customer needs.
Major/Minor Interval -> Specify how much space between major (black) and minor (gray) lines in the chart.Check the results. As you can see, in this example I inverted scale in both X and Y axis.
That is it folks! In next articles, I’ll write more about Chart styles and customizations! Have a nice week.
Cassiano.