peity icon indicating copy to clipboard operation
peity copied to clipboard

Enhancement request for Line-Peity

Open JuergenWeber opened this issue 9 years ago • 3 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?

JuergenWeber avatar Jul 10 '15 12:07 JuergenWeber

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

benpickles avatar Jul 10 '15 14:07 benpickles

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 avatar Jul 10 '15 18:07 JuergenWeber

@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

DMA57361 avatar Jul 17 '15 08:07 DMA57361