#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    6
    Rep Power
    0

    Bar Chart with Movable/dragable shapes


    This is Sai,

    In my web application as a user I will put some points on the bar chart(which contains X and Y axis) and then when I click on button all the points should join & form a shape and when I drag and drop that particular shape to other place in that bar chart it should able to read the chart coordinates and I can able to resize that shape.

    Please anyone can open up your suggestions.
  2. #2
  3. Contributing User
    Devshed Expert (3500 - 3999 posts)

    Join Date
    Aug 2010
    Location
    Eastern Florida
    Posts
    3,696
    Rep Power
    347
    Is this on an html page displayed in a browser? Sounds like a javascript application, not java.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    6
    Rep Power
    0

    I agree


    Hi NormR,

    I agree with you but the thing is by using java script while drag and drop it is not accurate and if the no of shapes become huge then it takes so much time to load so can you suggest me better solution.

    This is my main problem:-

    the back ground layer(where all the shapes are placed) I took was a table so while drag and drop the challenge is I had to consider each and every id of <td> so script takes so much time so is there any alternate for this ?????

    Thanks for your valuable time
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2011
    Posts
    140
    Rep Power
    0

    Solutions is...


    Hi

    Please find the solutions
    Code:
    <script type="text/javascript" src="http://highcharts.com/js/testing.js"></script>  <div id="container" style="height: 300px; width: 400px; border: 1px solid black;"></div> var renderer = new Highcharts.Renderer(         $('#container')[0],         400,         300     ),     rect = renderer.rect(100, 100, 100, 100, 5),     clickX, clickY;  var start = function(e) {     $(document).bind({         'mousemove.rect': step,         'mouseup.rect': stop     });          clickX = e.pageX - rect.translateX;     clickY = e.pageY - rect.translateY; }  var step = function(e) { //    console.log(     rect.translate(e.pageX - clickX, e.pageY - clickY) }  var stop = function() {     $(document).unbind('.rect'); }  rect.attr({     'stroke-width': 2,     stroke: 'red',     fill: 'yellow',     zIndex: 3 }) .translate(0,0) .on('mousedown', start) .add();
    Thanks
    Diya

IMN logo majestic logo threadwatch logo seochat tools logo