benpickles / peity

Progressive <svg> pie, donut, bar and line charts

Home Page:http://benpickles.github.io/peity

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Enhancement request for Line-Peity

JuergenWeber opened this issue · comments

I played a bit around with the line-charts to be able to show incoming- and outgoing traffic in one chart. This could easily be done by visualizing the 2nd data list in a 2nd line-chart and multiplying it by -1.
image
Unfortunately, the scalings of the line-charts are independent from each other - as you can see in the little picture. Does anyone see a way to get around this issue?

There's a min/max option http://benpickles.github.io/peity/#line-charts, would this fix things?

I fiddled around with min/max for some time but the independent change of scaling in the 2 graphs didn't disappear. Next week I will take sometime to dive deeper into this. Thanks for your reply anyway and thanks for this small but cool tool!!

@JuergenWeber in case it helps, I've recently done something very similar to this by setting the height of the two charts to be different (then messing with the alignment and position as needed). The relative height of each series is it's maximum value divided by the the sum of the maximum values of both series.

In case it's not clear what I mean, here's a contrived example:

line_a_data = [1,2,3,4,5,6]
line_b_data = [1,2,2,3,3,4]
max_a = 6
max_b = 4
height_a = max_a/(max_a+maxb) = 8/(6+4) = 60%
height_b = max_b/(max_a+maxb) = 4/(6+4) = 40%

Here's an example of the result as I'm using it:

Alternatively, I think you can use the min and max options for a similar result, with the difference that the graphs will be the same height so some vertical space is unused by the one with the smaller values (which is why this didn't fit my needs - I wanted all available vertical space filling). Do this by finding the maximum single value across both data sets (6 in the example above, and I'm calling this biggestvalue in the below) then do the following:

  • positive graph:
    • max = biggestvalue
    • min = 0
  • negative graph
    • max = 0
    • min= -biggestvalue