Question

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.

Answer 1

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.