-
sfernandez
Site Admin
- Posts: 3154
- Joined:
Line Chart
Simple xaml demonstrating noesisGUI capabilities to draw chart graphics.
Code: Select all
<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>
Re: Line Chart
Thank you! This is an elegant starting point!
Who is online
Users browsing this forum: No registered users and 0 guests