jQWidgets Forums

This topic contains 1 reply, has 2 voices, and was last updated by Dimitar 12 years, 8 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)

Author

Apparent SVG Error Using jqxLinearGauge using Firefox Posts

September 13, 2012 at 10:10 pm Apparent SVG Error Using jqxLinearGauge using Firefox #7926

Member

I am using a number of jqxLinearGauge components (latest version 2.4.2) on a test site. It works fine in every current browser except Firefox (15.0.1). I am getting an error:

Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMSVGLocatable.getBBox]

which appears to be SVG related.

The code is

$(‘#HERE’).jqxLinearGauge({
rangeSize: ‘10%’,
background: { showGradient: true, borderRadius: 10, style: { stroke: ‘#cccccc’, fill: ‘#cccccc’ }, visible: true, backgroundType: ’roundedRectangle’ },
width: ‘125px’,
height: ‘250px’,
labels: { position: ‘near’, interval: 10, offset: -30},
max: 100,
min: 0,
colorScheme: ‘scheme01’,
ticksMajor: { size: ‘10%’, interval: 10 },
ticksMinor: { visible: true, size: ‘5%’, interval: 5},
pointer: { pointerType: ‘arrow’, size: ‘20%’, offset: 10 },
ranges: [
{ startValue: 0, endValue: 20, style: { fill: ‘#A1F6B1’, stroke: ‘#FFA200’} },
{ startValue: 20, endValue: 40, style: { fill: ‘#D0F4A5’, stroke: ‘#FFA200’} },
{ startValue: 40, endValue: 60, style: { fill: ‘#F3E0A9’, stroke: ‘#FFA200’} },
{ startValue: 60, endValue: 80, style: { fill: ‘#F2AFAD’, stroke: ‘#FFA200’} },
{ startValue: 80, endValue: 100, style: { fill: ‘#F0B1DC’, stroke: ‘#FFA200’} }
]
});

Any thoughts?

Scott

September 14, 2012 at 7:03 am Apparent SVG Error Using jqxLinearGauge using Firefox #7934

Dimitar

Participant

Hello Scott,

Please make sure that the div element you create the gauge from is visible before the gauge itself is created.

Here is a working example:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>jqxGauge Basic Demo</title>
    <link rel="stylesheet" href="../../jqwidgets2.4.2/jqwidgets/styles/jqx.base.css"
        type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxchart.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxgauge.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxdata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#HERE').jqxLinearGauge({
                rangeSize: '10%',
                background: { showGradient: true, borderRadius: 10, style: { stroke: '#cccccc', fill: '#cccccc' }, visible: true, backgroundType: 'roundedRectangle' },
                width: '125px',
                height: '250px',
                labels: { position: 'near', interval: 10, offset: -10 },
                max: 100,
                min: 0,
                colorScheme: 'scheme01',
                ticksMajor: { size: '10%', interval: 10 },
                ticksMinor: { visible: true, size: '5%', interval: 5 },
                pointer: { pointerType: 'arrow', size: '20%', offset: 10 },
                ranges: [
{ startValue: 0, endValue: 20, style: { fill: '#A1F6B1', stroke: '#FFA200'} },
{ startValue: 20, endValue: 40, style: { fill: '#D0F4A5', stroke: '#FFA200'} },
{ startValue: 40, endValue: 60, style: { fill: '#F3E0A9', stroke: '#FFA200'} },
{ startValue: 60, endValue: 80, style: { fill: '#F2AFAD', stroke: '#FFA200'} },
{ startValue: 80, endValue: 100, style: { fill: '#F0B1DC', stroke: '#FFA200'} }
]
            });
        });
    </script>
</head>
<body class='default'>
    <div id="HERE">
    </div>
    <br />
    <br />
    <div id="getValueButton" style="display: inline;">
        Get value</div>
    <div id="setValueButton" style="display: inline;">
        Set value</div>
</body>
</html>

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

Author

Posts

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.