{% load i18n l10n %}

{% get_current_language as LANGUAGE_CODE %}

<div id="{{view_name}}_div_highstock" style="height: 500px; min-width: 1100px"></div>

<script type="text/javascript" lang="text/javascript">
yAxis = {% autoescape off %} {{yAxis}} {% endautoescape %}

var name1=yAxis[0].name
var name2=yAxis[1].name

param = ''

reloadHighstockParam(param);

function reloadHighstockParam(param)
{
	$("#{{view_name}}_control_panel").block({  
		message:  "<h1><img   src='/static/img/cube_loading.gif' /> Please Wait...</h1>", 
		 css: { border: '5px solid gray', } 
	});

	$(function() {
		$.getJSON('{{URL_HIGHSTOCK}}'+'?'+param, function(data) {
		
			var data1 = [];
			var data2 = [];
			var dataLength = data.length;
				
			for (i = 0; i < dataLength; i++) {
				// console.log(data[i])
				data1.push([
					data[i][0], // the date
					data[i][1], // open
				]);
				
				data2.push([
					data[i][0], // the date
					data[i][2] // the data2
				])
			}

			var groupingUnits = [[
				'week',                         // unit name
				[1]                             // allowed multiples
			], [
				'month',
				[1, 2, 3, 4, 6]
			]];
			
			// create the chart
			window.chart = new Highcharts.Chart({
				chart : {
					renderTo : '{{view_name}}_div_highstock',
	 				alignTicks: false
				},
				rangeSelector: {
			        // selected: 1
			        enabled:false
			    },
				title: {
				        text: 'Graphic Detail'
				    },


			    scrollbar: {
					barBackgroundColor: 'gray',
					barBorderRadius: 7,
					barBorderWidth: 0,
					buttonBackgroundColor: 'gray',
					buttonBorderWidth: 0,
					buttonBorderRadius: 7,
					trackBackgroundColor: 'none',
					trackBorderWidth: 1,
					trackBorderRadius: 8,
					trackBorderColor: '#CCC'
			    },

			    yAxis: [{
			        title: {
			            text: name1
			        },
			        				// plotLines : [{
				// 	value : 1000,
				// 	color : 'green',
				// 	dashStyle : 'shortdash',
				// 	width : 2,
				// 	label : {
				// 		text : 'Last quarter minimum'
				// 	}
				// }, {
				// 	value : 344,
				// 	color : 'red',
				// 	dashStyle : 'shortdash',
				// 	width : 2,
				// 	label : {
				// 		text : 'Last quarter maximum'
				// 	}
				// }],
			        height: 200,
			        lineWidth: 2
			    }, {
			        title: {
			            text: name2
			        },
			        top: 300,
			        height: 100,
			        offset: 0,
			        lineWidth: 2
			    }],
				xAxis : {
					events : {
						afterSetExtremes : afterSetExtremes
					},
					minRange: 3600 * 1000 // one hour
				},
			    series: [{
			        type: 'line',
			        name: name1,
			        data: data1,
			        dataGrouping: {
						units: groupingUnits
			        }
			    }, {
			        type: 'column',
			        name: name2,
			        data: data2,
			        yAxis: 1,
			        dataGrouping: {
						units: groupingUnits
			        }
			    }]
			});
		});
	});
	$("#{{view_name}}_control_panel").unblock();
}
/**
 * Load new data depending on the selected min and max
 */
