jQuery UI Widgets › Forums › Gauges and Maps › Gauges › Loading data message

Tagged: , , , , , ,

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

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Loading data message Posts
  • October 15, 2014 at 5:14 pm 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

    October 16, 2014 at 5:16 am 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/

    October 16, 2014 at 1:09 pm Loading data message #61248

    ngchagas
    Participant

    Can you show me that ?

    October 17, 2014 at 5:18 am 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/

    October 17, 2014 at 4:19 pm Loading data message #61314

    ngchagas
    Participant

    Perfect.

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

You must be logged in to reply to this topic.