Subversion-Projekte lars-tiefland.ci

Revision

Details | Letzte Änderung | Log anzeigen | RSS feed

Revision Autor Zeilennr. Zeile
875 lars 1 
<!DOCTYPE HTML>
2 
<html>
3 
	<head>
4 
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 
		<title>Highcharts Example</title>
6 
 
7 
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
8 
		<style type="text/css">
9 
${demo.css}
10 
		</style>
11 
		<script type="text/javascript">
12 
$(function () {
13 
 
14 
    var colors = Highcharts.getOptions().colors,
15 
        categories = ['MSIE', 'Firefox', 'Chrome', 'Safari', 'Opera'],
16 
        data = [{
17 
            y: 56.33,
18 
            color: colors[0],
19 
            drilldown: {
20 
                name: 'MSIE versions',
21 
                categories: ['MSIE 6.0', 'MSIE 7.0', 'MSIE 8.0', 'MSIE 9.0', 'MSIE 10.0', 'MSIE 11.0'],
22 
                data: [1.06, 0.5, 17.2, 8.11, 5.33, 24.13],
23 
                color: colors[0]
24 
            }
25 
        }, {
26 
            y: 10.38,
27 
            color: colors[1],
28 
            drilldown: {
29 
                name: 'Firefox versions',
30 
                categories: ['Firefox v31', 'Firefox v32', 'Firefox v33', 'Firefox v35', 'Firefox v36', 'Firefox v37', 'Firefox v38'],
31 
                data: [0.33, 0.15, 0.22, 1.27, 2.76, 2.32, 2.31, 1.02],
32 
                color: colors[1]
33 
            }
34 
        }, {
35 
            y: 24.03,
36 
            color: colors[2],
37 
            drilldown: {
38 
                name: 'Chrome versions',
39 
                categories: ['Chrome v30.0', 'Chrome v31.0', 'Chrome v32.0', 'Chrome v33.0', 'Chrome v34.0',
40 
                    'Chrome v35.0', 'Chrome v36.0', 'Chrome v37.0', 'Chrome v38.0', 'Chrome v39.0', 'Chrome v40.0', 'Chrome v41.0', 'Chrome v42.0', 'Chrome v43.0'
41 
                    ],
42 
                data: [0.14, 1.24, 0.55, 0.19, 0.14, 0.85, 2.53, 0.38, 0.6, 2.96, 5, 4.32, 3.68, 1.45],
43 
                color: colors[2]
44 
            }
45 
        }, {
46 
            y: 4.77,
47 
            color: colors[3],
48 
            drilldown: {
49 
                name: 'Safari versions',
50 
                categories: ['Safari v5.0', 'Safari v5.1', 'Safari v6.1', 'Safari v6.2', 'Safari v7.0', 'Safari v7.1', 'Safari v8.0'],
51 
                data: [0.3, 0.42, 0.29, 0.17, 0.26, 0.77, 2.56],
52 
                color: colors[3]
53 
            }
54 
        }, {
55 
            y: 0.91,
56 
            color: colors[4],
57 
            drilldown: {
58 
                name: 'Opera versions',
59 
                categories: ['Opera v12.x', 'Opera v27', 'Opera v28', 'Opera v29'],
60 
                data: [0.34, 0.17, 0.24, 0.16],
61 
                color: colors[4]
62 
            }
63 
        }, {
64 
            y: 0.2,
65 
            color: colors[5],
66 
            drilldown: {
67 
                name: 'Proprietary or Undetectable',
68 
                categories: [],
69 
                data: [],
70 
                color: colors[5]
71 
            }
72 
        }],
73 
        browserData = [],
74 
        versionsData = [],
75 
        i,
76 
        j,
77 
        dataLen = data.length,
78 
        drillDataLen,
79 
        brightness;
80 
 
81 
 
82 
    // Build the data arrays
83 
    for (i = 0; i < dataLen; i += 1) {
84 
 
85 
        // add browser data
86 
        browserData.push({
87 
            name: categories[i],
88 
            y: data[i].y,
89 
            color: data[i].color
90 
        });
91 
 
92 
        // add version data
93 
        drillDataLen = data[i].drilldown.data.length;
94 
        for (j = 0; j < drillDataLen; j += 1) {
95 
            brightness = 0.2 - (j / drillDataLen) / 5;
96 
            versionsData.push({
97 
                name: data[i].drilldown.categories[j],
98 
                y: data[i].drilldown.data[j],
99 
                color: Highcharts.Color(data[i].color).brighten(brightness).get()
100 
            });
101 
        }
102 
    }
103 
 
104 
    // Create the chart
105 
    $('#container').highcharts({
106 
        chart: {
107 
            type: 'pie'
108 
        },
109 
        title: {
110 
            text: 'Browser market share, January, 2015 to May, 2015'
111 
        },
112 
        subtitle: {
113 
            text: 'Source: <a href="http://netmarketshare.com/">netmarketshare.com</a>'
114 
        },
115 
        yAxis: {
116 
            title: {
117 
                text: 'Total percent market share'
118 
            }
119 
        },
120 
        plotOptions: {
121 
            pie: {
122 
                shadow: false,
123 
                center: ['50%', '50%']
124 
            }
125 
        },
126 
        tooltip: {
127 
            valueSuffix: '%'
128 
        },
129 
        series: [{
130 
            name: 'Browsers',
131 
            data: browserData,
132 
            size: '60%',
133 
            dataLabels: {
134 
                formatter: function () {
135 
                    return this.y > 5 ? this.point.name : null;
136 
                },
137 
                color: 'white',
138 
                distance: -30
139 
            }
140 
        }, {
141 
            name: 'Versions',
142 
            data: versionsData,
143 
            size: '80%',
144 
            innerSize: '60%',
145 
            dataLabels: {
146 
                formatter: function () {
147 
                    // display only if larger than 1
148 
                    return this.y > 1 ? '<b>' + this.point.name + ':</b> ' + this.y + '%' : null;
149 
                }
150 
            }
151 
        }]
152 
    });
153 
});
154 
		</script>
155 
	</head>
156 
	<body>
157 
<script src="../../js/highcharts.js"></script>
158 
<script src="../../js/modules/exporting.js"></script>
159 
 
160 
<div id="container" style="width: 600px; height: 400px; margin: 0 auto"></div>
161 
 
162 
	</body>
163 
</html>