hledger icon indicating copy to clipboard operation
hledger copied to clipboard

hledger-web pie chart

Open NorfairKing opened this issue 8 years ago • 18 comments

This is a request:

It would be nice to see a breakdown per category in the form of a pie chart in the web UI.

NorfairKing avatar Apr 14 '17 05:04 NorfairKing

I've tried something here: https://github.com/NorfairKing/hledger/tree/pie-chart, but I'm rather terrible at JS and not familiar where the appropriate data is in hledger.

NorfairKing avatar Apr 14 '17 07:04 NorfairKing

Nice! Can you show a demo or screenshot ?

simonmichael avatar Apr 14 '17 13:04 simonmichael

@simonmichael, sure but there's nothing to see really. I haven't hooked up the data and I'm terrible at making things look good. I used the jquery plotting library that you're already using.

pie

NorfairKing avatar Apr 14 '17 14:04 NorfairKing

I had an idea for 2 pie charts:

  • One that shows where the money is divided among the subcategories
  • One that shows where the different commodities are divided among this category.

I think the second idea isn't always feasible because you can't always compare comoddities.

NorfairKing avatar Apr 14 '17 14:04 NorfairKing

Also: I'm really happy with what you've made here. It integrates nicely with my own systems :D 👍

NorfairKing avatar Apr 14 '17 14:04 NorfairKing

Thanks, that's good to know! Do feel free to blog/tweet about your setup (and if the latter, don't forget #hledger #plaintextaccounting tags so it gets seen).

I installed your branch on the demo1.hledger.org test instance to see how it works and follow the WIP, eg: http://demo1.hledger.org/register?q=inacct%3AExpenses . You'll get more efficient feedback if you run your own public instance, otherwise I'll update this one when I notice changes.

simonmichael avatar Apr 14 '17 15:04 simonmichael

As with hledger-chart, there's an unresolved question about pie charts which you're probably already aware of: how will you handle the case when some amounts have different sign ?

simonmichael avatar Apr 14 '17 15:04 simonmichael

I installed your branch on the demo1.hledger.org test instance to see how it works and follow the WIP, eg: http://demo1.hledger.org/register?q=inacct%3AExpenses . You'll get more efficient feedback if you run your own public instance, otherwise I'll update this one when I notice changes.

Cool! Any chance you could help me with this feature?

NorfairKing avatar Apr 14 '17 15:04 NorfairKing

How will you handle the case when some amounts have different sign ?

No idea! I guess you could just not draw a pie chart in that case?

NorfairKing avatar Apr 14 '17 15:04 NorfairKing

Sure, what do you need ? Feel free to join #hledger also.

simonmichael avatar Apr 14 '17 16:04 simonmichael

Thanks for the help on #hledger! The current version shows a pie chart with actual data, but it doesn't make sense as soon as negative and positive amounts coincide in an account. It also duplicates labels when the mixedamounts have multiple commodities. https://github.com/NorfairKing/hledger/commit/38f260933e8ab2e569cd7de7d87b40043424b9c5

NorfairKing avatar Apr 14 '17 19:04 NorfairKing

I have been using highcharts this week in implementing an hledger web front-end, it's free for non-commercial use and has a lot of types of charts, so that may be something to consider.

screen shot 2017-07-23 at 09 50 30

A thought I had about how to handle accounts with positive and negative values in: could the pie chart be used to show the relative magnitude of all the amounts? That's still possibly an interesting thing to know, and a legend (or hovering over pie chart segments, or something) can give you the actual values.

barrucadu avatar Jul 23 '17 08:07 barrucadu

I avoided highcharts to keep open the possibility of making something sellable some day. But it's clearly the best available..

My usual imagined solution for signed pie charts is to have two of them, one for the positives (eg assets & liabilities with a contra-balance) and one for the negatives.

simonmichael avatar Jul 23 '17 10:07 simonmichael

I like the idea of having two charts, as @simonmichael said.

We could still use google charts instead of highcharts.

NorfairKing avatar Jul 23 '17 13:07 NorfairKing

http://www.chartjs.org/samples/latest/charts/pie.html is open source and can do something similar if you press 'add dataset'.

NorfairKing avatar Dec 02 '17 12:12 NorfairKing

Alternatively, there's this: https://bl.ocks.org/mbostock/4063423

NorfairKing avatar Dec 02 '17 12:12 NorfairKing

I've tried something here: https://github.com/NorfairKing/hledger/tree/pie-chart, but I'm rather terrible at JS and not familiar where the appropriate data is in hledger.

I think this already seems quite nice ;). Makes sense to keep using flot since it's also already used for the line charts.

My usual imagined solution for signed pie charts is to have two of them, one for the positives (eg assets & liabilities with a contra-balance) and one for the negatives.

Makes sense to me.

raboof avatar Jan 19 '21 08:01 raboof

I took the liberty of rebasing the previous work by @NorfairKing as #1467. Needs some more work but a nice start I think.

raboof avatar Jan 19 '21 19:01 raboof