Anderson-Juhasc/btcchina.html

## btcchina.html
<!DOCTYPE HTML>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Live BTCChina Chart</title>
</head>
<body>
    <h1>BTCChina</h1>
    <div>
    	<strong>Ãšltimo preÃ§o:</strong> <span id="lastValue" style="color: #f00; font-size: 36px;">000.00</span>
    </div>

    <div id="container" style="width:100%; height:400px;"></div>

    <script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.socket.io/socket.io-1.3.5.js"></script>
    <script src="http://code.highcharts.com/highcharts.js"></script>
    <script type="text/javascript">
        var chart;

        function requestData() {
            $.ajax({
                url: 'live-server-data.php',
                success: function(point) {
                    var series = chart.series[0],
                        shift = series.data.length > 20; // shift if the series is
                                                         // longer than 20

                    // add the point
                    chart.series[0].addPoint(point, true, shift);

                    // call it again after three second
                    setTimeout(requestData, 5000);
                },
                cache: false
            });
        }

        $(document).ready(function() {
            var socket = io('https://websocket.btcchina.com/', {
                'reconnect': true
            });

            var lastValueSaved = 0;

            socket.on('connect', function() {
                console.log("connected!");

                socket.emit('subscribe', 'marketdata_cnybtc');

                socket.on('ticker', function(data) {
                    var lastValue = parseFloat(data.ticker.last).toFixed(2);

                    $('#lastValue').html(lastValue);

                    if (lastValueSaved === 0 || lastValue !== lastValueSaved) {
                        $.ajax({
                            type: "POST",
                            url: "update.php",
                            data: data,
                            success: function(data) {
                                lastValueSaved = lastValue;
                            }
                        });
                    }
                });

                socket.on('disconnect', function() {
                    console.log("disconnect!");
                });
            });

            chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'container',
                    defaultSeriesType: 'spline',
                    events: {
                        load: requestData
                    }
                },
                title: {
                    text: 'Live BTCChina Chart'
                },
                xAxis: {
                    type: 'datetime',
                    tickPixelInterval: 150,
                    maxZoom: 20 * 1000
                },
                yAxis: {
                    minPadding: 0.2,
                    maxPadding: 0.2,
                    title: {
                        text: 'CNY',
                        margin: 80
                    }
                },
                series: [{
                    name: 'CNY BTC Price',
                    data: []
                }]
            });
        });
    </script>
</body>
</html>
	<!DOCTYPE HTML>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Live BTCChina Chart</title>
	</head>
	<body>
	<h1>BTCChina</h1>
	<div>
	<strong>Ãšltimo preÃ§o:</strong> <span id="lastValue" style="color: #f00; font-size: 36px;">000.00</span>
	</div>

	<div id="container" style="width:100%; height:400px;"></div>

	<script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
	<script type="text/javascript" src="https://cdn.socket.io/socket.io-1.3.5.js"></script>
	<script src="http://code.highcharts.com/highcharts.js"></script>
	<script type="text/javascript">
	var chart;

	function requestData() {
	$.ajax({
	url: 'live-server-data.php',
	success: function(point) {
	var series = chart.series[0],
	shift = series.data.length > 20; // shift if the series is
	// longer than 20

	// add the point
	chart.series[0].addPoint(point, true, shift);

	// call it again after three second
	setTimeout(requestData, 5000);
	},
	cache: false
	});
	}

	$(document).ready(function() {
	var socket = io('https://websocket.btcchina.com/', {
	'reconnect': true
	});

	var lastValueSaved = 0;

	socket.on('connect', function() {
	console.log("connected!");

	socket.emit('subscribe', 'marketdata_cnybtc');

	socket.on('ticker', function(data) {
	var lastValue = parseFloat(data.ticker.last).toFixed(2);

	$('#lastValue').html(lastValue);

	if (lastValueSaved === 0 \|\| lastValue !== lastValueSaved) {
	$.ajax({
	type: "POST",
	url: "update.php",
	data: data,
	success: function(data) {
	lastValueSaved = lastValue;
	}
	});
	}
	});

	socket.on('disconnect', function() {
	console.log("disconnect!");
	});
	});

	chart = new Highcharts.Chart({
	chart: {
	renderTo: 'container',
	defaultSeriesType: 'spline',
	events: {
	load: requestData
	}
	},
	title: {
	text: 'Live BTCChina Chart'
	},
	xAxis: {
	type: 'datetime',
	tickPixelInterval: 150,
	maxZoom: 20 * 1000
	},
	yAxis: {
	minPadding: 0.2,
	maxPadding: 0.2,
	title: {
	text: 'CNY',
	margin: 80
	}
	},
	series: [{
	name: 'CNY BTC Price',
	data: []
	}]
	});
	});
	</script>
	</body>
	</html>