VertLine.ux

<ChartPage Title="Transposed X/Y axes" File="VertLine" ux:Class="VertLine" xmlns:c="Fuse.Charting">
	<JavaScript>
		var Observable = require("FuseJS/Observable")
		function Item( value, label ) {
			this.x = value
			this.label = label
		}
		exports.data = Observable( 
			new Item(1, "2012"),
			new Item(5, "2013"),
			new Item(2, "2014"),
			new Item(3, "2015"),
			new Item(3.5, "2016")
		);
	</JavaScript>
	<!-- This swaps the default role of the X/Y Axes, making Y the counter one and X the range. A very similar effect can be achieved by using `Orientation="Vertical"` instead, which is the recommended approach. This example is nonetheless kept for the odd situations where it might be better, or easier, to swap the axes. -->
	<c:Plot XAxisMetric="Range" YAxisMetric="Count">
		<c:DataSeries Data="{data}"/>

		<GridLayout Columns="20,1*,10,50" Rows="10,1*,20"/>
		
		<c:PlotTicks Row="0" Column="1" Axis="X" AxisLine="1" StrokeWidth="1" StrokeColor="#004"/>
		
		<c:PlotTicks Row="1" Column="0" Axis="Y" AxisLine="1" StrokeWidth="1" StrokeColor="#004"/>
		
		<Curve StrokeWidth="5" StrokeColor="#008">
			<Panel Alignment="TopLeft" Color="#AAA" Margin="5" Padding="5">
				<Text Value="{Plot count}"/>
			</Panel>
			
			<c:PlotData>
				<c:PlotCurvePoint/>
			</c:PlotData>
		</Curve>
		
		<c:PlotTicks Axis="Y" AxisLine="0" StrokeWidth="1" StrokeColor="#004"/>
		<c:PlotAxis Axis="Y" ContentPosition="Anchor">
			<Text ux:Template="Label" TextAlignment="Left" Anchor="0%,50%" Alignment="TopLeft"
				FontSize="15" Color="#000" Value="{Plot axis.label}" TransformOrigin="Anchor">
				<Rotation Degrees="15"/>
			</Text>
		</c:PlotAxis>
		
		<c:PlotTicks Row="2" Column="1" Axis="X" AxisLine="0" StrokeWidth="1" StrokeColor="#004"/>
	</c:Plot>
		
</ChartPage>