hledger-web pie chart

[NorfairKing]

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.

--- Want to back this issue? **[Post a bounty on it!](https://www.bountysource.com/issues/44132972-hledger-web-pie-chart?utm_campaign=plugin&utm_content=tracker%2F536505&utm_medium=issues&utm_source=github)** We accept bounties via [Bountysource](https://www.bountysource.com/?utm_campaign=plugin&utm_content=tracker%2F536505&utm_medium=issues&utm_source=github).

[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.

[simonmichael]

Nice! Can you show a demo or screenshot ?

[NorfairKing]

@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.

[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]

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

[simonmichael]

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]

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 ?

[NorfairKing]

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]

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?

[simonmichael]

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

[NorfairKing]

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

[barrucadu]

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.

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.

[simonmichael]

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.

[NorfairKing]

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

We could still use google charts instead of highcharts.

[NorfairKing]

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

[NorfairKing]

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

[raboof]

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]

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