This article is the third part from the series about my participation in the APEX dashboard competition.
See also the other parts:
- Part1: The Dashboard-Builder
- Part2: Dashboard-Sets, JSON and the local-storage
In the first two parts I showed how the dashboard-designer works and described the creation-process of the dashboard-sets. In this final part, I will show you how the charts are generated.
The Cards-Template as basic structure
I wanted my charts-regions to be as responsive as the original apex-regions itself. This would have been probably much more additional work, when inserting some custom regions with JQuery into the page. I tried to add the basic structure of an empty APEX page-region via JQuery to the page, but this would have been too complicated to recreate the positioning with columns.
I found a much easier solution: The Cards Classic Report template. If you examine the region with the developer tools of your browser, you can see, that it’s just an unordered list. This makes it really easy to reuse this structure and creating these card-regions dynamically via JQuery. They are also fully responsive, so no extra work for this.
Figure1: The classic report with the cards template
I just duplicated the cards-template and made some changes. The result is the following:
Code1: The template for the charts-region
Now you can insert these list-elements easily dynamically via JQuery into the existing report. But before doing this, you have to replace the identifiers, like “#CARD_TITLE#”, with real values.
- #CARD_TITLE#: The Headline of the chart-region
- #CHARTID#: The id of the chart
- #CARD_TEXT#: This is the actual content, the chart itself
Before inserting these cards on demand, keep in mind: The classic report must at least return one row, to display the unordered list. Otherwise, it will show the “No data found”-message instead of the needed list-structure. This one row can be an “empty” element without content, it can be easily deleted afterwards via JQuery when inserting the first region on demand.
This is the result, after adding some charts:
Figure2: The created template in action, including identifiers as explanation
As you may see, both regions have different sizes. Via the #CHART_ID# identifier, I added another class for each region, depending on the requested size (25%. 50%, 75% and 100% width).
The chosen Charting-Library
- The charts are responsive
- It can be easily extended via plugins
- The charts have a nice modern design
When creating such a chart, it expects two arrays as parameters. One for the series and one for the labels. So I created an AJAX callback which returns the series and labels as JSON. The apex.server.process function returns a JSON-object, which makes the handling with the returned data very easy.
Code2: The chart creation
Drag and Drop
This was one of the easiest parts. I was using Dragula.js to enable the drag and drop feature. This library handles the dragging of elements very elegantly, it also displays a transparent image of the dragged region to show where the region will be dropped.
Figure3: Drag and drop in action
Dragula needs the id of the container, which is wrapped around the drag and drop elements. So I added an id to the unordered-list element of the card-report.
Code3: The list of the cards-report extended by an id
With this id, it’s easy to attach an event, which is triggered, when an element is dropped to a new position.
Code4: Applying drag and drop
After applying this, all created chart-regions can easily be dragged and dropped around.
Try it out!
So, that’s it. I had much fun creating this application for the dashboard-challenge in my free time. In case you missed it, you can try out my dashboard at http://dashboard.tillalbert.com. Keep in mind: You can create as much sets as you want, delete them and fiddle about, since all dashboard-sets are stored within the local-storage of your browser.