How would you build this?

What is the best way to display accounts receivable in a simple, eye-catching way?

Accounts receivable from Quickbooks: There are several accounts in various states of "overdue-ness" - 30 days over, 60 days over, 90 days, etc. I want to be able to show totals for each state, as well as individual accounts in each state.

I could use a table, but I'd like something very eye-catching and visually appealing. I've tried a couple of bar graphs but nothing is appealing to me very much. So I thought I'd throw it out to you all in hopes that someone will have some ideas.

Thank you!

--Trudy Voorhees


  • Avatar
    Janice Janczyn Official comment

    Hi Trudy, your headers may be reacting to HTML on the same dashboard. One test is to try the table klip by itself on a dashboard without any HTML components. If the headers align when no other HTML components are present, this means it is responding to another klip's HTML. To avoid this, define a unique id your HTML, e.g., <div id="uniqueID" style="....">


  • 2
    Peter Matthews

    Hi Trudy,

    Here's what I would probably experiment with first, to see if it meets the needs of my users. I ended up with a table as I think it's a solid way to represent the data and allows for drill-down to the account level by age bucket (not shown in the mockup, but do-able).


    I have account age in the first and second columns, using grey indicators to communicate at-a-glance the volume of months for the bucket. I've sorted with the oldest period on top as I am under the assumption that's what your users would be most interested in monitoring.

    Volume of accounts is next, followed by value of receivables. I then use mini chart format to render relative value as a percentage, with the mini chart range set to 100. This helps users quickly understand the relative value per bucket and gives us a great vehicle to set indicators.

    For the indicators on that column, I was able to use multiple predicates and reactions to set thresholds for each bucket independently. For example, IF Age contains "90+" AND Relative Value > 20%, then change bar to red AND display a warning icon. This way you can have "warning colours" (like orange) and then use red for "take action", reinforced by the red icon (which is also helpful for colourblind users).

    If volume of accounts was more important to your users than value, you could easily adapt the design to emphasis that instead.




  • 0
    T V

    Peter - this is exactly the kind of idea I was looking for. I tried bar charts, pictographs, etc but nothing looked "just right" to me. I really like what you did here. Thanks!


  • 0
    T V

    Peter - 

    I cannot for the life of me recreate the gray box indicators under the age column. How how how did you get them to line up like that? I assumed a pictograph, but I don't see an option to add a pictograph into a table column. Everything else I've tried doesn't render correctly.

    Thanks Peter!



  • 1
    Janice Janczyn

    Happy New Year Trudy!

    One approach would be to build a formula for the column with the grey box indicators that aligns with the Age column, such as 

       ARRAY( 91, 61, 31, 1)

    Then add 4 indicators for that column: 

          If column greater than 0 replace with grey box icon.

          If column greater than 30 place grey box icon on the left.

          If column greater than 60 place grey box icon on the left.

         If column greater than 90 place grey box icon on the left.


    Hope that helps,



  • 0
    T V

    Janice and Peter -


    Thank you both again for these suggestions. I implemented your ideas, but my output is a little wonky and I was hoping you could help me figure out why.


    My headers are not lining up properly with the columns. I have five columns, the first and last of which have no header name. 

    Any ideas?


    Thanks so much!


Please sign in to leave a comment.