jQuery UI Widgets Forums Chart jqxChart Reloading Data

This topic contains 1 reply, has 2 voices, and was last updated by  Todor 9 months, 1 week ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • jqxChart Reloading Data #105820

    dpitchfo
    Participant

    Hi,

    I am not sure what I am doing wrong. I have created a jqxChart with range selection. (BTW – Awesome library). On my page is a dropdown that changes the index to pull new data in from a php script. The graph works great, but when I change the value in the drop down, I get an endless loop of reloading the data.

    I am referencing https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxchart/jquery-chart-data-source.htm

    Can anyone tell me why this code does not work?

    Code responsible to reload the data

    
    $('#droprid').change(function(e) {    // Dropdown Created by php scrip not shown
                        e.preventDefault();
                        var id = this.value;
    
                        if (id != rid) {   // value really changes...
    
                            rid = id;
                            source.data.rid = rid;
                            dataAdapter = new $.jqx.dataAdapter(source);
                            $("#jqxChart").jqxChart({source: dataAdapter});
    
                        }
                    });
    

    Modified Source Code without the PHP

    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" media="screen" href="../css/water.css">
        <link rel="shortcut icon" href="../favicon.ico?" type="image/x-icon"/>
        <link rel="icon" href="../favicon.ico?" type="image/x-icon"/>
        <link rel="icon" type="image/png" sizes="32x32" href="../images/favicon-32x32.png">
        <link rel="icon" type="image/png" sizes="96x96" href="../images/favicon-96x96.png">
        <link rel="icon" type="image/png" sizes="16x16" href="../images/favicon-16x16.png">
        <link rel="stylesheet" href="../includes/jqwidgets/styles/jqx.base.css" type="text/css" />
        <link rel="stylesheet" href="../includes/jqwidgets/styles/jqx.classic.css" type="text/css" />
        <script type="text/javascript" src="../includes/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="../includes/jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../includes/jqwidgets/jqxdata.js"></script>
        <script type="text/javascript" src="../includes/jqwidgets/jqxdraw.js"></script>
        <script type="text/javascript" src="../includes/jqwidgets/jqxchart.core.js"></script>
        <script type="text/javascript" src="../includes/jqwidgets/jqxslider.js"></script>
        <script type="text/javascript" src="../includes/jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="../includes/jqwidgets/jqxlistbox.js"></script>
        <script type="text/javascript" src="../includes/jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="../includes/jqwidgets/jqxdropdownlist.js"></script>
        <script type="text/javascript" src="../includes/jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="../includes/jqwidgets/jqxslider.js"></script>
        <script type="text/javascript" src="../includes/jqwidgets/jqxchart.rangeselector.js"></script>
    
        <script type="text/javascript">
    
                $(document).ready(function () {
    
                    var source =
                        {
                            datatype: "json",
                            datafields: [
                                { name: 'time', type: 'date'},
                                { name: 'alpha1'},
                                { name: 'alpha2'},
                                { name: 'alpha3'},
                                { name: 'avg'}
    
                            ],
                            cache: false,
                            url: '_graph3.php',
    
                            data : {
                                rid: rid,
                                cam: cam
                            }
    
                        };
    
                    var dataAdapter = new $.jqx.dataAdapter(source,
                        {
                            autoBind: true,
                            async: true,
                            downloadComplete: function () { },
                            loadComplete: function () { },
                            loadError: function () { }
                        });
    
                    // prepare jqxChart settings
                    var settings = {
                        title: "Graph",
                        description: "Graph",
                        enableAnimations: true,
                        enableCrosshairs: true,
                        showLegend: true,
                        padding: { left: 5, top: 5, right: 30, bottom: 5 },
                        titlePadding: { left: 30, top: 5, right: 0, bottom: 10 },
                        source: dataAdapter,
                        xAxis:
                            {
                                dataField: 'time',
                                type: 'date',
                                baseUnit: 'second',
                                unitInterval: 'auto',
                                formatFunction: function (value) {
                                    return $.jqx.dataFormat.formatdate(value, "HH:mm:ss", 'en-us');
                                },
                                gridLines: { step: 2 },
                                valuesOnTicks: true,
                                labels: { angle: -45, offset: { x: -17, y: 0} },
                                rangeSelector: {
                                    // Uncomment the line below to render the selector in a separate container
                                    renderTo: $('#selectorContainer'),
                                    size: 80,
                                    padding: { left: 5, right: 5,top: 0, bottom: 0 },
    
                                    backgroundColor: 'white',
                                    dataField: 'avg',
                                    baseUnit: 'minute',
                                    gridLines: { visible: false },
                                    serieType: 'area'
    
                                }
                            },
                        valueAxis:
                            {
                                unitInterval: 10,
                                minValue: -100,
                                maxValue: 0,
                                labels: {horizontalAlignment: 'right'},
                                title: { text: 'RSSI<br>' }
                            },
                        colorScheme: 'scheme01',
                        seriesGroups:
                            [
                                {
                                    type: 'line',
                                    series: [
                                        { dataField: 'alpha1', displayText: 'Alpha1' },
                                        { dataField: 'alpha2', displayText: 'Alpha2' },
                                        { dataField: 'alpha3', displayText: 'Alpha3' }
    
                                    ]
                                }
                            ]
                    };
    
                    // Number format for Showing Time Slider
                    Number.prototype.pad = function(size) {
                        var s = String(this);
                        while (s.length < (size || 2)) {s = "0" + s;}
                        return s;
                    }
    
                    $('#jqxChart').jqxChart(settings).
                    on('rangeSelectionChanging', function (event) {
                        var args = event.args;
                        
                        // Display time range when changed
                        var d1 = args.minValue.getHours() +":" + (args.minValue.getMinutes()).pad() +":"+ (args.minValue.getSeconds()).pad();
                        var d2 = args.maxValue.getHours() +":" + (args.maxValue.getMinutes()).pad() +":"+ (args.maxValue.getSeconds()).pad();
    
                        args.instance.description = "Time Range:  " + d1 + "  to  " + d2;
                    });
    
                    $('#droprid').change(function(e) {    // Dropdown Created by php scrip not shown
                        e.preventDefault();
                        var id = this.value;
    
                        if (id != rid) {
                            
                            rid = id;
                            source.data.rid = id;
                            dataAdapter = new $.jqx.dataAdapter(source);
                            $("#jqxChart").jqxChart({source: dataAdapter});
    
                        }
                    });
    
                });
    
        </script>
    
    </head>
    <body>
    
    <div id="container">
        <div id="content">
            <h3> View </h3>
            <table width="500px">
                <tr>
                    <td>Selection:</td>
                    <td><select id="dropid"><option value="1">Value 1</option><option value="2">Value 2</option></select></td>
                </tr>
            </table>
            <div id='jqxChart' style="border: 0; width: 800px; height: 500px;"></div>
            <div id='selectorContainer' style="width:800px; height:100px;"></div>
    
        </div>
    
    </div>
    </div>
    </body>
    </html>
    
    jqxChart Reloading Data #105844

    Todor
    Participant

    Hello dpitchfo,

    I would suggest to refresh the jqxChart after data change – $('#jqxChart').jqxChart('refresh');. Also a demo for refreshing the chart.

    Let us know if you need further assistance.

    Best Regards,
    Todor

    jQWidgets Team
    https://www.jqwidgets.com

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

You must be logged in to reply to this topic.