Gauge in tabs?

[ChrisJMember]

I have an application with a tab style layout. In my main application, if I try and put a gauge on a blank tab, the application hangs when loading in Firefox.

I’ve made a simple example – this doesn’t do quite the same thing, but it still doesn’t work. If the gauge is in the second tab, it renders incorrectly – if it’s in the first tab, then it’s fine. I’ve also seen different behaviour if I have two gauges – one in each tab.

Any thoughts would be appreciated.

Chris

var currentTab;

$(document).ready(function () {
var theme = '';
$("#tabs").jqxTabs({ theme: theme, height: '100%', width: 400, selectionTracker: true });
$('#splitter').jqxSplitter({enableCollapseAnimation:true, height: '100%', width: '100%', theme: theme, panels: [{ size: 200 }, { size: 200}] });
$('#splitter2').jqxSplitter({enableCollapseAnimation:true, height: '100%', width: '100%', theme: theme, panels: [{ size: 200 }, { size: 200}] });

var majorTicks = { size: '10%', interval: 10 },
minorTicks = { size: '5%', interval: 2.5, style: { 'stroke-width': 1, stroke: '#aaaaaa'} },
labels = { interval: 20 };
$('#gauge').jqxLinearGauge({
orientation: 'vertical',
labels: labels,
ticksMajor: majorTicks,
ticksMinor: minorTicks,
max: 60,
value: -60,
pointer: { size: '6%' },
colorScheme: 'scheme05',
ranges: [
{ startValue: -10, endValue: 10, style: { fill: '#FFF157', stroke: '#FFF157'} },
{ startValue: 10, endValue: 35, style: { fill: '#FFA200', stroke: '#FFA200'} },
{ startValue: 35, endValue: 60, style: { fill: '#FF4800', stroke: '#FF4800'}}]
});
$('#gauge').jqxLinearGauge('value', 50);

$('#gauge2').jqxLinearGauge({
orientation: 'vertical',
labels: labels,
ticksMajor: majorTicks,
ticksMinor: minorTicks,
max: 60,
value: -60,
pointer: { size: '6%' },
colorScheme: 'scheme05',
ranges: [
{ startValue: -10, endValue: 10, style: { fill: '#FFF157', stroke: '#FFF157'} },
{ startValue: 10, endValue: 35, style: { fill: '#FFA200', stroke: '#FFA200'} },
{ startValue: 35, endValue: 60, style: { fill: '#FF4800', stroke: '#FF4800'}}]
});
$('#gauge2').jqxLinearGauge('value', 50);
});

html, body
{
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
}

Tab 1
Tab 2

Content 1.1

[Peter StoevKeymaster]

Hi Chris,

I confirm the rendering issue.

As a workaround you can use this:

In order to integrate jqxTabs with jqxGauge, do the following – add IFrames inside the Tabs content panels and set the Iframe’s src to point to a page with Gauge(s).

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[ChrisJMember]

As a follow up to this, the gauges work “ok” under IE (there’s still the rendering issues mentioned earlier, but it does work). However, under FF, the code crashes with an error. The following is reported by firebug

Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMSVGLocatable.getBBox]
http://192.168.2.232/dm2/jqwidgets/jqxchart.js
Line 7

Given it’s minimised, it’s impossible to work out quite where the issue lies, but I thought I’d mention it anyway.

Chris

[milenParticipant]

Hi Chris,

You can take a look at jQWidgets ver. 2.3. We’ve implemented a new way of loading widgets within jqxTabs. You can take a look at an online sample here: tabs-integration.htm.

Best Regards,
Milen Ivanov

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts