jQuery UI Widgets Forums Gauges and Maps Gauges Apparent SVG Error Using jqxLinearGauge using Firefox

Tagged: ,

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

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

  • Scott M
    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


    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/

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

You must be logged in to reply to this topic.