corrade-http-templates – Diff between revs 2 and 80
?pathlinks?
Rev 2 | Rev 80 | |||
---|---|---|---|---|
1 | <!DOCTYPE HTML> |
1 | <!DOCTYPE HTML> |
|
2 | <html> |
2 | <html> |
|
3 | <head> |
3 | <head> |
|
4 | <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> |
4 | <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> |
|
5 | <title>Measuring Male-To-Female Ratio on a Simulator</title> |
5 | <title>Measuring Male-To-Female Ratio on a Simulator</title> |
|
6 | |
6 | |
|
7 | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> |
7 | <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> |
|
8 | <style type="text/css"> |
8 | <style type="text/css"> |
|
9 | ${demo.css} |
9 | ${demo.css} |
|
10 | </style> |
10 | </style> |
|
11 | <script type="text/javascript"> |
11 | <script type="text/javascript"> |
|
12 | $(function () { |
12 | $(function () { |
|
13 | Highcharts.setOptions({ |
13 | Highcharts.setOptions({ |
|
14 | global: { |
14 | global: { |
|
15 | useUTC: true |
15 | useUTC: true |
|
16 | }, |
16 | }, |
|
17 | colors: ['#69b4ff', '#FF69B4'] |
17 | colors: ['#69b4ff', '#FF69B4'] |
|
18 | }); |
18 | }); |
|
19 | $('#container').highcharts({ |
19 | $('#container').highcharts({ |
|
20 | chart: { |
20 | chart: { |
|
21 | type: 'pie', |
21 | type: 'pie', |
|
22 | options3d: { |
22 | options3d: { |
|
23 | enabled: true, |
23 | enabled: true, |
|
24 | alpha: 45, |
24 | alpha: 45, |
|
25 | beta: 0 |
25 | beta: 0 |
|
26 | }, |
26 | }, |
|
27 | events: { |
27 | events: { |
|
28 | load: function () { |
28 | load: function () { |
|
29 | // set up the updating of the chart |
29 | // set up the updating of the chart |
|
30 | var series = this.series; |
30 | var series = this.series; |
|
31 | setInterval(function () { |
31 | setInterval(function () { |
|
32 | $.ajax({ |
32 | $.ajax({ |
|
33 | type: 'get', |
33 | type: 'get', |
|
34 | url: "getMaleFemale.php", |
34 | url: "getMaleFemale.php", |
|
35 | data: "t=" + Math.random() |
35 | data: "t=" + Math.random() |
|
36 | }).done(function(response) { |
36 | }).done(function(response) { |
|
37 | var a = $.map(response, function(e) { return e; }); |
37 | var a = $.map(response, function(e) { return e; }); |
|
38 | series[0].setData(a); |
38 | series[0].setData(a); |
|
39 | }); |
39 | }); |
|
40 | }, 5000); |
40 | }, 5000); |
|
41 | } |
41 | } |
|
42 | } |
42 | } |
|
43 | }, |
43 | }, |
|
44 | title: { |
44 | title: { |
|
45 | text: '', |
45 | text: '', |
|
46 | useHTML: false |
46 | useHTML: false |
|
47 | }, |
47 | }, |
|
48 | //title: { |
48 | //title: { |
|
49 | // text: '<a href="secondlife://Puguet%20Sound/128/128/10">Puguet Sound</a> Male-to-Female Ratio', |
49 | // text: '<a href="secondlife://Puguet%20Sound/128/128/10">Puguet Sound</a> Male-to-Female Ratio', |
|
50 | // useHTML: true |
50 | // useHTML: true |
|
51 | //}, |
51 | //}, |
|
52 | credits: { |
52 | credits: { |
|
53 | enabled: false |
53 | enabled: false |
|
54 | }, |
54 | }, |
|
55 | tooltip: { |
55 | tooltip: { |
|
56 | pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' |
56 | pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' |
|
57 | }, |
57 | }, |
|
58 | plotOptions: { |
58 | plotOptions: { |
|
59 | pie: { |
59 | pie: { |
|
60 | allowPointSelect: true, |
60 | allowPointSelect: true, |
|
61 | cursor: 'pointer', |
61 | cursor: 'pointer', |
|
62 | depth: 35, |
62 | depth: 35, |
|
63 | dataLabels: { |
63 | dataLabels: { |
|
64 | enabled: true, |
64 | enabled: true, |
|
65 | format: '{point.name}' |
65 | format: '{point.name}' |
|
66 | }, |
66 | }, |
|
67 | showInLegend: true |
67 | showInLegend: true |
|
68 | } |
68 | } |
|
69 | }, |
69 | }, |
|
70 | series: [{ |
70 | series: [{ |
|
71 | type: 'pie', |
71 | type: 'pie', |
|
72 | name: 'Gender Ratio', |
72 | name: 'Gender Ratio', |
|
73 | data: [ |
73 | data: [ |
|
74 | ["Male", 1], |
74 | ["Male", 1], |
|
75 | ["Female", 1] |
75 | ["Female", 1] |
|
76 | ] |
76 | ] |
|
77 | }] |
77 | }] |
|
78 | }); |
78 | }); |
|
79 | }) |
79 | }) |
|
80 | </script> |
80 | </script> |
|
81 | </head> |
81 | </head> |
|
82 | <body> |
82 | <body> |
|
83 | <script src="js/highcharts.js"></script> |
83 | <script src="js/highcharts.js"></script> |
|
84 | <script src="js/exporting.js"></script> |
84 | <script src="js/exporting.js"></script> |
|
85 | |
85 | |
|
86 | <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> |
86 | <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> |
|
87 | |
87 | |
|
88 | </body> |
88 | </body> |
|
89 | </html> |
89 | </html> |
|
90 | |
90 | |
|
91 | |
91 | |