GoodData | Developer Network

Numbers & Arrows in Dashboards

Some of you have written in and asked how we achieved our nice GetSatisfaction health dashboards with large numbers visual and progress indicators. Since this is a bit of a hack, I decided this would be a good audience to explain the trick. We do intend to implement this feature properly - in about a month. However, in the mean time, some clever tricks / a bit of wrestling can get you this effect today: Custom Arrows Formatting

Large Font Numeric Report:

  1. Create a report showing a single number (remove all attributes in the How section)
  2. Convert the report to a stack bar chart
  3. In the right column > Advanced Configuration > Y Axis > Primary Axis, set the max of the axis to something several orders of magnitude larger then your data - for example 1000000000 (depending on your number), and untick the Name and Labels checkboxes
  4. In Advanced Configuration > Global Settings, make sure Data Labels is checked, set the font size to 18, turn off Values and Boxed, but keep Totals

    Chart Settings

  1. To show a positive/negative trend, you need to create a second metric showing a difference in time. Here is a MAQL example for a metric called Revenue, showing trend between last month and the month before it (attribute Month):
    SELECT (SELECT Revenue WHERE Month/Year = {Previous} )
     - (SELECT Revenue WHERE Month/Year = {Previous}-1)
    You will need to create this as a Advanced Custom Metric. See more documentation on floating date metrics.
  2. Create a customized formatting for this metric. Here’s where the trick get’s a bit hairy, full documentation is available here. We’re using both conditional formatting (different for negative and positive numbers) and changing the font color. For the final trick, we provide a Unicode symbol for up/down arrow. The final formatting string looks like this:
[green]▲;[red]▼

Custom Arrows Formatting

You can choose your own symbols/arrows, for example by copy/pasting them from Wikipedia (shapes, arrows).

blog comments powered by Disqus