jQuery UI Widgets Forums Gauges and Maps Gauges Performance issue with larger scales

This topic contains 4 replies, has 2 voices, and was last updated by  robrichard 8 years, 10 months ago.

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

  • robrichard
    Member

    Hi guys – I want to use the gauge to show progress towards a dollar figure, but implementing the gauge with large numbers yields a massive performance hit. For example, setting the min at 0, max at 10000, and interval even at 1000, takes several seconds to render. And anything higher (ie, 50,000 with 10,000 intervals, or 1,000,000 with 100,000 intervals, etc.) basically blows up the page.


    Peter Stoev
    Keymaster

    Hi robrichard,

    You need to set the interval of the labels, ticksMinor and ticksMajor. Below is an example with jqxGauge and the maximum value is set to 50000.

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxchart.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgauge.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    $('#gauge').jqxGauge({
    cap: { size: '5%', style: { fill: '#2e79bb', stroke: '#2e79bb'} },
    border: { style: { fill: '#8e9495', stroke: '#7b8384', 'stroke-width': 1 } },
    ticksMinor: { interval: 1000, size: '5%' },
    ticksMajor: { interval: 2500, size: '10%' },
    labels: { position: 'outside', interval: 2500 },
    pointer: { style: { fill: '#2e79bb' }, width: 5 },
    max: 50000,
    animationDuration: 1500,
    width: 500,
    height: 500
    });
    $('#gauge').jqxGauge('value', 120);
    });
    </script>
    </head>
    <body class='default'>
    <div id='gauge' style="position: absolute; top: 0px; left: 0px;">
    </div>
    </body>
    </html>

    Below is a modified version of the above sample with maximum value set to 1000000.

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxchart.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgauge.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    $('#gauge').jqxGauge({
    cap: { size: '5%', style: { fill: '#2e79bb', stroke: '#2e79bb'} },
    border: { style: { fill: '#8e9495', stroke: '#7b8384', 'stroke-width': 1 } },
    ticksMinor: { interval: 10000, size: '5%' },
    ticksMajor: { interval: 25000, size: '10%' },
    labels: { position: 'outside', interval: 25000 },
    pointer: { style: { fill: '#2e79bb' }, width: 5 },
    max: 1000000,
    animationDuration: 15000,
    width: 500,
    height: 500
    });
    $('#gauge').jqxGauge('value', 120);
    });
    </script>
    </head>
    <body class='default'>
    <div id='gauge' style="position: absolute; top: 0px; left: 0px;">
    </div>
    </body>
    </html>

    There’s no performance hit on my side with VML and SVG rendering of the Gauge.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com


    robrichard
    Member

    Ah yes, I should have been more specific. I was attempting to implement the linear gauge horizontally. I tried the above sample and it indeed worked fine… However, the linear gauge appears to have the issues.


    Peter Stoev
    Keymaster

    Hi robrichard,

    Here’s a sample with the Linear Gauge. The max is set to 1000000. The value is set to 400000.

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxchart.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgauge.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    $('#gauge').jqxLinearGauge({
    orientation: 'vertical',
    width: 400,
    height: 600,
    ticksMajor: { size: '10%', interval: 10000 },
    ticksMinor: { size: '5%', interval: 25000, style: { 'stroke-width': 1, stroke: '#aaaaaa'} },
    max: 1000000,
    pointer: { size: '5%' },
    colorScheme: 'scheme05',
    labels: { interval: 20000},
    animationDuration: 1500
    });
    $('#gauge').jqxLinearGauge('value', 400000);
    });
    </script>
    </head>
    <body class='default'>
    <div id="gauge"></div>
    </body>
    </html>

    According to me, the sample works fine and there’s no issue with the performance.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    Performance issue with larger scales #5695

    robrichard
    Member

    Confirmed working. Not sure what I was doing 😉

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

You must be logged in to reply to this topic.