jQuery UI Widgets Forums Plugins Data Adapter data adapter for dynamic data

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

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • data adapter for dynamic data #121461

    elbnacht
    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

    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/

    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.

    data adapter for dynamic data #121492

    elbnacht
    Participant

    Peter, any idea?

    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/

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

You must be logged in to reply to this topic.