PieChart.ux

<ChartPage Title="Pie chart" File="PieChart" ux:Class="PieChart" xmlns:c="Fuse.Charting">
	<JavaScript>
		var Observable = require("FuseJS/Observable")
		function Item( y, z, label, color ) {
			this.y = y
			this.z = z
			this.label = label
			this.color = color
		}
		
		var names = [ "Vebjørn", "Annbjørg",  "Øystein", "Åslaug",  "Tormod", "Borghild" ]
		var colors = [ "#DEF", "#DFE", "#FDE", "#EDF", "#EFD", "#FED" ]
		exports.data1 = Observable()
		
		function create() {
			var list = []
			for (var i=0; i < names.length; ++i ) {
				var c = Math.random() * 100 + 10
				list.push( new Item( c, Math.random(), names[i], colors[i] ) )
			}
			return list
		}
		
		exports.random = function() {
			exports.data1.replaceAll( create() )
		}
		
		exports.random()
	</JavaScript>
	<AttractorConfig Unit="Normalized" Type="Elastic" ux:Global="pieAttract"/>	
	<ChartButton Alignment="TopRight" Margin="5" Clicked="{random}" Label="✧"/>
	<c:Plot Margin="5,20,20,10">
		<c:DataSeries Data="{data1}"/>
		
		<Panel BoxSizing="FillAspect" Margin="30">
			<c:PlotData>
				<c:PlotPoint Style="Radial" PointOffset="0.05" Attractor="pieAttract">
					<Text Value="{Plot data.label}"/>
				</c:PlotPoint>
			</c:PlotData>
			
			<VectorLayer HitTestMode="None">
				<c:PlotData>
					<!-- arcs to show Z-axis data -->
					<Panel Width="attract({Plot data.source.z},pieAttract) * 100%" 
						Height="attract({Plot data.source.z},pieAttract) * 100%">
						<Arc
							StartAngleDegrees="attract({Plot data.accumulatedWeight.y},pieAttract)*360" 
							EndAngleDegrees="attract({Plot data.cumulativeWeight.y},pieAttract)*360" 
							StrokeColor="#488" StrokeWidth="2"/>
					</Panel>
						
					<c:PlotWedge Color="{Plot data.object}.color" StrokeColor="#488" StrokeWidth="1"
						Attractor="pieAttract"/>
				</c:PlotData>
			</VectorLayer>
		</Panel>
		
	</c:Plot>
</ChartPage>