https://www.globalclimatemonitor.org/js/chart.js

1function desactivateAllTools(){
2	if($("#ctrl_info_ctrl").hasClass('enable')){
3		$("#ctrl_info_ctrl").trigger('click');
4	}
5	if($("#ctrl_zbox_ctrl").hasClass('enable')){
6		$("#ctrl_zbox_ctrl").trigger('click');
7	}
8	if($("#ctrl_download").hasClass('active')){
9		$("#ctrl_download").trigger('click');
10	}
11	if($("#ctrl_chart").hasClass('enable')){
12		$("#ctrl_chart").trigger('click');
13	}
14	if($("#ctrl_profile").hasClass('enable')){
15		$("#ctrl_profile").trigger('click');
16	}
17}
18
19var chartObjects = [];
20var chartType;
21var chartPoints = new OpenLayers.Layer.Vector("Overlay");
22var view, lonlat, var_sel = 1;
23// var current_chart_index = 0;
24
25$(document).ready(function() {
26	
27
28
29	$('#ctrl_chart').click(function(event) {
30		$("#ctrl_chart_options").slideDown("fast" );
31		$('#ctrl_chart_options').toggleClass('enable');
32		if($(this).hasClass('enable')){
33			$("#ctrl_chart_options").slideUp("fast" );
34			$(this).removeClass('enable');			
35		}else{
36			desactivateAllTools();
37			$(this).addClass('enable');
38		}
39	});
40
41	$('#ctrl_chart_options .close').click(function(event) {
42		$('#ctrl_chart').trigger('click');
43	});
44
45	$('#ctrl_chart_options .box').click(function(event) {
46		// $('#ctrl_play').hide();
47		// $('#ctrl_download').hide();
48		// $('#ctrl_chart').hide();
49		map.addLayer(chartPoints);
50		$( "#sidebar select" ).prop( "disabled", true );
51
52		chartType = $(this).attr('type');
53		$('#close_chart_view').addClass('enable');
54		$('#ctrl_chart').trigger('click');
55		$('#chart_view').addClass('enable');
56		$('#map').addClass('top');
57		map.updateSize();
58		map.events.register("click", map,clickToDrawChart);
59	});
60
61	
62	$('#close_chart_view').click(function(event) {
63
64		if($('#ctrl_profile').hasClass('enable')){
65			$("#ctrl_profile_options li").removeClass('enable');
66			$('#ctrl_profile').removeClass('enable');		
67			$('#chart_view .chart_view').children().remove();
68			$('#chart_view .title').text('Click on map point');
69			$('#chart_view .title').show();
70			$('#chart_view .title').removeClass('compare');
71			$('#chart_view .chart_section').removeClass('compare');
72			$('#chart_view .chart_section.second').removeClass('enable');
73			$('#close_chart_view').removeClass('enable');
74			$('.chart_section.first .chartbuttons').removeClass('enable');
75			$('#chart_view').removeClass('enable');
76			$('#map').removeClass('top');
77			$( "#sidebar select" ).prop( "disabled", false );
78			var name = map.getLayersByName("Line Layer");
79			//console.log(name);
80			chartObjects_p = [];
81			name[0].removeAllFeatures();
82			drawline_control.deactivate();
83			$("#ctrl_profile_options .liPoint").removeClass('clicked');
84			$("#ctrl_profile_options .liLine").removeClass('clicked');
85			map.updateSize();
86			$('#map').css('cursor', '');
87			return;
88		}
89		
90		map.removeLayer(chartPoints);
91		chartPoints.removeAllFeatures();
92		$( "#sidebar select" ).prop( "disabled", false );
93
94		$('#close_chart_view').removeClass('enable');
95		
96		$('#chart_view .chart_view').children().remove();
97		chartObjects = [];
98		$('#chart_view .title').text('Click on map point');
99		$('#chart_view .title').show();
100		$('#chart_view .title').removeClass('compare');
101		$('#chart_view .chart_section').removeClass('compare');
102		$('#chart_view .chart_section.second').removeClass('enable');
103		$('#chart_view .chartbuttons').removeClass('enable');
104		$('#chart_view .compare_chart').removeClass('enable');
105		$('#chart_view .var_sel_t').removeClass('enable');
106		$('#chart_view .var_sel_p').removeClass('enable');
107
108		$('#chart_view').removeClass('enable');
109		$('#map').removeClass('top');
110		map.updateSize();
111		map.events.unregister("click", map,clickToDrawChart);
112	});
113
114	$('#chart_view .compare_chart').click(function(event) {
115		$(this).removeClass('enable');
116		$('#chart_view .var_sel_t').removeClass('enable');
117		$('#chart_view .var_sel_p').removeClass('enable');
118		$('.chart_section').addClass('compare');
119		
120		$.each(chartObjects, function(i, chartObject) {
121		  chartObject.reflow();
122		});
123		
124		$('.chart_section.second').addClass('enable');
125		$('#chart_view .title').text('Click on map point');
126		$('#chart_view .title').show();
127		$('#chart_view .title').addClass('compare');
128		// current_chart_index = 1;
129	});
130
131	$('#chart_view .var_sel_t').click(function(event) {
132		if (!$(this).hasClass('clicked')){
133			$(this).toggleClass('clicked');
134			var var_sel =  1;
135			draw(view,lonlat,var_sel);
136			if ($('#chart_view .var_sel_p').hasClass('clicked')){
137				$('#chart_view .var_sel_p').toggleClass('clicked');
138			}
139		}
140		var var_sel =  1;
141		draw(view,lonlat,var_sel);
142		
143	});
144
145	$('#chart_view .var_sel_p').click(function(event) {
146		if (!$(this).hasClass('clicked')){
147			$(this).toggleClass('clicked');
148			var var_sel =  0;
149			draw(view,lonlat,var_sel);
150			if ($('#chart_view .var_sel_t').hasClass('clicked')){
151				$('#chart_view .var_sel_t').toggleClass('clicked');
152			}
153		}
154		var var_sel =  0;
155		draw(view,lonlat,var_sel);
156		
157	});
158
159
160	$('#chart_view .chartbuttons button.close').click(function(event) {
161
162
163		if($('#ctrl_profile').hasClass('enable')){
164			$("#ctrl_profile_options li").removeClass('enable');	
165			$('#ctrl_profile').removeClass('enable');		
166			$('#chart_view .chart_view').children().remove();
167			$('#chart_view .title').text('Click on map point');
168			$('#chart_view .title').show();
169			$('#chart_view .title').removeClass('compare');
170			$('#chart_view .chart_section').removeClass('compare');
171			$('#chart_view .chart_section.second').removeClass('enable');
172			$('#close_chart_view').removeClass('enable');
173			$('.chart_section.first .chartbuttons').removeClass('enable');
174			$('#chart_view').removeClass('enable');
175			$('#map').removeClass('top');
176			$("#sidebar select").prop( "disabled", false );
177			var name = map.getLayersByName("Line Layer");
178			//console.log(name);
179			chartObjects_p = [];
180			name[0].removeAllFeatures();
181			drawline_control.deactivate();
182			$("#ctrl_profile_options .liPoint").removeClass('clicked');
183			$("#ctrl_profile_options .liLine").removeClass('clicked');
184			map.updateSize();
185			$('#map').css('cursor', '');
186			return;
187		}
188
189		if($('#chart_view .chart_section.enable').length == 1){
190			$('#close_chart_view').trigger('click');
191			return null;
192		}
193
194
195		var chart_section = $(this).closest('.chart_section');
196		$(this).closest('.chartbuttons').removeClass('enable');
197		chart_section.removeClass('enable');
198		$('.chart_section').removeClass('compare');
199		$('#chart_view .title').removeClass('compare');
200
201		var chart_section = $(this).closest('.chart_section');
202		chart_section.find('.chart_view').children().remove();
203		
204		if(chart_section.hasClass('first')){
205			chartObjects.splice(0, 1);
206			$('#chart_view .chart_section.second').removeClass('second').addClass('first');
207			chart_section.removeClass('first').addClass('second');
208			chartPoints.removeFeatures(chartPoints.features[0]);
209			chartPoints.features[0].style.strokeColor = '#283237';
210			chartPoints.features[0].style.fillColor = '#283237';
211			chartPoints.redraw();
212
213		}else{
214			chartObjects.splice(1, 1);
215			chartPoints.removeFeatures(chartPoints.features[1])
216		}
217
218		$('#chart_view .compare_chart').addClass('enable');
219		if(chartType != 0){
220			$('#chart_view .var_sel_t').addClass('enable')
221			$('#chart_view .var_sel_p').addClass('enable')
222		}
223
224		$.each(chartObjects, function(i, chartObject) {
225		  chartObject.reflow();
226		});
227	});
228
229	$('#chart_view .chartbuttons button.expand').click(function(){
230		$('#overlay_chart').addClass('enable');
231		view = $('.overlay_chart')[0]
232		var index;
233		$(this).closest('.chart_section').hasClass('first') ? index=0:index=1;
234		var lonlat = new OpenLayers.LonLat(chartPoints.features[index].geometry.getCentroid().x, chartPoints.features[index].geometry.getCentroid().y);
235		draw(view,lonlat,var_sel);
236	});
237
238	$('#overlay_chart').click(function(event) {
239		$(this).removeClass('enable');
240		$('.overlay_chart').children().remove();
241	});
242
243});
244
245function clickToDrawChart(e){
246
247

248	lonlat = map.getLonLatFromViewPortPx(e.xy);
249
250    $('#chart_view .title').hide();
251
252    if($('.chart_section.second').hasClass('enable')){
253    	view = $('.chart_section.second .chart_view')[0];
254    	$('.chart_section.second .chartbuttons').addClass('enable');
255    	if(chartPoints.features.length == 1){
256    		createChartPoint(lonlat,'#55aad5');
257    	}else{
258    		chartPoints.features[1].move(lonlat);
259    	}
260    }else{
261    	view = $('.chart_section.first .chart_view')[0];
262    	$('#chart_view .compare_chart').addClass('enable')
263		if(chartType != 0){
264			$('#chart_view .var_sel_t').addClass('enable')
265			$('#chart_view .var_sel_p').addClass('enable')
266		}
267    	$('.chart_section.first .chartbuttons').addClass('enable');
268    	if(chartPoints.features.length == 0){
269    		createChartPoint(lonlat,'#283237');
270    	}else{
271    		chartPoints.features[0].move(lonlat);
272    	}
273    }
274    
275    // !$('.chart_section.second').hasClass('enable') ? $('#chart_view .compare_chart').addClass('enable'):null;
276	
277	// $('#chart_view .chartbuttons[index="' + current_chart_index + '"]').addClass('enable');
278
279    // var view = current_chart_index == 0 ? 'chart_view_1':'chart_view_2'
280
281	
282	if ($('#chart_view .var_sel_p').hasClass('clicked')){
283		var_sel = 0;
284	}
285	else {
286		$('#chart_view .var_sel_t').addClass('clicked')
287		var_sel = 1;
288	}
289	draw(view,lonlat,var_sel);
290}
291
292function createChartPoint(lonlat,color){
293	var circleStyle = { 
294            strokeColor: color, 
295            fillColor: color, 
296            fillOpacity: 1, 
297            strokeWidth: 3, 
298            strokeDashstyle: "solid", 
299    };
300    var mycircle = OpenLayers.Geometry.Polygon.createRegularPolygon
301	(
302	    new OpenLayers.Geometry.Point(lonlat.lon, lonlat.lat),
303	    100000,
304	    40,
305	    0
306	);
307	var featurecircle = new OpenLayers.Feature.Vector(mycircle,null,circleStyle);
308	chartPoints.addFeatures([featurecircle]);
309}
310function draw(view,lonlat,var_sel){
311    $(view).children().remove();
312    $('#chart_view .title').text('Loading...');
313    $('#chart_view .title').show();
314    if(chartType == 0){
315    	drawClimograph(view,lonlat)
316    }else if(chartType == 1){
317		if (var_sel == 1){
318			drawSerieTemp(view,lonlat)
319		}
320		else{
321			drawSeriePre(view,lonlat)
322		}
323    }else if(chartType == 2){
324		if (var_sel == 1){
325			drawSerieAtemp(view,lonlat)
326		}
327		else{
328			drawSerieApre(view,lonlat)
329		}
330    }else if(chartType == 3){
331		if (var_sel == 1){
332			drawSerieAnual_temp(view,lonlat)
333		}
334		else{
335			drawSerieAnual_pre(view,lonlat)
336		}
337    }else if(chartType == 4){
338		if (var_sel == 1){
339			drawSerieAnualAtemp(view,lonlat)
340		}
341		else{
342			drawSerieAnualApre(view,lonlat)
343		}
344    }
345	
346}