source: appstream-generator/contrib/setup/js_tmp/Flot/examples/series-pie/index.html @ 4841

Last change on this file since 4841 was 4841, checked in by Juanma, 2 years ago

Initial release

File size: 27.9 KB
Line 
1<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2<html>
3<head>
4        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5        <title>Flot Examples: Pie Charts</title>
6        <link href="../examples.css" rel="stylesheet" type="text/css">
7        <style type="text/css">
8
9        .demo-container {
10                position: relative;
11                height: 400px;
12        }
13
14        #placeholder {
15                width: 550px;
16        }
17
18        #menu {
19                position: absolute;
20                top: 20px;
21                left: 625px;
22                bottom: 20px;
23                right: 20px;
24                width: 200px;
25        }
26
27        #menu button {
28                display: inline-block;
29                width: 200px;
30                padding: 3px 0 2px 0;
31                margin-bottom: 4px;
32                background: #eee;
33                border: 1px solid #999;
34                border-radius: 2px;
35                font-size: 16px;
36                -o-box-shadow: 0 1px 2px rgba(0,0,0,0.15);
37                -ms-box-shadow: 0 1px 2px rgba(0,0,0,0.15);
38                -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.15);
39                -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.15);
40                box-shadow: 0 1px 2px rgba(0,0,0,0.15);
41                cursor: pointer;
42        }
43
44        #description {
45                margin: 15px 10px 20px 10px;
46        }
47
48        #code {
49                display: block;
50                width: 870px;
51                padding: 15px;
52                margin: 10px auto;
53                border: 1px dashed #999;
54                background-color: #f8f8f8;
55                font-size: 16px;
56                line-height: 20px;
57                color: #666;
58        }
59
60        ul {
61                font-size: 10pt;
62        }
63
64        ul li {
65                margin-bottom: 0.5em;
66        }
67
68        ul.options li {
69                list-style: none;
70                margin-bottom: 1em;
71        }
72
73        ul li i {
74                color: #999;
75        }
76
77        </style>
78        <!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../../excanvas.min.js"></script><![endif]-->
79        <script language="javascript" type="text/javascript" src="../../jquery.js"></script>
80        <script language="javascript" type="text/javascript" src="../../jquery.flot.js"></script>
81        <script language="javascript" type="text/javascript" src="../../jquery.flot.pie.js"></script>
82        <script type="text/javascript">
83
84        $(function() {
85
86                // Example Data
87
88                //var data = [
89                //      { label: "Series1",  data: 10},
90                //      { label: "Series2",  data: 30},
91                //      { label: "Series3",  data: 90},
92                //      { label: "Series4",  data: 70},
93                //      { label: "Series5",  data: 80},
94                //      { label: "Series6",  data: 110}
95                //];
96
97                //var data = [
98                //      { label: "Series1",  data: [[1,10]]},
99                //      { label: "Series2",  data: [[1,30]]},
100                //      { label: "Series3",  data: [[1,90]]},
101                //      { label: "Series4",  data: [[1,70]]},
102                //      { label: "Series5",  data: [[1,80]]},
103                //      { label: "Series6",  data: [[1,0]]}
104                //];
105
106                //var data = [
107                //      { label: "Series A",  data: 0.2063},
108                //      { label: "Series B",  data: 38888}
109                //];
110
111                // Randomly Generated Data
112
113                var data = [],
114                        series = Math.floor(Math.random() * 6) + 3;
115
116                for (var i = 0; i < series; i++) {
117                        data[i] = {
118                                label: "Series" + (i + 1),
119                                data: Math.floor(Math.random() * 100) + 1
120                        }
121                }
122
123                var placeholder = $("#placeholder");
124
125                $("#example-1").click(function() {
126
127                        placeholder.unbind();
128
129                        $("#title").text("Default pie chart");
130                        $("#description").text("The default pie chart with no options set.");
131
132                        $.plot(placeholder, data, {
133                                series: {
134                                        pie: { 
135                                                show: true
136                                        }
137                                }
138                        });
139
140                        setCode([
141                                "$.plot('#placeholder', data, {",
142                                "    series: {",
143                                "        pie: {",
144                                "            show: true",
145                                "        }",
146                                "    }",
147                                "});"
148                        ]);
149                });
150
151                $("#example-2").click(function() {
152
153                        placeholder.unbind();
154
155                        $("#title").text("Default without legend");
156                        $("#description").text("The default pie chart when the legend is disabled. Since the labels would normally be outside the container, the chart is resized to fit.");
157
158                        $.plot(placeholder, data, {
159                                series: {
160                                        pie: { 
161                                                show: true
162                                        }
163                                },
164                                legend: {
165                                        show: false
166                                }
167                        });
168
169                        setCode([
170                                "$.plot('#placeholder', data, {",
171                                "    series: {",
172                                "        pie: {",
173                                "            show: true",
174                                "        }",
175                                "    },",
176                                "    legend: {",
177                                "        show: false",
178                                "    }",
179                                "});"
180                        ]);
181                });
182
183                $("#example-3").click(function() {
184
185                        placeholder.unbind();
186
187                        $("#title").text("Custom Label Formatter");
188                        $("#description").text("Added a semi-transparent background to the labels and a custom labelFormatter function.");
189
190                        $.plot(placeholder, data, {
191                                series: {
192                                        pie: { 
193                                                show: true,
194                                                radius: 1,
195                                                label: {
196                                                        show: true,
197                                                        radius: 1,
198                                                        formatter: labelFormatter,
199                                                        background: {
200                                                                opacity: 0.8
201                                                        }
202                                                }
203                                        }
204                                },
205                                legend: {
206                                        show: false
207                                }
208                        });
209
210                        setCode([
211                                "$.plot('#placeholder', data, {",
212                                "    series: {",
213                                "        pie: {",
214                                "            show: true,",
215                                "            radius: 1,",
216                                "            label: {",
217                                "                show: true,",
218                                "                radius: 1,",
219                                "                formatter: labelFormatter,",
220                                "                background: {",
221                                "                    opacity: 0.8",
222                                "                }",
223                                "            }",
224                                "        }",
225                                "    },",
226                                "    legend: {",
227                                "        show: false",
228                                "    }",
229                                "});"
230                        ]);
231                });
232
233                $("#example-4").click(function() {
234
235                        placeholder.unbind();
236
237                        $("#title").text("Label Radius");
238                        $("#description").text("Slightly more transparent label backgrounds and adjusted the radius values to place them within the pie.");
239
240                        $.plot(placeholder, data, {
241                                series: {
242                                        pie: { 
243                                                show: true,
244                                                radius: 1,
245                                                label: {
246                                                        show: true,
247                                                        radius: 3/4,
248                                                        formatter: labelFormatter,
249                                                        background: {
250                                                                opacity: 0.5
251                                                        }
252                                                }
253                                        }
254                                },
255                                legend: {
256                                        show: false
257                                }
258                        });
259
260                        setCode([
261                                "$.plot('#placeholder', data, {",
262                                "    series: {",
263                                "        pie: {",
264                                "            show: true,",
265                                "            radius: 1,",
266                                "            label: {",
267                                "                show: true,",
268                                "                radius: 3/4,",
269                                "                formatter: labelFormatter,",
270                                "                background: {",
271                                "                    opacity: 0.5",
272                                "                }",
273                                "            }",
274                                "        }",
275                                "    },",
276                                "    legend: {",
277                                "        show: false",
278                                "    }",
279                                "});"
280                        ]);
281                });
282
283                $("#example-5").click(function() {
284
285                        placeholder.unbind();
286
287                        $("#title").text("Label Styles #1");
288                        $("#description").text("Semi-transparent, black-colored label background.");
289
290                        $.plot(placeholder, data, {
291                                series: {
292                                        pie: { 
293                                                show: true,
294                                                radius: 1,
295                                                label: {
296                                                        show: true,
297                                                        radius: 3/4,
298                                                        formatter: labelFormatter,
299                                                        background: { 
300                                                                opacity: 0.5,
301                                                                color: "#000"
302                                                        }
303                                                }
304                                        }
305                                },
306                                legend: {
307                                        show: false
308                                }
309                        });
310
311                        setCode([
312                                "$.plot('#placeholder', data, {",
313                                "    series: {",
314                                "        pie: { ",
315                                "            show: true,",
316                                "            radius: 1,",
317                                "            label: {",
318                                "                show: true,",
319                                "                radius: 3/4,",
320                                "                formatter: labelFormatter,",
321                                "                background: { ",
322                                "                    opacity: 0.5,",
323                                "                    color: '#000'",
324                                "                }",
325                                "            }",
326                                "        }",
327                                "    },",
328                                "    legend: {",
329                                "        show: false",
330                                "    }",
331                                "});"
332                        ]);
333                });
334
335                $("#example-6").click(function() {
336
337                        placeholder.unbind();
338
339                        $("#title").text("Label Styles #2");
340                        $("#description").text("Semi-transparent, black-colored label background placed at pie edge.");
341
342                        $.plot(placeholder, data, {
343                                series: {
344                                        pie: { 
345                                                show: true,
346                                                radius: 3/4,
347                                                label: {
348                                                        show: true,
349                                                        radius: 3/4,
350                                                        formatter: labelFormatter,
351                                                        background: { 
352                                                                opacity: 0.5,
353                                                                color: "#000"
354                                                        }
355                                                }
356                                        }
357                                },
358                                legend: {
359                                        show: false
360                                }
361                        });
362
363                        setCode([
364                                "$.plot('#placeholder', data, {",
365                                "    series: {",
366                                "        pie: {",
367                                "            show: true,",
368                                "            radius: 3/4,",
369                                "            label: {",
370                                "                show: true,",
371                                "                radius: 3/4,",
372                                "                formatter: labelFormatter,",
373                                "                background: {",
374                                "                    opacity: 0.5,",
375                                "                    color: '#000'",
376                                "                }",
377                                "            }",
378                                "        }",
379                                "    },",
380                                "    legend: {",
381                                "        show: false",
382                                "    }",
383                                "});"
384                        ]);
385                });
386
387                $("#example-7").click(function() {
388
389                        placeholder.unbind();
390
391                        $("#title").text("Hidden Labels");
392                        $("#description").text("Labels can be hidden if the slice is less than a given percentage of the pie (10% in this case).");
393
394                        $.plot(placeholder, data, {
395                                series: {
396                                        pie: { 
397                                                show: true,
398                                                radius: 1,
399                                                label: {
400                                                        show: true,
401                                                        radius: 2/3,
402                                                        formatter: labelFormatter,
403                                                        threshold: 0.1
404                                                }
405                                        }
406                                },
407                                legend: {
408                                        show: false
409                                }
410                        });
411
412                        setCode([
413                                "$.plot('#placeholder', data, {",
414                                "    series: {",
415                                "        pie: {",
416                                "            show: true,",
417                                "            radius: 1,",
418                                "            label: {",
419                                "                show: true,",
420                                "                radius: 2/3,",
421                                "                formatter: labelFormatter,",
422                                "                threshold: 0.1",
423                                "            }",
424                                "        }",
425                                "    },",
426                                "    legend: {",
427                                "        show: false",
428                                "    }",
429                                "});"
430                        ]);
431                });
432
433                $("#example-8").click(function() {
434
435                        placeholder.unbind();
436
437                        $("#title").text("Combined Slice");
438                        $("#description").text("Multiple slices less than a given percentage (5% in this case) of the pie can be combined into a single, larger slice.");
439
440                        $.plot(placeholder, data, {
441                                series: {
442                                        pie: { 
443                                                show: true,
444                                                combine: {
445                                                        color: "#999",
446                                                        threshold: 0.05
447                                                }
448                                        }
449                                },
450                                legend: {
451                                        show: false
452                                }
453                        });
454
455                        setCode([
456                                "$.plot('#placeholder', data, {",
457                                "    series: {",
458                                "        pie: {",
459                                "            show: true,",
460                                "            combine: {",
461                                "                color: '#999',",
462                                "                threshold: 0.1",
463                                "            }",
464                                "        }",
465                                "    },",
466                                "    legend: {",
467                                "        show: false",
468                                "    }",
469                                "});"
470                        ]);
471                });
472
473                $("#example-9").click(function() {
474
475                        placeholder.unbind();
476
477                        $("#title").text("Rectangular Pie");
478                        $("#description").text("The radius can also be set to a specific size (even larger than the container itself).");
479
480                        $.plot(placeholder, data, {
481                                series: {
482                                        pie: { 
483                                                show: true,
484                                                radius: 500,
485                                                label: {
486                                                        show: true,
487                                                        formatter: labelFormatter,
488                                                        threshold: 0.1
489                                                }
490                                        }
491                                },
492                                legend: {
493                                        show: false
494                                }
495                        });
496
497                        setCode([
498                                "$.plot('#placeholder', data, {",
499                                "    series: {",
500                                "        pie: {",
501                                "            show: true,",
502                                "            radius: 500,",
503                                "            label: {",
504                                "                show: true,",
505                                "                formatter: labelFormatter,",
506                                "                threshold: 0.1",
507                                "            }",
508                                "        }",
509                                "    },",
510                                "    legend: {",
511                                "        show: false",
512                                "    }",
513                                "});"
514                        ]);
515                });
516
517                $("#example-10").click(function() {
518
519                        placeholder.unbind();
520
521                        $("#title").text("Tilted Pie");
522                        $("#description").text("The pie can be tilted at an angle.");
523
524                        $.plot(placeholder, data, {
525                                series: {
526                                        pie: { 
527                                                show: true,
528                                                radius: 1,
529                                                tilt: 0.5,
530                                                label: {
531                                                        show: true,
532                                                        radius: 1,
533                                                        formatter: labelFormatter,
534                                                        background: {
535                                                                opacity: 0.8
536                                                        }
537                                                },
538                                                combine: {
539                                                        color: "#999",
540                                                        threshold: 0.1
541                                                }
542                                        }
543                                },
544                                legend: {
545                                        show: false
546                                }
547                        });
548
549                        setCode([
550                                "$.plot('#placeholder', data, {",
551                                "    series: {",
552                                "        pie: {",
553                                "            show: true,",
554                                "            radius: 1,",
555                                "            tilt: 0.5,",
556                                "            label: {",
557                                "                show: true,",
558                                "                radius: 1,",
559                                "                formatter: labelFormatter,",
560                                "                background: {",
561                                "                    opacity: 0.8",
562                                "                }",
563                                "            },",
564                                "            combine: {",
565                                "                color: '#999',",
566                                "                threshold: 0.1",
567                                "            }",
568                                "        }",
569                                "    },",
570                                "    legend: {",
571                                "        show: false",
572                                "    }",
573                                "});",
574                        ]);
575                });
576
577                $("#example-11").click(function() {
578
579                        placeholder.unbind();
580
581                        $("#title").text("Donut Hole");
582                        $("#description").text("A donut hole can be added.");
583
584                        $.plot(placeholder, data, {
585                                series: {
586                                        pie: { 
587                                                innerRadius: 0.5,
588                                                show: true
589                                        }
590                                }
591                        });
592
593                        setCode([
594                                "$.plot('#placeholder', data, {",
595                                "    series: {",
596                                "        pie: {",
597                                "            innerRadius: 0.5,",
598                                "            show: true",
599                                "        }",
600                                "    }",
601                                "});"
602                        ]);
603                });
604
605                $("#example-12").click(function() {
606
607                        placeholder.unbind();
608
609                        $("#title").text("Interactivity");
610                        $("#description").text("The pie can be made interactive with hover and click events.");
611
612                        $.plot(placeholder, data, {
613                                series: {
614                                        pie: { 
615                                                show: true
616                                        }
617                                },
618                                grid: {
619                                        hoverable: true,
620                                        clickable: true
621                                }
622                        });
623
624                        setCode([
625                                "$.plot('#placeholder', data, {",
626                                "    series: {",
627                                "        pie: {",
628                                "            show: true",
629                                "        }",
630                                "    },",
631                                "    grid: {",
632                                "        hoverable: true,",
633                                "        clickable: true",
634                                "    }",
635                                "});"
636                        ]);
637
638                        placeholder.bind("plothover", function(event, pos, obj) {
639
640                                if (!obj) {
641                                        return;
642                                }
643
644                                var percent = parseFloat(obj.series.percent).toFixed(2);
645                                $("#hover").html("<span style='font-weight:bold; color:" + obj.series.color + "'>" + obj.series.label + " (" + percent + "%)</span>");
646                        });
647
648                        placeholder.bind("plotclick", function(event, pos, obj) {
649
650                                if (!obj) {
651                                        return;
652                                }
653
654                                percent = parseFloat(obj.series.percent).toFixed(2);
655                                alert(""  + obj.series.label + ": " + percent + "%");
656                        });
657                });
658
659                // Show the initial default chart
660
661                $("#example-1").click();
662
663                // Add the Flot version string to the footer
664
665                $("#footer").prepend("Flot " + $.plot.version + " &ndash; ");
666        });
667
668        // A custom label formatter used by several of the plots
669
670        function labelFormatter(label, series) {
671                return "<div style='font-size:8pt; text-align:center; padding:2px; color:white;'>" + label + "<br/>" + Math.round(series.percent) + "%</div>";
672        }
673
674        //
675
676        function setCode(lines) {
677                $("#code").text(lines.join("\n"));
678        }
679
680        </script>
681</head>
682<body>
683
684        <div id="header">
685                <h2>Pie Charts</h2>
686        </div>
687
688        <div id="content">
689
690                <h3 id="title"></h3>
691                <div class="demo-container">
692                        <div id="placeholder" class="demo-placeholder"></div>
693                        <div id="menu">
694                                <button id="example-1">Default Options</button>
695                                <button id="example-2">Without Legend</button>
696                                <button id="example-3">Label Formatter</button>
697                                <button id="example-4">Label Radius</button>
698                                <button id="example-5">Label Styles #1</button>
699                                <button id="example-6">Label Styles #2</button>
700                                <button id="example-7">Hidden Labels</button>
701                                <button id="example-8">Combined Slice</button>
702                                <button id="example-9">Rectangular Pie</button>
703                                <button id="example-10">Tilted Pie</button>
704                                <button id="example-11">Donut Hole</button>
705                                <button id="example-12">Interactivity</button>
706                        </div>
707                </div>
708
709                <p id="description"></p>
710
711                <h3>Source Code</h3>
712                <pre><code id="code"></code></pre>
713
714                <br/>
715
716                <h2>Pie Options</h2>
717
718                <ul class="options">
719                        <li style="border-bottom: 1px dotted #ccc;"><b>option:</b> <i>default value</i> - Description of option</li>
720                        <li><b>show:</b> <i>false</i> - Enable the plugin and draw as a pie.</li>
721                        <li><b>radius:</b> <i>'auto'</i> - Sets the radius of the pie. If value is between 0 and 1 (inclusive) then it will use that as a percentage of the available space (size of the container), otherwise it will use the value as a direct pixel length. If set to 'auto', it will be set to 1 if the legend is enabled and 3/4 if not.</li>
722                        <li><b>innerRadius:</b> <i>0</i> - Sets the radius of the donut hole. If value is between 0 and 1 (inclusive) then it will use that as a percentage of the radius, otherwise it will use the value as a direct pixel length.</li>
723                        <li><b>startAngle:</b> <i>3/2</i> - Factor of PI used for the starting angle (in radians) It can range between 0 and 2 (where 0 and 2 have the same result).</li>
724                        <li><b>tilt:</b> <i>1</i> - Percentage of tilt ranging from 0 and 1, where 1 has no change (fully vertical) and 0 is completely flat (fully horizontal -- in which case nothing actually gets drawn).</li>
725                        <li><b>shadow:</b> <ul>
726                                <li><b>top:</b> <i>5</i> - Vertical distance in pixel of the tilted pie shadow.</li>
727                                <li><b>left:</b> <i>15</i> - Horizontal distance in pixel of the tilted pie shadow.</li>
728                                <li><b>alpha:</b> <i>0.02</i> - Alpha value of the tilted pie shadow.</li>
729                        </ul>
730                        <li><b>offset:</b> <ul>
731                                <li><b>top:</b> <i>0</i> - Pixel distance to move the pie up and down (relative to the center).</li>
732                                <li><b>left:</b> <i>'auto'</i> - Pixel distance to move the pie left and right (relative to the center).</li>
733                        </ul>
734                        <li><b>stroke:</b> <ul>
735                                <li><b>color:</b> <i>'#FFF'</i> - Color of the border of each slice. Hexadecimal color definitions are prefered (other formats may or may not work).</li>
736                                <li><b>width:</b> <i>1</i> - Pixel width of the border of each slice.</li>
737                        </ul>
738                        <li><b>label:</b> <ul>
739                                <li><b>show:</b> <i>'auto'</i> - Enable/Disable the labels. This can be set to true, false, or 'auto'. When set to 'auto', it will be set to false if the legend is enabled and true if not.</li>
740                                <li><b>radius:</b> <i>1</i> - Sets the radius at which to place the labels. If value is between 0 and 1 (inclusive) then it will use that as a percentage of the available space (size of the container), otherwise it will use the value as a direct pixel length.</li>
741                                <li><b>threshold:</b> <i>0</i> - Hides the labels of any pie slice that is smaller than the specified percentage (ranging from 0 to 1) i.e. a value of '0.03' will hide all slices 3% or less of the total.</li>
742                                <li><b>formatter:</b> <i>[function]</i> - This function specifies how the positioned labels should be formatted, and is applied after the legend's labelFormatter function. The labels can also still be styled using the class "pieLabel" (i.e. ".pieLabel" or "#graph1 .pieLabel").</li>
743                                <li><b>radius:</b> <i>1</i> - Sets the radius at which to place the labels. If value is between 0 and 1 (inclusive) then it will use that as a percentage of the available space (size of the container), otherwise it will use the value as a direct pixel length.</li>
744                                <li><b>background:</b> <ul>
745                                        <li><b>color:</b> <i>null</i> - Backgound color of the positioned labels. If null, the plugin will automatically use the color of the slice.</li>
746                                        <li><b>opacity:</b> <i>0</i> - Opacity of the background for the positioned labels. Acceptable values range from 0 to 1, where 0 is completely transparent and 1 is completely opaque.</li>
747                                </ul>
748                        </ul>
749                        <li><b>combine:</b> <ul>
750                                <li><b>threshold:</b> <i>0</i> - Combines all slices that are smaller than the specified percentage (ranging from 0 to 1) i.e. a value of '0.03' will combine all slices 3% or less into one slice).</li>
751                                <li><b>color:</b> <i>null</i> - Backgound color of the positioned labels. If null, the plugin will automatically use the color of the first slice to be combined.</li>
752                                <li><b>label:</b> <i>'Other'</i> - Label text for the combined slice.</li>
753                        </ul>
754                        <li><b>highlight:</b> <ul>
755                                <li><b>opacity:</b> <i>0.5</i> - Opacity of the highlight overlay on top of the current pie slice. Currently this just uses a white overlay, but support for changing the color of the overlay will also be added at a later date.
756                        </ul>
757                </ul>
758               
759                <h2>Changes/Features</h2>
760                <ul>
761                        <li style="list-style: none;"><i>v1.0 - November 20th, 2009 - Brian Medendorp</i></li>
762                        <li>The pie plug-in is now part of the Flot repository! This should make it a lot easier to deal with.</li>
763                        <li>Added a new option (innerRadius) to add a "donut hole" to the center of the pie, based on comtributions from Anthony Aragues. I was a little reluctant to add this feature because it doesn't work very well with the shadow created for the tilted pie, but figured it was worthwhile for non-tilted pies. Also, excanvas apparently doesn't support compositing, so it will fall back to using the stroke color to fill in the center (but I recommend setting the stroke color to the background color anyway).</li>
764                        <li>Changed the lineJoin for the border of the pie slices to use the 'round' option. This should make the center of the pie look better, particularly when there are numerous thin slices.</li>
765                        <li>Included a bug fix submitted by btburnett3 to display a slightly smaller slice in the event that the slice is 100% and being rendered with Internet Explorer. I haven't experienced this bug myself, but it doesn't seem to hurt anything so I've included it.</li>
766                        <li>The tilt value is now used when calculating the maximum radius of the pie in relation to the height of the container. This should prevent the pie from being smaller than it needed to in some cases, as well as reducing the amount of extra white space generated above and below the pie.</li>
767                        <li><b>Hover and Click functionality are now availabe!</b><ul>
768                                <li>Thanks to btburnett3 for the original hover functionality and Anthony Aragues for the modification that makes it compatable with excanvas, this was a huge help!</li>
769                                <li>Added a new option (highlight opacity) to modify the highlight created when mousing over a slice. Currently this just uses a white overlay, but an option to change the hightlight color will be added when the appropriate functionality becomes available.
770                                <li>I had a major setback that required me to practically rebuild the hover/click events from scratch one piece at a time (I discovered that it only worked with a single pie on a page at a time), but the end result ended up being virtually identical to the original, so I'm not quite sure what exactly made it work.</li>
771                                <li><span style="color: red;">Warning:</span> There are some minor issues with using this functionality in conjuction with some of the other more advanced features (tilt and donut). When using a donut hole, the inner portion still triggers the events even though that portion of the pie is no longer visible. When tilted, the interactive portions still use the original, untilted version of the pie when determining mouse position (this is because the isPointInPath function apparently doesn't work with transformations), however hover and click both work this way, so the appropriate slice is still highlighted when clicking, and it isn't as noticable of a problem.</li>
772                        </ul></li>
773                        <li>Included a bug fix submitted by Xavi Ivars to fix array issues when other javascript libraries are included in addition to jQuery</li>
774                        <br/>
775                        <li style="list-style: none;"><i>v0.4 - July 1st, 2009 - Brian Medendorp</i></li>
776                        <li>Each series will now be shown in the legend, even if it's value is zero. The series will not get a positioned label because it will overlap with the other labels present and often makes them unreadable.</li>
777                        <li>Data can now be passed in using the standard Flot method using an array of datapoints, the pie plugin will simply use the first y-value that it finds for each series in this case. The plugin uses this datastructure internally, but you can still use the old method of passing in a single numerical value for each series (the plugin will convert it as necessary). This should make it easier to transition from other types of graphs (such as a stacked bar graph) to a pie.</li>
778                        <li>The pie can now be tilted at an angle with a new "tilt" option. Acceptable values range from 0-1, where 1 has no change (fully vertical) and 0 is completely flat (fully horizontal -- in which case nothing actually gets drawn). If the plugin determines that it will fit within the canvas, a drop shadow will be drawn under the tilted pie (this also requires a tilt value of 0.8 or less).</li>
779                        <br/>
780                        <li style="list-style: none;"><i>v0.3.2 - June 25th, 2009 - Brian Medendorp</i></li>
781                        <li>Fixed a bug that was causing the pie to be shifted too far left or right when the legend is showing in some cases.</li>
782                        <br/>
783                        <li style="list-style: none;"><i>v0.3.1 - June 24th, 2009 - Brian Medendorp</i></li>
784                        <li>Fixed a bug that was causing nothing to be drawn and generating a javascript error if any of the data values were set to zero.</li>
785                        <br/>
786                        <li style="list-style: none;"><i>v0.3 - June 23rd, 2009 - Brian Medendorp</i></li>
787                        <li>The legend now works without any modifications! Because of changes made to flot and the plugin system (thanks Ole Laursen!) I was able to simplify a number of things and am now able to use the legend without the direct access hack that was required in the previous version.</li>
788                        <br/>
789                        <li style="list-style: none;"><i>v0.2 - June 22nd, 2009 - Brian Medendorp</i></li>
790                        <li>The legend now works but only if you make the necessary changes to jquery.flot.js. Because of this, I changed the default values for pie.radius and pie.label.show to new 'auto' settings that change the default behavior of the size and labels depending on whether the legend functionality is available or not.</li>
791                        <br/>
792                        <li style="list-style: none;"><i>v0.1 - June 18th, 2009 - Brian Medendorp</i></li>
793                        <li>Rewrote the entire pie code into a flot plugin (since that is now an option), so it should be much easier to use and the code is cleaned up a bit. However, the (standard flot) legend is no longer available because the only way to prevent the grid lines from being displayed also prevents the legend from being displayed. Hopefully this can be fixed at a later date.</li>
794                        <li>Restructured and combined some of the options. It should be much easier to deal with now.</li>
795                        <li>Added the ability to change the starting point of the pie (still defaults to the top).</li>
796                        <li>Modified the default options to show the labels to compensate for the lack of a legend.</li>
797                        <li>Modified this page to use a random dataset. <span style="color: red">Note: you may need to refresh the page to see the effects of some of the examples.</span></li>
798                        <br/>
799                        <li style="list-style: none;"><i>May 21st, 2009 - Brian Medendorp</i></li>
800                        <li>Merged original pie modifications by Sergey Nosenko into the latest SVN version <i>(as of May 15th, 2009)</i> so that it will work with ie8.</li>
801                        <li>Pie graph will now be centered in the canvas unless moved because of the legend or manually via the options. Additionally it prevents the pie from being moved beyond the edge of the canvas.</li>
802                        <li>Modified the code related to the labelFormatter option to apply flot's legend labelFormatter first. This is so that the labels will be consistent, but still provide extra formatting for the positioned labels (such as adding the percentage value).</li>
803                        <li>Positioned labels now have their backgrounds applied as a seperate element (much like the legend background) so that the opacity value can be set independently from the label itself (foreground). Additionally, the background color defaults to that of the matching slice.</li>
804                        <li>As long as the labelOffset and radiusLimit are not set to hard values, the pie will be shrunk if the labels will extend outside the edge of the canvas</li>
805                        <li>Added new options "radiusLimitFactor" and "radiusLimit" which limits how large the (visual) radius of the pie is in relation to the full radius (as calculated from the canvas dimensions) or a hard-pixel value (respectively). This allows for pushing the labels "outside" the pie.</li>
806                        <li>Added a new option "labelHidePercent" that does not show the positioned labels of slices smaller than the specified percentage. This is to help prevent a bunch of overlapping labels from small slices.</li>
807                        <li>Added a new option "sliceCombinePercent" that combines all slices smaller than the specified percentage into one larger slice. This is to help make the pie more attractive when there are a number of tiny slices. The options "sliceCombineColor" and "sliceCombineLabel" have also been added to change the color and name of the new slice if desired.</li>
808                        <li>Tested in Firefox (3.0.10, 3.5b4), Internet Explorer (6.0.2900, 7.0.5730, 8.0.6001), Chrome (1.0.154), Opera (9.64), and Safari (3.1.1, 4 beta 5528.16).
809                </ul>
810
811        </div>
812
813        <div id="footer">
814                Copyright &copy; 2007 - 2014 IOLA and Ole Laursen
815        </div>
816
817</body>
818</html>
Note: See TracBrowser for help on using the repository browser.