views:

40

answers:

2

I am trying to show a graph image which is horizontally long. The problem is, by the time user reaches the right end of the image, the y axis scale is not visible to him. I need to split the image somehow so that I can make the y-axis part of the image fixed and rest scrollable.

I have 3 questions:
1. What is the best way to split the image and make one part fixed and other scrollable?
2. Is this splitting possible with table background image?
3. If I want to use table background Image, I have following problem -
The graphs are generated dynamically on the server side. So I cannot really give url of the graph to the background tag of the table.

1) Generate the graph with ajax call like:

$(function () { var img = new Image();   
    setTimeout(   
      $(img).load(function () {   
        $('#loader').append(this);   
        $(this).fadeIn();   
      }).error(function () {}).attr('src', '/tgraph/'), 3000);  
});

Html:

<div id='loader'></div>

2) Step 1 code displays the image under div tag. I want to write some jQuery code, which can load the image as table background. e.g.

3) Then using css overflow show the y-axis fixed position and rest of the image scrollable.

A: 

3 divs:

  1. First div has the graph as the background image. Set it's width to just wide enough to show the Y axis.
  2. Second div also has the graph as the background image (if you use the same URL, the browser should only request the file once). Set the left location of the background image to a negative number - just wide enough to hide the y-axis. Set the overflow property to "scroll"
  3. Third div is placed inside the second div, with it's width set to however wide you need to show the entire graph. This will cause the second div to display scroll bars (as the background image alone won't)
Pickle
A: 

I ended up using table elements in combination with jQuery clone() The table has 2 td elements and first one clones the second one. And second td, actually loads the image.

Sujit