My contribution to the APEX-Dashboard-Competition – Part3: Creating charts and regions on demand

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

The Dashboard-Designer should have been able to add charts (and their regions) dynamically on demand. However, APEX-regions are not able to meet these requirements, since you can’t create a region on demand. A dynamic region-size is not possible as well. So, the only solution was to generate these regions with JavaScript.
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.
img6
Figure1: The classic report with the cards template
I just duplicated the cards-template and made some changes. The result is the following:
code6
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:
img7
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

Because of this dynamic approach, the APEX-charts can’t be used. So I was searching for a proper JavaScript alternative. I decided myself to use the library Chartist.js. Some of the reasons for my decision:

  • 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.
code10
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.
img8
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.
code9
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.
code8
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.

Ähnliche Beiträge

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Bitte füllen Sie dieses Feld aus
Bitte füllen Sie dieses Feld aus
Bitte gib eine gültige E-Mail-Adresse ein.

Menü