jQuery UI Widgets Forums Gauges and Maps Gauges Loading data message

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

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • Loading data message #61200

    ngchagas
    Participant

    Hi,
    it’s possible to show a message (“Loading …”) while data are loading from json source, in jqxgauge as with jqxgrid ?
    Regards

    Loading data message #61211

    Dimitar
    Participant

    Hello ngchagas,

    There is no such functionality in jqxGauge’s API. You may, however, show the animated loading image used in jqxGrid (it is included in the jQWidgets download package) over the gauge when the data starts loading and when it has finished loading (in the data adapter’s loadComplete callback), hide the image.

    Best Regards,
    Dimitar

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

    Loading data message #61248

    ngchagas
    Participant

    Can you show me that ?

    Loading data message #61273

    Dimitar
    Participant

    Hello ngchagas,

    Here is our suggestion:

    <!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.11.1.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdraw.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgauge.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
    
                var data = [{ startValue: 0, endValue: 55 }, { startValue: 55, endValue: 110 }, { startValue: 110, endValue: 165 }, { startValue: 165, endValue: 220}];
    
                var source =
                {
                    datatype: "json",
                    datafields: [
                        { name: 'startValue', type: 'int' },
                        { name: 'endValue', type: 'int' }
                    ],
                    localdata: data,
                    async: false
                };
    
                var dataAdapter = new $.jqx.dataAdapter(source, { loadComplete: function () {
                    $("#loading").hide();
                }
                });
                dataAdapter.dataBind();
    
                var records = dataAdapter.records;
    
                $('#gaugeContainer').jqxGauge({
                    ranges: [{ startValue: records[0].startValue, endValue: records[0].endValue, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 },
                             { startValue: records[1].startValue, endValue: records[1].endValue, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 },
                             { startValue: records[2].startValue, endValue: records[2].endValue, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 },
                             { startValue: records[3].startValue, endValue: records[3].endValue, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13}],
                    ticksMinor: { interval: 10, size: '5%' },
                    ticksMajor: { interval: 20, size: '9%' },
                    value: 0,
                    width: '400px',
                    height: '400px',
                    colorScheme: 'scheme05',
                    animationDuration: 1200
                });
            });
        </script>
    </head>
    <body>
        <div id="gaugeContainer">
        </div>
        <div id="loading" style="position: absolute; top: 0; left: 0;">
            <img src="../../jqwidgets/styles/images/loader.gif" /><span>Loading</span>
        </div>
    </body>
    </html>

    In our example you would not be able to see the loading message, though, because the data loads too quickly.

    Best Regards,
    Dimitar

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

    Loading data message #61314

    ngchagas
    Participant

    Perfect.

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

You must be logged in to reply to this topic.