User avatar
sfernandez
Site Admin
Topic Author
Posts: 3107
Joined: 22 Dec 2011, 19:20

Line Chart

23 Jan 2014, 02:04

Simple xaml demonstrating noesisGUI capabilities to draw chart graphics.
chart.png
chart.png (13.69 KiB) Viewed 20894 times
<Grid
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"
  Background="Gainsboro">
	<Viewbox TextElement.Foreground="Gray" Margin="40">
		<StackPanel>
			<Grid>
				<TextBlock Text="Site Traffic" FontSize="12" FontWeight="Bold" HorizontalAlignment="Left" Margin="20,0,0,0"/>
				<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="0,0,20,0">
					<Rectangle Fill="LightSkyBlue" Width="12" Height="2"/>
					<TextBlock Text="Visits" FontSize="10" FontWeight="Bold" Margin="4,0,0,0"/>
					<Rectangle Fill="Tomato" Width="12" Height="2" Margin="14,0,0,0"/>
					<TextBlock Text="Unique Visits" FontSize="10" FontWeight="Bold" Margin="4,0,0,0"/>
				</StackPanel>
			</Grid>
			<Border Background="White" BorderBrush="Silver" BorderThickness="1" CornerRadius="2" Padding="10" Width="400" Margin="0,10,0,0">
				<Grid TextElement.FontSize="10">
					<Grid.ColumnDefinitions>
						<ColumnDefinition Width="Auto"/>
						<ColumnDefinition Width="*"/>
						<ColumnDefinition Width="*"/>
						<ColumnDefinition Width="*"/>
						<ColumnDefinition Width="*"/>
						<ColumnDefinition Width="*"/>
					</Grid.ColumnDefinitions>
					<Grid.RowDefinitions>
						<RowDefinition Height="*"/>
						<RowDefinition Height="*"/>
						<RowDefinition Height="*"/>
						<RowDefinition Height="14"/>
						<RowDefinition Height="*"/>
					</Grid.RowDefinitions>
					
					<!--Rectangle Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="5" Height="1" Fill="Gray" Margin="0,0,0,20"/-->
					<Path Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="5" Data="M0,0 L1,0" Stroke="Silver" StrokeDashArray="2 2" Stretch="Fill" Margin="0,7,0,0" VerticalAlignment="Top"/>
					<Path Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="5" Data="M0,0 L1,0" Stroke="Silver" StrokeDashArray="2 2" Stretch="Fill" Margin="0,7,0,0" VerticalAlignment="Top"/>
					<Path Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="5" Data="M0,0 L1,0" Stroke="Silver" StrokeDashArray="2 2" Stretch="Fill" Margin="0,7,0,0" VerticalAlignment="Top"/>
					<Rectangle Grid.Row="3" Grid.Column="1" Grid.ColumnSpan="5" Height="1" Fill="Silver" VerticalAlignment="Top" Margin="0,7,0,0"/>
					
					<!--Rectangle Grid.Row="3" Grid.ColumnSpan="6" Fill="#4000FF00"/-->
					
					<Path Grid.RowSpan="3" Grid.Column="1" Data="M0,0 L0,1" Stroke="Silver" Stretch="Fill" Margin="0,6,-0.5,-10" HorizontalAlignment="Right"/>
					<Path Grid.RowSpan="3" Grid.Column="2" Data="M0,0 L0,1" Stroke="Silver" Stretch="Fill" Margin="0,6,-0.5,-10" HorizontalAlignment="Right"/>
					<Path Grid.RowSpan="3" Grid.Column="3" Data="M0,0 L0,1" Stroke="Silver" Stretch="Fill" Margin="0,6,-0.5,-10" HorizontalAlignment="Right"/>
					<Path Grid.RowSpan="3" Grid.Column="4" Data="M0,0 L0,1" Stroke="Silver" Stretch="Fill" Margin="0,6,-0.5,-10" HorizontalAlignment="Right"/>
					<Grid Grid.RowSpan="4" Grid.Column="1" Grid.ColumnSpan="5" Height="100" Margin="0,0,0,7.5" VerticalAlignment="Bottom">
					
						<Path Data="M0,14 L5,18 10,26 15,21 20,24 25,16 30,14 35,20 40,30 45,18 50,14 50,5 45,7 40,4 35,6 30,8 25,6 20,5 15,8 10,9 5,8 0,9 Z M0,0" Fill="#1987CEFA" Stretch="Fill"
							Margin="0,4,0,0" RenderTransformOrigin="0.5,0.5">
							<Path.RenderTransform>
								<ScaleTransform ScaleY="-1"/>
							</Path.RenderTransform>
						</Path>
						<Path Data="M0,14 L5,18 10,26 15,21 20,24 25,16 30,14 35,20 40,30 45,18 50,14 M0,0" Stroke="LightSkyBlue" Stretch="Fill"
							Margin="0,4,0,0" RenderTransformOrigin="0.5,0.5">
							<Path.RenderTransform>
								<ScaleTransform ScaleY="-1"/>
							</Path.RenderTransform>
						</Path>
						<Grid Width="8" Height="8" HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="-4,0,0,42.5" d:LayoutOverrides="HorizontalAlignment">
							<Ellipse Fill="White" Stretch="Fill"/>
							<Ellipse Stroke="LightSkyBlue" Stretch="Fill" Margin="1"/>
						</Grid>
						<Grid Width="8" Height="8" HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="31,0,0,54.5" d:LayoutOverrides="HorizontalAlignment">
							<Ellipse Fill="White" Stretch="Fill"/>
							<Ellipse Stroke="LightSkyBlue" Stretch="Fill" Margin="1"/>
						</Grid>
						<Grid Width="8" Height="8" HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="65,0,0,79.5">
							<Ellipse Fill="White" Stretch="Fill"/>
							<Ellipse Stroke="LightSkyBlue" Stretch="Fill" Margin="1"/>
						</Grid>
						<Grid Width="8" Height="8" HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="100,0,0,63.5" d:LayoutOverrides="HorizontalAlignment">
							<Ellipse Fill="White" Stretch="Fill"/>
							<Ellipse Stroke="LightSkyBlue" Stretch="Fill" Margin="1"/>
						</Grid>
						<Grid Width="8" HorizontalAlignment="Left" Margin="134,0,0,54.5" Height="8">
							<Ellipse Fill="White" Stretch="Fill"/>
							<Ellipse Stroke="LightSkyBlue" Stretch="Fill" Margin="1"/>
						</Grid>
						<Grid Width="8" Height="8" HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="168,0,0,47.5">
							<Ellipse Fill="White" Stretch="Fill"/>
							<Ellipse Stroke="LightSkyBlue" Stretch="Fill" Margin="1"/>
						</Grid>
						<Grid Width="8" Height="8" HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="202,0,0,41.5">
							<Ellipse Fill="White" Stretch="Fill"/>
							<Ellipse Stroke="LightSkyBlue" Stretch="Fill" Margin="1"/>
						</Grid>
						<Grid Width="8" Height="8" HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="237,0,0,60.5">
							<Ellipse Fill="White" Stretch="Fill"/>
							<Ellipse Stroke="LightSkyBlue" Stretch="Fill" Margin="1"/>
						</Grid>
						<Grid Width="8" HorizontalAlignment="Left" Margin="271,-4,0,88.5" Height="8">
							<Ellipse Fill="White" Stretch="Fill"/>
							<Ellipse Stroke="LightSkyBlue" Stretch="Fill" Margin="1"/>
						</Grid>
						<Grid Width="8" Height="8" HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="306,0,0,53.5">
							<Ellipse Fill="White" Stretch="Fill"/>
							<Ellipse Stroke="LightSkyBlue" Stretch="Fill" Margin="1"/>
						</Grid>
						<Grid Width="8" HorizontalAlignment="Left" Margin="340,0,-4,-11.5" Height="8">
							<Ellipse Fill="White" Stretch="Fill"/>
							<Ellipse Stroke="LightSkyBlue" Stretch="Fill" Margin="1"/>
						</Grid>
					
					</Grid>
					
					<Grid Grid.RowSpan="4" Grid.Column="1" Grid.ColumnSpan="5" Height="35" Margin="0,0,0,7.5" VerticalAlignment="Bottom">
					
						<Path Data="M0,9 L5,8 10,9 15,8 20,5 25,6 30,8 35,6 40,4 45,7 50,5 50,0 0,0 Z" Fill="#0EFF6347" Stretch="Fill"
							Margin="0,4,0,0" RenderTransformOrigin="0.5,0.5">
							<Path.RenderTransform>
								<ScaleTransform ScaleY="-1"/>
							</Path.RenderTransform>
						</Path>
						<Path Data="M0,9 L5,8 10,9 15,8 20,5 25,6 30,8 35,6 40,4 45,7 50,5 M0,0" Stroke="Tomato" Stretch="Fill"
							Margin="0,4,0,0" RenderTransformOrigin="0.5,0.5">
							<Path.RenderTransform>
								<ScaleTransform ScaleY="-1"/>
							</Path.RenderTransform>
						</Path>
						<Grid Width="8" Height="8" HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="-4,0,0,26.5" d:LayoutOverrides="HorizontalAlignment">
							<Ellipse Fill="White" Stretch="Fill"/>
							<Ellipse Stroke="Tomato" Stretch="Fill" Margin="1"/>
						</Grid>
						<Grid Width="8" Height="8" HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="31,0,0,23.5" d:LayoutOverrides="HorizontalAlignment">
							<Ellipse Fill="White" Stretch="Fill"/>
							<Ellipse Stroke="Tomato" Stretch="Fill" Margin="1"/>
						</Grid>
						<Grid Width="8" Height="8" HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="64,0,0,26.5">
							<Ellipse Fill="White" Stretch="Fill"/>
							<Ellipse Stroke="Tomato" Stretch="Fill" Margin="1"/>
						</Grid>
						<Grid Width="8" Height="8" HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="100,0,0,23.5" d:LayoutOverrides="HorizontalAlignment">
							<Ellipse Fill="White" Stretch="Fill"/>
							<Ellipse Stroke="Tomato" Stretch="Fill" Margin="1"/>
						</Grid>
						<Grid Width="8" HorizontalAlignment="Left" Margin="134,13,0,13.5" Height="8">
							<Ellipse Fill="White" Stretch="Fill"/>
							<Ellipse Stroke="Tomato" Stretch="Fill" Margin="1"/>
						</Grid>
						<Grid Width="8" Height="8" HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="168,0,0,17.5">
							<Ellipse Fill="White" Stretch="Fill"/>
							<Ellipse Stroke="Tomato" Stretch="Fill" Margin="1"/>
						</Grid>
						<Grid Width="8" Height="8" HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="202,0,0,23.5">
							<Ellipse Fill="White" Stretch="Fill"/>
							<Ellipse Stroke="Tomato" Stretch="Fill" Margin="1"/>
						</Grid>
						<Grid Width="8" Height="8" HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="237,0,0,16.5">
							<Ellipse Fill="White" Stretch="Fill"/>
							<Ellipse Stroke="Tomato" Stretch="Fill" Margin="1"/>
						</Grid>
						<Grid Width="8" HorizontalAlignment="Left" Margin="271,16,0,10.5" Height="8">
							<Ellipse Fill="White" Stretch="Fill"/>
							<Ellipse Stroke="Tomato" Stretch="Fill" Margin="1"/>
						</Grid>
						<Grid Width="8" Height="8" HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="306,0,0,20.5">
							<Ellipse Fill="White" Stretch="Fill"/>
							<Ellipse Stroke="Tomato" Stretch="Fill" Margin="1"/>
						</Grid>
						<Grid Width="8" HorizontalAlignment="Left" Margin="340,13,-4,13.5" Height="8">
							<Ellipse Fill="White" Stretch="Fill"/>
							<Ellipse Stroke="Tomato" Stretch="Fill" Margin="1"/>
						</Grid>
					
					</Grid>
					
					<TextBlock Grid.Row="0" Text="1,500" HorizontalAlignment="Right" Margin="0,0,10,20"/>
					<TextBlock Grid.Row="1" Text="1,000" HorizontalAlignment="Right" Margin="0,0,10,20"/>
					<TextBlock Grid.Row="2" Text="500" HorizontalAlignment="Right" Margin="0,0,10,20"/>
					
					<TextBlock Grid.Column="1" Grid.Row="4" Text="27 May" HorizontalAlignment="Left"/>
					<TextBlock Grid.Column="2" Grid.Row="4" Text="29 May" HorizontalAlignment="Left"/>
					<TextBlock Grid.Column="3" Grid.Row="4" Text="31 May" HorizontalAlignment="Left"/>
					<TextBlock Grid.Column="4" Grid.Row="4" Text="02 Jun" HorizontalAlignment="Left"/>
					<TextBlock Grid.Column="5" Grid.Row="4" Text="04 Jun" HorizontalAlignment="Left"/>
					
				</Grid>
			</Border>
		</StackPanel>
	</Viewbox>
</Grid>
 
User avatar
stonstad
Posts: 244
Joined: 06 Jun 2016, 18:14
Location: Lesser Magellanic Cloud
Contact:

Re: Line Chart

02 Jul 2019, 23:25

Thank you! This is an elegant starting point!

Who is online

Users browsing this forum: No registered users and 5 guests