jQWidgets Forums

Forum Replies Created

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • in reply to: Chart auto update Chart auto update #51219

    mh512
    Participant

    ok, how can I control how many pieces of data the chart gets from the JSON data source?

    in reply to: Chart auto update Chart auto update #51101

    mh512
    Participant

    Is it possible to allow the user to select how many samples are displayed on the chart hence displaying more or less data?

    i.e. 1 month, 1 day, 1 year etc

    in reply to: Guage update issue. Guage update issue. #51096

    mh512
    Participant

    It’s either NaN or a large number that is incorrect.

    in reply to: Chart auto update Chart auto update #51093

    mh512
    Participant

    Problem solved.

    I had neglected dataAdapter.dataBind();

    in reply to: Chart auto update Chart auto update #51091

    mh512
    Participant

    What do I need to write above $(‘#jqxchart’).jqxChart(‘update’); in order to collect the new JSON data from data.php?

    in reply to: Chart auto update Chart auto update #51089

    mh512
    Participant

    Hi my code as follows still does not update the chart every 3 seconds even when new data is placed into the database. I have to manually refresh the page to see the updated chart.

    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title id='Description'>DigiPlant Environment Monitor</title>
        <link rel="stylesheet" href="/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="/jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="/jqxcore.js"></script>
        <script type="text/javascript" src="/jqxdata.js"></script>
        <script type="text/javascript" src="/jqxchart.js"></script>
    <script type="text/javascript">
    	$(document).ready(function () {
    		var source =
    		{
    			 datatype: "json",
    			 datafields: [
    				 { name: 'created', type: 'date'},
    				 { name: 'temp'},
    				 { name: 'hum'},
    				 { name: 'light'}
    			],
    			url: 'data.php'
    		};		
    		
    	   var dataAdapter = new $.jqx.dataAdapter(source,
    		{
    			autoBind: true,
    			async: false,
    			downloadComplete: function () { },
    			loadComplete: function () { },
    			loadError: function () { }
    		});
    		
    	 // prepare jqxChart settings
    		var settings = {
    			title: "DigiPlant Environment Monitor",
    			description: false,
    			showLegend: true,
    			padding: { left: 15, top: 10, right: 15, bottom: 5 },
    			titlePadding: { left: 25, top: 0, right: 0, bottom: 10 },
    			source: dataAdapter,
    			categoryAxis:
    				{
    					text: 'Category Axis',
    					textRotationAngle: 0,
    					dataField: 'created',
    					 formatFunction: function (value) {
                                return $.jqx.dataFormat.formatdate(value, 'dd/MM HH:mm');
                            },
                            toolTipFormatFunction: function (value) {
                                return $.jqx.dataFormat.formatdate(value, 'dd/MM HH:mm');
                            },
    					
    					showTickMarks: true,
    					tickMarksInterval: 20,
    					tickMarksColor: '#888888',
    					unitInterval: 20,
    					showGridLines: true,
    					gridLinesInterval: 10,
    					gridLinesColor: '#888888',
    					axisSize: 'auto'                    
    				},
    			colorScheme: 'scheme05',
    			seriesGroups:
    				[
    					{
    						type: 'line',
    						valueAxis:
    						{
    							displayValueAxis: true,
    							displayGridLines: false,
    							description: '\u00B0C / \u0025',
    							axisSize: 'auto',
    							tickMarksColor: '#888888',
    							unitInterval: 10,
    							minValue: 0,
    							maxValue: 50,                          
    						},
    						series: [
    								{ dataField: 'temp', displayText: 'Temperature', 
    								  toolTipFormatSettings: { sufix: '\u00B0C', decimalPlaces: 1, decimalSeparator: '.', negativeWithBrackets: true }
    },
    								{ dataField: 'hum', displayText: 'Humidity', 
    								  toolTipFormatSettings: { sufix: '\u0025', decimalPlaces: 1, decimalSeparator: '.', negativeWithBrackets: true }
    }
    						  ]
    					},
    					 {
                                type: 'spline',
                                valueAxis:
                                {
                                    unitInterval: 200,
    								minValue: 0,
    								maxValue: 1000,
                                    description: 'Arbitary units'
                                },
                                series: [
                                        { dataField: 'light', displayText: 'Light level',
    									toolTipFormatSettings: { sufix: ' AU' }
    									},
                                    ]
                            }
    				]
    		};
    		// setup the chart
    		$('#jqxChart').jqxChart(settings);
    	
    	 // auto update timer
                var ttimer = setInterval(function () {
                    $('#jqxchart').jqxChart('update');
                }, 3000);
    	
    			
    	});
    </script>
    </head>
    <body class='default'>
        <div align="center">
    	<div id='jqxChart' style="width:780px; height:300px">
    	</div>
        </div>
    </body>
    </html>
    

    Thanks.

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