6

Some background

I work as an independent consultant, and as such I use multiple 3rd party software to keep track of my billable hours, sent invoices, due taxes, bank mutations, etc. However, as with any 3rd party solution, it never does exactly what I want it to do, nor are these tightly integrated with each other, so I decided to build my own solution on SAP's PaaS solution, SAP HANA Cloud Platform

The issue

My application will have a dashboard which should display, among other useful things, a YTD graph (or graphs?) with aggregated monthly costs, earnings, and cumulative profit.

Initially I came up with the following idea:

enter image description here

The 'dual stacked columns' depicts the costs (left) and earnings (right), stacked up by category (invoices, taxes, monthly costs, etc) The blue line shows the cumulative profit after each month.

Now, the real issue I'm facing is that this graph does not seem very 'obvious':

  • I feel the distinction between costs and earnings could be better visualized
  • If I have more categories (approx. 8-12) the stacks become less usable I think
  • Although there is a direct correlation between the costs, earnings and cumulative profit, the line graph does not enhance that correlation, visually

What could be a solution?

It could well be my graph of choice is totally ill-chosen, but I'm not sure what it should be... As I have total freedom of how the final result will look like, anything is possible so please think outside of the box. :)

Ideally, I want the data—monthly aggregated costs/earnings sliced down by category, as well as the (cumulative) profit—to be shown in a single graph. However, if you have good pointers why it should be in separated graphs, then please, by all means show me why and where I'm wrong.

Any help towards a feasible, viable and desirable graph is highly appreciated!

Update
I have added a more accurate graph. Please note this is a mashup between an Excel graph and MS Paint thingamajiggery, so the handdrawn blue line does not represent the true cumulative profit based on the monthly costs/earnings

Improve this question
5
  • I really like the idea of such service showing the cashflow, but I'm quite puzzled by your data as it doesn't jive for me. So what it seem to say: the invoice (income) data is not growing and stays relatively flat throughout two quarters, but cumulative profit (blue line?) is growing, whereas costs are growing really high. This just doesn't compute. And you are showing yearly expenses each quarter, and quarter expenses each month. I suspect I'm reading it all wrong. :-)
    – Zoe K
    Dec 30, 2014 at 12:17
  • Hi Zoe, my point exactly ;-) PS: Don't pay attention to the blue line too much, I have hand-drawn it using MS Paint so it certainly does not represent the actual truth. However, except for July (where it should decline steeply instead of increasing) at least the increase/decline should be somewhat accurate for the monthly costs (left column) and earnings (right column). I will update the graph to be more accurate
    – Qualiture
    Dec 30, 2014 at 12:24
  • 1
    Hey Robin! What would also help — if you could list out all the data you want to show, and highlight those things you want users to compare.
    – Zoe K
    Dec 30, 2014 at 12:29
  • Thanks Zoe, you got a valid point there... Maybe I should just show costs vs. earnings in dual, non-stacked columns, and let the user toggle between stacked/non-stacked state?
    – Qualiture
    Dec 30, 2014 at 12:38
  • 1
    Well, stacked bar charts can be as good as something else. I mean, to choose the right vis, you need to select the data in the focus first. Okay, for example, it's cost vs income: I would do it as two overlaying area charts and show stacked area diagrams for both as a breakdown. For example.
    – Zoe K
    Dec 30, 2014 at 12:45

4 Answers 4

Reset to default
6

(repeating my comment with illustration of my point) The choice of the datavis will depend on the data in the focus. For example, the main objective is to compare the cost vs income. I would do it as two overlaying area charts and show stacked area diagrams for both as a breakdown.

enter image description here

Improve this answer
5

Another take at this challenge…

The breakthrough? Rather than clinging to the resolute belief that all costs must be shown all the time, we realised that our users really wanted a quick glance at the overall earnings situation. Furthermore, we realised that attempting to show a breakdown of costs only comes at the cost of legibility, and for our users the benefits didn’t make this worthwhile. As a compromise, we still make the detailed figures available in the key.

See more about the design & thought process at Visualising data: the case for iteration | Equal Experts

net-cost-chart

Improve this answer
2
  • Welcome to UXSE. Just a hint: you might want to quote the key element of that link in your answer. Links often get broken and so your answer could become useless in the future.
    – RobbyReindeer
    Aug 10, 2018 at 12:12
  • @RobE the “key element” was the chart itself but added anyway a snippet of the conclusion.
    – Hugo Ferreira
    Aug 10, 2018 at 18:36
4

Income is positive earnings and expenses are negative earnings.

If display as such by allowing negative Y-axis can have a simple and clear chart.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Improve this answer
1

You are showing debit and credit next to each other to compare them when all you really want to show is the monthly sum of positive income and negative spendings. Therefore, use a stacked column above the x-axis for income and another one at the same horizontal position and width for costs, just going in the opposite direction. Onto this multipart column, put a marker, e.g. a horizontal line going the whole width of the month, to show the sum, which is of course always inside column dimensions.

Since you also want your chart to include cumulative profit, this could be added as a background area similar in color to the sum indicators. They would usually align with each other in the first month, but any cumulative chart is likely to exceed the monthly maximums after a while, so you might have to put it on a secondary y-axis that is scaled differently.

There is probably also a clever solution to highlight quarterly and yearly values, but I cannot figure it right now. I am also sorry not to provide a proper sketch, but I am on a tablet right now which does not have a proper app for that task installed.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.