2

I am using the Bubbles plugin with the Flot charting library for JQuery. The data I have is dynamic and can be quite varied within the X, Y, and Z values. The main issue I am having is the size of the bubbles. If the X and Y values are somewhat close to each other but the Z value is much larger the bubble simply takes over the chart. Setting the axis min and max for the X and Y axes helps a bit but not in every case. I have tried to look for other options and settings but did not find anything useful. Is there any type of way to control the size of the bubble?

For instance Flex used to automatically create bubble sizes relative to the screen and axes where Flot seems to always set the bubble size to the same scale as the X and Y values. I have included just a sample of data. I would like to continue to use Flot as the plugin because I have many other chart types in my application and would like to use the same code base. However if there is another plugin that would be better I am open to ideas. Thanks!

https://jsfiddle.net/llamajuana/zd4hd7rb/

var d1 = [[30,339,139856], [30, 445,239823], [30,1506,127331]];

    var options = { 
        series: {
            //color: '#CCC',
            color: function(x, y, value) {
                var red = 55 + value * 10;
                return 'rgba('+red+',50,50,1)';
            },
            bubbles: {
                active: true,
                show: true,
                fill: true,
                linewidth: 0,
                bubblelabel: { 
                    show: true 
                },
                highlight: {
                    show: true,
                    opacity: 0.3
                }
            }
        },
        grid:{
            hoverable: true,
            clickable: true
        },

        tooltip: {
            show: true,
            content: "x: %x | y: %y | value: %ct"
        }
    };
    var p4 = $.plot( $("#plot"), [d1], options );
user1035760
  • 75
  • 1
  • 6
  • Interesting question. How often would you say the `z` value significantly larger than the `x` / `y` values? – camelCase Oct 15 '15 at 18:48
  • It can be at any time so I don't really have a ratio of time. It also doesn't necessarily have to be the Z value. I have had instances where the X and Z values range from 0 to 10 but then the Y might range from -10 to 13000. – user1035760 Oct 15 '15 at 19:32
  • Oh, I see. I was thinking along these lines: since the `z` value is shown in the tooltip only (right?) then perhaps you might be able to provide `1/1000` of the actual value to the `[d1]` array, then when defining the content for the tooltip, multiply the `%ct` by `1,000`. However, seems this train of thought won't work :/ – camelCase Oct 15 '15 at 19:37
  • I read through the docs on both plugins and didn't seem to locate anything that would apply to what you're needing. – camelCase Oct 15 '15 at 19:39
  • I did think about trying to scale down just the Z. But yes, it does happen with the other values as well. Perhaps I will have to spend time trying to scale the Z but also trying to manually adjust the axes limits and see if I can find something that is still visually appealing. Thanks for your help, I didn't see anything in the docs either. Nor did I find a lot of other examples, I guess people don't really like bubble charts. – user1035760 Oct 15 '15 at 19:47
  • No problem, hope you resolve it somehow. Don't forget to update the question if you find a solution, I'd be curious to see it. Thanks! – camelCase Oct 15 '15 at 19:53

1 Answers1

0

You could try logarithmic scaling.

For the x- and y-axis you can do this using the transform property in the axis options or changing the data before drawing the plot.

For the bubbles you have to do this by hand, either by changing the data before drawing or by replacing the drawbubble function of the bubbles plugin (see the User draw example here).

See this fiddle for the full example. Changes from your fiddle:

1) You could change this directly in the bubbles plugin, if you wanted.

// index of bubbles plugin is dynamic, you better search for it
var defaultBubbles = $.plot.plugins[1].options.series.bubbles.drawbubble;
var logBubbles = function(ctx, serie, x, y, v, r, c, overlay){
    defaultBubbles(ctx, serie, x, y, v, Math.log(r), c, overlay);
}

2) In the series options:

xaxis: {
    transform: function (v) {
        return Math.log(v);
    },
    inverseTransform: function (v) {
        return Math.exp(v);
    }
},
yaxis: {
    transform: function (v) {
        return Math.log(v);
    },
    inverseTransform: function (v) {
        return Math.exp(v);
    }
},

3) In the radiusAtPoint() function in the bubbles plugin:

    // added Math.log function here too
    return parseInt(series.yaxis.scale * Math.log(series.data[radius_index][2]) / 2, 0);
Raidri
  • 17,258
  • 9
  • 62
  • 65
  • Thank you! This worked out pretty well. It does seem to screw with the tooltips a bit so I just have to try to figure out how to update the hit area for the hover. – user1035760 Oct 16 '15 at 13:02