项目结构调整

This commit is contained in:
艾竹
2023-04-16 20:11:40 +08:00
parent cbfbf96033
commit 81f91f3f35
2124 changed files with 218 additions and 5516 deletions

View File

@@ -0,0 +1,100 @@
<Application
x:Class="UWP.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
RequestedTheme="Light">
<Application.Resources>
<ResourceDictionary>
<!--Not working...-->
<!--<ResourceDictionary.MergedDictionaries>
--><!--Select colors set, options are material, metro, blue, white and black-->
<!--Material design colors--><!--
<ResourceDictionary Source="ms-appx:///LiveCharts.Uwp/Themes/Colors/material.xaml" />
--><!--Metro colors--><!--<ResourceDictionary Source="ms-appx:///LiveCharts.Uwp/Themes/Colors/metro.xaml" />-->
<!--Blue gradient--><!--<ResourceDictionary Source="ms-appx:///LiveCharts.Uwp/Themes/Colors/blue.xaml" />-->
<!--white gradient--><!--<ResourceDictionary Source="ms-appx:///LiveCharts.Uwp/Themes/Colors/white.xaml" />-->
<!--black gradient--><!--<ResourceDictionary Source="ms-appx:///LiveCharts.Uwp/Themes/Colors/black.xaml" />-->
<!--Select size, options are small, medium and large-->
<!--small--><!--<ResourceDictionary Source="ms-appx:///LiveCharts.Uwp/Themes/Size/s.xaml" />-->
<!--medium--><!--<ResourceDictionary Source="ms-appx:///LiveCharts.Uwp/Themes/Size/m.xaml" />
--><!--large--><!--<ResourceDictionary Source="ms-appx:///LiveCharts.Uwp/LiveCharts.Wpf;component/Themes/Size/l.xaml" />-->
<!--Select weight, options are light, normal and bold-->
<!--light--><!--<ResourceDictionary Source="ms-appx:///LiveCharts.Uwp/Themes/Weight/light.xaml" />-->
<!--normal--><!--<ResourceDictionary Source="ms-appx:///LiveCharts.Uwp/Themes/Weight/normal.xaml" />
--><!--bold--><!--<ResourceDictionary Source="ms-appx:///LiveCharts.Uwp/Themes/Weight/bold.xaml" />-->
<!--Also add the base theme, this is required always--><!--
<ResourceDictionary Source="ms-appx:///LiveCharts.Uwp/Themes/base.xaml" />
</ResourceDictionary.MergedDictionaries>-->
<ControlTemplate x:Key="SplitViewTogglePaneButtonTemplate" TargetType="Button">
<Grid x:Name="RootGrid" Background="{TemplateBinding Background}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="PointerOver">
<VisualState.Setters>
<Setter Target="RootGrid.Background" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}" />
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource SystemControlHighlightBaseMediumHighBrush}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Pressed">
<VisualState.Setters>
<Setter Target="RootGrid.Background" Value="{ThemeResource SystemControlBackgroundBaseMediumLowBrush}" />
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource SystemControlHighlightBaseMediumBrush}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Disabled">
<VisualState.Setters>
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource SystemControlForegroundBaseLowBrush}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter
x:Name="ContentPresenter"
Padding="{TemplateBinding Padding}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
AutomationProperties.AccessibilityView="Raw"
ContentTemplate="{TemplateBinding ContentTemplate}"
ContentTransitions="{TemplateBinding ContentTransitions}" />
</Grid>
</ControlTemplate>
<Style x:Key="SplitViewTogglePaneButtonStyle" TargetType="Button">
<Setter Property="Background" Value="Transparent" />
<Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}" />
<Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundBaseHighBrush}" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Padding" Value="0" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="UseSystemFocusVisuals" Value="True" />
<Setter Property="FontFamily" Value="{ThemeResource SymbolThemeFontFamily}" />
<Setter Property="Content" Value="&#xE700;" />
<Setter Property="Height" Value="48" />
<Setter Property="Width" Value="48" />
<Setter Property="FontWeight" Value="Normal" />
<Setter Property="FontSize" Value="20" />
<Setter Property="Template" Value="{StaticResource SplitViewTogglePaneButtonTemplate}" />
</Style>
</ResourceDictionary>
</Application.Resources>
</Application>

View File

@@ -0,0 +1,121 @@
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.ApplicationModel;
using Windows.ApplicationModel.Activation;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI;
using Windows.UI.ViewManagement;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
using UWP.Views;
namespace UWP
{
/// <summary>
/// Provides application-specific behavior to supplement the default Application class.
/// </summary>
sealed partial class App : Application
{
/// <summary>
/// Initializes the singleton application object. This is the first line of authored code
/// executed, and as such is the logical equivalent of main() or WinMain().
/// </summary>
public App()
{
this.InitializeComponent();
this.Suspending += OnSuspending;
}
/// <summary>
/// Invoked when the application is launched normally by the end user. Other entry points
/// will be used such as when the application is launched to open a specific file.
/// </summary>
/// <param name="e">Details about the launch request and process.</param>
protected override void OnLaunched(LaunchActivatedEventArgs e)
{
#if DEBUG
//if (System.Diagnostics.Debugger.IsAttached)
//{
// this.DebugSettings.EnableFrameRateCounter = true;
//}
#endif
// Darken the window title bar using a color value to match app theme
ApplicationViewTitleBar titleBar = ApplicationView.GetForCurrentView().TitleBar;
if (titleBar != null)
{
Color titleBarColor = (Color)App.Current.Resources["SystemChromeMediumColor"];
titleBar.BackgroundColor = titleBarColor;
titleBar.ButtonBackgroundColor = titleBarColor;
}
AppShell shell = Window.Current.Content as AppShell;
// Do not repeat app initialization when the Window already has content,
// just ensure that the window is active
if (shell == null)
{
// Create a Frame to act as the navigation context and navigate to the first page
shell = new AppShell();
// Set the default language
shell.Language = Windows.Globalization.ApplicationLanguages.Languages[0];
shell.ContentFrame.NavigationFailed += OnNavigationFailed;
if (e.PreviousExecutionState == ApplicationExecutionState.Terminated)
{
//TODO: Load state from previously suspended application
}
// Place the frame in the current Window
Window.Current.Content = shell;
}
if (e.PrelaunchActivated == false)
{
if (shell.ContentFrame.Content == null)
{
// When the navigation stack isn't restored navigate to the first page,
// configuring the new page by passing required information as a navigation
// parameter
shell.ContentFrame.Navigate(typeof(MainPage), e.Arguments);
}
// Ensure the current window is active
Window.Current.Activate();
}
}
/// <summary>
/// Invoked when Navigation to a certain page fails
/// </summary>
/// <param name="sender">The Frame which failed navigation</param>
/// <param name="e">Details about the navigation failure</param>
void OnNavigationFailed(object sender, NavigationFailedEventArgs e)
{
throw new Exception("Failed to load Page " + e.SourcePageType.FullName);
}
/// <summary>
/// Invoked when application execution is being suspended. Application state is saved
/// without knowing whether the application will be terminated or resumed with the contents
/// of memory still intact.
/// </summary>
/// <param name="sender">The source of the suspend request.</param>
/// <param name="e">Details about the suspend request.</param>
private void OnSuspending(object sender, SuspendingEventArgs e)
{
var deferral = e.SuspendingOperation.GetDeferral();
//TODO: Save application state and stop any background activity
deferral.Complete();
}
}
}

View File

@@ -0,0 +1,60 @@
<Page
x:Class="UWP.AppShell"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:UWP"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:commons="using:UWP.Commons"
mc:Ignorable="d" TabNavigation="Cycle">
<Page.Resources>
<CollectionViewSource x:Name="SampleViewSource" IsSourceGrouped="True"/>
</Page.Resources>
<Grid>
<SplitView x:Name="SamplesSplitView" DisplayMode="Overlay" x:FieldModifier="Public">
<SplitView.Pane>
<Grid>
<SemanticZoom>
<SemanticZoom.ZoomedInView>
<ListView x:Name="SampleList"
ItemsSource="{x:Bind SampleViewSource.View}"
IsItemClickEnabled="True" SelectionMode="None" ItemClick="SampleList_ItemClick">
<ListView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding Key}" FontSize="15" FontWeight="Bold" Foreground="#EC2471"/>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</ListView.GroupStyle>
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock Style="{ThemeResource BodyTextBlockStyle}" Text="{Binding Name}" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</SemanticZoom.ZoomedInView>
<SemanticZoom.ZoomedOutView>
<ListView ItemsSource="{x:Bind SampleViewSource.View.CollectionGroups}"
ScrollViewer.IsHorizontalScrollChainingEnabled="False" SelectionMode="None">
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Group.Key}" FontSize="15" FontWeight="Bold" Foreground="#EC2471"/>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</SemanticZoom.ZoomedOutView>
</SemanticZoom>
</Grid>
</SplitView.Pane>
<Grid>
<Frame x:Name="ContentFrame" x:FieldModifier="Public"/>
<Button Style="{StaticResource SplitViewTogglePaneButtonStyle}" Click="Button_Click"/>
</Grid>
</SplitView>
</Grid>
</Page>

View File

