jQWidgets Forums

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

Tagged: , ,

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

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Performance issue with larger scales Posts
  • July 4, 2012 at 3:47 pm Performance issue with larger scales #5653

    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.

    July 4, 2012 at 6:51 pm Performance issue with larger scales #5673

    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

    July 5, 2012 at 2:22 am Performance issue with larger scales #5678

    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.

    July 5, 2012 at 9:46 am Performance issue with larger scales #5684

    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

    July 5, 2012 at 12:15 pm Performance issue with larger scales #5695

    robrichard
    Member

    Confirmed working. Not sure what I was doing 😉

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

You must be logged in to reply to this topic.