A gray Pie chart
Summary: A Pie chart using a gray theme and the roundRobin() animation effect. Here, the labels have the value of each segment added before they're assigned to the chart.
Here's a gray themed Pie chart. It's animated using the
roundRobin() effect, the
labels are bold and the text is slightly smaller than usual.
Initially the labels are simple strings that consist of operating system names (like this:
But these labels then have the relevant percentage that is being represented appended to them.
The labels are bold too. The font that the labels are rendered in is set to
Lucida Grande - though if this font is not on your system you may see the labels
The tooltips are created in the same way - just a little more verbosely. They're triggered
mouseover event. A default style is set on the tooltips - the
textAlignproperty is set to
left. This default style is set
on the tooltips as they're created and shown.
This goes in the documents header:
<script src="RGraph.common.core.js"></script> <script src="RGraph.common.dynamic.js"></script> <script src="RGraph.common.tooltips.js"></script> <script src="RGraph.pie.js"></script>Put this where you want the chart to show up:
<canvas id="cvs" width="550" height="300"> [No canvas support] </canvas>This is the code that generates the chart: