UI Tabs and Flot issue
UI Tabs and Flot issue
Hello,
I am developing an application using UI Tabs and Flot. I am seeing
hitting an issue that I am not able to resolve. The pages in question
are currently static HTML mockups.
The main page uses UI tabs to load content pages via ajax. Within the
content pages, there is a DIV with a "chart" id and a DIV with a
"legend" id. The "chart" and "legend" should be populated with a Flot
chart/legend when the tab is loaded. Adding to the complexity of the
page, the tabs and a footer are fixed while the content pages (loaded
by the tabs) scroll between the tabs and "footer" when there is
overflow (CSS controlled).
When the page initially loads, the first tab is selected by default
and the flot chart is loaded correctly. When I click another tab, the
page content is loaded but the graph is not displayed in the "chart"
element. Using FireBug, I can see there is an error thrown from the
Flot plugin dealing with the height and/or width of the target being
0. If I place a breakpoint in my JS code calling the flot plugin, and
do nothing more than let the code execute once the breakpoint is hit,
the graph displays correctly. Allowing the code to run on its own hits
the error.
I have placed console.log statements in the code to check the height/
width before and after the call to Flot. The height/width are
populated (as specified in the CSS) on the initial page load and the
initial call to Flot. As I click other tabs, the height/width are 0.
While in the breakpoint, the height/width are populated again.
I have other pages that do not use tabs or the scrolling content but
do use Flot and those work correctly, as the initial load of this
problematic page does.
Any ideas? Both of these plugins are awesome. I just need to get them
working together.
Thanks,
Adam
========= Tab Page Example =========
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style>
html, body, form {
height: 100%;
overflow: hidden;
}
.ui-tabs-panel {
overflow-y: auto;
overflow-x: hidden;
height: 73%;
border-width: 1px 0;
border-style: solid;
border-color: #000;
position: relative;
}
#footer {
bottom: 0;
margin-bottom: 5px;
padding-bottom: 5px;
}
#chart {
height: 200px;
width: 90%;
float: left;
margin-top: 5px;
margin-left: 5px;
}
</style>
<script type="text/javascript" language="JavaScript" src="../js/jquery/
jquery.js"></script>
<script src="../js/jquery/plugin/ui.tabs.js" type="text/javascript"></
script>
<script src="../js/jquery/plugin/ui.tabs.ext.js" type="text/
javascript"></script>
<script type="text/javascript" src="../js/jquery/plugin/
jquery.flot.js"></script>
<script type="text/javascript" src="../js/jquery/plugin/excanvas.js"></
script>
<script type="text/javascript">
var array1 = null; //null for example only
var array2 = null; //null for example only
var array3 = null; //null for example only
var data = [array1, array2, array3];
$(document).ready(function(){
$("#tabs").tabs({remote: true, selected: 0});
$("#tabs").bind('tabsload', function(event, ui) {
loadChart($("#chart"), data, $("#legend"));
}
);
});
function loadChart(chart, chartData, chartLegend) {
if (chart != null) {
var options = {
legend: {container: chartLegend, noColumns: 1},
xaxis: { mode: "time", timeFormat: "%b", tickSize: [1, "month"]},
selection: { mode: "xy" },
shadowSize: 0
};
var plot = $.plot(chart,chartData,options);
}
}
</script>
</head>
<body>
<form>
<div id="tabs">
<ul>
<li><a href="XXX.htm"><span>Tab 0</span></a></li>
<li><a href="XXX.htm"><span>Tab 1</span></a></li>
<li><a href="XXX.htm"><span>Tab 2</span></a></li>
<li><a href="XXX.htm"><span>Tab 3</span></a></li>
<li><a href="XXX.htm"><span>Tab 4</span></a></li>
</ul>
</div>
<!-- Tab content goes here -->
<div id="footer">
Some elements that are fixed at the bottom of the page
</ul>
</div>
</form>
</body>
</html>
============Content Page Example (XXX.htm) =============
<div id="chart"></div><div id="legend">
<div>
Other content that appears below the chart and is scolled within the
tabs/footer along with the chart
</div>