source: sipes/libraries/Highcharts-4.0.4/examples/pie-drilldown/index.htm @ 307d09d

stableversion-3.0
Last change on this file since 307d09d was 307d09d, checked in by José Gregorio Puentes <jpuentes@…>, 8 años ago

se agregaron las librerias
  • Propiedad mode establecida a 100644
File size: 4.9 KB
Línea 
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    Highcharts.data({
15        csv: document.getElementById('tsv').innerHTML,
16        itemDelimiter: '\t',
17        parsed: function (columns) {
18
19            var brands = {},
20                brandsData = [],
21                versions = {},
22                drilldownSeries = [];
23
24            // Parse percentage strings
25            columns[1] = $.map(columns[1], function (value) {
26                if (value.indexOf('%') === value.length - 1) {
27                    value = parseFloat(value);
28                }
29                return value;
30            });
31
32            $.each(columns[0], function (i, name) {
33                var brand,
34                    version;
35
36                if (i > 0) {
37
38                    // Remove special edition notes
39                    name = name.split(' -')[0];
40
41                    // Split into brand and version
42                    version = name.match(/([0-9]+[\.0-9x]*)/);
43                    if (version) {
44                        version = version[0];
45                    }
46                    brand = name.replace(version, '');
47
48                    // Create the main data
49                    if (!brands[brand]) {
50                        brands[brand] = columns[1][i];
51                    } else {
52                        brands[brand] += columns[1][i];
53                    }
54
55                    // Create the version data
56                    if (version !== null) {
57                        if (!versions[brand]) {
58                            versions[brand] = [];
59                        }
60                        versions[brand].push(['v' + version, columns[1][i]]);
61                    }
62                }
63
64            });
65
66            $.each(brands, function (name, y) {
67                brandsData.push({
68                    name: name,
69                    y: y,
70                    drilldown: versions[name] ? name : null
71                });
72            });
73            $.each(versions, function (key, value) {
74                drilldownSeries.push({
75                    name: key,
76                    id: key,
77                    data: value
78                });
79            });
80
81            // Create the chart
82            $('#container').highcharts({
83                chart: {
84                    type: 'pie'
85                },
86                title: {
87                    text: 'Browser market shares. November, 2013.'
88                },
89                subtitle: {
90                    text: 'Click the slices to view versions. Source: netmarketshare.com.'
91                },
92                plotOptions: {
93                    series: {
94                        dataLabels: {
95                            enabled: true,
96                            format: '{point.name}: {point.y:.1f}%'
97                        }
98                    }
99                },
100
101                tooltip: {
102                    headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
103                    pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
104                },
105
106                series: [{
107                    name: 'Brands',
108                    colorByPoint: true,
109                    data: brandsData
110                }],
111                drilldown: {
112                    series: drilldownSeries
113                }
114            });
115        }
116    });
117});
118
119
120                </script>
121        </head>
122        <body>
123<script src="../../js/highcharts.js"></script>
124<script src="../../js/modules/data.js"></script>
125<script src="../../js/modules/drilldown.js"></script>
126
127<div id="container" style="min-width: 310px; max-width: 600px; height: 400px; margin: 0 auto"></div>
128
129<!-- Data from www.netmarketshare.com. Select Browsers => Desktop share by version. Download as tsv. -->
130<pre id="tsv" style="display:none">Browser Version      Total Market Share
131Microsoft Internet Explorer 8.0 26.61%
132Microsoft Internet Explorer 9.0 16.96%
133Chrome 18.0     8.01%
134Chrome 19.0     7.73%
135Firefox 12      6.72%
136Microsoft Internet Explorer 6.0 6.40%
137Firefox 11      4.72%
138Microsoft Internet Explorer 7.0 3.55%
139Safari 5.1      3.53%
140Firefox 13      2.16%
141Firefox 3.6     1.87%
142Opera 11.x      1.30%
143Chrome 17.0     1.13%
144Firefox 10      0.90%
145Safari 5.0      0.85%
146Firefox 9.0     0.65%
147Firefox 8.0     0.55%
148Firefox 4.0     0.50%
149Chrome 16.0     0.45%
150Firefox 3.0     0.36%
151Firefox 3.5     0.36%
152Firefox 6.0     0.32%
153Firefox 5.0     0.31%
154Firefox 7.0     0.29%
155Proprietary or Undetectable     0.29%
156Chrome 18.0 - Maxthon Edition   0.26%
157Chrome 14.0     0.25%
158Chrome 20.0     0.24%
159Chrome 15.0     0.18%
160Chrome 12.0     0.16%
161Opera 12.x      0.15%
162Safari 4.0      0.14%
163Chrome 13.0     0.13%
164Safari 4.1      0.12%
165Chrome 11.0     0.10%
166Firefox 14      0.10%
167Firefox 2.0     0.09%
168Chrome 10.0     0.09%
169Opera 10.x      0.09%
170Microsoft Internet Explorer 8.0 - Tencent Traveler Edition      0.09%</pre>
171
172        </body>
173</html>
Nota: Vea TracBrowser para ayuda de uso del navegador del repositorio.