function afterSetExtremes(e) {

	var url,
	currentExtremes = this.getExtremes(),
	range = e.max - e.min;

	param = param+ '&range='+ range

	param = param + '&from_Epoch='+ currentExtremes.dataMin
	param = param + '&to_Epoch='+ currentExtremes.dataMax
	param = param + '&max_Epoch='+ currentExtremes.max
	param = param + '&min_Epoch='+ currentExtremes.min
	param = param + '&userMax='+ currentExtremes.userMax
	param = param + '&userMin='+ currentExtremes.userMin

	chart.showLoading('Loading data from server...');

	// console.log('AFTER EXTREME')
	//{{view_name}}_reloadHighstock(param);


	reloadHighstock('{{view_name}}','{{URL_HIGHSTOCK}}',param);
}

	function reloadHighstock(view,highcharts_url,param)
	{
		$("#{{view_name}}_control_panel").block({  
		message:  "<h1><img   src='/static/img/cube_loading.gif' /> Please Wait...</h1>", 
		 css: { border: '5px solid gray', } 
		//css: {background:'gray'}
		});

		$.ajax({
			url: '{{URL_HIGHSTOCK}}'+'?'+param,
			method: 'GET',
			dataType: 'json',
			success: function(response) {
				chart.series[1].setData(response);

				chart.setTitle({text: 'Graphic Detail'});
				chart.hideLoading();
			},
			complete:function(){
				$("#{{view_name}}_control_panel").unblock();
			}
		});	
	}

	function {{view_name}}_reloadHighstock(param)
	{

	}


	// function reloadHighchartsParam(view,highcharts_url,param)
	// {
	// 	console.log(highcharts_url);
	// 	console.log(highcharts_url+'?'+param);
	// 	$.ajax({

	// 		url: highcharts_url+'?'+param,
	// 		method: 'GET',
	// 		dataType: 'json',
	// 		success: function(response) {
	// 			title = response['title']
	// 			chart = get_chart();
	// 			chart.setTitle({text: title});

	// 			v_series=response['series']
	// 			updateChart(v_series);
	// 		}
	// 	});
	// }




	// update_chart_asr_igate(response['series']);
	// update_indicators_asr_igates(response['indicators']);
	// processFilters('asr_acd_div_select_filters', response['filters']);
	// $('#asr_acd_container').unblock();

	// $.getJSON('http://www.highcharts.com/samples/data/from-sql.php?start='+ Math.round(e.min) +
	// 		'&end='+ Math.round(e.max) +'&callback=?', function(data) {

	// $.getJSON('http://www.highcharts.com/samples/data/from-sql.php?start='+ Math.round(e.min) +
	// 		'&end='+ Math.round(e.max) +'&callback=?', function(data) {

	// 	console.log('data',data)
		
	// 	chart.series[0].setData(data);
	// 	chart.hideLoading();
	// });




// function dateHigstock(view){


// 	var now = new Date();
// 	// now.setMonth(now.getMonth()+1);
// 	var from_date, to_date;

// 		from_date = new Date(now.getFullYear(),now.getMonth()-1,1,0,0,0);
// 		to_date = new Date(now.getFullYear(),now.getMonth(),(now.getDate()-now.getDate()),23,59,59);

		
// 		val_from_date=from_date.getFullYear()+'-'+('0'+(from_date.getMonth()+1)).slice(-2)+'-'+('0'+from_date.getDate()).slice(-2)+' '+('0'+from_date.getHours()).slice(-2)+':'+('0'+from_date.getMinutes()).slice(-2)+':'+('0'+from_date.getSeconds()).slice(-2)
// 		val_to_date=to_date.getFullYear()+'-'+('0'+(to_date.getMonth()+1)).slice(-2)+'-'+('0'+to_date.getDate()).slice(-2)+' '+('0'+to_date.getHours()).slice(-2)+':'+('0'+to_date.getMinutes()).slice(-2)+':'+('0'+to_date.getSeconds()).slice(-2)
		
// 		console.log($('input[id^="'+view+'_datepicker_from_"]').val())
// 		if( $('input[id^="'+view+'_datepicker_from_"]').val().length>12)
// 		{
// 			val_from_date=from_date.getFullYear()+'-'+('0'+(from_date.getMonth()+1)).slice(-2)+'-'+('0'+from_date.getDate()).slice(-2)+' '+('0'+from_date.getHours()).slice(-2)+':'+('0'+from_date.getMinutes()).slice(-2)
// 			val_to_date=to_date.getFullYear()+'-'+('0'+(to_date.getMonth()+1)).slice(-2)+'-'+('0'+to_date.getDate()).slice(-2)+' '+('0'+to_date.getHours()).slice(-2)+':'+('0'+to_date.getMinutes()).slice(-2)
// 			//console.log('PRUEBA',val_from_date)
// 		}
// 		else
// 		{
// 			val_from_date=from_date.getFullYear()+'-'+('0'+(from_date.getMonth()+1)).slice(-2)+'-'+('0'+from_date.getDate()).slice(-2)
// 			val_to_date=to_date.getFullYear()+'-'+('0'+(to_date.getMonth()+1)).slice(-2)+'-'+('0'+to_date.getDate()).slice(-2)
// 		}   

// 		$('input[id^="'+view+'_datepicker_from_"]').val(val_from_date);
// 		$('input[id^="'+view+'_datepicker_to_"]').val(val_to_date);
// }
















</script>