Real time visualization from Remote System (OutSide LAN)

I want to visualize the real time sensor data(Streaming data).For that i used, node.js, html and mysql. Mysql used to store real time sensor data, index.html implements google chart that doPoll app.js file, app.js file provides connection to mysql. I am able to visualize the data from the same system but when i entered url(Public IP) Chrome display "Failed to loadre source : net : : ERR_CONNECTION_REFUSED" and firefox display "Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8686/temperatureData. (Reason: CORS request failed)." I have forwarded port 8686 from Router.But i am able to view data in json format using both browser from remote system.Code for app.js is as below:

/**

* */

var http = require('http');
var fs = require('fs');
var port = 8686;
var i=0;
var j=0;
function randomInt(low, high) {
return Math.floor(Math.random() * (high - low) + low);
}
// 404 response
function send404Response(response){
response.writeHead(404,{"Content-Type": "text/plain" });
response.write("Error 404: Page not found");
response.end();
 }
// handle the user request..
http.createServer(function(req, res) {
console.log('New incoming client request for ' + req.url);
res.writeHeader(200, {
    'Content-Type' : 'application/json'
});
switch (req.url) {

case '/temperatureData':
    var mysql=require('mysql');
    var connection=mysql.createConnection({
        host:'localhost',
        user:'root',
        password:'root',
        database:'feedback',
        port:3306   
    });

    var query=connection.query(
            // make sure with table name 
            'SELECT * FROM DEMO2',function(err,result,fields){
                if(err) throw err;
                //res.write('{"value" :' + result[i].tempvalue + ',"value1":' + result[i].value + '}');
                // make sure with tabel fieldname (ex-tempvalue) ok
                // side by side open mysql 
                res.write('{"value" :' + result[i].tempvalue +  '}');
                //res.write('{"value1":' + result[i].value + '}');

                console.log('Temperature:', result[i].tempvalue );
                i++;
                res.end();
                connection.end();
            });     

        break;  

case '/temperature':    
    res.writeHead(200, 'text/html');    
    var fileStream = fs.createReadStream('index.html');
    fileStream.pipe(res);
    break;  
default:
      send404Response(res);     
}
}).listen(port);
console.log('Server listening on http://localhost:' + port);

Code for Index.html file shown below:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript"
        src="https://www.google.com/jsapi?autoload={
'modules':[{
  'name':'visualization',
  'version':'1',
  'packages':['corechart']
}]
}">
</script>
</head>
<body>
<div id="chart" style="width: 1500px; height: 700px"></div>
<script>
$(document).ready(function () {
var maxDataPoints = 10;
    var chart = new google.visualization.LineChart($('#chart')[0]); 
    var data = google.visualization.arrayToDataTable([ 
        ['Time', 'Temperature'],
        [getTime(), 0]
    ]); 

    var options = { 
        title: 'Temperature',
        hAxis: {title: 'Time', titleTextStyle: {color: '#333'}}, //Added hAxis and vAxis label
        vAxis: {title: 'TempValue',  minValue: 0, titleTextStyle: {color: '#333'}},
        curveType: 'function',
        animation: {
            duration: 1000,
            easing: 'in'
        },
        legend: {position: 'bottom'}
    };
    function addDataPoint(dataPoint) { 
        if (data.getNumberOfRows() > maxDataPoints) {
            data.removeRow(0);
        }
        data.addRow([getTime(), dataPoint.value]);
        chart.draw(data, options); 
    }

    function getTime() {
        var d = new Date();
        return d.toLocaleTimeString();
    }

    function doPoll() { 

        $.getJSON('http://localhost:8686/temperatureData',
                    function (result) {
                    addDataPoint(result); 
                    setTimeout(doPoll, 10000);
                });

         }

        doPoll();
    });
</script>
</body>
</html>

What Should i do so that i can provide remotely visualization ? I want to provide remotely visualization in mobile and desktop/laptop browser.

Solution

Saurabh Just Follow Bellow Steps:

1) On the computer that is running the Microsoft Dynamics NAV Web Server components, on the Start menu, choose Control Panel, choose System and Security, and then choose Windows Firewall. 2) In the navigation pane, choose Advanced settings.
3) In the Windows Firewall with Advanced Settings window, in the navigation pane, choose Inbound Rules, and then in the Actions pane, choose New Rule.
4) On the Rule Type page, choose Port, and then choose the Next button.
5) On the Protocol and Ports page, choose Specific local ports, and then enter the port number. For example, enter 8080 for the default port of the Microsoft Dynamics NAV Web client.Choose the Next button.
6) On the Action page, choose Allow the connection, and then choose the Next button.
7)On the Profile page, choose the profiles, and then choose the Next button.
8) On the Name page, type a name for the rule, and then choose the Finish button.
Once you are done with above steps do port forwarding thorough your router.
Enjoy