var chart;
$(document).ready(function() {
	function getData(nombre){
		var data = [];
		$.ajax({                         //llamada asíncrona a archivo php
		    dataType: "json",
		    data: "reactor="+nombre,
		    async: false,                  //para esperar éxito de función anónima
		    
		    url: "http://localhost/sistemas/db.php",
		    success: function(json){
				time = (new Date()).getTime();
				data.push({x: time, y: json});
        	    }
  		});
		return data;
	}	
	chart = new Highcharts.Chart({
		chart: {
		renderTo: 'container',
		defaultSeriesType: 'spline',
		marginRight: 10,
		events: {
		  load: function() {
			// set up the updating of the chart each second
			var series = this.series[0];
			setInterval(function() {
				datos = getData("reactor1");
				var x = (new Date()).getTime(); // current time
				series.addPoint([x , datos[0].y], true, true);
			}, 5000);
		  }
		}
		},
		title: {
			text: 'Monitoreo Reactor'
		},
		xAxis: {
			type: 'datetime',
			tickPixelInterval: 150
		},
		yAxis: {
			title: {
				text: 'Temperature'
			},
			max: 200,
			min: 0,
			plotLines: [{
				value: 0,
				width: 1,
				color: '#808080'
			}]
		},
		tooltip: {
			formatter: function() {
	                return '<b>'+ this.series.name +'</b><br/>'+
					Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'<br/>'+ 
					Highcharts.numberFormat(this.y, 2);
			}
		},
		legend: {
			enabled: false
		},
		exporting: {
			enabled: false
		},
		series: [{
			name: 'Random data',  //datos iniciales de gráfico
			data: (function() {
				// generate an array of random data
				var data = [],
				time = (new Date()).getTime();
				dato = getData("reactor1");
				var i;
				for (i = -19; i <= 0; i++) {
					data.push({
					x: time + i * 5000,
					y: dato[0].y//Math.random()
					});
				}
				return data;
			})()

		}]
	});
		
});
