Clever Geek Handbook

Opacity of tall charts when bubbles are stacked

I have an opacity (transparency) problem with tall charts in my bubble chart and I think I can explain it best with an example

Example: I have a series with 100 bubbles that overlap each other in a chart and the opacity is set to 1% (0.01). My problem here is not that all the bubbles that are on top of each other have 100% opacity (1) or my knowledge of how opacity is not working correctly?

$(function () {
    $('#container').highcharts({
        chart:{
            type:'bubble'
        },        
        series: [{
            name: '1',
            data: [{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},
                   {x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},
                   {x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},
                   {x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},
                   {x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},
                   {x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},
                   {x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},
                   {x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},
                   {x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},
                   {x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1}                 
                  ],
            marker:{
                fillOpacity:0.01,
                lineWidth:0,
                fillColor:'#000000'
            }
        }]
    });
});

fidle: http://jsfiddle.net/kte3omhg/1/

And if there is a problem with this problem, I would appreciate it if someone posts it

Edit : Okey I found out that opacity doesn't work as I thought it would

Total Opacity = First Opacity + (100 - First Opacity) * Second Opacity
              = 0.7 + (1 - 0.7) * 0.7
              = 0.7 + (0.3) * 0.7
              = 0.7 + 0.21
              = 0.91

http://en.wikipedia.org/wiki/Mathematical_descriptions_of_opacity

But I would still like to know if there is a solution to get my result

+3


source to share


1 answer


There are several approaches you can use:



  • Using opacity how it's done

    1.1. Keep fillOpacity

    , but change # of elements

    :

    • Saving fillOpacity: 0.01

      :

    • How many elements do you need to get the resulting 0.99

      opacity?

    function calculateTimes(opacity, overlappingOpacity) {
    var times = 1;
    var currentOpacity = opacity;
    while (currentOpacity < overlappingOpacity) {
        currentOpacity += (1 - currentOpacity) * opacity;
        times++;
    }
    return times;
}
calculateTimes(0.01, 0.99); //Gives you 459 elements

    Script for 459

    elements

    1.2. Hold # of elements

    but changefillOpacity

    • Saving 100 items:

    • How much does it cost fillOpacity

      to get the resulting opacity 0.99

      ?

    function calculateOverlappedOpacity(opacity, times) {
    return times == 1 ? opacity : opacity + (1 - opacity) * calculateOverlappedOpacity(opacity, times - 1);
}

function calculateOpacityFor(resultantOpacity, times) {
    for (var i = 0.0001; i <= 1; i += 0.0001) {
        if (calculateOverlappedOpacity(i, times) >= resultantOpacity) {
            return i;
        }
    }
    return 1;
}
calculateOpacityFor(0.99, 100) //Gives you a fillOpacity of 0.0451

    Script for fillOpacity: 0.0451

  • Using opacity as you thought it worked

    • Use 1 set of elements with the desired fillOpacity

      one based on the number of elements:

    • How much opacity should result (depending on the number of elements)?

    0.01 * chartData.length

    Script to simulate the expected opacity algorithm

0


source






More articles:


All Articles