@@ -0,0 +1,38 @@
using System;
using System.Collections.Generic;
using System.Linq;
using Windows.Foundation;
using Windows.UI.Core;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Automation;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Navigation;
using UWP.Commons;
namespace UWP
{
public sealed partial class AppShell : Page
{
public AppShell()
{
this.InitializeComponent();
SampleViewSource.Source = SampleDefinitions.Definitions.GroupBy(x => x.Category);
}
private void SampleList_ItemClick(Object sender, ItemClickEventArgs e)
{
var definition = e.ClickedItem as SampleDefinition;
if (definition != null)
{
this.ContentFrame.Navigate(definition.Type);
SamplesSplitView.IsPaneOpen = false;
}
}
private void Button_Click(Object sender, RoutedEventArgs e)
{
SamplesSplitView.IsPaneOpen = !SamplesSplitView.IsPaneOpen;
}
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 KiB

View File

@@ -0,0 +1,21 @@
<Page
x:Class="UWP.CartesianChart.Basic_Bars.BasicColumn"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:UWP.CartesianChart.Basic_Bars"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:lvc="using:LiveCharts.Uwp"
mc:Ignorable="d" d:DataContext="{d:DesignInstance local:BasicColumn}">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<lvc:CartesianChart Series="{x:Bind SeriesCollection}" LegendLocation="Left">
<lvc:CartesianChart.AxisX>
<lvc:Axis Title="Salesman" Labels="{x:Bind Labels}"/>
</lvc:CartesianChart.AxisX>
<lvc:CartesianChart.AxisY>
<lvc:Axis Title="Sold Apps" LabelFormatter="{x:Bind Formatter}"/>
</lvc:CartesianChart.AxisY>
</lvc:CartesianChart>
</Grid>
</Page>

View File

@@ -0,0 +1,48 @@
using System;
using Windows.UI.Xaml.Controls;
using LiveCharts;
using LiveCharts.Uwp;
// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238
namespace UWP.CartesianChart.Basic_Bars
{
/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
public sealed partial class BasicColumn : Page
{
public BasicColumn()
{
InitializeComponent();
SeriesCollection = new SeriesCollection
{
new ColumnSeries
{
Title = "2015",
Values = new ChartValues<double> { 10, 50, 39, 50 }
}
};
//adding series will update and animate the chart automatically
SeriesCollection.Add(new ColumnSeries
{
Title = "2016",
Values = new ChartValues<double> { 11, 56, 42 }
});
//also adding values updates and animates the chart automatically
SeriesCollection[1].Values.Add(48d);
Labels = new[] { "Maria", "Susan", "Charles", "Frida" };
Formatter = value => value.ToString("N");
DataContext = this;
}
public SeriesCollection SeriesCollection { get; set; }
public string[] Labels { get; set; }
public Func<double, string> Formatter { get; set; }
}
}

View File

@@ -0,0 +1,24 @@
<Page
x:Class="UWP.CartesianChart.Basic_Bars.BasicRowExample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:UWP.CartesianChart.Basic_Bars"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:lvc="using:LiveCharts.Uwp"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<lvc:CartesianChart Series="{x:Bind SeriesCollection}" LegendLocation="Bottom">
<lvc:CartesianChart.AxisX>
<lvc:Axis Title="Salesman" LabelFormatter="{x:Bind Formatter}"></lvc:Axis>
</lvc:CartesianChart.AxisX>
<lvc:CartesianChart.AxisY>
<lvc:Axis Title="Sold Apps" Labels="{x:Bind Labels}"></lvc:Axis>
</lvc:CartesianChart.AxisY>
<lvc:CartesianChart.DataTooltip>
<lvc:DefaultTooltip SelectionMode="SharedYValues"></lvc:DefaultTooltip>
</lvc:CartesianChart.DataTooltip>
</lvc:CartesianChart>
</Grid>
</Page>

View File

@@ -0,0 +1,46 @@
using LiveCharts;
using LiveCharts.Uwp;
using System;
using Windows.UI.Xaml.Controls;
// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238
namespace UWP.CartesianChart.Basic_Bars
{
/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
public sealed partial class BasicRowExample : Page
{
public BasicRowExample()
{
InitializeComponent();
SeriesCollection = new SeriesCollection
{
new RowSeries
{
Title = "2015",
Values = new ChartValues<double> { 10, 50, 39, 50 }
}
};
//adding series will update and animate the chart automatically
SeriesCollection.Add(new RowSeries
{
Title = "2016",
Values = new ChartValues<double> { 11, 56, 42 }
});
//also adding values updates and animates the chart automatically
SeriesCollection[1].Values.Add(48d);
Labels = new[] { "Maria", "Susan", "Charles", "Frida" };
Formatter = value => value.ToString("N");
}
public SeriesCollection SeriesCollection { get; set; }
public string[] Labels { get; set; }
public Func<double, string> Formatter { get; set; }
}
}

View File

@@ -0,0 +1,23 @@
<Page
x:Class="UWP.CartesianChart.Basic_Stacked_Bar.BasicStackedColumnExample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:UWP.CartesianChart.Basic_Stacked_Bar"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:uwp="using:LiveCharts.Uwp"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<uwp:CartesianChart Series="{x:Bind SeriesCollection}" LegendLocation="Bottom">
<uwp:CartesianChart.AxisX>
<uwp:Axis Title="Browser"
Labels="{x:Bind Labels}"
Separator="{x:Bind CleanSeparator}" />
</uwp:CartesianChart.AxisX>
<uwp:CartesianChart.AxisY>
<uwp:Axis Title="Usage" LabelFormatter="{x:Bind Formatter}"></uwp:Axis>
</uwp:CartesianChart.AxisY>
</uwp:CartesianChart>
</Grid>
</Page>

View File

@@ -0,0 +1,58 @@
using System;
using Windows.UI.Xaml.Controls;
// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238
namespace UWP.CartesianChart.Basic_Stacked_Bar
{
using LiveCharts;
using LiveCharts.Uwp;
/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
public sealed partial class BasicStackedColumnExample : Page
{
public BasicStackedColumnExample()
{
InitializeComponent();
SeriesCollection = new SeriesCollection
{
new StackedColumnSeries
{
Values = new ChartValues<double> {4, 5, 6, 8},
StackMode = StackMode.Values, // this is not necessary, values is the default stack mode
DataLabels = true
},
new StackedColumnSeries
{
Values = new ChartValues<double> {2, 5, 6, 7},
StackMode = StackMode.Values,
DataLabels = true
}
};
//adding series updates and animates the chart
SeriesCollection.Add(new StackedColumnSeries
{
Values = new ChartValues<double> { 6, 2, 7 },
StackMode = StackMode.Values
});
//adding values also updates and animates
SeriesCollection[2].Values.Add(4d);
Labels = new[] { "Chrome", "Mozilla", "Opera", "IE" };
Formatter = value => value + " Mill";
this.CleanSeparator = DefaultAxes.CleanSeparator;
}
public Separator CleanSeparator;
public SeriesCollection SeriesCollection { get; set; }
public string[] Labels { get; set; }
public Func<double, string> Formatter { get; set; }
}
}

View File

@@ -0,0 +1,21 @@
<Page
x:Class="UWP.CartesianChart.Basic_Stacked_Bar.BasicStackedRowPercentageExample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:UWP.CartesianChart.Basic_Stacked_Bar"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:uwp="using:LiveCharts.Uwp"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<uwp:CartesianChart Series="{x:Bind SeriesCollection}" LegendLocation="Top" DataTooltip="{x:Bind Tooltip}">
<uwp:CartesianChart.AxisY>
<uwp:Axis Title="Browser" Labels="{x:Bind Labels}" />
</uwp:CartesianChart.AxisY>
<uwp:CartesianChart.AxisX>
<uwp:Axis LabelFormatter="{x:Bind Formatter}" />
</uwp:CartesianChart.AxisX>
</uwp:CartesianChart>
</Grid>
</Page>

View File

@@ -0,0 +1,62 @@
using System;
using Windows.UI.Xaml.Controls;
// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238
namespace UWP.CartesianChart.Basic_Stacked_Bar
{
using LiveCharts;
using LiveCharts.Uwp;
/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
public sealed partial class BasicStackedRowPercentageExample : Page
{
public BasicStackedRowPercentageExample()
{
InitializeComponent();
SeriesCollection = new SeriesCollection
{
new StackedRowSeries
{
Values = new ChartValues<double> {4, 5, 6, 8},
StackMode = StackMode.Percentage,
DataLabels = true,
LabelPoint = p => p.X.ToString()
},
new StackedRowSeries
{
Values = new ChartValues<double> {2, 5, 6, 7},
StackMode = StackMode.Percentage,
DataLabels = true,
LabelPoint = p => p.X.ToString()
}
};
//adding series updates and animates the chart
SeriesCollection.Add(new StackedRowSeries
{
Values = new ChartValues<double> { 6, 2, 7 },
StackMode = StackMode.Percentage,
DataLabels = true,
LabelPoint = p => p.X.ToString()
});
//adding values also updates and animates
SeriesCollection[2].Values.Add(4d);
Labels = new[] { "Chrome", "Mozilla", "Opera", "IE" };
Formatter = val => val.ToString("P");
this.Tooltip = new DefaultTooltip() { SelectionMode = TooltipSelectionMode.SharedYValues };
}
public UserControl Tooltip;
public SeriesCollection SeriesCollection { get; set; }
public string[] Labels { get; set; }
public Func<double, string> Formatter { get; set; }
}
}

View File

@@ -0,0 +1,21 @@
<Page
x:Class="UWP.CartesianChart.BasicLine.BasicLineExample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:UWP.CartesianChart.BasicLine"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:lvc="using:LiveCharts.Uwp"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<lvc:CartesianChart Series="{Binding SeriesCollection}" LegendLocation="Right" >
<lvc:CartesianChart.AxisY>
<lvc:Axis Title="Sales" LabelFormatter="{Binding YFormatter}"></lvc:Axis>
</lvc:CartesianChart.AxisY>
<lvc:CartesianChart.AxisX>
<lvc:Axis Title="Month" Labels="{Binding Labels}"></lvc:Axis>
</lvc:CartesianChart.AxisX>
</lvc:CartesianChart>
</Grid>
</Page>

View File

@@ -0,0 +1,67 @@
using LiveCharts;
using LiveCharts.Uwp;
using System;
using Windows.UI;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media;
// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238
namespace UWP.CartesianChart.BasicLine
{
/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
public sealed partial class BasicLineExample : Page
{
public BasicLineExample()
{
this.InitializeComponent();
SeriesCollection = new SeriesCollection
{
new LineSeries
{
Title = "Series 1",
Values = new ChartValues<double> { 4, 6, 5, 2 ,4 }
},
new LineSeries
{
Title = "Series 2",
Values = new ChartValues<double> { 6, 7, 3, 4 ,6 },
PointGeometry = DefaultGeometries.None
},
new LineSeries
{
Title = "Series 3",
Values = new ChartValues<double> { 4,2,7,2,7 },
PointGeometry = DefaultGeometries.Square,
PointGeometrySize = 15
}
};
Labels = new[] { "Jan", "Feb", "Mar", "Apr", "May" };
YFormatter = value => value.ToString("C");
//modifying the series collection will animate and update the chart
SeriesCollection.Add(new LineSeries
{
Title = "Series 4",
Values = new ChartValues<double> { 5, 3, 2, 4 },
LineSmoothness = 0, //0: straight lines, 1: really smooth lines
PointGeometry = new PointGeometry("m0,50 l25,30 l60,-80 l-60 60z"),
PointGeometrySize = 50,
PointForeround = new SolidColorBrush(Colors.Gray)
});
//modifying any series values will also animate and update the chart
SeriesCollection[3].Values.Add(5d);
DataContext = this;
}
public SeriesCollection SeriesCollection { get; set; }
public string[] Labels { get; set; }
public Func<double, string> YFormatter { get; set; }
}
}

View File

@@ -0,0 +1,22 @@
<Page
x:Class="UWP.CartesianChart.Bubbles.BubblesExample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:UWP.CartesianChart.Bubbles"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:lvc="using:LiveCharts.Uwp"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Button Grid.Row="0" Height="30" Click="UpdateAllOnClick" HorizontalAlignment="Stretch">
Move All
</Button>
<lvc:CartesianChart Grid.Row="1" Series="{Binding SeriesCollection}"/>
</Grid>
</Page>

View File

@@ -0,0 +1,71 @@
using LiveCharts;
using LiveCharts.Defaults;
using LiveCharts.Uwp;
using System;
using System.Linq;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238
namespace UWP.CartesianChart.Bubbles
{
/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
public sealed partial class BubblesExample : Page
{
public BubblesExample()
{
InitializeComponent();
SeriesCollection = new SeriesCollection
{
new ScatterSeries
{
Values = new ChartValues<ScatterPoint>
{
new ScatterPoint(5, 5, 20),
new ScatterPoint(3, 4, 80),
new ScatterPoint(7, 2, 20),
new ScatterPoint(2, 6, 60),
new ScatterPoint(8, 2, 70)
},
MinPointShapeDiameter = 15,
MaxPointShapeDiameter = 45
},
new ScatterSeries
{
Values = new ChartValues<ScatterPoint>
{
new ScatterPoint(7, 5, 1),
new ScatterPoint(2, 2, 1),
new ScatterPoint(1, 1, 1),
new ScatterPoint(6, 3, 1),
new ScatterPoint(8, 8, 1)
},
PointGeometry = DefaultGeometries.Triangle,
MinPointShapeDiameter = 15,
MaxPointShapeDiameter = 45
}
};
DataContext = this;
}
public SeriesCollection SeriesCollection { get; set; }
private void UpdateAllOnClick(object sender, RoutedEventArgs e)
{
var r = new Random();
foreach (var series in SeriesCollection)
{
foreach (var bubble in series.Values.Cast<ScatterPoint>())
{
bubble.X = r.NextDouble() * 10;
bubble.Y = r.NextDouble() * 10;
bubble.Weight = r.NextDouble() * 10;
}
}
}
}
}

View File

@@ -0,0 +1,12 @@
<UserControl x:Class="Wpf.CartesianChart.Chart_to_Image.ChartToImageSample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:Wpf.CartesianChart.Chart_to_Image"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<Grid>
<Button Click="BuildPngOnClick">Build Png</Button>
</Grid>
</UserControl>

View File

@@ -0,0 +1,64 @@
using System.IO;
using Windows.Foundation;
using Windows.Graphics.Imaging;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media.Imaging;
using LiveCharts;
using LiveCharts.Uwp;
namespace Wpf.CartesianChart.Chart_to_Image
{
/// <summary>
/// Interaction logic for ChartToImageSample.xaml
/// </summary>
public partial class ChartToImageSample : UserControl
{
public ChartToImageSample()
{
InitializeComponent();
}
private void BuildPngOnClick(object sender, RoutedEventArgs e)
{
var myChart = new LiveCharts.Uwp.CartesianChart
{
DisableAnimations = true,
Width = 600,
Height = 200,
Series = new SeriesCollection
{
new LineSeries
{
Values = new ChartValues<double> {1, 6, 7, 2, 9, 3, 6, 5}
}
}
};
var viewbox = new Viewbox();
viewbox.Child = myChart;
viewbox.Measure(myChart.RenderSize);
viewbox.Arrange(new Rect(new Point(0, 0), myChart.RenderSize));
myChart.Update(true, true); //force chart redraw
viewbox.UpdateLayout();
//SaveToPng(myChart, "chart.png");
//png file was created at the root directory.
}
//private void SaveToPng(FrameworkElement visual, string fileName)
//{
// var encoder = new PngBitmapEncoder();
// EncodeVisual(visual, fileName, encoder);
//}
//private static void EncodeVisual(FrameworkElement visual, string fileName, BitmapEncoder encoder)
//{
// var bitmap = new RenderTargetBitmap((int)visual.ActualWidth, (int)visual.ActualHeight, 96, 96, PixelFormats.Pbgra32);
// bitmap.Render(visual);
// var frame = BitmapFrame.Create(bitmap);
// encoder.Frames.Add(frame);
// using (var stream = File.Create(fileName)) encoder.Save(stream);
//}
}
}

View File

@@ -0,0 +1,35 @@
<Page
x:Class="UWP.CartesianChart.ConstantChanges.ConstantChangesChart"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:UWP.CartesianChart.ConstantChanges"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:lvc="using:LiveCharts.Uwp"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Button Grid.Row="0" Height="30" Click="RunDataOnClick" HorizontalAlignment="Stretch">
Inject/Stop Data
</Button>
<lvc:CartesianChart Grid.Row="1">
<lvc:CartesianChart.Series>
<lvc:LineSeries Values="{Binding ChartValues}" PointGeometrySize="18" StrokeThickness="4" />
</lvc:CartesianChart.Series>
<lvc:CartesianChart.AxisX>
<lvc:Axis LabelFormatter="{Binding DateTimeFormatter}"
MaxValue="{Binding AxisMax}"
MinValue="{Binding AxisMin}"
DisableAnimations="True">
<lvc:Axis.Separator>
<lvc:Separator Step="{Binding AxisStep}"></lvc:Separator>
</lvc:Axis.Separator>
</lvc:Axis>
</lvc:CartesianChart.AxisX>
</lvc:CartesianChart>
</Grid>
</Page>

View File

@@ -0,0 +1,135 @@
using LiveCharts;
using LiveCharts.Configurations;
using System;
using System.ComponentModel;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238
namespace UWP.CartesianChart.ConstantChanges
{
/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
public sealed partial class ConstantChangesChart : Page, INotifyPropertyChanged
{
private double _axisMax;
private double _axisMin;
public ConstantChangesChart()
{
InitializeComponent();
//To handle live data easily, in this case we built a specialized type
//the MeasureModel class, it only contains 2 properties
//DateTime and Value
//We need to configure LiveCharts to handle MeasureModel class
//The next code configures MEasureModel globally, this means
//that livecharts learns to plot MeasureModel and will use this config every time
//a ChartValues instance uses this type.
//this code ideally should only run once, when application starts is reccomended.
//you can configure series in many ways, learn more at http://lvcharts.net/App/examples/v1/wpf/Types%20and%20Configuration
var mapper = Mappers.Xy<MeasureModel>()
.X(model => model.DateTime.Ticks) //use DateTime.Ticks as X
.Y(model => model.Value); //use the value property as Y
//lets save the mapper globally.
Charting.For<MeasureModel>(mapper);
//the values property will store our values array
ChartValues = new ChartValues<MeasureModel>();
//lets set how to display the X Labels
DateTimeFormatter = value => new DateTime((long)(value)).ToString("mm:ss");
AxisStep = TimeSpan.FromSeconds(1).Ticks;
SetAxisLimits(DateTime.Now);
//The next code simulates data changes every 300 ms
Timer = new DispatcherTimer
{
Interval = TimeSpan.FromMilliseconds(300)
};
Timer.Tick += TimerOnTick;
IsDataInjectionRunning = false;
R = new Random();
DataContext = this;
}
public ChartValues<MeasureModel> ChartValues { get; set; }
public Func<double, string> DateTimeFormatter { get; set; }
public double AxisStep { get; set; }
public double AxisMax
{
get { return _axisMax; }
set
{
_axisMax = value;
OnPropertyChanged("AxisMax");
}
}
public double AxisMin
{
get { return _axisMin; }
set
{
_axisMin = value;
OnPropertyChanged("AxisMin");
}
}
public DispatcherTimer Timer { get; set; }
public bool IsDataInjectionRunning { get; set; }
public Random R { get; set; }
private void RunDataOnClick(object sender, RoutedEventArgs e)
{
if (IsDataInjectionRunning)
{
Timer.Stop();
IsDataInjectionRunning = false;
}
else
{
Timer.Start();
IsDataInjectionRunning = true;
}
}
private void TimerOnTick(object sender, object eventArgs)
{
var now = DateTime.Now;
ChartValues.Add(new MeasureModel
{
DateTime = now,
Value = R.Next(0, 10)
});
SetAxisLimits(now);
//lets only use the last 30 values
if (ChartValues.Count > 30) ChartValues.RemoveAt(0);
}
private void SetAxisLimits(DateTime now)
{
AxisMax = now.Ticks + TimeSpan.FromSeconds(1).Ticks; // lets force the axis to be 100ms ahead
AxisMin = now.Ticks - TimeSpan.FromSeconds(8).Ticks; //we only care about the last 8 seconds
}
public event PropertyChangedEventHandler PropertyChanged;
public void OnPropertyChanged(string propertyName = null)
{
if (PropertyChanged != null)
PropertyChanged.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
}

View File

@@ -0,0 +1,10 @@
using System;
namespace UWP.CartesianChart.ConstantChanges
{
public class MeasureModel
{
public DateTime DateTime { get; set; }
public double Value { get; set; }
}
}

View File

@@ -0,0 +1,31 @@
<Page
x:Class="UWP.CartesianChart.CustomTooltipAndLegend.CustomTooltipAndLegendExample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:UWP.CartesianChart.CustomTooltipAndLegend"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:lvc="using:LiveCharts.Uwp"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<lvc:CartesianChart LegendLocation="Right">
<lvc:CartesianChart.Series>
<lvc:ColumnSeries Title="2016 Customers" Values="{Binding Customers}"/>
</lvc:CartesianChart.Series>
<lvc:CartesianChart.AxisX >
<lvc:Axis Labels="{Binding Labels}" LabelsRotation="-15">
<lvc:Axis.Separator>
<lvc:Separator Step="1"/>
</lvc:Axis.Separator>
</lvc:Axis>
</lvc:CartesianChart.AxisX>
<lvc:CartesianChart.DataTooltip>
<local:CustomersTooltip/>
</lvc:CartesianChart.DataTooltip>
<lvc:CartesianChart.ChartLegend>
<local:CustomersLegend/>
</lvc:CartesianChart.ChartLegend>
</lvc:CartesianChart>
</Grid>
</Page>

View File

@@ -0,0 +1,73 @@
using LiveCharts;
using LiveCharts.Configurations;
using Windows.UI.Xaml.Controls;
// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238
namespace UWP.CartesianChart.CustomTooltipAndLegend
{
/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
public sealed partial class CustomTooltipAndLegendExample : Page
{
public CustomTooltipAndLegendExample()
{
InitializeComponent();
Customers = new ChartValues<CustomerVm>
{
new CustomerVm
{
Name = "Irvin",
LastName = "Hale",
Phone = 123456789,
PurchasedItems = 8
},
new CustomerVm
{
Name = "Malcolm",
LastName = "Revees",
Phone = 098765432,
PurchasedItems = 3
},
new CustomerVm
{
Name = "Anne",
LastName = "Rios",
Phone = 758294026,
PurchasedItems = 6
},
new CustomerVm
{
Name = "Vivian",
LastName = "Howell",
Phone = 309382739,
PurchasedItems = 3
},
new CustomerVm
{
Name = "Caleb",
LastName = "Roy",
Phone = 682902826,
PurchasedItems = 2
}
};
Labels = new[] { "Irvin", "Malcolm", "Anne", "Vivian", "Caleb" };
//let create a mapper so LiveCharts know how to plot our CustomerViewModel class
var customerVmMapper = Mappers.Xy<CustomerVm>()
.X((value, index) => index) // lets use the position of the item as X
.Y(value => value.PurchasedItems); //and PurchasedItems property as Y
//lets save the mapper globally
Charting.For<CustomerVm>(customerVmMapper);
DataContext = this;
}
public ChartValues<CustomerVm> Customers { get; set; }
public string[] Labels { get; set; }
}
}

View File

@@ -0,0 +1,10 @@
namespace UWP.CartesianChart.CustomTooltipAndLegend
{
public class CustomerVm
{
public string Name { get; set; }
public string LastName { get; set; }
public int Phone { get; set; }
public int PurchasedItems { get; set; }
}
}

View File

@@ -0,0 +1,30 @@
<UserControl
x:Class="UWP.CartesianChart.CustomTooltipAndLegend.CustomersLegend"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:UWP.CartesianChart.CustomTooltipAndLegend"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:lvc="using:LiveCharts.Uwp"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400"
>
<Grid Background="#555555" BorderThickness="2" Padding="20 10" BorderBrush="AntiqueWhite">
<ItemsControl ItemsSource="{x:Bind Series}">
<ItemsControl.ItemTemplate>
<DataTemplate x:DataType="lvc:SeriesViewModel">
<Grid Margin="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Rectangle Grid.Column="0" Stroke="{Binding Stroke}" Fill="{Binding Fill}"
Width="15" Height="15"/>
<TextBlock Grid.Column="1" Margin="4 0" Text="{Binding Title}" Foreground="White" VerticalAlignment="Center" />
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
</UserControl>

View File

@@ -0,0 +1,39 @@
using LiveCharts.Uwp;
using System.Collections.Generic;
using System.ComponentModel;
using Windows.UI.Xaml.Controls;
// The User Control item template is documented at http://go.microsoft.com/fwlink/?LinkId=234236
namespace UWP.CartesianChart.CustomTooltipAndLegend
{
public sealed partial class CustomersLegend : UserControl, IChartLegend
{
private List<SeriesViewModel> _series;
public CustomersLegend()
{
InitializeComponent();
DataContext = this;
}
public List<SeriesViewModel> Series
{
get { return _series; }
set
{
_series = value;
OnPropertyChanged("Series");
}
}
public event PropertyChangedEventHandler PropertyChanged;
public void OnPropertyChanged(string propertyName = null)
{
if (PropertyChanged != null)
PropertyChanged.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
}

View File

@@ -0,0 +1,45 @@
<UserControl
x:Class="UWP.CartesianChart.CustomTooltipAndLegend.CustomersTooltip"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:UWP.CartesianChart.CustomTooltipAndLegend"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:lvc="using:LiveCharts.Uwp"
xmlns:converter="using:LiveCharts.Uwp.Converters"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400"
>
<Grid Background="#E4555555" Padding="20 10" BorderThickness="2" BorderBrush="#555555">
<Grid.Resources>
<converter:StringFormatConverter x:Key="StringFormatConverter"/>
</Grid.Resources>
<ItemsControl ItemsSource="{Binding Data.Points}">
<ItemsControl.ItemTemplate>
<DataTemplate x:DataType="lvc:DataPointViewModel">
<Grid Margin="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Rectangle Grid.Column="0" Stroke="{Binding Series.Stroke}" Fill="{Binding Series.Fill}"
Height="15" Width="15"/>
<TextBlock Grid.Column="1" Text="{Binding ChartPoint.Instance.Name}"
Margin="5 0 0 0" VerticalAlignment="Center" Foreground="White"/>
<TextBlock Grid.Column="2" Text="{Binding ChartPoint.Instance.LastName}"
Margin="5 0 0 0" VerticalAlignment="Center" Foreground="White"/>
<TextBlock Grid.Column="3" Text="{Binding ChartPoint.Instance.Phone, Converter={StaticResource StringFormatConverter}, ConverterParameter=Phone: \{0\}}"
Margin="5 0 0 0" VerticalAlignment="Center" Foreground="White"/>
<TextBlock Grid.Column="4" Text="{Binding ChartPoint.Instance.PurchasedItems, Converter={StaticResource StringFormatConverter}, ConverterParameter=Purchased Items: \{0:N\}}"
Margin="5 0 0 0" VerticalAlignment="Center" Foreground="White"/>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
</UserControl>

View File

@@ -0,0 +1,44 @@
using LiveCharts;
using LiveCharts.Uwp;
using System.ComponentModel;
using Windows.UI.Xaml.Controls;
// The User Control item template is documented at http://go.microsoft.com/fwlink/?LinkId=234236
namespace UWP.CartesianChart.CustomTooltipAndLegend
{
public sealed partial class CustomersTooltip : IChartTooltip
{
private TooltipData _data;
public CustomersTooltip()
{
InitializeComponent();
//LiveCharts will inject the tooltip data in the Data property
//your job is only to display this data as required
DataContext = this;
}
public event PropertyChangedEventHandler PropertyChanged;
public TooltipData Data
{
get { return _data; }
set
{
_data = value;
OnPropertyChanged("Data");
}
}
public TooltipSelectionMode SelectionMode { get; set; }
public void OnPropertyChanged(string propertyName = null)
{
if (PropertyChanged != null)
PropertyChanged.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
}

View File

@@ -0,0 +1,62 @@
<Page
x:Class="UWP.CartesianChart.Customized_Series.CustomizedLineSeries"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:UWP.CartesianChart.Customized_Series"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:lvc="using:LiveCharts.Uwp"
mc:Ignorable="d"
>
<Grid Background="#303030">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Button Grid.Row="0" Margin="20" Click="MoveOnClick">Move</Button>
<lvc:CartesianChart Grid.Row="2" Background="#222E31">
<lvc:CartesianChart.Series>
<lvc:LineSeries Values="{Binding Values1}" StrokeThickness="4" StrokeDashArray="2"
Stroke="#6BBA45" Fill="Transparent" LineSmoothness="0" PointGeometrySize="20"
PointForeround="#6BBA45">
</lvc:LineSeries>
<lvc:LineSeries Values="{Binding Values2}" StrokeThickness="2"
Stroke="#1C8FC5" Fill="Transparent" LineSmoothness="1"
PointGeometrySize="15" PointForeround="#222E31"/>
</lvc:CartesianChart.Series>
<lvc:CartesianChart.VisualElements>
<lvc:VisualElement X="0.5" Y="8">
<lvc:VisualElement.UIElement>
<TextBlock Foreground="White">
Hello!, this is a note merged in the chart.
</TextBlock>
</lvc:VisualElement.UIElement>
</lvc:VisualElement>
</lvc:CartesianChart.VisualElements>
<lvc:CartesianChart.AxisX>
<lvc:Axis IsMerged="True">
<lvc:Axis.Separator>
<lvc:Separator StrokeThickness="1" StrokeDashArray="2">
<lvc:Separator.Stroke>
<SolidColorBrush Color="#404F56" />
</lvc:Separator.Stroke>
</lvc:Separator>
</lvc:Axis.Separator>
</lvc:Axis>
</lvc:CartesianChart.AxisX>
<lvc:CartesianChart.AxisY>
<lvc:Axis IsMerged="True">
<lvc:Axis.Separator>
<lvc:Separator StrokeThickness="1.5" StrokeDashArray="4">
<lvc:Separator.Stroke>
<SolidColorBrush Color="#404F56" />
</lvc:Separator.Stroke>
</lvc:Separator>
</lvc:Axis.Separator>
</lvc:Axis>
</lvc:CartesianChart.AxisY>
</lvc:CartesianChart>
</Grid>
</Page>

View File

@@ -0,0 +1,59 @@
using LiveCharts;
using LiveCharts.Defaults;
using System;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238
namespace UWP.CartesianChart.Customized_Series
{
/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
public sealed partial class CustomizedLineSeries : Page
{
public CustomizedLineSeries()
{
InitializeComponent();
Values1 = new ChartValues<ObservableValue>
{
new ObservableValue(3),
new ObservableValue(4),
new ObservableValue(6),
new ObservableValue(3),
new ObservableValue(2),
new ObservableValue(6)
};
Values2 = new ChartValues<ObservableValue>
{
new ObservableValue(5),
new ObservableValue(3),
new ObservableValue(5),
new ObservableValue(7),
new ObservableValue(3),
new ObservableValue(9)
};
DataContext = this;
}
public ChartValues<ObservableValue> Values1 { get; set; }
public ChartValues<ObservableValue> Values2 { get; set; }
private void MoveOnClick(object sender, RoutedEventArgs e)
{
var r = new Random();
foreach (var value in Values1)
{
value.Value = r.Next(0, 10);
}
foreach (var value in Values2)
{
value.Value = r.Next(0, 10);
}
}
}
}

View File

@@ -0,0 +1,53 @@
<Page
x:Class="UWP.CartesianChart.DynamicVisibility.DynamicVisibilityExample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:UWP.CartesianChart.DynamicVisibility"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:lvc="using:LiveCharts.Uwp"
xmlns:converters="using:UWP.Converters"
xmlns:lvcConverters="using:LiveCharts.Uwp.Converters"
mc:Ignorable="d">
<UserControl.Resources>
<converters:BoolToObjectConverter x:Key="bvc">
<converters:BoolToObjectConverter.TrueValue>
<x:Boolean>True</x:Boolean>
</converters:BoolToObjectConverter.TrueValue>
<converters:BoolToObjectConverter.FalseValue>
<x:Boolean>False</x:Boolean>
</converters:BoolToObjectConverter.FalseValue>
</converters:BoolToObjectConverter>
</UserControl.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal">
<CheckBox IsChecked="{Binding MariaSeriesVisibility, Mode=TwoWay}">
Maria Series
</CheckBox>
<CheckBox IsChecked="{Binding CharlesSeriesVisibility, Mode=TwoWay}">
Charles Series
</CheckBox>
<CheckBox IsChecked="{Binding JohnSeriesVisibility, Mode=TwoWay}">
John Series
</CheckBox>
</StackPanel>
<lvc:CartesianChart Grid.Row="1" Hoverable="False">
<lvc:CartesianChart.Series>
<lvc:ColumnSeries Title="Maria" Values="{Binding MariaValues}" Visibility="{Binding MariaSeriesVisibility, Converter={StaticResource bvc}, Mode=OneWay}" MaxWidth="1000" ColumnPadding="0"/>
<lvc:ColumnSeries Title="Charles" Values="{Binding CharlesValues}" Visibility="{Binding CharlesSeriesVisibility, Converter={StaticResource bvc}, Mode=OneWay}" MaxWidth="1000" ColumnPadding="0"/>
<lvc:ColumnSeries Title="John" Values="{Binding JohnValues}" Visibility="{Binding JohnSeriesVisibility, Converter={StaticResource bvc}, Mode=OneWay}" MaxWidth="1000" ColumnPadding="0"/>
</lvc:CartesianChart.Series>
<lvc:CartesianChart.AxisX>
<lvc:Axis Labels="{Binding Labels}">
<lvc:Axis.Separator>
<lvc:Separator Step="1"/>
</lvc:Axis.Separator>
</lvc:Axis>
</lvc:CartesianChart.AxisX>
</lvc:CartesianChart>
</Grid>
</Page>

View File

@@ -0,0 +1,72 @@
using LiveCharts;
using System.ComponentModel;
using Windows.UI.Xaml.Controls;
// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238
namespace UWP.CartesianChart.DynamicVisibility
{
/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
public sealed partial class DynamicVisibilityExample : Page, INotifyPropertyChanged
{
private bool _mariaSeriesVisibility;
private bool _charlesSeriesVisibility;
private bool _johnSeriesVisibility;
public DynamicVisibilityExample()
{
InitializeComponent();
MariaSeriesVisibility = true;
CharlesSeriesVisibility = true;
JohnSeriesVisibility = false;
DataContext = this;
}
public bool MariaSeriesVisibility
{
get { return _mariaSeriesVisibility; }
set
{
_mariaSeriesVisibility = value;
OnPropertyChanged("MariaSeriesVisibility");
}
}
public bool CharlesSeriesVisibility
{
get { return _charlesSeriesVisibility; }
set
{
_charlesSeriesVisibility = value;
OnPropertyChanged("CharlesSeriesVisibility");
}
}
public bool JohnSeriesVisibility
{
get { return _johnSeriesVisibility; }
set
{
_johnSeriesVisibility = value;
OnPropertyChanged("JohnSeriesVisibility");
}
}
public IChartValues MariaValues { get; set; } = new ChartValues<int>(new int[] { 4, 7, 2, 9, 3 });
public IChartValues CharlesValues { get; set; } = new ChartValues<int>(new int[] { 6, 2, 6, 3, 8 });
public IChartValues JohnValues { get; set; } = new ChartValues<int>(new int[] { 7, 2, 8, 3, 9 });
public string[] Labels { get; set; } = new string[] { "January", "February", "March", "April", "May" };
public event PropertyChangedEventHandler PropertyChanged;
public void OnPropertyChanged(string propertyName = null)
{
if (PropertyChanged != null)
PropertyChanged.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
}

View File

@@ -0,0 +1,69 @@
<Page x:Class="UWP.CartesianChart.Energy_Predictions.EnergyPredictionExample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:lvc="using:LiveCharts.Uwp"
xmlns:interop="using:Windows.UI.Xaml.Interop"
xmlns:energyPredictions="using:UWP.CartesianChart.Energy_Predictions"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="600"
Background="#ECECEC" d:DataContext="{d:DesignInstance energyPredictions:EnergyPredictionExample}">
<Grid Margin="15">
<Grid.Resources>
<energyPredictions:OpacityConverter x:Key="OpacityConverter"></energyPredictions:OpacityConverter>
<energyPredictions:ReverseConverter x:Key="ReverseConverter"></energyPredictions:ReverseConverter>
<Style TargetType="lvc:StackedAreaSeries">
<Setter Property="PointGeometrySize" Value="0"></Setter>
</Style>
</Grid.Resources>
<Border CornerRadius="5" Background="White">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" FontSize="40" Foreground="#404040" Margin="20, 10">Energy Consumption</TextBlock>
<Canvas Grid.Row="1" Name="Canvas" Margin="-4, 0, 0, 20">
<ListBox Name="ListBox" ItemsSource="{Binding Series, Converter={StaticResource ReverseConverter}}"
Canvas.ZIndex="1" Canvas.Left="60" Canvas.Top="20" BorderThickness="0" Background="Transparent">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding (lvc:LineSeries.Title)}"
Foreground="{Binding (lvc:LineSeries.Fill)}"
Opacity="{Binding (lvc:LineSeries.Visibility), Converter={StaticResource OpacityConverter}}"
FontSize="22"/>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Background" Value="Transparent" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<ContentPresenter Tapped="UIElement_OnTapped" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
<lvc:CartesianChart Height="{Binding ElementName=Canvas, Path=ActualHeight}" Width="{Binding ElementName=Canvas, Path=ActualWidth}"
Series="{Binding Series}" Hoverable="False" DataTooltip="{x:Null}">
<lvc:CartesianChart.AxisX>
<lvc:Axis IsEnabled="False" ShowLabels="False"></lvc:Axis>
</lvc:CartesianChart.AxisX>
<lvc:CartesianChart.AxisY>
<lvc:Axis IsMerged="True" FontSize="14"></lvc:Axis>
</lvc:CartesianChart.AxisY>
</lvc:CartesianChart>
</Canvas>
</Grid>
</Border>
</Grid>
</Page>

View File

@@ -0,0 +1,56 @@
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Input;
using LiveCharts;
using LiveCharts.Uwp;
namespace UWP.CartesianChart.Energy_Predictions
{
/// <summary>
/// Interaction logic for EnergyPredictionExample.xaml
/// </summary>
public partial class EnergyPredictionExample
{
public EnergyPredictionExample()
{
InitializeComponent();
Series = new SeriesCollection
{
new StackedAreaSeries
{
Values = new ChartValues<double> {20, 30, 35, 45, 65, 85},
Title = "Electricity"
},
new StackedAreaSeries
{
Values = new ChartValues<double> {10, 12, 18, 20, 38, 40},
Title = "Water"
},
new StackedAreaSeries
{
Values = new ChartValues<double> {5, 8, 12, 15, 22, 25},
Title = "Solar"
},
new StackedAreaSeries
{
Values = new ChartValues<double> {10, 12, 18, 20, 38, 40},
Title = "Gas"
}
};
DataContext = this;
}
public SeriesCollection Series { get; set; }
private void UIElement_OnTapped(object sender, TappedRoutedEventArgs e)
{
var series = (StackedAreaSeries) ((ContentPresenter) sender).Content;
if (series != null)
series.Visibility = series.Visibility == Visibility.Visible
? Visibility.Collapsed
: Visibility.Visible;
}
}
}

View File

@@ -0,0 +1,21 @@
using System;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Data;
namespace UWP.CartesianChart.Energy_Predictions
{
public class OpacityConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, string language)
{
return (Visibility)value == Visibility.Visible
? 1d
: .2d;
}
public object ConvertBack(object value, Type targetType, object parameter, string language)
{
throw new NotImplementedException();
}
}
}

View File

@@ -0,0 +1,20 @@
using System;
using System.Linq;
using Windows.UI.Xaml.Data;
using LiveCharts;
namespace UWP.CartesianChart.Energy_Predictions
{
public class ReverseConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, string language)
{
return ((SeriesCollection)value).Reverse();
}
public object ConvertBack(object value, Type targetType, object parameter, string language)
{
throw new NotImplementedException();
}
}
}

View File

@@ -0,0 +1,23 @@
using System;
using System.Windows.Input;
namespace UWP.CartesianChart.Events
{
public class MyCommand<T> : ICommand where T : class
{
public Predicate<T> CanExecuteDelegate { get; set; }
public Action<T> ExecuteDelegate { get; set; }
public bool CanExecute(object parameter)
{
return CanExecuteDelegate == null || CanExecuteDelegate((T) parameter);
}
public void Execute(object parameter)
{
if (ExecuteDelegate != null) ExecuteDelegate((T) parameter);
}
public event EventHandler CanExecuteChanged;
}
}

View File

@@ -0,0 +1,33 @@
<Page x:Class="UWP.CartesianChart.Events.EventsExample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:lvc="using:LiveCharts.Uwp"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<lvc:CartesianChart Grid.Row="1" Name="Chart" Zoom="Xy"
DataClick="ChartOnDataClick"
DataHover="Chart_OnDataHover"
UpdaterTick="ChartOnUpdaterTick"
DataClickCommand="{Binding DataClickCommand}"
DataHoverCommand="{Binding DataHoverCommand}"
UpdaterTickCommand="{Binding UpdaterTickCommand}">
<lvc:CartesianChart.AxisX>
<lvc:Axis RangeChanged="Axis_OnRangeChanged"
RangeChangedCommand="{Binding RangeChangedCommand}"/>
</lvc:CartesianChart.AxisX>
<lvc:CartesianChart.Series>
<lvc:LineSeries Values="{Binding Values}"
Fill="Transparent"
StrokeThickness="4"
PointGeometrySize="25"/>
</lvc:CartesianChart.Series>
</lvc:CartesianChart>
</Grid>
</Page>

View File

@@ -0,0 +1,43 @@
using System.Diagnostics;
using Windows.Devices.Input;
using Windows.UI.Xaml.Controls;
using LiveCharts;
using LiveCharts.Events;
using LiveCharts.Uwp;
namespace UWP.CartesianChart.Events
{
public partial class EventsExample : Page
{
public EventsExample()
{
InitializeComponent();
DataContext = new ViewModel();
}
public ChartValues<double> Values { get; set; } = new ChartValues<double> {4, 6, 5, 3, 5};
private void ChartOnDataClick(object sender, ChartPoint p)
{
var asPixels = Chart.ConvertToPixels(p.AsPoint());
Debug.WriteLine("[EVENT] You clicked (" + p.X + ", " + p.Y + ") in pixels (" +
asPixels.X + ", " + asPixels.Y + ")");
}
private void Chart_OnDataHover(object sender, ChartPoint p)
{
Debug.WriteLine("[EVENT] you hovered over " + p.X + ", " + p.Y);
}
private void ChartOnUpdaterTick(object sender)
{
Debug.WriteLine("[EVENT] chart was updated");
}
private void Axis_OnRangeChanged(RangeChangedEventArgs eventargs)
{
Debug.WriteLine("[EVENT] axis range changed");
}
}
}

View File

@@ -0,0 +1,36 @@
using System.Diagnostics;
using LiveCharts;
using LiveCharts.Events;
namespace UWP.CartesianChart.Events
{
public class ViewModel
{
public ViewModel()
{
DataClickCommand = new MyCommand<ChartPoint>
{
ExecuteDelegate = p => Debug.WriteLine(
"[COMMAND] you clicked " + p.X + ", " + p.Y)
};
DataHoverCommand = new MyCommand<ChartPoint>
{
ExecuteDelegate = p => Debug.WriteLine(
"[COMMAND] you hovered over " + p.X + ", " + p.Y)
};
UpdaterTickCommand = new MyCommand<LiveCharts.Uwp.CartesianChart>
{
ExecuteDelegate = c => Debug.WriteLine("[COMMAND] Chart was updated!")
};
RangeChangedCommand = new MyCommand<RangeChangedEventArgs>
{
ExecuteDelegate = e => Debug.WriteLine("[COMMAND] axis range changed")
};
}
public MyCommand<ChartPoint> DataHoverCommand { get; set; }
public MyCommand<ChartPoint> DataClickCommand { get; set; }
public MyCommand<LiveCharts.Uwp.CartesianChart> UpdaterTickCommand { get; set; }
public MyCommand<RangeChangedEventArgs> RangeChangedCommand { get; set; }
}
}

View File

@@ -0,0 +1,27 @@
<Page
x:Class="UWP.CartesianChart.Financial.CandleStickExample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:UWP.CartesianChart.Financial"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:lvc="using:LiveCharts.Uwp"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="30"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0">
<Bold>New in 0.7.0</Bold> Financial series
</TextBlock>
<Button Grid.Row="1" Click="UpdateAllOnClick">Update Open and Close</Button>
<lvc:CartesianChart Grid.Row="2" Series="{Binding SeriesCollection}">
<lvc:CartesianChart.AxisX>
<lvc:Axis Labels="{Binding Labels}"/>
</lvc:CartesianChart.AxisX>
</lvc:CartesianChart>
</Grid>
</Page>

View File

@@ -0,0 +1,117 @@
using LiveCharts;
using LiveCharts.Defaults;
using LiveCharts.Uwp;
using System;
using System.ComponentModel;
using System.Linq;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media;
// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238
namespace UWP.CartesianChart.Financial
{
/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
public sealed partial class CandleStickExample : Page, INotifyPropertyChanged
{
private string[] _labels;
public CandleStickExample()
{
InitializeComponent();
SeriesCollection = new SeriesCollection
{
new CandleSeries
{
Values = new ChartValues<OhlcPoint>
{
new OhlcPoint(32, 35, 30, 32),
new OhlcPoint(33, 38, 31, 37),
new OhlcPoint(35, 42, 30, 40),
new OhlcPoint(37, 40, 35, 38),
new OhlcPoint(35, 38, 32, 33),
new OhlcPoint(32, 35, 30, 32),
new OhlcPoint(33, 38, 31, 37),
new OhlcPoint(35, 42, 30, 40),
new OhlcPoint(37, 40, 35, 38),
new OhlcPoint(35, 38, 32, 33),
new OhlcPoint(32, 35, 30, 32),
new OhlcPoint(33, 38, 31, 37),
new OhlcPoint(35, 42, 30, 40),
new OhlcPoint(37, 40, 35, 38),
new OhlcPoint(35, 38, 32, 33),
new OhlcPoint(32, 35, 30, 32),
new OhlcPoint(33, 38, 31, 37),
new OhlcPoint(35, 42, 30, 40),
new OhlcPoint(37, 40, 35, 38),
new OhlcPoint(35, 38, 32, 33),
new OhlcPoint(32, 35, 30, 32),
new OhlcPoint(33, 38, 31, 37),
new OhlcPoint(35, 42, 30, 40),
new OhlcPoint(37, 40, 35, 38),
new OhlcPoint(35, 38, 32, 33)
}
},
new LineSeries
{
Values = new ChartValues<double> {30, 32, 35, 30, 28},
Fill = new SolidColorBrush(Windows.UI.Colors.Transparent)
}
};
//based on https://github.com/beto-rodriguez/Live-Charts/issues/166
//The Ohcl point X property is zero based indexed.
//this means the first point is 0, second 1, third 2.... and so on
//then you can use the Axis.Labels properties to map the chart X with a label in the array.
//for more info see (mapped labels section)
//http://lvcharts.net/#/examples/v1/labels-wpf?path=WPF-Components-Labels
Labels = new[]
{
DateTime.Now.ToString("dd MMM"),
DateTime.Now.AddDays(1).ToString("dd MMM"),
DateTime.Now.AddDays(2).ToString("dd MMM"),
DateTime.Now.AddDays(3).ToString("dd MMM"),
DateTime.Now.AddDays(4).ToString("dd MMM"),
};
DataContext = this;
}
public SeriesCollection SeriesCollection { get; set; }
public string[] Labels
{
get { return _labels; }
set
{
_labels = value;
OnPropertyChanged("Labels");
}
}
public Object Brushes { get; private set; }
private void UpdateAllOnClick(object sender, RoutedEventArgs e)
{
var r = new Random();
foreach (var point in SeriesCollection[0].Values.Cast<OhlcPoint>())
{
point.Open = r.Next((int)point.Low, (int)point.High);
point.Close = r.Next((int)point.Low, (int)point.High);
}
}
public event PropertyChangedEventHandler PropertyChanged;
public void OnPropertyChanged(string propertyName = null)
{
if (PropertyChanged != null) PropertyChanged.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
}

View File

@@ -0,0 +1,27 @@
<Page
x:Class="UWP.CartesianChart.Financial.OhclExample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:UWP.CartesianChart.Financial"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:lvc="using:LiveCharts.Uwp"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="30"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0">
<Bold>New in 0.7.0</Bold> Financial series
</TextBlock>
<Button Grid.Row="1" Click="UpdateAllOnClick">Update Open and Close</Button>
<lvc:CartesianChart Grid.Row="2" Series="{Binding SeriesCollection}">
<lvc:CartesianChart.AxisX>
<lvc:Axis Labels="{Binding Labels}"/>
</lvc:CartesianChart.AxisX>
</lvc:CartesianChart>
</Grid>
</Page>

View File

@@ -0,0 +1,95 @@
using LiveCharts;
using LiveCharts.Defaults;
using LiveCharts.Uwp;
using System;
using System.ComponentModel;
using System.Linq;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media;
// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238
namespace UWP.CartesianChart.Financial
{
/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
public sealed partial class OhclExample : Page, INotifyPropertyChanged
{
private string[] _labels;
public OhclExample()
{
InitializeComponent();
SeriesCollection = new SeriesCollection
{
new OhlcSeries()
{
Values = new ChartValues<OhlcPoint>
{
new OhlcPoint(32, 35, 30, 32),
new OhlcPoint(33, 38, 31, 37),
new OhlcPoint(35, 42, 30, 40),
new OhlcPoint(37, 40, 35, 38),
new OhlcPoint(35, 38, 32, 33)
}
},
new LineSeries
{
Values = new ChartValues<double> {30, 32, 35, 30, 28},
Fill = new SolidColorBrush(Windows.UI.Colors.Transparent)
}
};
//based on https://github.com/beto-rodriguez/Live-Charts/issues/166
//The Ohcl point X property is zero based indexed.
//this means the first point is 0, second 1, third 2.... and so on
//then you can use the Axis.Labels properties to map the chart X with a label in the array.
//for more info see (mapped labels section)
//http://lvcharts.net/#/examples/v1/labels-wpf?path=WPF-Components-Labels
Labels = new[]
{
DateTime.Now.ToString("dd MMM"),
DateTime.Now.AddDays(1).ToString("dd MMM"),
DateTime.Now.AddDays(2).ToString("dd MMM"),
DateTime.Now.AddDays(3).ToString("dd MMM"),
DateTime.Now.AddDays(4).ToString("dd MMM"),
};
DataContext = this;
}
public SeriesCollection SeriesCollection { get; set; }
public string[] Labels
{
get { return _labels; }
set
{
_labels = value;
OnPropertyChanged("Labels");
}
}
private void UpdateAllOnClick(object sender, RoutedEventArgs e)
{
var r = new Random();
foreach (var point in SeriesCollection[0].Values.Cast<OhlcPoint>())
{
point.Open = r.Next((int)point.Low, (int)point.High);
point.Close = r.Next((int)point.Low, (int)point.High);
}
}
public event PropertyChangedEventHandler PropertyChanged;
public void OnPropertyChanged(string propertyName = null)
{
if (PropertyChanged != null) PropertyChanged.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
}

View File

@@ -0,0 +1,32 @@
<Page
x:Class="UWP.CartesianChart.FullyResponsive.FullyResponsiveExample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:UWP.CartesianChart.FullyResponsive"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:lvc="using:LiveCharts.Uwp"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock TextWrapping="Wrap">
Fully Responsive
</TextBlock>
<StackPanel Grid.Row="1" Orientation="Horizontal">
<TextBlock VerticalAlignment="Center" Margin="0 0 10 0">Points</TextBlock>
<Button Click="AddPointOnClick">+</Button>
<Button Click="InsertPointOnClick">/</Button>
<Button Click="RemovePointOnClick">-</Button>
<Button Click="MoveAllOnClick">MoveAll</Button>
<TextBlock Margin="0 0 10 0" VerticalAlignment="Center">Series</TextBlock>
<Button Click="AddSeriesOnClick">+</Button>
<Button Click="RemoveSeriesOnClick">-</Button>
</StackPanel>
<lvc:CartesianChart Grid.Row="2" Series="{Binding SeriesCollection}" LegendLocation="Right"/>
</Grid>
</Page>

View File

@@ -0,0 +1,105 @@
using LiveCharts;
using LiveCharts.Defaults;
using LiveCharts.Uwp;
using System;
using System.Linq;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media;
// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238
namespace UWP.CartesianChart.FullyResponsive
{
/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
public sealed partial class FullyResponsiveExample : Page
{
public FullyResponsiveExample()
{
InitializeComponent();
MyValues = new ChartValues<ObservableValue>
{
new ObservableValue(5),
new ObservableValue(7),
new ObservableValue(8),
new ObservableValue(3)
};
var lineSeries = new LineSeries
{
Values = MyValues,
StrokeThickness = 4,
Fill = new SolidColorBrush(Windows.UI.Colors.Transparent),
PointGeometrySize = 0,
DataLabels = true
};
SeriesCollection = new SeriesCollection { lineSeries };
DataContext = this;
}
public ChartValues<ObservableValue> MyValues { get; set; }
public SeriesCollection SeriesCollection { get; set; }
private void AddPointOnClick(object sender, RoutedEventArgs e)
{
var r = new Random();
MyValues.Add(new ObservableValue(r.Next(-20, 20)));
}
private void InsertPointOnClick(object sender, RoutedEventArgs e)
{
var r = new Random();
if (MyValues.Count > 3)
MyValues.Insert(2, new ObservableValue(r.Next(-20, 20)));
}
private void RemovePointOnClick(object sender, RoutedEventArgs e)
{
MyValues.RemoveAt(0);
}
private void AddSeriesOnClick(object sender, RoutedEventArgs e)
{
//Yes it also listens for series changes
var r = new Random();
var c = SeriesCollection[0].Values.Count;
var val = new ChartValues<ObservableValue>();
for (int i = 0; i < c; i++)
{
val.Add(new ObservableValue(r.Next(-20, 20)));
}
SeriesCollection.Add(new LineSeries
{
Values = val,
StrokeThickness = 4,
Fill = new SolidColorBrush(Windows.UI.Colors.Transparent),
PointGeometrySize = 0
});
}
private void RemoveSeriesOnClick(object sender, RoutedEventArgs e)
{
var s = SeriesCollection.Where(x => x.Values != MyValues).ToList();
if (s.Count > 0) SeriesCollection.RemoveAt(1);
}
private void MoveAllOnClick(object sender, RoutedEventArgs e)
{
var r = new Random();
foreach (var observable in MyValues)
{
observable.Value = r.Next(-20, 20);
}
}
}
}

View File

@@ -0,0 +1,89 @@
<Page x:Class="UWP.CartesianChart.Funnel_Chart.FunnelExample"
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"
xmlns:lvc="using:LiveCharts.Uwp"
mc:Ignorable="d"
d:DesignHeight="600" d:DesignWidth="600">
<Grid Background="#14144B">
<!-- Credit https://dribbble.com/shots/2673159-Funnel-UI-concept-->
<!-- Icons http://www.flaticon.com/authors/madebyoliver -->
<Grid.Resources>
<Style TargetType="lvc:LineSeries">
<Setter Property="PointGeometrySize" Value="0"/>
<Setter Property="AreaLimit" Value="0"/>
<Setter Property="StrokeThickness" Value="0" />
<Setter Property="Fill" Value="#216AFE"></Setter>
</Style>
<Style TargetType="lvc:Axis">
<Setter Property="IsEnabled" Value="False"/>
<Setter Property="ShowLabels" Value="False"></Setter>
</Style>
</Grid.Resources>
<lvc:CartesianChart Hoverable="False" DataTooltip="{x:Null}">
<lvc:CartesianChart.Series>
<lvc:LineSeries Values="{Binding V1}"/>
<lvc:LineSeries Values="{Binding V2}"/>
<!--Shadows-->
<lvc:LineSeries StrokeThickness="0" Values="{Binding V3}" Fill="#222C78" Canvas.ZIndex="-1"/>
<lvc:LineSeries Values="{Binding V4}" Fill="#222C78" Canvas.ZIndex="-1"/>
<lvc:LineSeries Values="{Binding V5}" Fill="#141859" Canvas.ZIndex="-2"/>
<lvc:LineSeries Values="{Binding V6}" Fill="#141859" Canvas.ZIndex="-2"/>
</lvc:CartesianChart.Series>
<lvc:CartesianChart.AxisX>
<lvc:Axis>
<lvc:Axis.Sections>
<lvc:AxisSection Value="1.5" Stroke="#25FFFFFF" StrokeThickness="5" Canvas.ZIndex="1" />
<lvc:AxisSection Value="3.5" Stroke="#25FFFFFF" StrokeThickness="5" Canvas.ZIndex="1" />
</lvc:Axis.Sections>
</lvc:Axis>
</lvc:CartesianChart.AxisX>
<lvc:CartesianChart.VisualElements>
<lvc:VisualElement X="0.75" Y="120" VerticalAlignment="Bottom" HorizontalAlignment="Center">
<lvc:VisualElement.UIElement>
<StackPanel Orientation="Vertical">
<Image Source="resources/user.png"></Image>
<TextBlock Foreground="White" FontSize="16" FontWeight="Bold">LOADED THE AD</TextBlock>
</StackPanel>
</lvc:VisualElement.UIElement>
</lvc:VisualElement>
<lvc:VisualElement X="0.75" Y="0" VerticalAlignment="Center" HorizontalAlignment="Center">
<lvc:VisualElement.UIElement>
<TextBlock Foreground="White" FontSize="40">100 %</TextBlock>
</lvc:VisualElement.UIElement>
</lvc:VisualElement>
<lvc:VisualElement X="2.5" Y="120" VerticalAlignment="Bottom" HorizontalAlignment="Center">
<lvc:VisualElement.UIElement>
<StackPanel Orientation="Vertical">
<Image Source="resources/view.png"></Image>
<TextBlock Foreground="White" FontSize="16" FontWeight="Bold">SAW THE AD</TextBlock>
</StackPanel>
</lvc:VisualElement.UIElement>
</lvc:VisualElement>
<lvc:VisualElement X="2.5" Y="0" VerticalAlignment="Center" HorizontalAlignment="Center">
<lvc:VisualElement.UIElement>
<TextBlock Foreground="White" FontSize="40">50 %</TextBlock>
</lvc:VisualElement.UIElement>
</lvc:VisualElement>
<lvc:VisualElement X="4.25" Y="120" VerticalAlignment="Bottom" HorizontalAlignment="Center">
<lvc:VisualElement.UIElement>
<StackPanel Orientation="Vertical">
<Image Source="resources/fingerprint.png"></Image>
<TextBlock Foreground="White" FontSize="16" FontWeight="Bold">INTERACTED</TextBlock>
</StackPanel>
</lvc:VisualElement.UIElement>
</lvc:VisualElement>
<lvc:VisualElement X="4.25" Y="0" VerticalAlignment="Center" HorizontalAlignment="Center">
<lvc:VisualElement.UIElement>
<TextBlock Foreground="White" FontSize="40">5 %</TextBlock>
</lvc:VisualElement.UIElement>
</lvc:VisualElement>
</lvc:CartesianChart.VisualElements>
</lvc:CartesianChart>
</Grid>
</Page>

View File

@@ -0,0 +1,32 @@
using Windows.UI.Xaml.Controls;
using LiveCharts;
namespace UWP.CartesianChart.Funnel_Chart
{
/// <summary>
/// Interaction logic for FunnelExample.xaml
/// </summary>
public partial class FunnelExample : Page
{
public FunnelExample()
{
InitializeComponent();
V1 = new ChartValues<double> {100, 85, 50, 35, 5, 3};
V2 = new ChartValues<double> {-100, -85, -50, -35, -5, 3};
V3 = new ChartValues<double> {110, 94, 60, 40, 10, 10};
V4 = new ChartValues<double> {-110, -94, -60, -40, -10, -10};
V5 = new ChartValues<double> {120, 104, 70, 50, 15, 15};
V6 = new ChartValues<double> {-120, -104, -70, -50, -15, -15};
DataContext = this;
}
public ChartValues<double> V1 { get; set; }
public ChartValues<double> V2 { get; set; }
public ChartValues<double> V3 { get; set; }
public ChartValues<double> V4 { get; set; }
public ChartValues<double> V5 { get; set; }
public ChartValues<double> V6 { get; set; }
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 919 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 647 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 597 B

View File

@@ -0,0 +1,31 @@
<Page
x:Class="UWP.CartesianChart.GanttChart.GanttExample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:UWP.CartesianChart.GanttChart"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:lvc="using:LiveCharts.Uwp"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal">
<Button Click="ResetZoomOnClick">Reset zoom</Button>
<TextBlock Margin="10" TextWrapping="Wrap">Use your mouse wheel to zoom in/out, click hold and drag for panning</TextBlock>
</StackPanel>
<lvc:CartesianChart Grid.Row="1" Series="{Binding Series}" Zoom="X">
<lvc:CartesianChart.AxisX>
<lvc:Axis LabelFormatter="{Binding Formatter}"
MinValue="{Binding From, Mode=TwoWay}"
MaxValue="{Binding To, Mode=TwoWay}"></lvc:Axis>
</lvc:CartesianChart.AxisX>
<lvc:CartesianChart.AxisY>
<lvc:Axis Labels="{Binding Labels}"></lvc:Axis>
</lvc:CartesianChart.AxisY>
</lvc:CartesianChart>
</Grid>
</Page>

View File

@@ -0,0 +1,104 @@
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using LiveCharts;
using LiveCharts.Defaults;
using LiveCharts.Uwp;
// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238
namespace UWP.CartesianChart.GanttChart
{
/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
public sealed partial class GanttExample : Page, INotifyPropertyChanged
{
private double _from;
private double _to;
private readonly ChartValues<GanttPoint> _values;
public GanttExample()
{
this.InitializeComponent();
var now = DateTime.Now;
_values = new ChartValues<GanttPoint>
{
new GanttPoint(now.Ticks, now.AddDays(2).Ticks),
new GanttPoint(now.AddDays(1).Ticks, now.AddDays(3).Ticks),
new GanttPoint(now.AddDays(3).Ticks, now.AddDays(5).Ticks),
new GanttPoint(now.AddDays(5).Ticks, now.AddDays(8).Ticks),
new GanttPoint(now.AddDays(6).Ticks, now.AddDays(10).Ticks),
new GanttPoint(now.AddDays(7).Ticks, now.AddDays(14).Ticks),
new GanttPoint(now.AddDays(9).Ticks, now.AddDays(12).Ticks),
new GanttPoint(now.AddDays(9).Ticks, now.AddDays(14).Ticks),
new GanttPoint(now.AddDays(10).Ticks, now.AddDays(11).Ticks),
new GanttPoint(now.AddDays(12).Ticks, now.AddDays(16).Ticks),
new GanttPoint(now.AddDays(15).Ticks, now.AddDays(17).Ticks),
new GanttPoint(now.AddDays(18).Ticks, now.AddDays(19).Ticks)
};
Series = new SeriesCollection
{
new RowSeries
{
Values = _values,
DataLabels = true
}
};
Formatter = value => new DateTime((long)value).ToString("dd MMM");
var labels = new List<string>();
for (var i = 0; i < 12; i++)
labels.Add("Task " + i);
Labels = labels.ToArray();
ResetZoomOnClick(null, null);
DataContext = this;
}
public SeriesCollection Series { get; set; }
public Func<double, string> Formatter { get; set; }
public string[] Labels { get; set; }
public double From
{
get { return _from; }
set
{
_from = value;
OnPropertyChanged("From");
}
}
public double To
{
get { return _to; }
set
{
_to = value;
OnPropertyChanged("To");
}
}
private void ResetZoomOnClick(object sender, RoutedEventArgs e)
{
From = _values.First().StartPoint;
To = _values.Last().EndPoint;
}
public event PropertyChangedEventHandler PropertyChanged;
private void OnPropertyChanged(string propertyName = null)
{
var handler = PropertyChanged;
if (handler != null) handler(this, new PropertyChangedEventArgs(propertyName));
}
}
}

View File

@@ -0,0 +1,48 @@
<Page
x:Class="UWP.CartesianChart.HeatChart.HeatSeriesExample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:UWP.CartesianChart.HeatChart"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:lvc="using:LiveCharts.Uwp"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Button Grid.Row="0" Height="30" Width="100" Click="ButtonBase_OnClick" Margin="10">Randomize</Button>
<lvc:CartesianChart Grid.Row="1" DataTooltip="{x:Null}">
<lvc:CartesianChart.Series>
<lvc:HeatSeries Values="{Binding Values}" DataLabels="True">
<!--
The GradientStopCollection is optional to define a custom gradient
If this property is not specified, LiveCharts will set a gradient
-->
<lvc:HeatSeries.GradientStopCollection>
<GradientStop Offset="0" Color="#99FFFF00"></GradientStop>
<GradientStop Offset=".25" Color="#FFFFFF00"></GradientStop>
<GradientStop Offset=".50" Color="#990000FF"></GradientStop>
<GradientStop Offset=".75" Color="#FF0000FF"></GradientStop>
<GradientStop Offset="1" Color="#50505050"></GradientStop>
</lvc:HeatSeries.GradientStopCollection>
</lvc:HeatSeries>
</lvc:CartesianChart.Series>
<lvc:CartesianChart.AxisX >
<lvc:Axis Labels="{Binding SalesMan}" LabelsRotation="-15">
<lvc:Axis.Separator>
<lvc:Separator Step="1"></lvc:Separator>
</lvc:Axis.Separator>
</lvc:Axis>
</lvc:CartesianChart.AxisX>
<lvc:CartesianChart.AxisY>
<lvc:Axis Labels="{Binding Days}"></lvc:Axis>
</lvc:CartesianChart.AxisY>
</lvc:CartesianChart>
</Grid>
</Page>

View File

@@ -0,0 +1,109 @@
using LiveCharts;
using LiveCharts.Defaults;
using System;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238
namespace UWP.CartesianChart.HeatChart
{
/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
public sealed partial class HeatSeriesExample : Page
{
public HeatSeriesExample()
{
InitializeComponent();
var r = new Random();
Values = new ChartValues<HeatPoint>
{
//X means sales man
//Y is the day
//"Jeremy Swanson"
new HeatPoint(0, 0, r.Next(0, 10)),
new HeatPoint(0, 1, r.Next(0, 10)),
new HeatPoint(0, 2, r.Next(0, 10)),
new HeatPoint(0, 3, r.Next(0, 10)),
new HeatPoint(0, 4, r.Next(0, 10)),
new HeatPoint(0, 5, r.Next(0, 10)),
new HeatPoint(0, 6, r.Next(0, 10)),
//"Lorena Hoffman"
new HeatPoint(1, 0, r.Next(0, 10)),
new HeatPoint(1, 1, r.Next(0, 10)),
new HeatPoint(1, 2, r.Next(0, 10)),
new HeatPoint(1, 3, r.Next(0, 10)),
new HeatPoint(1, 4, r.Next(0, 10)),
new HeatPoint(1, 5, r.Next(0, 10)),
new HeatPoint(1, 6, r.Next(0, 10)),
//"Robyn Williamson"
new HeatPoint(2, 0, r.Next(0, 10)),
new HeatPoint(2, 1, r.Next(0, 10)),
new HeatPoint(2, 2, r.Next(0, 10)),
new HeatPoint(2, 3, r.Next(0, 10)),
new HeatPoint(2, 4, r.Next(0, 10)),
new HeatPoint(2, 5, r.Next(0, 10)),
new HeatPoint(2, 6, r.Next(0, 10)),
//"Carole Haynes"
new HeatPoint(3, 0, r.Next(0, 10)),
new HeatPoint(3, 1, r.Next(0, 10)),
new HeatPoint(3, 2, r.Next(0, 10)),
new HeatPoint(3, 3, r.Next(0, 10)),
new HeatPoint(3, 4, r.Next(0, 10)),
new HeatPoint(3, 5, r.Next(0, 10)),
new HeatPoint(3, 6, r.Next(0, 10)),
//"Essie Nelson"
new HeatPoint(4, 0, r.Next(0, 10)),
new HeatPoint(4, 1, r.Next(0, 10)),
new HeatPoint(4, 2, r.Next(0, 10)),
new HeatPoint(4, 3, r.Next(0, 10)),
new HeatPoint(4, 4, r.Next(0, 10)),
new HeatPoint(4, 5, r.Next(0, 10)),
new HeatPoint(4, 6, r.Next(0, 10))
};
Days = new[]
{
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday",
"Sunday"
};
SalesMan = new[]
{
"Jeremy Swanson",
"Lorena Hoffman",
"Robyn Williamson",
"Carole Haynes",
"Essie Nelson"
};
DataContext = this;
}
public ChartValues<HeatPoint> Values { get; set; }
public string[] Days { get; set; }
public string[] SalesMan { get; set; }
private void ButtonBase_OnClick(object sender, RoutedEventArgs e)
{
var r = new Random();
foreach (var chartValue in Values)
{
chartValue.Weight = r.Next(0, 10);
}
}
}
}

View File

@@ -0,0 +1,27 @@
<Page
x:Class="UWP.CartesianChart.InLineSyntax.InLineSyntaxTest"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:UWP.CartesianChart.InLineSyntax"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:lc="using:LiveCharts.Uwp"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock>This chart is totally built with XAML.</TextBlock>
<lc:CartesianChart Grid.Row="1">
<lc:CartesianChart.Series>
<lc:LineSeries Values="{x:Bind LineSeries1}" />
<lc:LineSeries Values="{x:Bind LineSeries2}" />
</lc:CartesianChart.Series>
<lc:CartesianChart.AxisX>
<lc:Axis Labels="{x:Bind Labels}"/>
</lc:CartesianChart.AxisX>
</lc:CartesianChart>
</Grid>
</Page>

View File

@@ -0,0 +1,24 @@
using LiveCharts;
using Windows.UI.Xaml.Controls;
// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238
namespace UWP.CartesianChart.InLineSyntax
{
/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
public sealed partial class InLineSyntaxTest : Page
{
public InLineSyntaxTest()
{
this.InitializeComponent();
}
public IChartValues LineSeries1 { get; set; } = new ChartValues<int>(new int[] { 1, 2, 3, 5 });
public IChartValues LineSeries2 { get; set; } = new ChartValues<int>(new int[] { 4, 6, 2, 5 });
public string[] Labels { get; set; } = new string[] { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Ago", "Sep", "Oct" };
}
}

View File

@@ -0,0 +1,32 @@
<Page
x:Class="UWP.CartesianChart.Inverted_Series.InvertedExample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:UWP.CartesianChart.Inverted_Series"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:lvc="using:LiveCharts.Uwp"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<lvc:CartesianChart>
<lvc:CartesianChart.Series>
<lvc:RowSeries Values="{Binding Values2}" Canvas.ZIndex="1"/>
<lvc:VerticalLineSeries Values="{Binding Values1}" Canvas.ZIndex="0"/>
</lvc:CartesianChart.Series>
<lvc:CartesianChart.AxisY>
<lvc:Axis>
<lvc:Axis.Separator>
<lvc:Separator Step="1"></lvc:Separator>
</lvc:Axis.Separator>
</lvc:Axis>
</lvc:CartesianChart.AxisY>
<lvc:CartesianChart.AxisX>
<lvc:Axis MinValue="0"></lvc:Axis>
</lvc:CartesianChart.AxisX>
<lvc:CartesianChart.DataTooltip>
<lvc:DefaultTooltip SelectionMode="SharedYValues"></lvc:DefaultTooltip>
</lvc:CartesianChart.DataTooltip>
</lvc:CartesianChart>
</Grid>
</Page>

View File

@@ -0,0 +1,27 @@
using LiveCharts;
using Windows.UI.Xaml.Controls;
// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238
namespace UWP.CartesianChart.Inverted_Series
{
/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
public sealed partial class InvertedExample : Page
{
public InvertedExample()
{
InitializeComponent();
Values1 = new ChartValues<double> { 3, 5, 2, 6, 2, 7, 1 };
Values2 = new ChartValues<double> { 6, 2, 6, 3, 2, 7, 2 };
DataContext = this;
}
public ChartValues<double> Values1 { get; set; }
public ChartValues<double> Values2 { get; set; }
}
}

View File

@@ -0,0 +1,14 @@
<Page
x:Class="UWP.CartesianChart.Irregular_Intervals.IrregularIntervalsExample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:UWP.CartesianChart.Irregular_Intervals"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:lvc="using:LiveCharts.Uwp"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<lvc:CartesianChart Series="{Binding SeriesCollection}"/>
</Grid>
</Page>

View File

@@ -0,0 +1,64 @@
using LiveCharts;
using LiveCharts.Defaults;
using LiveCharts.Uwp;
using Windows.UI.Xaml.Controls;
// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238
namespace UWP.CartesianChart.Irregular_Intervals
{
/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
public sealed partial class IrregularIntervalsExample : Page
{
public IrregularIntervalsExample()
{
InitializeComponent();
SeriesCollection = new SeriesCollection
{
new LineSeries
{
Values = new ChartValues<ObservablePoint>
{
new ObservablePoint(0, 10),
new ObservablePoint(4, 7),
new ObservablePoint(5, 3),
new ObservablePoint(7, 6),
new ObservablePoint(10, 8)
},
PointGeometrySize = 15
},
new LineSeries
{
Values = new ChartValues<ObservablePoint>
{
new ObservablePoint(0, 2),
new ObservablePoint(2, 5),
new ObservablePoint(3, 6),
new ObservablePoint(6, 8),
new ObservablePoint(10, 5)
},
PointGeometrySize = 15
},
new LineSeries
{
Values = new ChartValues<ObservablePoint>
{
new ObservablePoint(0, 4),
new ObservablePoint(5, 5),
new ObservablePoint(7, 7),
new ObservablePoint(9, 10),
new ObservablePoint(10, 9)
},
PointGeometrySize = 15
}
};
DataContext = this;
}
public SeriesCollection SeriesCollection { get; set; }
}
}

View File

@@ -0,0 +1,35 @@
<Page
x:Class="UWP.CartesianChart.Labels.LabelsExample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:UWP.CartesianChart.Labels"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:lvc="using:LiveCharts.Uwp"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock>Labels</TextBlock>
<Button Grid.Row="1" Height="30" Click="UpdateAllOnClick">
Move All
</Button>
<lvc:CartesianChart Grid.Row="2" Series="{Binding SeriesCollection}"
DataClick="Chart_OnDataClick">
<lvc:CartesianChart.AxisX>
<lvc:Axis LabelsRotation="20" Labels="{Binding Labels}" Position="LeftBottom" >
<lvc:Axis.Separator >
<lvc:Separator Step="1"></lvc:Separator>
</lvc:Axis.Separator>
</lvc:Axis>
</lvc:CartesianChart.AxisX>
<lvc:CartesianChart.AxisY>
<lvc:Axis Title="Sold Items" LabelFormatter="{Binding Formatter}" Position="RightTop"></lvc:Axis>
</lvc:CartesianChart.AxisY>
</lvc:CartesianChart>
</Grid>
</Page>

View File

@@ -0,0 +1,86 @@
using LiveCharts;
using LiveCharts.Defaults;
using LiveCharts.Uwp;
using System;
using System.Linq;
using Windows.UI.Popups;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238
namespace UWP.CartesianChart.Labels
{
/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
public sealed partial class LabelsExample : Page
{
public LabelsExample()
{
InitializeComponent();
SeriesCollection = new SeriesCollection
{
new ColumnSeries
{
Values = new ChartValues<ObservableValue>
{
new ObservableValue(4),
new ObservableValue(2),
new ObservableValue(8),
new ObservableValue(2),
new ObservableValue(3),
new ObservableValue(0),
new ObservableValue(1),
},
DataLabels = true,
LabelPoint = point => point.X + "K ," + point.Y
}
};
Labels = new[]
{
"Shea Ferriera",
"Maurita Powel",
"Scottie Brogdon",
"Teresa Kerman",
"Nell Venuti",
"Anibal Brothers",
"Anderson Dillman"
};
Formatter = value => value + ".00K items";
DataContext = this;
}
public SeriesCollection SeriesCollection { get; set; }
public string[] Labels { get; set; }
public Func<double, string> Formatter { get; set; }
private void UpdateAllOnClick(object sender, RoutedEventArgs e)
{
var r = new Random();
foreach (var series in SeriesCollection)
{
foreach (var observable in series.Values.Cast<ObservableValue>())
{
observable.Value = r.Next(0, 10);
}
}
}
private async void Chart_OnDataClick(object sender, ChartPoint point)
{
//point instance contains many useful information...
//sender is the shape that called the event.
var dialog = new MessageDialog("You clicked " + point.X + ", " + point.Y);
await dialog.ShowAsync();
}
}
}

View File

@@ -0,0 +1,37 @@
<Page
x:Class="UWP.CartesianChart.Labels.LabelsHorizontalExample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:UWP.CartesianChart.Labels"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:lvc="using:LiveCharts.Uwp"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock>Labels</TextBlock>
<Button Grid.Row="1" Height="30" Click="UpdateAllOnClick">
Move All
</Button>
<lvc:CartesianChart Grid.Row="2" Series="{Binding SeriesCollection}">
<lvc:CartesianChart.DataTooltip>
<lvc:DefaultTooltip SelectionMode="SharedYValues"></lvc:DefaultTooltip>
</lvc:CartesianChart.DataTooltip>
<lvc:CartesianChart.AxisX>
<lvc:Axis Title="Sold Items" LabelFormatter="{Binding Formatter}"></lvc:Axis>
</lvc:CartesianChart.AxisX>
<lvc:CartesianChart.AxisY>
<lvc:Axis Labels="{Binding Labels}" LabelsRotation="65">
<lvc:Axis.Separator >
<lvc:Separator Step="1"></lvc:Separator>
</lvc:Axis.Separator>
</lvc:Axis>
</lvc:CartesianChart.AxisY>
</lvc:CartesianChart>
</Grid>
</Page>

View File

@@ -0,0 +1,74 @@
using LiveCharts;
using LiveCharts.Defaults;
using LiveCharts.Uwp;
using System;
using System.Linq;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238
namespace UWP.CartesianChart.Labels
{
/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
public sealed partial class LabelsHorizontalExample : Page
{
public LabelsHorizontalExample()
{
InitializeComponent();
SeriesCollection = new SeriesCollection
{
new RowSeries
{
Values = new ChartValues<ObservableValue>
{
new ObservableValue(4),
new ObservableValue(2),
new ObservableValue(8),
new ObservableValue(2),
new ObservableValue(3),
new ObservableValue(0),
new ObservableValue(1),
},
DataLabels = true,
LabelPoint = point => point.X + "K ," + point.Y
}
};
Labels = new[]
{
"Shea Ferriera",
"Maurita Powel",
"Scottie Brogdon",
"Teresa Kerman",
"Nell Venuti",
"Anibal Brothers",
"Anderson Dillman"
};
Formatter = value => value + ".00K items";
DataContext = this;
}
public SeriesCollection SeriesCollection { get; set; }
public string[] Labels { get; set; }
public Func<double, string> Formatter { get; set; }
private void UpdateAllOnClick(object sender, RoutedEventArgs e)
{
var r = new Random();
foreach (var series in SeriesCollection)
{
foreach (var observable in series.Values.Cast<ObservableValue>())
{
observable.Value = r.Next(0, 10);
}
}
}
}
}

View File

@@ -0,0 +1,27 @@
<Page
x:Class="UWP.CartesianChart.LineExample.LineExample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:UWP.CartesianChart.LineExample"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:lvc="using:LiveCharts.Uwp"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<lvc:CartesianChart Grid.Row="2">
<lvc:CartesianChart.Series>
<lvc:VerticalLineSeries Values="{Binding Values}" DataLabels="True" />
</lvc:CartesianChart.Series>
<lvc:CartesianChart.DataTooltip>
<!--The Selection mode property should be done automatically in future versions-->
<lvc:DefaultTooltip SelectionMode="SharedYValues"></lvc:DefaultTooltip>
</lvc:CartesianChart.DataTooltip>
</lvc:CartesianChart>
</Grid>
</Page>

View File

@@ -0,0 +1,32 @@
using LiveCharts;
using Windows.UI.Xaml.Controls;
// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238
namespace UWP.CartesianChart.LineExample
{
/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
public sealed partial class LineExample : Page
{
public LineExample()
{
InitializeComponent();
Values = Values = new ChartValues<float>
{
3,
4,
6,
3,
2,
6
};
DataContext = this;
}
public ChartValues<float> Values { get; set; }
}
}

View File

@@ -0,0 +1,13 @@
using System;
namespace UWP.CartesianChart.Linq
{
public class City
{
public Guid Id { get; set; }
public string Name { get; set; }
public double Population { get; set; }
public double Area { get; set; }
public string Country { get; set; }
}
}

View File

@@ -0,0 +1,42 @@
using System;
using System.Collections.Generic;
using System.Globalization;
using System.IO;
using System.Threading.Tasks;
using Windows.Storage;
namespace UWP.CartesianChart.Linq
{
public static class DataBase
{
public static City[] Cities { get; private set; }
public static async Task Initialize()
{
var file = await StorageFile.GetFileFromApplicationUriAsync(new Uri("ms-appx:///cities.csv"));
var stream = await file.OpenStreamForReadAsync();
var reader = new StreamReader(stream);
var read = new List<City>();
while (!reader.EndOfStream)
{
var line = reader.ReadLine();
if (line != null)
{
var values = line.Split(',');
read.Add(new City
{
Name = values[0],
Population = double.Parse(values[1], CultureInfo.InvariantCulture),
Area = double.Parse(values[2], CultureInfo.InvariantCulture),
Country = values[3]
});
}
}
Cities = read.ToArray();
}
}
}

View File

@@ -0,0 +1,39 @@
<Page
x:Class="UWP.CartesianChart.Linq.LinqExample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:UWP.CartesianChart.Linq"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:lvc="using:LiveCharts.Uwp"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Orientation="Horizontal">
<TextBlock VerticalAlignment="Center" Margin="10 0">Search</TextBlock>
<TextBox Name="Query" VerticalContentAlignment="Center" Width="100" Height="30"
TextChanged="TextBoxBase_OnTextChanged"></TextBox>
</StackPanel>
<lvc:CartesianChart Grid.Row="1" >
<lvc:CartesianChart.Series>
<lvc:ColumnSeries Title="2016 Population by City"
Values="{Binding Results}"
Configuration="{Binding Mapper}"/>
</lvc:CartesianChart.Series>
<lvc:CartesianChart.AxisX>
<lvc:Axis LabelsRotation="-20" Labels="{Binding Labels}" DisableAnimations="True">
<lvc:Axis.Separator>
<lvc:Separator Step="1"></lvc:Separator>
</lvc:Axis.Separator>
</lvc:Axis>
</lvc:CartesianChart.AxisX>
<lvc:CartesianChart.AxisY>
<lvc:Axis LabelFormatter="{Binding MillionFormatter}"></lvc:Axis>
</lvc:CartesianChart.AxisY>
</lvc:CartesianChart>
</Grid>
</Page>

View File

@@ -0,0 +1,70 @@
using LiveCharts;
using LiveCharts.Configurations;
using System;
using System.Collections.ObjectModel;
using System.Linq;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using LiveCharts.Helpers;
// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238
namespace UWP.CartesianChart.Linq
{
/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
public sealed partial class LinqExample : Page
{
public LinqExample()
{
InitializeComponent();
//lets configure the chart to plot cities
Mapper = Mappers.Xy<City>()
.X((city, index) => index)
.Y(city => city.Population);
MillionFormatter = value => (value / 1000000).ToString("N") + "M";
this.Loading += LinqExample_Loading;
DataContext = this;
}
private async void LinqExample_Loading(FrameworkElement sender, Object args)
{
await DataBase.Initialize();
//lets take the first 15 records by default;
var records = DataBase.Cities.OrderByDescending(x => x.Population).Take(15).ToArray();
Results = records.AsChartValues();
Labels = new ObservableCollection<string>(records.Select(x => x.Name));
}
public ChartValues<City> Results { get; set; }
public ObservableCollection<string> Labels { get; set; }
public Func<double, string> MillionFormatter { get; set; }
public object Mapper { get; set; }
private void TextBoxBase_OnTextChanged(object sender, TextChangedEventArgs e)
{
var q = (Query.Text ?? string.Empty).ToUpper();
var records = DataBase.Cities
.Where(x => x.Name.ToUpper().Contains(q) || x.Country.ToUpper().Contains(q))
.OrderByDescending(x => x.Population)
.Take(15)
.ToArray();
Results.Clear();
Results.AddRange(records);
Labels.Clear();
foreach (var record in records) Labels.Add(record.Name);
}
}
}

View File

@@ -0,0 +1,18 @@
<Page
x:Class="UWP.CartesianChart.LogarithmScale.LogarithmScaleExample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:UWP.CartesianChart.LogarithmScale"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:lvc="using:LiveCharts.Uwp"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<lvc:CartesianChart Series="{Binding SeriesCollection}">
<lvc:CartesianChart.AxisX>
<lvc:LogarithmicAxis LabelFormatter="{Binding Formatter}" Base="10" />
</lvc:CartesianChart.AxisX>
</lvc:CartesianChart>
</Grid>
</Page>

View File

@@ -0,0 +1,51 @@
using LiveCharts;
using LiveCharts.Configurations;
using LiveCharts.Defaults;
using LiveCharts.Definitions.Charts;
using LiveCharts.Uwp;
using System;
using Windows.UI.Xaml.Controls;
// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238
namespace UWP.CartesianChart.LogarithmScale
{
/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
public sealed partial class LogarithmScaleExample : Page
{
public LogarithmScaleExample()
{
InitializeComponent();
SeriesCollection = new SeriesCollection(Mappers.Xy<ObservablePoint>()
.X(point => Math.Log10(point.X))
.Y(point => point.Y))
{
new LineSeries
{
Values = new ChartValues<ObservablePoint>
{
new ObservablePoint(1, 5),
new ObservablePoint(10, 6),
new ObservablePoint(100, 4),
new ObservablePoint(1000, 2),
new ObservablePoint(10000, 8),
new ObservablePoint(100000, 2),
new ObservablePoint(1000000, 9),
new ObservablePoint(10000000, 8)
}
}
};
Formatter = value => Math.Pow(10, value).ToString("N");
DataContext = this;
}
public SeriesCollection SeriesCollection { get; set; }
public Func<double, string> Formatter { get; set; }
public ISeparatorView CleanSeparator { get; set; } = DefaultAxes.CleanSeparator;
}
}

View File

@@ -0,0 +1,33 @@
<Page
x:Class="UWP.CartesianChart.ManualZAndP.ManualZAndPExample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:UWP.CartesianChart.ManualZAndP"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:lvc="using:LiveCharts.Uwp"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Orientation="Horizontal">
<Button Click="PrevOnClick">Prev</Button>
<Button Click="NextOnClick">Next</Button>
</StackPanel>
<Button Grid.Row="1" Click="ManualZoom" HorizontalAlignment="Left">Zoom to 5 &gt; x &lt; 10</Button>
<lvc:CartesianChart Grid.Row="2">
<lvc:CartesianChart.Series>
<lvc:LineSeries Values="{Binding Values}"></lvc:LineSeries>
</lvc:CartesianChart.Series>
<lvc:CartesianChart.AxisX>
<lvc:Axis MinValue="{Binding From}" MaxValue="{Binding To}"
Separator="{x:Bind CleanSeparator}">
</lvc:Axis>
</lvc:CartesianChart.AxisX>
</lvc:CartesianChart>
</Grid>
</Page>

View File

@@ -0,0 +1,92 @@
using LiveCharts;
using LiveCharts.Definitions.Charts;
using LiveCharts.Uwp;
using System;
using System.ComponentModel;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238
namespace UWP.CartesianChart.ManualZAndP
{
/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
public sealed partial class ManualZAndPExample : Page, INotifyPropertyChanged
{
private double _to;
private double _from;
public ManualZAndPExample()
{
InitializeComponent();
Values = new ChartValues<double>();
var r = new Random();
for (var i = 0; i < 100; i++)
{
Values.Add(r.Next(0, 10));
}
//In this case we are paginating the data only showing the first 25 records
//clicking the buttons previous and next changes the page
From = 0;
To = 25;
DataContext = this;
}
public ChartValues<double> Values { get; set; }
public double From
{
get { return _from; }
set
{
_from = value;
OnPropertyChanged("From");
}
}
public double To
{
get { return _to; }
set
{
_to = value;
OnPropertyChanged("To");
}
}
public ISeparatorView CleanSeparator { get; set; } = DefaultAxes.CleanSeparator;
public event PropertyChangedEventHandler PropertyChanged;
public void OnPropertyChanged(string propertyName = null)
{
if (PropertyChanged != null)
PropertyChanged.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
private void NextOnClick(object sender, RoutedEventArgs e)
{
From += 25;
To += 25;
}
private void PrevOnClick(object sender, RoutedEventArgs e)
{
From -= 25;
To -= 25;
}
private void ManualZoom(object sender, RoutedEventArgs e)
{
//you only need to change the axis limits to zoom in/out any axis.
From = 5;
To = 10;
}
}
}

View File

@@ -0,0 +1,125 @@
<Page x:Class="UWP.CartesianChart.MaterialCards.MaterialCards"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:lvc="using:LiveCharts.Uwp"
mc:Ignorable="d"
d:DesignHeight="500" d:DesignWidth="800"
Background="#E9E9E9">
<Grid Height="500" Width="650" >
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid Margin="15, -60, 15, 15" MaxHeight="350" CornerRadius="4">
<Grid.Resources>
<Style TargetType="lvc:LineSeries">
<Setter Property="StrokeThickness" Value="3"></Setter>
<Setter Property="Stroke" Value="White"></Setter>
<Setter Property="Fill" Value="#4EFFFFFF"></Setter>
<Setter Property="PointGeometrySize" Value="0"></Setter>
<Setter Property="LineSmoothness" Value="0"></Setter>
</Style>
<Style TargetType="lvc:Axis">
<Setter Property="ShowLabels" Value="False"></Setter>
<Setter Property="IsEnabled" Value="False"></Setter>
</Style>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height=".50*"></RowDefinition>
<RowDefinition Height=".5*"></RowDefinition>
</Grid.RowDefinitions>
<Border Grid.Row="0" Grid.RowSpan="4" CornerRadius="4" Background="White" />
<Border Grid.Row="0" Grid.RowSpan="3" Background="#CE2156" ></Border>
<TextBlock Grid.Row="0" TextAlignment="Center" Padding="10, 10, 0, 5" Foreground="White" FontSize="18">
The Current Chart
</TextBlock>
<TextBlock Grid.Row="1" TextAlignment="Center" Foreground="#59FFFFFF" Padding="0,0,0,20">2014.12.25</TextBlock>
<lvc:CartesianChart Grid.Row="2" Margin="0, 0, 0, 0" Series="{Binding LastHourSeries}" Hoverable="False" DataTooltip="{x:Null}">
<lvc:CartesianChart.AxisX>
<!--a small visual improvement, lets hide the first points (x = 0, x=1) to get better animations-->
<lvc:Axis MinValue="2"></lvc:Axis>
</lvc:CartesianChart.AxisX>
</lvc:CartesianChart>
<StackPanel Grid.Row="3" VerticalAlignment="Center" Margin="25, 0">
<TextBlock Opacity=".4" FontSize="13">Total electricity Consumption <LineBreak /> of Galaxy SOHO</TextBlock>
<StackPanel Orientation="Horizontal">
<TextBlock Foreground="#303030" FontSize="40" Text="{Binding LastLecture}" />
<TextBlock Foreground="#303030" FontSize="18" VerticalAlignment="Bottom" Margin="8, 6">kWh</TextBlock>
</StackPanel>
</StackPanel>
</Grid>
<Grid Grid.Column="1" Margin="15, 60, 15, 15" MaxHeight="350" CornerRadius="4">
<Grid.Resources>
<Style TargetType="lvc:ColumnSeries">
<Setter Property="StrokeThickness" Value="0"></Setter>
<Setter Property="Stroke" Value="White"></Setter>
<Setter Property="Fill" Value="White"></Setter>
<Setter Property="MaxColumnWidth" Value="5"></Setter>
</Style>
<Style TargetType="lvc:Axis">
<Setter Property="FontSize" Value="12"></Setter>
<Setter Property="Foreground" Value="#64FFFFFF"></Setter>
</Style>
<Style TargetType="lvc:Separator">
<Setter Property="StrokeThickness" Value="1"></Setter>
<Setter Property="Stroke" Value="#4BFFFFFF"></Setter>
<Setter Property="IsEnabled" Value="False"></Setter>
<Setter Property="Step" Value="1"></Setter>
</Style>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height=".50*"></RowDefinition>
<RowDefinition Height=".5*"></RowDefinition>
</Grid.RowDefinitions>
<Border Grid.Row="0" Grid.RowSpan="4" Background="White" />
<Border Grid.Row="0" Grid.RowSpan="3" Background="#EB5A13" ></Border>
<TextBlock Grid.Row="0" TextAlignment="Center" Padding="10, 10, 0, 5" Foreground="White" FontSize="18">
Time Power
</TextBlock>
<TextBlock Grid.Row="1" TextAlignment="Center" Foreground="#59FFFFFF" Padding="0,0,0,20">2014.12.25</TextBlock>
<Button Grid.Row="3" Width="40" Height="40" VerticalAlignment="Top"
HorizontalAlignment="Right" Margin="20, -20" Canvas.ZIndex="1"
Click="UpdateOnclick">
<Button.Template>
<ControlTemplate TargetType="Button">
<Grid>
<Ellipse Stroke="Black" StrokeThickness="0" Fill="#CD2156">
</Ellipse>
<Path Width="20" Height="20" Stretch="Fill" Fill="White" Data="F1 M 58,33.5001L 58,27L 49,19L 40,27.5001L 40,33.5001L 46,28.2097L 46,40.5C 46,46.299 41.299,51 35.5,51C 29.701,51 25,46.299 25,40.5C 25,34.8686 29.4332,30.2727 35,30.0117L 35,24.0074C 26.1186,24.2718 19,31.5546 19,40.5C 19,49.6127 26.3873,57 35.5,57C 44.6127,57 52,49.6127 52,40.5L 52,28.125L 58,33.5001 Z "/>
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Center"/>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
<lvc:CartesianChart Name="TimePowerChart" Grid.Row="2" Margin="10, 0, 10, 20" Hoverable="False" DataTooltip="{x:Null}">
<lvc:CartesianChart.Series>
<lvc:ColumnSeries Values="{Binding Vals}"/>
</lvc:CartesianChart.Series>
<lvc:CartesianChart.AxisY>
<lvc:Axis IsMerged="True" MaxValue="10">
<lvc:Axis.Separator>
<lvc:Separator IsEnabled="true" Step="{Binding Nan}"></lvc:Separator>
</lvc:Axis.Separator>
</lvc:Axis>
</lvc:CartesianChart.AxisY>
</lvc:CartesianChart>
<StackPanel Grid.Row="3" VerticalAlignment="Center" Margin="25, 0">
<TextBlock Opacity=".4" FontSize="13">The Last 12 hours average <LineBreak /> Electricity Consumption</TextBlock>
<StackPanel Orientation="Horizontal">
<TextBlock Foreground="#303030" FontSize="40" Text="20.45" />
<TextBlock Foreground="#303030" FontSize="18" VerticalAlignment="Bottom" Margin="8, 6">kWh</TextBlock>
</StackPanel>
</StackPanel>
</Grid>
</Grid>
</Page>

View File

@@ -0,0 +1,112 @@
using System;
using System.ComponentModel;
using System.Linq;
using System.Threading.Tasks;
using Windows.UI.Core;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using LiveCharts;
using LiveCharts.Defaults;
using LiveCharts.Uwp;
namespace UWP.CartesianChart.MaterialCards
{
/// <summary>
/// Interaction logic for MaterialCards.xaml
/// </summary>
public partial class MaterialCards : Page, INotifyPropertyChanged
{
private double _lastLecture;
private double _trend;
private DispatcherTimer _timer = new DispatcherTimer {Interval = TimeSpan.FromMilliseconds(500)};
public MaterialCards()
{
InitializeComponent();
LastHourSeries = new SeriesCollection
{
new LineSeries
{
Values = new ChartValues<ObservableValue>
{
new ObservableValue(3),
new ObservableValue(5),
new ObservableValue(6),
new ObservableValue(7),
new ObservableValue(3),
new ObservableValue(4),
new ObservableValue(2),
new ObservableValue(5),
new ObservableValue(8),
new ObservableValue(3),
new ObservableValue(5),
new ObservableValue(6),
new ObservableValue(7),
new ObservableValue(3),
new ObservableValue(4),
new ObservableValue(2),
new ObservableValue(5),
new ObservableValue(8)
}
}
};
_trend = 8;
_timer.Tick += (sender, o) =>
{
var r = new Random();
_trend += (r.NextDouble() > 0.3 ? 1 : -1) * r.Next(0, 5);
LastHourSeries[0].Values.Add(new ObservableValue(_trend));
LastHourSeries[0].Values.RemoveAt(0);
SetLecture();
};
_timer.Start();
Vals = new ChartValues<double> { 5, 9, 8, 6, 1, 5, 7, 3, 6, 3 };
Nan = double.NaN;
DataContext = this;
}
public SeriesCollection LastHourSeries { get; set; }
public ChartValues<double> Vals { get; set; }
public double Nan { get; set; }
public double LastLecture
{
get { return _lastLecture; }
set
{
_lastLecture = value;
OnPropertyChanged("LastLecture");
}
}
private async void SetLecture()
{
var target = ((ChartValues<ObservableValue>) LastHourSeries[0].Values).Last().Value;
var step = (target - _lastLecture)/4;
await Task.Delay(100);
LastLecture += step;
LastLecture = target;
}
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged(string propertyName = null)
{
var handler = PropertyChanged;
if (handler != null) handler(this, new PropertyChangedEventArgs(propertyName));
}
private void UpdateOnclick(object sender, RoutedEventArgs e)
{
TimePowerChart.Update(true);
}
}
}

View File

@@ -0,0 +1,14 @@
<Page
x:Class="UWP.CartesianChart.Missing_Line_Points.MissingPointsExample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:UWP.CartesianChart.Missing_Line_Points"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:lvc="using:LiveCharts.Uwp"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<lvc:CartesianChart Series="{Binding Series}"/>
</Grid>
</Page>

View File

@@ -0,0 +1,44 @@
using LiveCharts;
using LiveCharts.Uwp;
using Windows.UI.Xaml.Controls;
// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238
namespace UWP.CartesianChart.Missing_Line_Points
{
/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
public sealed partial class MissingPointsExample : Page
{
public MissingPointsExample()
{
InitializeComponent();
Series = new SeriesCollection
{
new LineSeries
{
Values = new ChartValues<double>
{
4,
5,
7,
8,
double.NaN,
5,
2,
8,
double.NaN,
6,
2
}
}
};
DataContext = this;
}
public SeriesCollection Series { get; set; }
}
}

View File

@@ -0,0 +1,38 @@
<Page
x:Class="UWP.CartesianChart.MixingSeries.MixingSeries"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:UWP.CartesianChart.MixingSeries"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:lvc="using:LiveCharts.Uwp"
mc:Ignorable="d">
<Grid Background="#303030">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" TextWrapping="Wrap">
Yes you can mix any series supported by a cartesian chart, just add the series and the chart wll handle it, charts are smart enough to scale according to the contained series.
In this case we will only use ObservableClasses, so the chart updates automatically when a property changes, there are already some observable classes defined in thsi library, you
can also build your own
<Hyperlink NavigateUri="http://lvcharts.net/#/examples/v1/iocp-wpf?path=WPF-Observable">
here
</Hyperlink>
is an example
</TextBlock>
<Button Grid.Row="1" Margin="7" Click="UpdateAllOnClick">Click me to update all points</Button>
<lvc:CartesianChart Grid.Row="2" Series="{Binding SeriesCollection}"
Background="#303030">
<lvc:CartesianChart.AxisY>
<lvc:Axis>
<lvc:Axis.Separator>
<lvc:Separator Stroke="#606060"></lvc:Separator>
</lvc:Axis.Separator>
</lvc:Axis>
</lvc:CartesianChart.AxisY>
</lvc:CartesianChart>
</Grid>
</Page>

View File

@@ -0,0 +1,93 @@
using LiveCharts;
using LiveCharts.Defaults;
using LiveCharts.Uwp;
using System;
using System.Linq;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238
namespace UWP.CartesianChart.MixingSeries
{
/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
public sealed partial class MixingSeries : Page
{
public MixingSeries()
{
InitializeComponent();
LineSeries = new LineSeries
{
Values = new ChartValues<ObservableValue>
{
new ObservableValue(5),
new ObservableValue(7),
new ObservableValue(2),
new ObservableValue(3),
},
AreaLimit = 0
};
ScatterSeries = new ScatterSeries
{
Values = new ChartValues<ScatterPoint>
{
new ScatterPoint(0, 2, 10),
new ScatterPoint(1, 1, 2),
new ScatterPoint(2, 3, 7),
new ScatterPoint(3, 4, 9)
}
};
ColumnSeries = new ColumnSeries
{
Values = new ChartValues<ObservableValue>
{
new ObservableValue(5),
new ObservableValue(7),
new ObservableValue(2),
new ObservableValue(3),
}
};
SeriesCollection = new SeriesCollection
{
LineSeries,
ScatterSeries,
ColumnSeries
};
DataContext = this;
}
public ScatterSeries ScatterSeries { get; set; }
public LineSeries LineSeries { get; set; }
public ColumnSeries ColumnSeries { get; set; }
public SeriesCollection SeriesCollection { get; set; }
private void UpdateAllOnClick(object sender, RoutedEventArgs e)
{
var r = new Random();
foreach (var value in LineSeries.Values.Cast<ObservableValue>())
{
value.Value = r.Next(-20, 20);
}
foreach (var value in ColumnSeries.Values.Cast<ObservableValue>())
{
value.Value = r.Next(-20, 20);
}
var i = 0;
foreach (var value in ScatterSeries.Values.Cast<ScatterPoint>())
{
value.X = i;
value.Y = r.Next(-20, 20);
value.Weight = r.Next(-20, 20);
i++;
}
}
}
}

View File

@@ -0,0 +1,36 @@
<Page
x:Class="UWP.CartesianChart.MultiAxes.MultiAxesChart"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:UWP.CartesianChart.MultiAxes"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:lvc="using:LiveCharts.Uwp"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" TextWrapping="Wrap">
You can create multiple axes, just set the Series.ScalesXAt or Series.ScalesYAt properties, you must also add the axis explicitly.
</TextBlock>
<lvc:CartesianChart Grid.Row="2">
<lvc:CartesianChart.AxisY>
<lvc:Axis Foreground="DodgerBlue" Title="Blue Axis"/>
<lvc:Axis Foreground="IndianRed" Title="Red Axis" Position="RightTop" Separator="{x:Bind CleanSeparator}"/>
<lvc:Axis Foreground="DarkOliveGreen" Title="Green Axis" Position="RightTop" Separator="{x:Bind CleanSeparator}"/>
</lvc:CartesianChart.AxisY>
<lvc:CartesianChart.Series>
<lvc:LineSeries Values="{x:Bind LineValues1}" ScalesYAt="0"/>
<!--Scales at blue axis, Axis[0]-->
<lvc:LineSeries Values="{x:Bind LineValues2}" ScalesYAt="1"/>
<!--Scales at red axis, Axis[1]-->
<lvc:LineSeries Values="{x:Bind LineValues3}" ScalesYAt="2"/>
<!--Scales at green axis, Axis[2]-->
</lvc:CartesianChart.Series>
</lvc:CartesianChart>
</Grid>
</Page>

View File

@@ -0,0 +1,26 @@
using LiveCharts;
using LiveCharts.Definitions.Charts;
using LiveCharts.Uwp;
using Windows.UI.Xaml.Controls;
// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238
namespace UWP.CartesianChart.MultiAxes
{
/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
public sealed partial class MultiAxesChart : Page
{
public MultiAxesChart()
{
this.InitializeComponent();
}
public ISeparatorView CleanSeparator { get; set; } = DefaultAxes.CleanSeparator;
public IChartValues LineValues1 { get; set; } = new ChartValues<int>(new int[] { 1, 5, 3, 5, 3 });
public IChartValues LineValues2 { get; set; } = new ChartValues<int>(new int[] { 20, 30, 70, 20, 10 });
public IChartValues LineValues3 { get; set; } = new ChartValues<int>(new int[] { 600, 300, 200, 600, 800 });
}
}

View File

@@ -0,0 +1,24 @@
<Page
x:Class="UWP.CartesianChart.NegativeStackedRow.NegativeStackedRowExample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:UWP.CartesianChart.NegativeStackedRow"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:lvc="using:LiveCharts.Uwp"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<lvc:CartesianChart Series="{Binding SeriesCollection}">
<lvc:CartesianChart.AxisX>
<lvc:Axis LabelFormatter="{Binding Formatter}"></lvc:Axis>
</lvc:CartesianChart.AxisX>
<lvc:CartesianChart.AxisY>
<lvc:Axis Title="Age Range" Labels="{Binding Labels}"></lvc:Axis>
</lvc:CartesianChart.AxisY>
<lvc:CartesianChart.DataTooltip>
<lvc:DefaultTooltip SelectionMode="SharedYValues"></lvc:DefaultTooltip>
</lvc:CartesianChart.DataTooltip>
</lvc:CartesianChart>
</Grid>
</Page>

View File

@@ -0,0 +1,44 @@
using LiveCharts;
using LiveCharts.Uwp;
using System;
using Windows.UI.Xaml.Controls;
// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238
namespace UWP.CartesianChart.NegativeStackedRow
{
/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
public sealed partial class NegativeStackedRowExample : Page
{
public NegativeStackedRowExample()
{
InitializeComponent();
SeriesCollection = new SeriesCollection
{
new StackedRowSeries
{
Title = "Male",
Values = new ChartValues<double> {.5, .7, .8, .8, .6, .2, .6}
},
new StackedRowSeries
{
Title = "Female",
Values = new ChartValues<double> {-.5, -.7, -.8, -.8, -.6, -.2, -.6}
}
};
Labels = new[] { "0-20", "20-35", "35-45", "45-55", "55-65", "65-70", ">70" };
Formatter = value => Math.Abs(value).ToString("P");
DataContext = this;
}
public SeriesCollection SeriesCollection { get; set; }
public string[] Labels { get; set; }
public Func<double, string> Formatter { get; set; }
}
}

View File

@@ -0,0 +1,21 @@
<Page
x:Class="UWP.CartesianChart.PointShapeLine.PointShapeLineExample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:UWP.CartesianChart.PointShapeLine"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:lvc="using:LiveCharts.Uwp"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<lvc:CartesianChart Series="{Binding SeriesCollection}" LegendLocation="Right" >
<lvc:CartesianChart.AxisY>
<lvc:Axis Title="Sales" LabelFormatter="{Binding YFormatter}"></lvc:Axis>
</lvc:CartesianChart.AxisY>
<lvc:CartesianChart.AxisX>
<lvc:Axis Title="Month" Labels="{Binding Labels}"></lvc:Axis>
</lvc:CartesianChart.AxisX>
</lvc:CartesianChart>
</Grid>
</Page>

View File

@@ -0,0 +1,66 @@
using LiveCharts;
using LiveCharts.Uwp;
using System;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media;
// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238
namespace UWP.CartesianChart.PointShapeLine
{
/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
public sealed partial class PointShapeLineExample : Page
{
public PointShapeLineExample()
{
InitializeComponent();
SeriesCollection = new SeriesCollection
{
new LineSeries
{
Title = "Series 1",
Values = new ChartValues<double> { 4, 6, 5, 2 ,4 }
},
new LineSeries
{
Title = "Series 2",
Values = new ChartValues<double> { 6, 7, 3, 4 ,6 },
PointGeometry = null
},
new LineSeries
{
Title = "Series 3",
Values = new ChartValues<double> { 4,2,7,2,7 },
PointGeometry = DefaultGeometries.Square,
PointGeometrySize = 15
}
};
Labels = new[] { "Jan", "Feb", "Mar", "Apr", "May" };
YFormatter = value => value.ToString("C");
//modifying the series collection will animate and update the chart
SeriesCollection.Add(new LineSeries
{
Title = "Series 4",
Values = new ChartValues<double> { 5, 3, 2, 4 },
LineSmoothness = 0, //0: straight lines, 1: really smooth lines
PointGeometry = new PointGeometry("m 25 70.36218 20 -28 -20 22 -8 -6 z"),
PointGeometrySize = 50,
PointForeround = new SolidColorBrush(Windows.UI.Colors.Gray)
});
//modifying any series values will also animate and update the chart
SeriesCollection[3].Values.Add(5d);
DataContext = this;
}
public SeriesCollection SeriesCollection { get; set; }
public string[] Labels { get; set; }
public Func<double, string> YFormatter { get; set; }
}
}

View File

@@ -0,0 +1,24 @@
<Page
x:Class="UWP.CartesianChart.PointState.PointStateExample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:UWP.CartesianChart.PointState"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:lvc="using:LiveCharts.Uwp"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Button Grid.Row="0" Click="UpdateDataOnClick">Update Data</Button>
<lvc:CartesianChart Grid.Row="1">
<lvc:CartesianChart.Series>
<lvc:LineSeries Values="{Binding Values}" PointGeometrySize="25"
Configuration="{Binding Mapper}"/>
</lvc:CartesianChart.Series>
</lvc:CartesianChart>
</Grid>
</Page>

View File

@@ -0,0 +1,64 @@
using LiveCharts;
using LiveCharts.Configurations;
using LiveCharts.Defaults;
using System;
using Windows.UI;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media;
// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238
namespace UWP.CartesianChart.PointState
{
/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
public sealed partial class PointStateExample : Page
{
public PointStateExample()
{
InitializeComponent();
var r = new Random();
Values = new ChartValues<ObservableValue>
{
new ObservableValue(r.Next(10, 400)),
new ObservableValue(r.Next(10, 400)),
new ObservableValue(r.Next(10, 400)),
new ObservableValue(r.Next(10, 400)),
new ObservableValue(r.Next(10, 400)),
new ObservableValue(r.Next(10, 400))
};
//Lets define a custom mapper, to set fill and stroke
//according to chart values...
Mapper = Mappers.Xy<ObservableValue>()
.X((item, index) => index)
.Y(item => item.Value)
.Fill(item => item.Value > 200 ? DangerBrush : null)
.Stroke(item => item.Value > 200 ? DangerBrush : null);
Formatter = x => x + " ms";
OkBrush = new SolidColorBrush(Color.FromArgb(255, 254, 192, 7));
DangerBrush = new SolidColorBrush(Color.FromArgb(255, 238, 83, 80));
DataContext = this;
}
public Func<double, string> Formatter { get; set; }
public ChartValues<ObservableValue> Values { get; set; }
public Brush OkBrush { get; set; }
public Brush DangerBrush { get; set; }
public CartesianMapper<ObservableValue> Mapper { get; set; }
private void UpdateDataOnClick(object sender, RoutedEventArgs e)
{
var r = new Random();
foreach (var observable in Values)
{
observable.Value = r.Next(10, 400);
}
}
}
}

View File

@@ -0,0 +1,34 @@
<Page
x:Class="UWP.CartesianChart.ScatterPlot.ScatterExample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:UWP.CartesianChart.ScatterPlot"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:lvc="using:LiveCharts.Uwp"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Button Grid.Row="0" Margin="10" Click="RandomizeOnClick">Randomize</Button>
<lvc:CartesianChart Grid.Row="1" LegendLocation="Bottom">
<lvc:CartesianChart.Series>
<lvc:ScatterSeries Title="Series A" Values="{Binding ValuesA}" />
<lvc:ScatterSeries Title="Series B" Values="{Binding ValuesB}">
<lvc:ScatterSeries.PointGeometry>
<lvc:PointGeometry Data="M 1,0 L 2,1 1,2 0,1 z"/>
</lvc:ScatterSeries.PointGeometry>
</lvc:ScatterSeries>
<lvc:ScatterSeries Title="Series C" Values="{Binding ValuesC}"
StrokeThickness="2" Fill="Transparent">
<lvc:ScatterSeries.PointGeometry>
<lvc:PointGeometry Data="M 0,1 l 1,1 h -2 Z"/>
</lvc:ScatterSeries.PointGeometry>
</lvc:ScatterSeries>
</lvc:CartesianChart.Series>
</lvc:CartesianChart>
</Grid>
</Page>

View File

@@ -0,0 +1,53 @@
using LiveCharts;
using LiveCharts.Defaults;
using System;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238
namespace UWP.CartesianChart.ScatterPlot
{
/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
public sealed partial class ScatterExample : Page
{
public ScatterExample()
{
InitializeComponent();
var r = new Random();
ValuesA = new ChartValues<ObservablePoint>();
ValuesB = new ChartValues<ObservablePoint>();
ValuesC = new ChartValues<ObservablePoint>();
for (var i = 0; i < 20; i++)
{
ValuesA.Add(new ObservablePoint(r.NextDouble() * 10, r.NextDouble() * 10));
ValuesB.Add(new ObservablePoint(r.NextDouble() * 10, r.NextDouble() * 10));
ValuesC.Add(new ObservablePoint(r.NextDouble() * 10, r.NextDouble() * 10));
}
DataContext = this;
}
public ChartValues<ObservablePoint> ValuesA { get; set; }
public ChartValues<ObservablePoint> ValuesB { get; set; }
public ChartValues<ObservablePoint> ValuesC { get; set; }
private void RandomizeOnClick(object sender, RoutedEventArgs e)
{
var r = new Random();
for (var i = 0; i < 20; i++)
{
ValuesA[i].X = r.NextDouble() * 10;
ValuesA[i].Y = r.NextDouble() * 10;
ValuesB[i].X = r.NextDouble() * 10;
ValuesB[i].Y = r.NextDouble() * 10;
ValuesC[i].X = r.NextDouble() * 10;
ValuesC[i].Y = r.NextDouble() * 10;
}
}
}
}

View File

@@ -0,0 +1,46 @@
<Page
x:Class="UWP.CartesianChart.Sections.SectionsExample"
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"
xmlns:lvc="using:LiveCharts.Uwp"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" TextWrapping="Wrap">
<Bold>New in 0.7.0</Bold> You can now have axis sections to highlight a range of values
</TextBlock>
<Button Grid.Row="1" Height="30" Click="UpdateAllOnClick" HorizontalAlignment="Stretch">
Move All
</Button>
<lvc:CartesianChart Grid.Row="2" Series="{Binding SeriesCollection}">
<lvc:CartesianChart.AxisY>
<lvc:Axis Name="Axis">
<lvc:Axis.Sections>
<lvc:AxisSection Value="8.5" StrokeThickness="3" Stroke="#F9D648">
<lvc:AxisSection.Fill>
<SolidColorBrush Color="#A3A3FF" Opacity=".4"></SolidColorBrush>
</lvc:AxisSection.Fill>
</lvc:AxisSection>
<lvc:AxisSection Value="4" SectionWidth="4" Label="Good">
<lvc:AxisSection.Fill>
<SolidColorBrush Color="#CDCDCD" Opacity=".4"></SolidColorBrush>
</lvc:AxisSection.Fill>
</lvc:AxisSection>
<lvc:AxisSection Value="0" SectionWidth="4" Label="Bad">
<lvc:AxisSection.Fill>
<SolidColorBrush Color="#FF8585" Opacity=".4"></SolidColorBrush>
</lvc:AxisSection.Fill>
</lvc:AxisSection>
</lvc:Axis.Sections>
</lvc:Axis>
</lvc:CartesianChart.AxisY>
</lvc:CartesianChart>
</Grid>
</Page>

View File

@@ -0,0 +1,76 @@
using LiveCharts.Defaults;
using LiveCharts.Uwp;
using System;
using System.Linq;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media;
using Windows.UI;
using LiveCharts;
// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238
namespace UWP.CartesianChart.Sections
{
/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
public sealed partial class SectionsExample : Page
{
public SectionsExample()
{
InitializeComponent();
SeriesCollection = new SeriesCollection
{
new LineSeries
{
Values = new ChartValues<ObservableValue>
{
new ObservableValue(3),
new ObservableValue(5),
new ObservableValue(2),
new ObservableValue(7),
new ObservableValue(7),
new ObservableValue(4)
},
PointGeometrySize = 0,
StrokeThickness = 4,
Fill = new SolidColorBrush(Colors.Transparent)
},
new LineSeries
{
Values = new ChartValues<ObservableValue>
{
new ObservableValue(3),
new ObservableValue(4),
new ObservableValue(6),
new ObservableValue(8),
new ObservableValue(7),
new ObservableValue(5)
},
PointGeometrySize = 0,
StrokeThickness = 4,
Fill = new SolidColorBrush(Colors.Transparent)
}
};
DataContext = this;
}
public SeriesCollection SeriesCollection { get; set; }
private void UpdateAllOnClick(object sender, RoutedEventArgs e)
{
var r = new Random();
foreach (var series in SeriesCollection)
{
foreach (var observable in series.Values.Cast<ObservableValue>())
{
observable.Value = r.Next(0, 10);
}
}
}
}
}

Some files were not shown because too many files have changed in this diff Show More