{% 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">

$(function() {
	
	// param = 'prueba=' + 'hola'
	param = ''

	// See source code from the JSONP handler at https://github.com/highslide-software/highcharts.com/blob/master/samples/data/from-sql.php
	$.getJSON('{{URL_HIGHSTOCK}}'+'?'+param, function(data) {
		
		// Add a null value for the end date 
		data = [].concat(data, [[Date.UTC(2011, 9, 14, 19, 59), null, null, null, null]]);
				
		// create the chart
		window.chart = new Highcharts.StockChart({
			chart : {
				renderTo : '{{view_name}}_div_highstock',
				type: 'candlestick',
				zoomType: 'x'
			},

			navigator : {
				adaptToUpdatedData: false,
				series : {
					data : data
				}
			},
			
			title: {
				text: 'TAG HIGHSTOCK FIRST VERSION'
			},
			
			subtitle: {
				text: 'first version'
			},
			
			rangeSelector : {
				buttons: [{
					type: 'hour',
					count: 1,
					text: '1h'
				}, {
					type: 'day',
					count: 1,
					text: '1d'
				}, {
					type: 'month',
					count: 1,
					text: '1m'
				}, {
					type: 'year',
					count: 1,
					text: '1y'
				}, {
					type: 'all',
					text: 'All'
				}],
				inputEnabled: false, // it supports only days
				selected : 1 // day
			},
			
			xAxis : {
				events : {
					afterSetExtremes : afterSetExtremes
				},
				minRange: 3600 * 1000 // one hour
			},

			series : [{
				data : data,
				type : 'line',
				dataGrouping: {
					enabled: false
				}
			}]
		});
	});
});


/**
 * Load new data depending on the selected min and max
 */
function afterSetExtremes(e) {

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


	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...');

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

	function reloadHighstockParam(view,highcharts_url,param)
	{
		$.ajax({
			url: '{{URL_HIGHSTOCK}}'+param,
			method: 'GET',
			dataType: 'json',
			success: function(response) {
				// console.log(response)

				chart.series[0].setData(response);
				chart.hideLoading();
			}
		});	
	}

	// function reloadHighchartsParam(view,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();
	// });
</script>