@This is a sample for showing the chart on Real Time.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title>Vert.x and Highchart</title> | |
| <meta http-equiv='cache-control' content='no-cache'> | |
| <meta http-equiv='expires' content='0'> | |
| <meta http-equiv='pragma' content='no-cache'> | |
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> | |
| <script src="http://code.highcharts.com/stock/highstock.js"></script> | |
| <script src="http://code.highcharts.com/stock/modules/exporting.js"></script> | |
| <script src="js/sockjs-0.2.1.min.js"></script> | |
| <script src="js/vertxbus.js"></script> | |
| <script src="js/json2.js"></script> | |
| </head> | |
| <body> | |
| <script language="javascript" type="text/javascript"> | |
| var xx = 0; | |
| var yy = 0; | |
| function myFunction(x, y) { | |
| xx = x; | |
| yy = y; | |
| var div = document.getElementById('demo'); | |
| div.innerHTML = div.innerHTML + ', y=' + y; | |
| } | |
| var eb = new vertx.EventBus("http://localhost:8091/eventbus"); | |
| function browserHandler(msg, replyTo) { | |
| var obj = JSON.parse(msg.text); | |
| myFunction(obj.x, obj.y); | |
| } | |
| eb.onopen = function() { | |
| eb.registerHandler('app.conduit', browserHandler); | |
| }; | |
| // eb.publish('app.conduit', {text: 'Publish message: testaaaaaa'}); | |
| // This is from highchart. | |
| $(function() { | |
| Highcharts.setOptions({ | |
| global : { | |
| useUTC : false | |
| } | |
| }); | |
| // Create the chart | |
| $('#container').highcharts('StockChart', { | |
| chart : { | |
| events : { | |
| load : function() | |
| // set up the updating of the chart each second | |
| var series = this.series[0]; | |
| setInterval(function() { | |
| var x = (new Date()).getTime(), // current time | |
| y = yy; | |
| //y = Math.round(Math.random() * 100); | |
| series.addPoint([x, y], true, true); | |
| }, 1000); | |
| } | |
| } | |
| }, | |
| rangeSelector: { | |
| buttons: [{ | |
| count: 1, | |
| type: 'minute', | |
| text: '1M' | |
| }, { | |
| count: 5, | |
| type: 'minute', | |
| text: '5M' | |
| }, { | |
| type: 'all', | |
| text: 'All' | |
| }], | |
| inputEnabled: false, | |
| selected: 0 | |
| }, | |
| title : { | |
| text : 'Live random data' | |
| }, | |
| exporting: { | |
| enabled: false | |
| }, | |
| series : [{ | |
| name : 'Random data', | |
| data : (function() { | |
| // generate an array of random data | |
| var data = [], time = (new Date()).getTime(), i; | |
| for( i = -999; i <= 0; i++) { | |
| data.push([ | |
| time + i * 1000, | |
| Math.round(Math.random() * 100) | |
| ]); | |
| } | |
| return data; | |
| })() | |
| }] | |
| }); | |
| }); | |
| </script> | |
| <div id="container" style="height: 500px; min-width: 500px"></div> | |
| <p id="demo">Pushed Data from Server >>> </p> | |
| </body> | |
| </html> |
Reference
No comments:
Post a Comment