项目结构调整
100
Others/Live-Charts-master/Examples/UWP/App.xaml
Normal 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="" />
|
||||
<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>
|
||||
121
Others/Live-Charts-master/Examples/UWP/App.xaml.cs
Normal 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();
|
||||
}
|
||||
}
|
||||
}
|
||||
60
Others/Live-Charts-master/Examples/UWP/AppShell.xaml
Normal 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>
|
||||
38
Others/Live-Charts-master/Examples/UWP/AppShell.xaml.cs
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 7.5 KiB |
|
After Width: | Height: | Size: 2.9 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
BIN
Others/Live-Charts-master/Examples/UWP/Assets/StoreLogo.png
Normal file
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 3.1 KiB |
@@ -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>
|
||||
@@ -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; }
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
@@ -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; }
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
@@ -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; }
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
@@ -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; }
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
@@ -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; }
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
@@ -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);
|
||||
//}
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
@@ -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));
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
using System;
|
||||
|
||||
namespace UWP.CartesianChart.ConstantChanges
|
||||
{
|
||||
public class MeasureModel
|
||||
{
|
||||
public DateTime DateTime { get; set; }
|
||||
public double Value { get; set; }
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
@@ -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; }
|
||||
}
|
||||
}
|
||||
@@ -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; }
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
@@ -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));
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
@@ -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));
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
@@ -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));
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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();
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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();
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
@@ -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");
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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; }
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
@@ -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));
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
@@ -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));
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
@@ -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; }
|
||||
}
|
||||
}
|
||||
|
After Width: | Height: | Size: 919 B |
|
After Width: | Height: | Size: 647 B |
|
After Width: | Height: | Size: 597 B |
@@ -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>
|
||||
@@ -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));
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
@@ -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" };
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
@@ -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; }
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
@@ -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; }
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
@@ -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();
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
@@ -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; }
|
||||
}
|
||||
}
|
||||
@@ -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; }
|
||||
}
|
||||
}
|
||||
@@ -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();
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
@@ -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);
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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 > x < 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>
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
@@ -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; }
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
@@ -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++;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
@@ -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 });
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
@@ -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; }
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
@@ -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; }
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||