0

I want to make the bubble position is random instead of people need to set the y and x position.

Here the link of example bubble chart

http://codepen.io/anon/pen/LowKD

here the js script

 $(document).ready(function() {
  $('.graph-bar').each(function() {
     var dataWidth = $(this).data('value');
     $(this).css("width", dataWidth + "%");
  });
});

// Positioning of .bubbleChart
$(document).ready(function() {
  $('.chart-bubble').each(function() {
    // Bubble Size
    var bubbleSize = $(this).data('value');    
    $(this).css("width", function() {
      return (bubbleSize * 10) + "px"
    });
    $(this).css("height", function() {
      return (bubbleSize * 10) + "px"
    });

    // Bubble Position
    var posX = $(this).data('x');
    var posY = $(this).data('y');    
    $(this).css("left", function() {
      return posX - (bubbleSize * 0.5) + "%"
    });
    $(this).css("bottom", function() {
      return posY - (bubbleSize * 0.5) + "%"
    });
  }); 
});

I want this bubble chart to random positioning

<div data-value="7" data-label="500" data-x="50" data-y="50" class="chart-bubble"></div>

so I don't have to set the data x and y because I want to make it random when user fill the value

voromax
  • 3,369
  • 2
  • 30
  • 53
user3675706
  • 1
  • 1
  • Are you sure you want to do this randomly? A chart with bubbles at random positions is meaningless. What are you **really** asking about? – Artjom B. Nov 04 '14 at 09:46

1 Answers1

0

I would use the Math.random(). It gives you a random number between 0 and 1, you just have to multiply it by your range (in your case I guess it would be the width and height of your window).

Look at random() documentation.

Jofre
  • 3,718
  • 1
  • 23
  • 31