jQWidgets Forums

This topic contains 4 replies, has 2 voices, and was last updated by admin 3 years, 2 months ago.

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

Author

data adapter for dynamic data Posts

February 2, 2022 at 8:46 pm data adapter for dynamic data #121461

Participant

I have the following approach:
I want to get data from a database. The database will be filled with a new set of data every 12…15sec.
I will poll the database every 5 sec.
The first time I get a data set of 30 (time stamp / value). All 30 are to be used (not in the code yet) for a line chart.
A set of 10 are used filling a grid table.
The new data set every 12…15 sec. should cause the following: the last row will be deleted, the new data will be set as first row. That means it will be a “rolling” table. The same should be with the chart in the future.

Now my code:


<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>automatic data update
    </title>
    <link rel="stylesheet" href="../jqwidgets/jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/jqwidgets/styles/jqx.classic.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/jqwidgets/styles/jqx.metrodark.css" type="text/css" />
    <script type="text/javascript" src="../jqwidgets/scripts/jquery-1.11.1.min.js"></script>
	<script type="text/javascript" src="../jquery-validation/src/localization/messages_de.js"></script>
	<script type="text/javascript" src="../jquery-validation/src/localization/methods_de.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqwidgets/jqxdata.js"></script> 
    <script type="text/javascript" src="../jqwidgets/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqwidgets/jqxgrid.selection.js"></script> 
    <script type="text/javascript" src="../jqwidgets/jqwidgets/jqxdraw.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqwidgets/jqxchart.core.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqwidgets/jqxchart.rangeselector.js"></script>
    <script type="text/javascript" src="../jqwidgets/scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {

            var theme = 'metrodark';
            
			var getLocalization = function () {
				var localizationobj = {};
				localizationobj.percentSymbol = " %";
				localizationobj.currencySymbol = " €";
				localizationobj.currencySymbolPosition = "after";
				localizationobj.decimalSeparator = ",";
				localizationobj.thousandsSeparator = ".";
				patterns: {d: "dd.MM.yyyy"}
				return localizationobj;
			}

			dataGrid = new Array();

            // prepare the server data
            var sourceServer =
            {
                datatype: "json",
                datafields: [
					 { name: 'Time', type: 'date'},
					 { name: 'Datum', type: 'date'},
					 { name: 'Betrag', type: 'float' },
                ],
				data: {
					dataStat: '',
				},
                id: 'Datum',
                url: 'sourceServer.php',
                root: 'Rows',
				sortcolumn: 'Datum',
				sortdirection: 'desc',
            };

            var dataAdapterServer = new $.jqx.dataAdapter(sourceServer, {
				beforeLoadComplete: function (records) {
					dataAdapterServer.records.splice(10);
					dataGrid = dataAdapterServer.records;
				return records;
				}
            });

            var sourceGrid =
	        {
                localdata: dataGrid,
                datatype: "json",
                datafields: [
					 { name: 'Time', type: 'date'},
					 { name: 'Datum', type: 'date'},
					 { name: 'Betrag', type: 'float'},
                ],
            };
		
            var dataAdapterGrid = new $.jqx.dataAdapter(sourceGrid);		

            // auto update timer
            var ttimer = setInterval(function () {
				sourceServer.data.dataStat = "live";
				//dataAdapterServer.record.unshift()
				dataAdapterServer.dataBind();
				dataAdapterGrid.dataBind();
				//console.table(dataGrid);
            }, 5000);

            // initialize jqxGrid
            $("#jqxGrid").jqxGrid(
            {
                width: 300,
                height: 350,
                source: dataAdapterGrid,
                theme: theme,
                columns: [
                      { text: 'Datum', datafield: 'Datum', editable: false, menu: true, width: 90, align: 'center', cellsAlign: 'center', cellsformat: 'dd.MM.yyyy' },
                      { text: 'Zeit', datafield: 'Time', editable: false, menu: true, width: 90, align: 'center', cellsAlign: 'center', cellsformat: 'HH:mm:ss' },
                      { text: 'Betrag', datafield: 'Betrag', width: 90, align: 'center', cellsAlign: 'center', cellsFormat: 'c2' },
                ]
            });

        });
    </script>
</head>
<body class='default'>
    <div id="jqxGrid">
    </div>
    <div id='jqxChart' style="width:850px; height:500px">
	</div>
</body>
</html>

The array “dataGrid” is filled with new data, but the data adapter “dataAdapterGrid” does not work.

Now the questions:
1. What is wrong with my concept using one data adapter “dataAdapterServer” for the server connection and a second for the grid table?
2. Is there maybe a more simple approach?

Jens

February 3, 2022 at 11:08 am data adapter for dynamic data #121464

admin

Keymaster

Hi Jens,

You can do the following: $(“#jqxGrid”).jqxGrid({source: dataAdapterGrid}); within the setInterval function.
I would also like to suggest you to take a look at https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/refreshdata.htm?light. It shows how to update the data by using the updatebounddata grid method.

Hope that helps.

Best regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com/

February 6, 2022 at 3:10 pm data adapter for dynamic data #121470

elbnacht

Participant

Hi Peter,
Thanks, it’s basically not really what I want. This works already with the databank-method very good. One point is, that I load a set of 50 data, sufficient for a nice chart, but I want to display only 10 within the grid. 50 shows always the vertical slider, what I don’t want.
I could use two different adapter getting the data out of the database. That’s not nice, because not synchronous.
And it would be more efficient to get only one dataset and filling two arrays with that, one grid and one chart dataset. With that I could use the localdata examples.
But I could not make this work until now.

February 9, 2022 at 2:56 pm data adapter for dynamic data #121492

elbnacht

Participant

Peter, any idea?

February 14, 2022 at 8:35 am data adapter for dynamic data #121514

admin

Keymaster

Hi Jens,

Basically to update the Grid data, you will need to set its “source” property to a dataAdapter instance. The dataAdapter may use local data or remote data, but that is what the Grid expects. You can use one dataAdapter or basic Javascript native fetch call to make your server calls and once it results with success, prepare a new dataAdapter instance with local data for the Grid component.

Best regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com/

Author

Posts

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

You must be logged in to reply to this topic.