chart loading with a lot of points - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: chart, image, jqxChart, load, loading, plot, points

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

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

Author

chart loading with a lot of points Posts

May 12, 2014 at 1:32 pm chart loading with a lot of points #54350

Participant

I’m trying to load a lot of points through JSONP source and I succeed but it takes half a minute I would like to put a logo that will show an indication that its loading do I have any way to do it on the chart plot till the series loaded?

May 13, 2014 at 5:54 am chart loading with a lot of points #54375

Dimitar

Participant

Hello lev_povolotsky,

I guess you mean it takes half a minute to load the data, not plot the chart itself. In that case, you may display a loading icon when you start loading the data ($(document).ready(), on the click of a button, etc.) and hide it when the data load has been completed (in the data adapter loadComplete callback function). You can use the grid loading animated image, found in jqwidgets\styles\images\loader.gif (in the jQWidgets download package).

Best Regards,
Dimitar

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

May 13, 2014 at 6:04 am chart loading with a lot of points #54377

lev_povolotsky

Participant

Can you show me an example code?

May 13, 2014 at 6:23 am chart loading with a lot of points #54380

Dimitar

Participant

Hi lev_povolotsky,

Here is an example (based on the demo Line Series) which shows the suggested approach. If you run it, however, you most probably will not see the loading image because the sample data loads too quickly. In your case, the image should be visible.

<!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.10.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">
        $(document).ready(function () {
            var chartOffset = $('#jqxChart').offset();
            $("#loadingImage").css({ "display": "block", "left": (chartOffset.left + $("#jqxChart").width() / 2 - 16), "top": (chartOffset.top + $("#jqxChart").height() / 2 - 16) });
            // prepare the data
            var source =
            {
                datatype: "csv",
                datafields: [
                    { name: 'Date' },
                    { name: 'S&P 500' },
                    { name: 'NASDAQ' }
                ],
                url: '../sampledata/nasdaq_vs_sp500.txt'
            };

            var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadComplete: function () {
                $("#loadingImage").css("display", "none");
            }, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); }
            });
            var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

            // prepare jqxChart settings
            var settings = {
                title: "U.S. Stock Market Index Performance (2011)",
                description: "NASDAQ Composite compared to S&P 500",
                enableAnimations: true,
                showLegend: true,
                padding: { left: 10, top: 5, right: 10, bottom: 5 },
                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                source: dataAdapter,
                categoryAxis:
                    {
                        dataField: 'Date',
                        formatFunction: function (value) {
                            return months[value.getMonth()];
                        },
                        toolTipFormatFunction: function (value) {
                            return value.getDate() + '-' + months[value.getMonth()];
                        },
                        type: 'date',
                        baseUnit: 'month',
                        showTickMarks: true,
                        tickMarksInterval: 1,
                        tickMarksColor: '#888888',
                        unitInterval: 1,
                        showGridLines: true,
                        gridLinesInterval: 3,
                        gridLinesColor: '#888888',
                        valuesOnTicks: false
                    },
                colorScheme: 'scheme04',
                seriesGroups:
                    [
                        {
                            type: 'line',
                            valueAxis:
                            {
                                unitInterval: 500,
                                minValue: 0,
                                maxValue: 3000,
                                displayValueAxis: true,
                                description: 'Daily Closing Price',
                                axisSize: 'auto',
                                tickMarksColor: '#888888'
                            },
                            series: [
                                    { dataField: 'S&P 500', displayText: 'S&P 500' },
                                    { dataField: 'NASDAQ', displayText: 'NASDAQ' }
                                ]
                        }
                    ]
            };

            // setup the chart
            $('#jqxChart').jqxChart(settings);
        });
    </script>
</head>
<body class='default'>
    <img id="loadingImage" src="../../jqwidgets/styles/images/loader.gif" style="position: absolute;" />
    <div id='jqxChart' style="width: 850px; height: 400px">
    </div>
</body>
</html>

Best Regards,
Dimitar

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

May 13, 2014 at 8:43 am chart loading with a lot of points #54387

lev_povolotsky

Participant

Thanks its work great

Author

Posts

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

You must be logged in to reply to this topic.