Subversion-Projekte lars-tiefland.cienc

Revision

Details | Letzte Änderung | Log anzeigen | RSS feed

Revision Autor Zeilennr. Zeile
9 lars 1 
jQuery(document).ready(function() {
2 
  // HIGHMAPS DEMOS
3 
 
4 
  // MAP BUBBLE
5 
  $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=world-population.json&callback=?', function (data) {
6 
 
7 
        var mapData = Highcharts.geojson(Highcharts.maps['custom/world']);
8 
 
9 
        // Correct UK to GB in data
10 
        $.each(data, function () {
11 
            if (this.code === 'UK') {
12 
                this.code = 'GB';
13 
            }
14 
        });
15 
 
16 
        $('#highmaps_1').highcharts('Map', {
17 
            chart : {
18 
                style: {
19 
		            fontFamily: 'Open Sans'
20 
		        }
21 
            },
22 
 
23 
            title: {
24 
                text: 'World population 2013 by country'
25 
            },
26 
 
27 
            subtitle : {
28 
                text : 'Demo of Highcharts map with bubbles'
29 
            },
30 
 
31 
            legend: {
32 
                enabled: false
33 
            },
34 
 
35 
            mapNavigation: {
36 
                enabled: true,
37 
                buttonOptions: {
38 
                    verticalAlign: 'bottom'
39 
                }
40 
            },
41 
 
42 
            series : [{
43 
                name: 'Countries',
44 
                mapData: mapData,
45 
                color: '#E0E0E0',
46 
                enableMouseTracking: false
47 
            }, {
48 
                type: 'mapbubble',
49 
                mapData: mapData,
50 
                name: 'Population 2013',
51 
                joinBy: ['iso-a2', 'code'],
52 
                data: data,
53 
                minSize: 4,
54 
                maxSize: '12%',
55 
                tooltip: {
56 
                    pointFormat: '{point.code}: {point.z} thousands'
57 
                }
58 
            }]
59 
        });
60 
 
61 
    });
62 
 
63 
	// HEAT MAP
64 
	$('#highmaps_2').highcharts({
65 
 
66 
        data: {
67 
            csv: document.getElementById('csv').innerHTML
68 
 
69 
        },
70 
 
71 
        chart: {
72 
            type: 'heatmap',
73 
            inverted: true,
74 
            style: {
75 
	            fontFamily: 'Open Sans'
76 
	        }
77 
        },
78 
 
79 
 
80 
        title: {
81 
            text: 'Highcharts heat map',
82 
            align: 'left'
83 
        },
84 
 
85 
        subtitle: {
86 
            text: 'Temperature variation by day and hour through May 2015',
87 
            align: 'left'
88 
        },
89 
 
90 
        xAxis: {
91 
            tickPixelInterval: 50,
92 
            min: Date.UTC(2015, 4, 1),
93 
            max: Date.UTC(2015, 4, 30)
94 
        },
95 
 
96 
        yAxis: {
97 
            title: {
98 
                text: null
99 
            },
100 
            labels: {
101 
                format: '{value}:00'
102 
            },
103 
            minPadding: 0,
104 
            maxPadding: 0,
105 
            startOnTick: false,
106 
            endOnTick: false,
107 
            tickPositions: [0, 6, 12, 18, 24],
108 
            tickWidth: 1,
109 
            min: 0,
110 
            max: 23
111 
        },
112 
 
113 
        colorAxis: {
114 
            stops: [
115 
                [0, '#3060cf'],
116 
                [0.5, '#fffbbc'],
117 
                [0.9, '#c4463a']
118 
            ],
119 
            min: -5
120 
        },
121 
 
122 
        series: [{
123 
            borderWidth: 0,
124 
            colsize: 24 * 36e5, // one day
125 
            tooltip: {
126 
                headerFormat: 'Temperature<br/>',
127 
                pointFormat: '{point.x:%e %b, %Y} {point.y}:00: <b>{point.value} ℃</b>'
128 
            }
129 
        }]
130 
 
131 
    });
132 
 
133 
	// TIMEZONE MAP
134 
	// Instanciate the map
135 
    $('#highmaps_3').highcharts('Map', {
136 
        chart: {
137 
            spacingBottom: 20,
138 
            style: {
139 
	            fontFamily: 'Open Sans'
140 
	        }
141 
        },
142 
        title : {
143 
            text : 'Europe time zones'
144 
        },
145 
 
146 
        legend: {
147 
            enabled: true
148 
        },
149 
 
150 
        plotOptions: {
151 
            map: {
152 
                allAreas: false,
153 
                joinBy: ['iso-a2', 'code'],
154 
                dataLabels: {
155 
                    enabled: true,
156 
                    color: 'white',
157 
                    formatter: function () {
158 
                        if (this.point.properties && this.point.properties.labelrank.toString() < 5) {
159 
                            return this.point.properties['iso-a2'];
160 
                        }
161 
                    },
162 
                    format: null,
163 
                    style: {
164 
                        fontWeight: 'bold'
165 
                    }
166 
                },
167 
                mapData: Highcharts.maps['custom/europe'],
168 
                tooltip: {
169 
                    headerFormat: '',
170 
                    pointFormat: '{point.name}: <b>{series.name}</b>'
171 
                }
172 
 
173 
            }
174 
        },
175 
 
176 
        series : [{
177 
            name: 'UTC',
178 
            data: $.map(['IE', 'IS', 'GB', 'PT'], function (code) {
179 
                return { code: code };
180 
            })
181 
        }, {
182 
            name: 'UTC + 1',
183 
            data: $.map(['NO', 'SE', 'DK', 'DE', 'NL', 'BE', 'LU', 'ES', 'FR', 'PL', 'CZ', 'AT', 'CH', 'LI', 'SK', 'HU',
184 
                    'SI', 'IT', 'SM', 'HR', 'BA', 'YF', 'ME', 'AL', 'MK'], function (code) {
185 
                return { code: code };
186 
            })
187 
        }, {
188 
            name: 'UTC + 2',
189 
            data: $.map(['FI', 'EE', 'LV', 'LT', 'BY', 'UA', 'MD', 'RO', 'BG', 'GR', 'TR', 'CY'], function (code) {
190 
                return { code: code };
191 
            })
192 
        }, {
193 
            name: 'UTC + 3',
194 
            data: $.map(['RU'], function (code) {
195 
                return { code: code };
196 
            })
197 
        }]
198 
    });
199 
 
200 
});