Loading javascript function in a hidden <div>

[ILikeBread]

Here is my problem

 

I am using Flot (http://code.google.com/p/flot) its a graphing tool.

 

I insert my flot graphing code into my main page which i do not want to show unless the user clicks a show graph button.

 

The code is inserted into my hidden div like so:

<div class="widgetDIV" id="mydiv1">
   <div id="placeholder" style="width:600px;height:300px;"></div>
      <? 
          include("Flot.php"); 
      ?>
</div>

 

Style Sheet:

.widgetDIV 
{ 
FONT-SIZE: 12px; OVERFLOW: hidden; COLOR: Black; FONT-FAMILY: 'verdana', Arial; BACKGROUND-COLOR: white; [b]display:none [/b]
}

 

When the user clicks the "show graphs" link it changes the property of "mydiv1" to display='Block'.

This is where the problems start.

Everything in the <Div> now appears except the chart. If i load the chart on its own it works fine and if i load the chart into a <div> that has its display properties starting off as 'Block' its also fine. The problem only occurs when i change the display property after the page is loaded.

 

Can anyone help me figure out why this javascript based chart will not preload into my <div>.

 

I have posted on the Flot forums but there are not many users and really its not a chart problem but more my understanding of how the page loads things that a hidden the begin with.

 

Thanks

 

[haku]

Asking a javascript question without showing the javascript isn't likely to get you an answer.

[ILikeBread]

The only reason i didn't include it is that there is heaps of it.

 

But here goes.

 

This is where you insert your data from your database to get the graph to display.

WinGraph and Placegraph look like this if you print to screen [[number,number],[number,number],[number,number]]ect ect

 

It calls a jquery.js and a jquery.flot.js both of which have many many many pages of code.

    <script language="javascript" type="text/javascript" src="flot/jquery.js"></script>
    <script language="javascript" type="text/javascript" src="flot/jquery.flot.js"></script>
    <script id="source" language="javascript" type="text/javascript">
$(function () {
var High = <?php echo $High; ?>;
var Low = <?php echo $Low; ?>;
var WinGraph = <?php echo $FlotWin; ?>;
var PlaceGraph = <?php echo $FlotPlace; ?>;

    var plot = $.plot($("#placeholder"),
           [ { data: WinGraph, label: "Win Profit($)"}, { data: PlaceGraph, label: "Place Profit($)" } ],
           { lines: { show: true },
             points: { show: true },
             selection: { mode: "xy" },
             grid: { hoverable: true, clickable: true },
		 xaxis: { mode: 'time' },
             yaxis: { min: Low, max: High, tickFormatter: function (v, axis) {return "$" + v.toFixed(axis.tickDecimals) }}

             });

    function showTooltip(x, y, contents) {
        $('<div id="tooltip">' + contents + '</div>').css( {
            position: 'absolute',
            display: 'none',
            top: y + 5,
            left: x + 5,
            border: '1px solid #fdd',
            padding: '2px',
            'background-color': '#fee',
            opacity: 0.80
        }).appendTo("body").fadeIn(200);
    }

    var previousPoint = null;
    $("#placeholder").bind("plothover", function (event, pos, item) {
        $("#x").text(pos.x.toFixed(2));
        $("#y").text(pos.y.toFixed(2));

            if (item) {
                if (previousPoint != item.datapoint) {
                    previousPoint = item.datapoint;
                    
                    $("#tooltip").remove();
                    var x = item.datapoint[0],
                        y = item.datapoint[1].toFixed(2);	

				var myDate = new Date(x);

                    var GraphDate = myDate.toDateString();


                    showTooltip(item.pageX, item.pageY, "<b>Profit:</b> $" + y + " <b>Date:</b> " + GraphDate);
                }
            }
            else {
                $("#tooltip").remove();
                previousPoint = null;            
            }
        
    });

    $("#placeholder").bind("plotclick", function (event, pos, item) {
        if (item) {
            $("#clickdata").text("You clicked point " + item.dataIndex + " in " + item.series.label + ".");
            plot.highlight(item.series, item.datapoint);
        }
    });
});
</script>

 

I don't believe that the Javascript is the problem as it works fine when loaded on its own outside of this hidden div. I believe the problem is that the hidden div for some reason doesn't load the things inside of it on page load. I need to find a way to either preload it then hide it or get it to load in the background.

 

I will attach the .js files mentioned earlier.

Noe: you will need to change the extension to .js as i cannot upload them with that extension type.

I you require any more info please let me know as i am completely stumped

 

[attachment deleted by admin]