diff --git a/wpf/Charts/Adornments/Label.md b/wpf/Charts/Adornments/Label.md index 933e44f58..6f66815d6 100644 --- a/wpf/Charts/Adornments/Label.md +++ b/wpf/Charts/Adornments/Label.md @@ -23,17 +23,21 @@ The following code example demonstrates about define the value to be displayed a {% highlight xaml %} - + + {% endhighlight %} {% highlight c# %} - ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() - { - ShowLabel = true, - SegmentLabelContent=LabelContent.YValue - }; +ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() +{ + ShowLabel = true, + SegmentLabelContent = LabelContent.YValue +}; {% endhighlight %} @@ -67,30 +71,38 @@ The following code example demonstrates the customization of label using the abo {% highlight xaml %} - - - - + + + + {% endhighlight %} {% highlight c# %} - ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() - { - - ShowLabel = true, - LabelPosition = AdornmentsLabelPosition.Outer, - Foreground = new SolidColorBrush(Colors.Black), - BorderBrush = new SolidColorBrush(Colors.Black), - Background = new SolidColorBrush(Colors.DarkGray), - BorderThickness = new Thickness(1), - Margin = new Thickness(1), - FontStyle = FontStyles.Italic, - FontFamily = new FontFamily("Calibri"), - FontSize = 11 - }; - +ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() +{ + ShowLabel = true, + LabelPosition = AdornmentsLabelPosition.Outer, + Foreground = new SolidColorBrush(Colors.Black), + BorderBrush = new SolidColorBrush(Colors.Black), + Background = new SolidColorBrush(Colors.DarkGray), + BorderThickness= new Thickness(1), + Margin = new Thickness(1), + FontStyle = FontStyles.Italic, + FontFamily = new FontFamily("Calibri"), + FontSize = 11 +}; {% endhighlight %} @@ -106,62 +118,78 @@ The default appearance of the label can be customized using [`LabelTemplate`](ht {% highlight xaml %} - - - - - - - - - - - - - - - - - - - - - - - - ... - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + ... - - + + + + + + + ... + + {% endhighlight %} {% highlight c# %} - ColumnSeries series = new ColumnSeries() - { - ItemsSource = new ViewModel().Demands, - XBindingPath = "Category", - YBindingPath = "Value", - Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77)) - }; - - ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() - { - ShowLabel = true, - LabelPosition = AdornmentsLabelPosition.Outer, - LabelTemplate = this.Resources["adornmentTemplate"] as DataTemplate - }; - series.AdornmentsInfo = adornmentInfo; +ColumnSeries series = new ColumnSeries() +{ + ItemsSource = new ViewModel().Demands, + XBindingPath = "Category", + YBindingPath = "Value", + Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77)) +}; + +ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() +{ + ShowLabel = true, + LabelPosition = AdornmentsLabelPosition.Outer, + LabelTemplate = this.Resources["adornmentTemplate"] as DataTemplate +}; + +series.AdornmentsInfo = adornmentInfo; {% endhighlight %} @@ -179,18 +207,21 @@ The following code example demonstrates the y value having three decimal digits. {% highlight xaml %} - - + + {% endhighlight %} {% highlight c# %} - ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() - { - ShowLabel = true, - SegmentLabelFormat = "0.000" - }; +ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() +{ + ShowLabel = true, + SegmentLabelFormat = "0.000" +}; {% endhighlight %} @@ -208,19 +239,25 @@ In the following image, you can see the decimal position will be rounded off to {% highlight xaml %} - - - + + + + + {% endhighlight %} {% highlight c# %} - ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() - { - ShowLabel = true, - LabelRotationAngle = 45, - LabelPosition=AdornmentsLabelPosition.Outer - }; +ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() +{ + ShowLabel = true, + LabelRotationAngle = 45, + LabelPosition = AdornmentsLabelPosition.Outer +}; + {% endhighlight %} {% endtabs %} @@ -244,51 +281,57 @@ The following code example shows the customization options for connector line: {% highlight xaml %} - - - + + + - - - - - ... - - - - - + + + ... + + + + + - ... - - + + {% endhighlight %} {% highlight c# %} - PieSeries series = new PieSeries() - { - ItemsSource = new ServerViewModel().Performance, - XBindingPath = "Year", - YBindingPath = "Plastic", - LabelPosition = CircularSeriesLabelPosition.OutsideExtended, - Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77)) - }; - - ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() - { - ShowLabel = true, - ShowConnectorLine = true, - UseSeriesPalette = true, - ConnectorLineStyle=this.Resources["lineStyle"] as Style - LabelPosition =AdornmentsLabelPosition.Outer, - }; - series.AdornmentsInfo = adornmentInfo; +PieSeries series = new PieSeries() +{ + ItemsSource = new ServerViewModel().Performance, + XBindingPath = "Year", + YBindingPath = "Plastic", + LabelPosition = CircularSeriesLabelPosition.OutsideExtended, + Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77)) +}; + +ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() +{ + ShowLabel = true, + ShowConnectorLine = true, + UseSeriesPalette = true, + ConnectorLineStyle=this.Resources["lineStyle"] as Style + LabelPosition =AdornmentsLabelPosition.Outer, +}; + +series.AdornmentsInfo = adornmentInfo; {% endhighlight %} @@ -305,42 +348,51 @@ The following code example shows the customization options for connector line: {% highlight xaml %} - - - - - + + + + + {% endhighlight %} {% highlight c# %} - PieSeries series = new PieSeries() - { - ItemsSource = new ServerViewModel().Performance, - XBindingPath = "Year", - YBindingPath = "Plastic", - EnableSmartLabels = true, - ExplodeAll = true, - ExplodeRadius = 3, - ConnectorType=ConnectorMode.Bezier, - LabelPosition = CircularSeriesLabelPosition.OutsideExtended, - Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77)) - }; - - ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() - { - ShowLabel = true, - ShowConnectorLine = true, - HorizontalAlignment = HorizontalAlignment.Center, - VerticalAlignment = VerticalAlignment.Center, - ConnectorHeight= 80 - }; - - {% endhighlight %} +PieSeries series = new PieSeries() +{ + ItemsSource = new ServerViewModel().Performance, + XBindingPath = "ServerLoad", + YBindingPath = "Server1", + EnableSmartLabels = true, + ExplodeAll = true, + ExplodeRadius = 3, + ConnectorType = ConnectorMode.Bezier, + LabelPosition = CircularSeriesLabelPosition.OutsideExtended, + Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77)) +}; + +ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() +{ + ShowLabel = true, + ShowConnectorLine = true, + HorizontalAlignment= HorizontalAlignment.Center, + VerticalAlignment = VerticalAlignment.Center, + ConnectorHeight = 80 +}; + +{% endhighlight %} {% endtabs %} @@ -366,19 +418,20 @@ The following code example shows the customization options for connector line: {% highlight xaml %} - - - + + {% endhighlight %} {% highlight c# %} - ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() - { - ShowLabel = true, - UseSeriesPalette = true - }; +ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() +{ + ShowLabel = true, + UseSeriesPalette = true +}; {% endhighlight %} @@ -394,39 +447,54 @@ The following code example demonstrates the EnableSmartLabels property: {% highlight xaml %} - - - - - + + + + + + + {% endhighlight %} {% highlight c# %} - PieSeries series = new PieSeries() - { - ItemsSource = new ViewModel().Tax, - XBindingPath = "Year", - YBindingPath = "Plastic", - EnableSmartLabels = true, - ExplodeAll = true, - ExplodeRadius = 3, - Palette = ChartColorPalette.Custom, - LabelPosition=CircularSeriesLabelPosition.OutsideExtended, - Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77)) - }; - - ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() - { - ShowLabel = true, - ShowConnectorLine = true, - UseSeriesPalette = true, - HorizontalAlignment = HorizontalAlignment.Center, - VerticalAlignment = VerticalAlignment.Center - }; - series.AdornmentsInfo = adornmentInfo; +PieSeries series = new PieSeries() +{ + ItemsSource = new ViewModel().CategoricalData, + XBindingPath = "Year", + YBindingPath = "Plastic", + EnableSmartLabels = true, + ExplodeAll = true, + ExplodeRadius = 3, + Palette = ChartColorPalette.Custom, + LabelPosition = CircularSeriesLabelPosition.OutsideExtended, + Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77)) +}; + +ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() +{ + ShowLabel = true, + ShowConnectorLine = true, + UseSeriesPalette = true, + HorizontalAlignment = HorizontalAlignment.Center, + VerticalAlignment = VerticalAlignment.Center +}; + +series.AdornmentsInfo = adornmentInfo; {% endhighlight %} diff --git a/wpf/Charts/Adornments/Marker.md b/wpf/Charts/Adornments/Marker.md index d43bc666b..622401199 100644 --- a/wpf/Charts/Adornments/Marker.md +++ b/wpf/Charts/Adornments/Marker.md @@ -21,21 +21,24 @@ The following code example demonstrates the column series with [`Diamond`](https {% highlight xaml %} - - - - + + + + {% endhighlight %} {% highlight c# %} - ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() - { - ShowMarker = true, - Symbol = ChartSymbol.Diamond, - SymbolInterior=new SolidColorBrush(Colors.Black) - }; +ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() +{ + ShowMarker = true, + Symbol = ChartSymbol.Diamond, + SymbolInterior = new SolidColorBrush(Colors.Black) +}; {% endhighlight %} @@ -73,23 +76,28 @@ We have some predefined symbols such as {% highlight xaml %} - - o> + + {% endhighlight %} {% highlight c# %} - ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() - { - ShowMarker = true, - SymbolStroke = new SolidColorBrush(Colors.Black), - SymbolInterior = new SolidColorBrush(Colors.DarkGray), - SymbolHeight = 10, - SymbolWidth = 10, - Symbol = ChartSymbol.Ellipse - }; +ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() +{ + ShowMarker = true, + SymbolStroke = new SolidColorBrush(Colors.Black), + SymbolInterior = new SolidColorBrush(Colors.DarkGray), + SymbolHeight = 10, + SymbolWidth = 10, + Symbol = ChartSymbol.Ellipse +}; {% endhighlight %} @@ -106,69 +114,74 @@ The following code example demonstrates how to use SymbolTemplate. {% highlight xaml %} - - - - - - - - - - - - - - - - - - - - - - + - + + + + + + + + + + + + + + + + + + + + + - - ... - - + + ... + - + - ... - + {% endhighlight %} {% highlight c# %} - ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() - { - AdornmentsPosition = AdornmentsPosition.Top, - SymbolTemplate = chart.Resources["symbolTemplate"] as DataTemplate, - Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77)) - }; +ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() +{ + AdornmentsPosition = AdornmentsPosition.Top, + SymbolTemplate = chart.Resources["symbolTemplate"] as DataTemplate, + Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77)) +}; {% endhighlight %} diff --git a/wpf/Charts/Adornments/Positioning-Adornment.md b/wpf/Charts/Adornments/Positioning-Adornment.md index b8a57a9b3..9e176b7ea 100644 --- a/wpf/Charts/Adornments/Positioning-Adornment.md +++ b/wpf/Charts/Adornments/Positioning-Adornment.md @@ -23,22 +23,30 @@ The following code example explains the positioning of adornments in the middle {% highlight xaml %} - - + + + + {% endhighlight %} {% highlight c# %} - ColumnSeries series = new ColumnSeries(); - ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() - { - ShowMarker = true, - Symbol = ChartSymbol.Ellipse, - SymbolInterior = new SolidColorBrush(Colors.DarkGray), - AdornmentsPosition=AdornmentsPosition.TopAndBottom - }; - series.AdornmentsInfo = adornmentInfo; +ColumnSeries series = new ColumnSeries(); + +ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() +{ + ShowMarker = true, + Symbol = ChartSymbol.Ellipse, + SymbolInterior = new SolidColorBrush(Colors.DarkGray), + AdornmentsPosition = AdornmentsPosition.TopAndBottom +}; + +series.AdornmentsInfo = adornmentInfo; {% endhighlight %} @@ -67,17 +75,17 @@ The following code sample illustrates the center position of data marker labels, {% highlight xaml %} - + {% endhighlight %} {% highlight c# %} - ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() - { - ShowLabel = true, - LabelPosition =AdornmentsLabelPosition.Center - }; +ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() +{ + ShowLabel = true, + LabelPosition =AdornmentsLabelPosition.Center +}; {% endhighlight %} @@ -93,17 +101,17 @@ The following code sample illustrates the inner position of data marker labels, {% highlight xaml %} - + {% endhighlight %} {% highlight c# %} - ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() - { - ShowLabel = true, - LabelPosition =AdornmentsLabelPosition.Inner - }; +ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() +{ + ShowLabel = true, + LabelPosition =AdornmentsLabelPosition.Inner +}; {% endhighlight %} @@ -120,17 +128,17 @@ The following code sample illustrates the outer position of data marker labels, {% highlight xaml %} - + {% endhighlight %} {% highlight c# %} - ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() - { - ShowLabel = true, - LabelPosition =AdornmentsLabelPosition.Outer - }; +ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo() +{ + ShowLabel = true, + LabelPosition =AdornmentsLabelPosition.Outer +}; {% endhighlight %} diff --git a/wpf/Charts/Annotations.md b/wpf/Charts/Annotations.md index 13db7bc29..882e2ab93 100644 --- a/wpf/Charts/Annotations.md +++ b/wpf/Charts/Annotations.md @@ -24,21 +24,26 @@ You can create an instance for any type of Annotation and add it to [`Annotation {% highlight xml %} - - - - + + + + {% endhighlight %} {% highlight c# %} - EllipseAnnotation annotation=new EllipseAnnotation() - { - X1 = 1.5, Y1 = 20, - X2 = 3, Y2 = 23, - Text = "Ellipse" - }; +EllipseAnnotation annotation=new EllipseAnnotation() +{ + X1 = 1.5, Y1 = 20, + X2 = 3, Y2 = 23, + Text = "Ellipse" +}; chart.Annotations.Add(annotation); @@ -61,23 +66,30 @@ To position the annotation based on axis, set the X1 and Y1, X2 and Y2 propertie {% highlight xml %} - - + + {% endhighlight %} {% highlight c# %} - RectangleAnnotation annotation=new RectangleAnnotation() - { - X1 = 1.25, Y1 = 1300, - X2 = 2.25, Y2 = 1500, - Text = "Axis Value", - CoordinateUnit=CoordinateUnit.Axis, - Text="Axis Value" - }; - -chart.Annotations.Add(annotation); +RectangleAnnotation annotation = new RectangleAnnotation() +{ + X1 = 1.25, + Y1 = 1300, + X2 = 2.25, + Y2 = 1500, + Text = "Axis Value", + CoordinateUnit = CoordinateUnit.Axis, +}; {% endhighlight %} @@ -94,20 +106,31 @@ To position based on the pixel values you have to set the CoordinateUnit as Pixe {% highlight xml %} - - + + + + {% endhighlight %} {% highlight c# %} - RectangleAnnotation annotation=new RectangleAnnotation() - { - X1 = 50, Y1 = 150, - X2 = 100, Y2 = 125, - CoordinateUnit=CoordinateUnit.Pixel, - Text="Pixel Value" - }; + +RectangleAnnotation annotation = new RectangleAnnotation() +{ + X1 = 50, + Y1 = 150, + X2 = 100, + Y2 = 125, + CoordinateUnit = CoordinateUnit.Pixel, + Text = "Pixel Value" +}; chart.Annotations.Add(annotation); @@ -125,101 +148,142 @@ You can also add annotation for a particular axis when there is multiple axes us {% highlight xaml %} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {% endhighlight %} {% highlight c# %} - SfChart chart = new SfChart(); - chart.RowDefinitions.Add(new ChartRowDefinition()); - chart.RowDefinitions.Add(new ChartRowDefinition()); - chart.PrimaryAxis = new CategoryAxis(); - chart.SecondaryAxis = new NumericalAxis(); - ChartBase.SetRow(chart.SecondaryAxis, 0); - - HorizontalLineAnnotation annotation = new HorizontalLineAnnotation() - { - X1 = -0.5, - Y1 = 1700, - X2 = 3.5, - YAxisName = "ColumnAxis", - LineCap=LineCap.Arrow, - Stroke=new SolidColorBrush(Colors.DarkGray) - }; - - RectangleAnnotation rect = new RectangleAnnotation() - { - YAxisName = "ScatterAxis", - Fill = new SolidColorBrush(Colors.LightGray), - Stroke = new SolidColorBrush(Colors.DarkGray), - Opacity = 0.5, - X1 = 0.5, - Y1 = 900, - X2 = 2.5, - Y2 = 1600 - }; - - ColumnSeries columnSeries = new ColumnSeries() - { - ItemsSource = new CategoricalViewModel().CategoricalData, - XBindingPath = "Category", - YBindingPath = "Plastic", - Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77)) - }; - - ScatterSeries scatterSeries = new ScatterSeries() - { - ItemsSource = new CategoricalViewModel().CategoricalData, - XBindingPath = "Category", - YBindingPath = "Plastic", - Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77)) - }; - - NumericalAxis axis = new NumericalAxis() - { - Name = "ScatterAxis", - Maximum = 2000, - FontSize = 11, - Interval = 500, - ShowGridLines = false - }; - - scatterSeries.YAxis = axis; - ChartBase.SetRow(axis, 1); - - chart.Series.Add(columnSeries); - chart.Series.Add(scatterSeries); + SfChart chart = new SfChart(); + +chart.RowDefinitions.Add(new ChartRowDefinition()); +chart.RowDefinitions.Add(new ChartRowDefinition()); + +chart.PrimaryAxis = new CategoryAxis(); + +chart.SecondaryAxis = new NumericalAxis(); +ChartBase.SetRow(chart.SecondaryAxis, 0); + +HorizontalLineAnnotation annotation = new HorizontalLineAnnotation() +{ + X1 = -0.5, + Y1 = 1700, + X2 = 3.5, + YAxisName = "ColumnAxis", + LineCap = LineCap.Arrow, + Stroke = new SolidColorBrush(Colors.DarkGray) +}; + +RectangleAnnotation rect = new RectangleAnnotation() +{ + YAxisName = "ScatterAxis", + Fill = new SolidColorBrush(Colors.LightGray), + Stroke = new SolidColorBrush(Colors.DarkGray), + Opacity = 0.5, + X1 = 0.5, + Y1 = 900, + X2 = 2.5, + Y2 = 1600 +}; + +ColumnSeries columnSeries = new ColumnSeries() +{ + ItemsSource = new CategoricalViewModel().CategoricalData, + XBindingPath = "Category", + YBindingPath = "Plastic", + Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77)) +}; + +ScatterSeries scatterSeries = new ScatterSeries() +{ + ItemsSource = new CategoricalViewModel().CategoricalData, + XBindingPath = "Category", + YBindingPath = "Plastic", + Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77)) +}; + +NumericalAxis axis = new NumericalAxis() +{ + Name = "ScatterAxis", + Maximum = 2000, + FontSize = 11, + Interval = 500, + ShowGridLines = false +}; + +scatterSeries.YAxis = axis; +ChartBase.SetRow(axis, 1); + +chart.Annotations.Add(rect); +chart.Annotations.Add(annotation); + +chart.Series.Add(columnSeries); +chart.Series.Add(scatterSeries); {% endhighlight %} @@ -235,21 +299,20 @@ You can also add annotation for a particular axis when there is multiple axes us {% highlight xml %} - - - - + + + {% endhighlight %} {% highlight c# %} - TextAnnotation annotation=new TextAnnotation() - { - X1 = 2.5, - Y1 = 1400, - Text="Annotation" - }; +TextAnnotation annotation=new TextAnnotation() +{ + X1 = 2.5, + Y1 = 1400, + Text="Annotation" +}; chart.Annotations.Add(annotation); @@ -288,26 +351,36 @@ The following properties are used to customize the text: {% highlight xml %} - + + + {% endhighlight %} {% highlight c# %} - TextAnnotation annotation = new TextAnnotation() - { - X1 = 3.5, - Y1 = 500, - Text = "Annotation", - EnableEditing=true, - Foreground=new SolidColorBrush(Colors.Black), - FontStyle=FontStyles.Bold, - HorizontalAlignment=HorizontalAlignment.Stretch, - VerticalAlignment=VerticalAlignment.Stretch - }; +TextAnnotation annotation = new TextAnnotation() +{ + X1 = 3.5, + Y1 = 500, + Text = "Annotation", + EnableEditing=true, + Foreground=new SolidColorBrush(Colors.Black), + FontStyle=FontStyles.Bold, + HorizontalAlignment=HorizontalAlignment.Stretch, + VerticalAlignment=VerticalAlignment.Stretch +}; - chart.Annotations.Add(annotation); +chart.Annotations.Add(annotation); {% endhighlight %} @@ -353,21 +426,26 @@ The [`EllipseAnnotation`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml. {% highlight xml %} - - + + {% endhighlight %} {% highlight c# %} - EllipseAnnotation ellipse = new EllipseAnnotation() - { - X1 = 1.5, - Y1 = 1400, - X2 = 2.5, - Y2 = 1600, - Text = "Ellipse" - }; +EllipseAnnotation ellipse = new EllipseAnnotation() +{ + X1 = 1.5, + Y1 = 1400, + X2 = 2.5, + Y2 = 1600, + Text = "Ellipse" +}; {% endhighlight %} @@ -383,21 +461,27 @@ The [`RectangleAnnotation`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xam {% highlight xml %} - - + + + {% endhighlight %} {% highlight c# %} - RectangleAnnotation rectangle = new RectangleAnnotation() - { - X1 = 2.5, - Y1 = 1500, - X2 = 3.5, - Y2 = 1750, - Text = "Rectangle" - }; +RectangleAnnotation rectangle = new RectangleAnnotation() +{ + X1 = 2.5, + Y1 = 1500, + X2 = 3.5, + Y2 = 1750, + Text = "Rectangle" +}; {% endhighlight %} @@ -413,21 +497,26 @@ The [`LineAnnotation`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Cha {% highlight xml %} - - + + {% endhighlight %} {% highlight c# %} - LineAnnotation line = new LineAnnotation() - { - X1 = 1.5, - Y1 = 1150, - X2 = 3.5, - Y2 = 1600, - Text = "Line" - }; +LineAnnotation line = new LineAnnotation() +{ + X1 = 1.5, + Y1 = 1150, + X2 = 3.5, + Y2 = 1600, + Text = "Line" +}; {% endhighlight %} @@ -443,26 +532,31 @@ The [`VerticalLineAnnotation`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI. {% highlight xml %} - - + + - + + {% endhighlight %} {% highlight c# %} - HorizontalLineAnnotation hor = new HorizontalLineAnnotation() - { - X1 = -0.5, - Y1 = 1500, - X2 = 4.5, - }; +HorizontalLineAnnotation hor = new HorizontalLineAnnotation() +{ + X1 = -0.5, + Y1 = 1500, + X2 = 4.5, +}; - VerticalLineAnnotation ver = new VerticalLineAnnotation() - { - X1 = 2.5 - }; +VerticalLineAnnotation ver = new VerticalLineAnnotation() +{ + X1 = 2.5 +}; {% endhighlight %} @@ -489,22 +583,28 @@ To display single headed arrow, set the [`LineCap`](https://help.syncfusion.com/ {% highlight xml %} - - + + {% endhighlight %} {% highlight c# %} - LineAnnotation ellipse = new LineAnnotation() - { - X1 = 0.5, - Y1 = 1500, - X2 = 3.5, - Y2 = 1500, - Text = "Line", - LineCap=LineCap.Arrow - }; +LineAnnotation ellipse = new LineAnnotation() +{ + X1 = 0.5, + Y1 = 1500, + X2 = 3.5, + Y2 = 1500, + Text = "Line", + LineCap = LineCap.Arrow +}; {% endhighlight %} @@ -521,28 +621,35 @@ To display single headed arrow, set the [`LineCap`](https://help.syncfusion.com/ {% highlight xml %} - - + + - + + {% endhighlight %} {% highlight c# %} - HorizontalLineAnnotation hor = new HorizontalLineAnnotation() - { - X1 = -0.5, - Y1 = 1500, - X2 = 4.5, - ShowAxisLabel=true - }; +HorizontalLineAnnotation hor = new HorizontalLineAnnotation() +{ + X1 = -0.5, + Y1 = 1500, + X2 = 4.5, + ShowAxisLabel=true +}; - VerticalLineAnnotation ver = new VerticalLineAnnotation() - { - X1 = 2.5, - ShowAxisLabel=true - }; +VerticalLineAnnotation ver = new VerticalLineAnnotation() +{ + X1 = 2.5, + ShowAxisLabel=true +}; {% endhighlight %} @@ -563,24 +670,32 @@ The text alignment can be changed using [`HorizontalTextAlignment`](https://help {% tabs %} {% highlight xaml %} - - + + {% endhighlight %} {% highlight c# %} - EllipseAnnotation ellipse = new EllipseAnnotation() - { - X1 = 1.5, - Y1 = 1400, - X2 = 2.5, - Y2 = 1600, - HorizontalTextAlignment =HorizontalAlignment.Center, - VerticalTextAlignment = VerticalAlignment.Center, - FontStyle=FontStyles.Bold, - Text = "Ellipse" - }; +EllipseAnnotation ellipse = new EllipseAnnotation() +{ + X1 = 1.5, + Y1 = 1400, + X2 = 2.5, + Y2 = 1600, + HorizontalTextAlignment = HorizontalAlignment.Center, + VerticalTextAlignment = VerticalAlignment.Center, + FontStyle = FontStyles.Bold, + Text = "Ellipse" +}; {% endhighlight %} @@ -607,32 +722,45 @@ SfChart allows customization of shape annotation using the following properties. {% highlight xaml %} - - + + {% endhighlight %} {% highlight c# %} - SfChart chart = new SfChart(); - - HorizontalLineAnnotation annotation = new HorizontalLineAnnotation() - { +SfChart chart = new SfChart(); + +HorizontalLineAnnotation annotation = new HorizontalLineAnnotation() +{ + X1 = -0.5, + X2 = 4.5, + Y1 = 1600, + Y2 = 1600, + StrokeThickness = 3, + Stroke = new SolidColorBrush(Colors.DarkGray), + Fill = new SolidColorBrush(Colors.LightGray), + StrokeDashArray = new DoubleCollection() { 1, 3 }, + StrokeStartLineCap = PenLineCap.Square, + StrokeEndLineCap = PenLineCap.Square, + StrokeDashCap = PenLineCap.Round, + Text = "Line" +}; - X1 = -0.5, - X2 = 4.5, - Y1 = 1500, - StrokeThickness = 3, - Stroke = new SolidColorBrush(Colors.DarkGray), - Fill = new SolidColorBrush(Colors.LightGray), - StrokeDashArray = new DoubleCollection() { 1, 3 }, - StrokeStartLineCap = PenLineCap.Square, - StrokeEndLineCap = PenLineCap.Square, - StrokeDashCap = PenLineCap.Round - }; +chart.Annotations.Add(annotation); - chart.Annotations.Add(annotation); {% endhighlight %} @@ -656,25 +784,32 @@ The following API’s are used in ImageAnnotation. {% highlight xaml %} - - + + {% endhighlight %} {% highlight c# %} - ImageAnnotation annotation = new ImageAnnotation() - { - Text = "Annotation", - HorizontalTextAlignment = HorizontalAlignment.Center, - VerticalTextAlignment = VerticalAlignment.Top, - X1 = 2.5, - Y1 = 1200, - X2 = 3.6, - Y2 = "1700", - ImageSource = new BitmapImage(new Uri(@"Images\Graduate.png", UriKind.RelativeOrAbsolute)) - }; +ImageAnnotation annotation = new ImageAnnotation() +{ + Text = "Annotation", + HorizontalTextAlignment = HorizontalAlignment.Center, + VerticalTextAlignment = VerticalAlignment.Top, + X1 = 2.5, + Y1 = 1200, + X2 = 3.6, + Y2 = "1700", + ImageSource = new BitmapImage(new Uri(@"Images\Graduate.png", UriKind.RelativeOrAbsolute)) +}; {% endhighlight %} @@ -704,25 +839,32 @@ The following code example demonstrates the dragging the rectangle annotation. {% highlight xaml %} - - + + {% endhighlight %} {% highlight c# %} - RectangleAnnotation an = new RectangleAnnotation() - { - X1 = 0.6, - Y1 = 1800, - X2 = 2.2, - Y2 = 1500, - Fill = new SolidColorBrush(Colors.LightGray), - Stroke = new SolidColorBrush(Colors.DarkGray), - CanDrag = true, - Opacity = 0.5 - }; +RectangleAnnotation an = new RectangleAnnotation() +{ + X1 = 0.6, + Y1 = 1800, + X2 = 2.2, + Y2 = 1500, + Fill = new SolidColorBrush(Colors.LightGray), + Stroke = new SolidColorBrush(Colors.DarkGray), + CanDrag = true, + Opacity = 0.5 +}; {% endhighlight %} @@ -741,29 +883,37 @@ You can resize the annotation by enabling [`CanResize`](https://help.syncfusion. {% highlight xaml %} - - + + {% endhighlight %} {% highlight c# %} - RectangleAnnotation an = new RectangleAnnotation() - { - X1 = 0.6, - Y1 = 1800, - X2 = 2.2, - Y2 = 1500, - Fill = new SolidColorBrush(Colors.LightGray), - Stroke = new SolidColorBrush(Colors.DarkGray), - CanDrag = true, - Opacity = 0.5 - }; +RectangleAnnotation an = new RectangleAnnotation() +{ + X1 = 0.6, + Y1 = 1800, + X2 = 2.2, + Y2 = 1500, + Fill = new SolidColorBrush(Colors.LightGray), + Stroke = new SolidColorBrush(Colors.DarkGray), + CanDrag = true, + Opacity = 0.5, + CanResize = true +}; - {% endhighlight %} +{% endhighlight %} - {% endtabs %} +{% endtabs %} ![Eesizing Annotation in WPF Chart](Annotation_images/wpf-chart-resize-annotation.jpeg) @@ -785,27 +935,34 @@ The following code example demonstrates the default tooltip. {% highlight xaml %} - - + + {% endhighlight %} {% highlight c# %} - SfChart chart = new SfChart(); - EllipseAnnotation annotation=new EllipseAnnotation () - { - X1 = 2.5, - Y1 = 1500, - X2 = 3.6, - Y2 = 1680, - Stroke = new SolidColorBrush(Colors.DarkGray), - Fill = new SolidColorBrush (Colors.LightGray), - ShowToolTip = true , - ToolTipContent = "Annotation" - }; - chart.Annotations.Add(annotation); +SfChart chart = new SfChart(); + +EllipseAnnotation annotation = new EllipseAnnotation() +{ + X1 = 2.5, + Y1 = 1500, + X2 = 3.6, + Y2 = 1680, + Stroke = new SolidColorBrush(Colors.DarkGray), + Fill = new SolidColorBrush(Colors.LightGray), + ShowToolTip = true, + ToolTipContent = "Annotation" +}; + +chart.Annotations.Add(annotation); {% endhighlight %} @@ -820,38 +977,54 @@ The default appearance of the Tooltip can be changed using [`TooltipTemplate`](h {% tabs %} {% highlight xaml %} - - - - - - - - - - - - - + + + + + + + + + + + + + + {% endhighlight %} {% highlight c# %} - SfChart chart = new SfChart(); - EllipseAnnotation annotation=new EllipseAnnotation () - { - X1 = 2.5, - Y1 = 1500, - X2 = 3.6, - Y2 = 1680, - Stroke = new SolidColorBrush(Colors.DarkGray), - Fill = new SolidColorBrush (Colors.LightGray), - ShowToolTip = true , - ToolTipTemplate = chart.Resources["tooltipTemplate"] as DataTemplate - }; - chart.Annotations.Add(annotation); +SfChart chart = new SfChart(); + +EllipseAnnotation annotation=new EllipseAnnotation () +{ + X1 = 2.5, + Y1 = 1500, + X2 = 3.6, + Y2 = 1680, + Stroke = new SolidColorBrush(Colors.DarkGray), + Fill = new SolidColorBrush (Colors.LightGray), + ShowToolTip = true , + ToolTipTemplate = chart.Resources["tooltipTemplate"] as DataTemplate +}; + +chart.Annotations.Add(annotation); {% endhighlight %} @@ -868,29 +1041,34 @@ SfChart allows you to clip the annotation if the annotation crosses the boundary {% highlight xaml %} - - - - - + + + + {% endhighlight %} {% highlight c# %} - SfChart chart = new SfChart(); +SfChart chart = new SfChart(); - ImageAnnotation image = new ImageAnnotation() - { - X1 = 6, - Y1 = 16, - X2 = 9, - Y2 = 18, - ImageSource = new BitmapImage(new Uri("Images\Graduate.png", UriKind.RelativeOrAbsolute)), - EnableClipping=true - }; +ImageAnnotation image = new ImageAnnotation() +{ + X1 = 6, + Y1 = 16, + X2 = 9, + Y2 = 18, + ImageSource = new BitmapImage(new Uri("Images\Graduate.png", UriKind.RelativeOrAbsolute)), + EnableClipping=true +}; - chart.Annotations.Add(image); +chart.Annotations.Add(image); {% endhighlight %} @@ -1023,31 +1201,38 @@ The corresponding DateTime value will be given as values for X1 and X2 propertie {% highlight xaml %} - - - + + + - - - + + + - - - - + + + + {% endhighlight %} {% highlight c# %} - SfChart chart = new SfChart(); - chart.PrimaryAxis = new DateTimeAxis(); - chart.SecondaryAxis = new NumericalAxis(); - RectangleAnnotation annotation = new RectangleAnnotation() - { - X1 = new DateTime(2019,12,17), X2 = new DateTime(2020,02,19), Y1 = 1200, Y2 = 1300, - }; - chart.Annotations.Add(annotation); +SfChart chart = new SfChart(); + +chart.PrimaryAxis = new DateTimeAxis(); +chart.SecondaryAxis = new NumericalAxis(); + +RectangleAnnotation annotation = new RectangleAnnotation() +{ + X1 = new DateTime(2019,12,17), X2 = new DateTime(2020,02,19), Y1 = 1200, Y2 = 1300, +}; + +chart.Annotations.Add(annotation); {% endhighlight %} diff --git a/wpf/Charts/DataBinding.md b/wpf/Charts/DataBinding.md index cd04e7996..e6b1dcfa1 100644 --- a/wpf/Charts/DataBinding.md +++ b/wpf/Charts/DataBinding.md @@ -18,19 +18,11 @@ SfChart offers ItemsSource property to bind various datasource ranges from simpl {% highlight xaml %} - - - - - - - + + {% endhighlight %} @@ -41,83 +33,45 @@ SfChart chart = new SfChart(); LineSeries lineSeries = new LineSeries() { - ItemsSource = new ViewModel().Demands, - XBindingPath = "Demand", - YBindingPath = "Year2010", - }; chart.Series.Add(lineSeries); public class GoldDemand - { - public string Demand { get; set; } - - - public double Year2010 { get; set; } - - - public double Year2011 { get; set; } - } public sealed partial class MainPage : Page - { - -public MainPage() - -{ - - this.InitializeComponent(); - - this.Demands = new ObservableCollection - + public ObservableCollection Demands { get; set; } + + public MainPage() { - - new GoldDemand() {Demand = "Jewelry", Year2010 = 1998.0, Year2011 = 2361.2}, - - new GoldDemand() {Demand = "Electronics", Year2010 = 1284.0, Year2011 = 1328.0}, - - new GoldDemand() {Demand = "Research", Year2010 = 1090.5, Year2011 = 1032.0}, - - new GoldDemand() {Demand = "Investment", Year2010 = 1643.0, Year2011 = 1898.0}, - - new GoldDemand() {Demand = "Bank Purchases", Year2010 = 987.0, Year2011 = 887.0}, - - - - new GoldDemand() {Demand = "Others", Year2010 = 1090.5, Year2011 = 1032.0}, - - new GoldDemand() {Demand = "Investment", Year2010 = 1643.0, Year2011 = 1898.0}, - - new GoldDemand() {Demand = "Bank Purchases", Year2010 = 987.0, Year2011 = 887.0}, - - - - new GoldDemand() {Demand = "Electronics", Year2010 = 1284.0, Year2011 = 1328.0}, - - new GoldDemand() {Demand = "Research", Year2010 = 1090.5, Year2011 = 1032.0}, - - new GoldDemand() {Demand = "Investment", Year2010 = 1643.0, Year2011 = 1898.0}, - - new GoldDemand() {Demand = "Bank Purchases", Year2010 = 987.0, Year2011 = 887.0} - - }; - - DataContext = this; - -} - -public ObservableCollection Demands { get; set; } - + this.InitializeComponent(); + this.Demands = new ObservableCollection + { + new GoldDemand() {Demand = "Jewelry", Year2010 = 1998.0, Year2011 = 2361.2}, + new GoldDemand() {Demand = "Electronics", Year2010 = 1284.0, Year2011 = 1328.0}, + new GoldDemand() {Demand = "Research", Year2010 = 1090.5, Year2011 = 1032.0}, + new GoldDemand() {Demand = "Investment", Year2010 = 1643.0, Year2011 = 1898.0}, + new GoldDemand() {Demand = "Bank Purchases", Year2010 = 987.0, Year2011 = 887.0}, + new GoldDemand() {Demand = "Others", Year2010 = 1090.5, Year2011 = 1032.0}, + new GoldDemand() {Demand = "Investment", Year2010 = 1643.0, Year2011 = 1898.0}, + new GoldDemand() {Demand = "Bank Purchases", Year2010 = 987.0, Year2011 = 887.0}, + new GoldDemand() {Demand = "Electronics", Year2010 = 1284.0, Year2011 = 1328.0}, + new GoldDemand() {Demand = "Research", Year2010 = 1090.5, Year2011 = 1032.0}, + new GoldDemand() {Demand = "Investment", Year2010 = 1643.0, Year2011 = 1898.0}, + new GoldDemand() {Demand = "Bank Purchases", Year2010 = 987.0, Year2011 = 887.0} + }; + + DataContext = this; + } } {% endhighlight %} @@ -133,7 +87,11 @@ The complex property binding feature enables you to access nested object referen {% highlight xaml %} -  + + {% endhighlight %} @@ -143,49 +101,31 @@ StadiumDetails stadiumDetails = new StadiumDetails(); LineSeries series = new LineSeries() { - ItemsSource = new ViewModel().DataWithMulData, - XBindingPath = "stadiumDetails.CupDetailsObj.CupName", - YBindingPath = "stadiumDetails.NumSeats", - Interior = new SolidColorBrush(Color.FromRgb(0xBC, 0xBC, 0xBC)) - }; chart.Series.Add(series); public class StadiumDetails - { - public string PlaceName { get; set; } - public int NumSeats { get; set; } - public int Price { get; set; } - public CupDetails CupDetailsObj { get; set; } - } public class CupDetails - { - public string CupName { get; set; } - } public class DataPointWithMulData - { - public string Name { get; set; } - public StadiumDetails StadiumObject { get; set; } - } {% endhighlight %} @@ -203,92 +143,54 @@ The following code example demonstrates how to bind the array values for the XBi {% highlight xaml %} - - - - - + - {% endhighlight %} {% highlight C# %} public class Model - { - public string[] Brand { get; set; } - public double[] Count { get; set; } - } public class ViewModel - { - public ViewModel() - { - Brands = new ObservableCollection(); - - Brands.Add(new Model() { Brand = new string[] { "Reebok", "Adidas" }, Count  - -= new  double[] { 34, 23 } }); - - Brands.Add(new Model() { Brand = new string[] { "Benz", "Audi" }, Count  - -=  new double[] { 50, 20 } }); - - Brands.Add(new Model() { Brand = new string[] { "iPhone", "Nokia" }, Count  - -= new double[] { 24, 30 } }); - - Brands.Add(new Model() { Brand = new string[] { "Lenovo", "Acer" }, Count  - -= new double[] { 38, 23 } }); - - Brands.Add(new Model() { Brand = new string[] { "Fastrack", "Titan" },Count  - -= new double[] { 27, 29 } }); - + Brands.Add(new Model() { Brand = new string[] { "Reebok", "Adidas" }, Count = new  double[] { 34, 23 } }); + Brands.Add(new Model() { Brand = new string[] { "Benz", "Audi" }, Count =  new double[] { 50, 20 } }); + Brands.Add(new Model() { Brand = new string[] { "iPhone", "Nokia" }, Count = new double[] { 24, 30 } }); + Brands.Add(new Model() { Brand = new string[] { "Lenovo", "Acer" }, Count = new double[] { 38, 23 } }); + Brands.Add(new Model() { Brand = new string[] { "Fastrack", "Titan" },Count = new double[] { 27, 29 } }); } public ObservableCollection Brands { get; set; } - } private void CreateChart() - { - ViewModel view = new ViewModel(); - SfChart chart = new SfChart(); ColumnSeries series = new ColumnSeries(); - series.ItemsSource = view.Brands; - series.XBindingPath = "Brand[1]"; - series.YBindingPath = "Count[0]"; chart.Series.Add(series); - grid.Children.Add(chart); - } - {% endhighlight %} - {% endtabs %} ### Listening Property Changes @@ -299,12 +201,15 @@ You can notify the [`XBindingPath`](https://help.syncfusion.com/cr/wpf/Syncfusio {% highlight xaml %} - - + {% endhighlight %} @@ -313,23 +218,14 @@ XBindingPath="ID" YBindingPath="Coal"> ScatterSeries series = new ScatterSeries() { - ItemsSource = new ViewModel().EnergyProductions, - XBindingPath = "ID", - YBindingPath = "Coal", - ScatterWidth = 20, - ScatterHeight = 20, - Label ="Coal", - ListenPropertyChange=true, - Interior = new SolidColorBrush(Color.FromRgb(0xBC, 0xBC, 0XBC)) - }; chart.Series.Add(series); diff --git a/wpf/Charts/FastChart/Fast-BitmapSeries.md b/wpf/Charts/FastChart/Fast-BitmapSeries.md index f365f83fd..6ddb74cc1 100644 --- a/wpf/Charts/FastChart/Fast-BitmapSeries.md +++ b/wpf/Charts/FastChart/Fast-BitmapSeries.md @@ -21,11 +21,12 @@ The following code example shows how to use the fast line bitmap series: {% highlight xaml %} - + {% endhighlight %} @@ -33,15 +34,10 @@ YBindingPath="Value" /> FastLineBitmapSeries series = new FastLineBitmapSeries() { - ItemsSource = new ViewModel().Data, - XBindingPath = "Date", - YBindingPath = "Value", - Interior = new SolidColorBrush(Color.FromRgb(0x7F, 0x7F, 0x7F)) - }; chart.Series.Add(series); @@ -60,13 +56,12 @@ N> As it was rendered using bitmap, there might be some jagged lines at edges. T {% highlight xaml %} - + {% endhighlight %} @@ -74,19 +69,12 @@ YBindingPath="Value" EnableAntiAliasing="True"/> FastLineBitmapSeries series = new FastLineBitmapSeries() { - ItemsSource = new ViewModel().Data, - XBindingPath = "Date", - YBindingPath = "Value", - EnableAntiAliasing =true, - StrokeDashArray =new DoubleCollection() { 5,5}, - Interior = new SolidColorBrush(Color.FromRgb(0x7F, 0x7F, 0x7F)) - }; chart.Series.Add(series); @@ -106,11 +94,11 @@ chart.Series.Add(series); {% highlight xaml %} - + {% endhighlight %} @@ -118,15 +106,10 @@ XBindingPath="Date" YBindingPath="Price" /> FastColumnBitmapSeries series = new FastColumnBitmapSeries() { - ItemsSource = new ViewModel().List, - XBindingPath = "Date", - YBindingPath = "Value", - Interior = new SolidColorBrush(Color.FromRgb(0x7F, 0x7F, 0x7F)) - }; chart.Series.Add(series); @@ -145,11 +128,12 @@ chart.Series.Add(series); {% highlight xaml %} - + {% endhighlight %} @@ -157,15 +141,10 @@ Interior="#7F7F7F"/> FastBarBitmapSeries series = new FastBarBitmapSeries() { - ItemsSource = new ViewModel().List, - XBindingPath = "Date", - YBindingPath = "Value", - Interior = new SolidColorBrush(Color.FromRgb(0x7F, 0x7F, 0x7F)) - }; chart.Series.Add(series); @@ -185,15 +164,15 @@ chart.Series.Add(series); {% highlight xaml %} - + {% endhighlight %} @@ -201,19 +180,12 @@ BearFillColor="#4A4A4A" /> FastCandleBitmapSeries series = new FastCandleBitmapSeries() { - ItemsSource = new ViewModel().TestingModel, - XBindingPath = "X", - High="Y", Low="Y1", - Open="Y2", Close="Y3", - BullFillColor = new SolidColorBrush(Color.FromRgb(0xBC, 0xBC, 0xBC)), - BearFillColor = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0x4A)) - }; chart.Series.Add(series); @@ -233,11 +205,13 @@ chart.Series.Add(series); {% highlight xaml %} - + {% endhighlight %} @@ -245,17 +219,11 @@ Low="Price"/> FastHiLoBitmapSeries series = new FastHiLoBitmapSeries() { - ItemsSource = new ViewModel().List, - XBindingPath = "Date", - High = "Stock",Low = "Price", - Interior = new SolidColorBrush(Color.FromRgb(0x7F, 0x7F, 0X7F)), - StrokeThickness = 5 - }; chart.Series.Add(series); @@ -274,13 +242,15 @@ chart.Series.Add(series); {% highlight xaml %} - + {% endhighlight %} @@ -288,20 +258,14 @@ BearFillColor="#4A4A4A"/> FastHiLoOpenCloseBitmapSeries series = new FastHiLoOpenCloseBitmapSeries() { - ItemsSource = new ViewModel().TestingModel, - XBindingPath = "X", - - High="Y", Low="Y1", - - Open="Y2", Close="Y3", - + High="Y", + Low="Y1", + Open="Y2", + Close="Y3", BullFillColor = new SolidColorBrush(Color.FromRgb(0xBC, 0xBC, 0xBC)), - - BearFillColor = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0x4A)) - -}; + BearFillColor = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0x4A))}; chart.Series.Add(series); @@ -319,15 +283,14 @@ chart.Series.Add(series); {% highlight xaml %} - + {% endhighlight %} @@ -335,19 +298,12 @@ ScatterWidth="4"/> FastScatterBitmapSeries series = new FastScatterBitmapSeries() { - ItemsSource = new ViewModel().Data, - XBindingPath = "Date", - YBindingPath = "Value", - ScatterHeight = 4, - ScatterWidth = 4, - Interior = new SolidColorBrush(Color.FromRgb(0x7F, 0x7F, 0X7F)) - }; chart.Series.Add(series); @@ -367,11 +323,11 @@ chart.Series.Add(series); {% highlight xaml %} - + {% endhighlight %} @@ -379,15 +335,10 @@ YBindingPath="Value" Interior="#4A4A4A" /> FastStepLineBitmapSeries series = new FastStepLineBitmapSeries() { - ItemsSource = new ViewModel().Data, - XBindingPath = "Date", - YBindingPath = "Value", - Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0X4A)) - }; chart.Series.Add(series); @@ -404,11 +355,13 @@ The anti aliasing mode can be enabled using [`EnableAntiAliasing`](https://help. {% highlight xaml %} - + {% endhighlight %} @@ -416,17 +369,11 @@ YBindingPath="Value" Interior="#4A4A4A"/> FastStepLineBitmapSeries series = new FastStepLineBitmapSeries() { - ItemsSource = new ViewModel().Data, - XBindingPath = "Date", - YBindingPath = "Value", - EnableAntiAliasing = true , - Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0X4A)) - }; chart.Series.Add(series); @@ -446,34 +393,29 @@ chart.Series.Add(series); {% highlight xaml %} - + {% endhighlight %} {% highlight c# %} + FastRangeAreaBitmapSeries fastRangeAreaBitmapSeries = new FastRangeAreaBitmapSeries(); fastRangeAreaBitmapSeries.ItemsSource = new ViewModel().Data; - fastRangeAreaBitmapSeries.XBindingPath = "Date"; - fastRangeAreaBitmapSeries.High = "HighTemperature"; - fastRangeAreaBitmapSeries.Low = "LowTemperature"; - fastRangeAreaBitmapSeries.Interior = new SolidColorBrush(Color.FromRgb(0x7F, 0x7F, 0x75)); +chart.Series.Add(fastRangeAreaBitmapSeries) -chart.Series.Add(fastRangeAreaBitmapSeries); {% endhighlight %} @@ -487,17 +429,14 @@ The anti-aliasing mode can be enabled using [`EnableAntiAliasing`](https://help {% highlight xaml %} - + {% endhighlight %} @@ -506,18 +445,12 @@ The anti-aliasing mode can be enabled using [`EnableAntiAliasing`](https://help FastRangeAreaBitmapSeries fastRangeAreaBitmapSeries = new FastRangeAreaBitmapSeries(); fastRangeAreaBitmapSeries.ItemsSource = new ViewModel().Data; - fastRangeAreaBitmapSeries.XBindingPath = "Date"; - fastRangeAreaBitmapSeries.High = "HighTemperature"; - fastRangeAreaBitmapSeries.Low = "LowTemperature"; - fastRangeAreaBitmapSeries.EnableAntiAliasing = true; - fastRangeAreaBitmapSeries.Interior = new SolidColorBrush(Color.FromRgb(0x7F, 0x7F, 0x75)); - chart.Series.Add(fastRangeAreaBitmapSeries); {% endhighlight %} diff --git a/wpf/Charts/FastChart/Fast-Series.md b/wpf/Charts/FastChart/Fast-Series.md index 4df739684..599955f56 100644 --- a/wpf/Charts/FastChart/Fast-Series.md +++ b/wpf/Charts/FastChart/Fast-Series.md @@ -19,11 +19,12 @@ The [`FastLineSeries`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Cha {% highlight xaml %} - + {% endhighlight %} @@ -31,15 +32,10 @@ YBindingPath="Value"/> FastLineSeries series = new FastLineSeries() { - ItemsSource = new ViewModel().Data, - XBindingPath = "Date", - YBindingPath = "Value", - Interior = new SolidColorBrush(Color.FromRgb(0x7F, 0x7F, 0x7F)) - }; chart.Series.Add(series); @@ -66,13 +62,12 @@ The following line properties are available for FastLineSeries: {% highlight xaml %} - + {% endhighlight %} @@ -80,15 +75,10 @@ Interior="#4A4A4A" /> FastStackingColumnBitmapSeries series = new FastStackingColumnBitmapSeries() { - ItemsSource = new ViewModel().MedalDetails, - XBindingPath = "CountryName", - YBindingPath = "GoldMedals", - Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0X4A)) - }; chart.Series.Add(series); diff --git a/wpf/Charts/ScaleBreaks.md b/wpf/Charts/ScaleBreaks.md index 133ea7f5f..c80fa3464 100644 --- a/wpf/Charts/ScaleBreaks.md +++ b/wpf/Charts/ScaleBreaks.md @@ -26,37 +26,33 @@ Applying scale breaks helps in proper visualization of all the data points. {% highlight xaml %} - - - - - - - - - - - + + + + + + {% endhighlight %} {% highlight c# %} + NumericalAxis axis = new NumericalAxis(); ChartAxisScaleBreak scaleBreak = new ChartAxisScaleBreak(); scaleBreak.Start = 300; - scaleBreak.End = 8500; axis.AxisScaleBreaks.Add(scaleBreak); chart.SecondaryAxis = axis; + {% endhighlight %} {% endtabs %} @@ -85,19 +81,11 @@ Range [0,350] takes nearly 4/5th of the axis height and the range [8000,10000] t {% highlight xaml %} - - - - - - - - - - - + + + + + {% endhighlight %} @@ -111,7 +99,6 @@ axis.BreakPosition = ScaleBreakPosition.DataCount; ChartAxisScaleBreak scaleBreak = new ChartAxisScaleBreak(); scaleBreak.Start = 350; - scaleBreak.End = 8000; axis.AxisScaleBreaks.Add(scaleBreak); @@ -134,19 +121,11 @@ chart.SecondaryAxis = axis; {% highlight xaml %} - - - - - - - - - - - + + + + + {% endhighlight %} @@ -154,13 +133,11 @@ End="8000"> {% highlight c# %} NumericalAxis axis = new NumericalAxis(); - axis.BreakPosition = ScaleBreakPosition.Scale; ChartAxisScaleBreak scaleBreak = new ChartAxisScaleBreak(); scaleBreak.Start = 350; - scaleBreak.End = 8000; axis.AxisScaleBreaks.Add(scaleBreak); @@ -187,27 +164,23 @@ In the below image, each break is given percent value as 50. First break is posi {% highlight xaml %} - - - - - - - - - - - - - - - - - + + + + + + + + + {% endhighlight %} @@ -219,23 +192,15 @@ NumericalAxis axis = new NumericalAxis(); axis.BreakPosition = ScaleBreakPosition.Percent; ChartAxisScaleBreak scaleBreak1 = new ChartAxisScaleBreak(); - scaleBreak1.Start = 300; - scaleBreak1.End = 8000; - scaleBreak1.BreakPercent = 50; - axis.AxisScaleBreaks.Add(scaleBreak1); ChartAxisScaleBreak scaleBreak2 = new ChartAxisScaleBreak(); - scaleBreak2.Start = 12500; - scaleBreak2.End = 19000; - scaleBreak2.BreakPercent = 50; - axis.AxisScaleBreaks.Add(scaleBreak2); chart.SecondaryAxis = axis; @@ -256,27 +221,12 @@ Multiple breaks can be included in the chart. {% highlight xaml %} - - - - - - - - - - - - - - - - - + + + + + + {% endhighlight %} @@ -286,19 +236,13 @@ End="19000"> NumericalAxis axis = new NumericalAxis(); ChartAxisScaleBreak scaleBreak1 = new ChartAxisScaleBreak(); - scaleBreak1.Start = 300; - scaleBreak1.End = 8000; - axis.AxisScaleBreaks.Add(scaleBreak1); ChartAxisScaleBreak scaleBreak2 = new ChartAxisScaleBreak(); - scaleBreak2.Start = 12500; - scaleBreak2.End = 19000; - axis.AxisScaleBreaks.Add(scaleBreak2); chart.SecondaryAxis = axis; @@ -321,25 +265,19 @@ Line type such as [`Wave`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml {% highlight xaml %} - - - - - - - - - - - - - + + + + + + {% endhighlight %} @@ -351,17 +289,11 @@ NumericalAxis axis = new NumericalAxis(); ChartAxisScaleBreak scaleBreak = new ChartAxisScaleBreak(); scaleBreak.Start = 300; - scaleBreak.End = 8500; - scaleBreak.LineType = BreakLineType.Wave; - scaleBreak.BreakSpacing = 12; - scaleBreak.Fill = new SolidColorBrush(Colors.PaleTurquoise); - scaleBreak.Stroke = new SolidColorBrush(Colors.Black); - scaleBreak.StrokeThickness = 1.2; axis.AxisScaleBreaks.Add(scaleBreak); diff --git a/wpf/Charts/Sorting.md b/wpf/Charts/Sorting.md index 121ebb0d5..a93380ed4 100644 --- a/wpf/Charts/Sorting.md +++ b/wpf/Charts/Sorting.md @@ -35,13 +35,14 @@ The following example illustrates a simple chart (without apply sorting): {% tabs %} {% highlight xml %} - + {% endhighlight %} @@ -49,21 +50,13 @@ The following example illustrates a simple chart (without apply sorting): ColumnSeries columnSeries = new ColumnSeries() { - IsSortData = true, - SortBy = SortingAxis.X, - SortDirection = Direction.Ascending, - ItemsSource = new ViewModel().Demands, - XBindingPath = "Demand", - YBindingPath = "Year2011", - Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0x4A)) - }; chart.Series.Add(columnSeries); @@ -81,13 +74,14 @@ chart.Series.Add(columnSeries); {% highlight xml %} - + {% endhighlight %} @@ -95,21 +89,13 @@ chart.Series.Add(columnSeries); ColumnSeries columnSeries = new ColumnSeries() { - IsSortData = true, - SortBy = SortingAxis.X, - SortDirection = Direction.Descending, - ItemsSource = new ViewModel().Demands, - XBindingPath = "Demand", - YBindingPath = "Year2011", - Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0x4A)) - }; chart.Series.Add(columnSeries); @@ -127,13 +113,14 @@ chart.Series.Add(columnSeries); {% highlight xml %} - + {% endhighlight %} @@ -142,21 +129,13 @@ chart.Series.Add(columnSeries); ColumnSeries columnSeries = new ColumnSeries() { - IsSortData = true, - SortBy = SortingAxis.Y, - SortDirection = Direction.Ascending, - ItemsSource = new ViewModel().Demands, - XBindingPath = "Demand", - YBindingPath = "Year2011", - Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0x4A)) - }; chart.Series.Add(columnSeries); @@ -174,13 +153,14 @@ chart.Series.Add(columnSeries); {% highlight xml %} - + {% endhighlight %} @@ -189,21 +169,13 @@ chart.Series.Add(columnSeries); ColumnSeries columnSeries = new ColumnSeries() { - IsSortData = true, - SortBy = SortingAxis.X, - SortDirection = Direction.Descending, - ItemsSource = new ViewModel().Demands, - XBindingPath = "Demand", - YBindingPath = "Year2011", - Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0x4A)) - }; chart.Series.Add(columnSeries); @@ -233,13 +205,14 @@ The following example illustrates a simple chart having AutumnBrights palette (w {% highlight xml %} - + {% endhighlight %} @@ -247,23 +220,14 @@ The following example illustrates a simple chart having AutumnBrights palette (w ColumnSeries columnSeries = new ColumnSeries() { - IsSortData = true, - SortBy = SortingAxis.X, - SortDirection = Direction.Ascending, - Palette = ChartColorPalette.AutumnBrights, - ItemsSource = new ViewModel().Demands, - XBindingPath = "Position", - YBindingPath = "Year2011", - Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0x4A)) - }; chart.Series.Add(columnSeries); @@ -280,15 +244,14 @@ chart.Series.Add(columnSeries); {% highlight xml %} - + {% endhighlight %} @@ -296,23 +259,14 @@ chart.Series.Add(columnSeries); ColumnSeries columnSeries = new ColumnSeries() { - IsSortData = true, - SortBy = SortingAxis.X, - SortDirection = Direction.Descending, - Palette = ChartColorPalette.AutumnBrights, - ItemsSource = new ViewModel().Demands, - XBindingPath = "Position", - YBindingPath = "Year2011", - Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0x4A)) - }; chart.Series.Add(columnSeries); @@ -328,15 +282,15 @@ chart.Series.Add(columnSeries); {% tabs %} {% highlight xml %} - + {% endhighlight %} @@ -344,23 +298,14 @@ chart.Series.Add(columnSeries); ColumnSeries columnSeries = new ColumnSeries() { - IsSortData = true, - SortBy = SortingAxis.Y, - SortDirection = Direction.Ascending, - Palette = ChartColorPalette.AutumnBrights, - ItemsSource = new ViewModel().Demands, - XBindingPath = "Position", - YBindingPath = "Year2011", - Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0x4A)) - }; chart.Series.Add(columnSeries); @@ -376,15 +321,15 @@ chart.Series.Add(columnSeries); {% tabs %} {% highlight xml %} - + {% endhighlight %} @@ -392,23 +337,14 @@ chart.Series.Add(columnSeries); ColumnSeries columnSeries = new ColumnSeries() { - IsSortData = true, - SortBy = SortingAxis.Y, - SortDirection = Direction.Descending, - Palette = ChartColorPalette.AutumnBrights, - ItemsSource = new ViewModel().Demands, - XBindingPath = "Position", - YBindingPath = "Year2011", - Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0x4A)) - }; chart.Series.Add(columnSeries); diff --git a/wpf/Charts/Striplines.md b/wpf/Charts/Striplines.md index deec31c03..f10c11d16 100644 --- a/wpf/Charts/Striplines.md +++ b/wpf/Charts/Striplines.md @@ -20,17 +20,11 @@ SfChart provides [`Start`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml {% highlight xaml %} - - - - - - - - - - - + + + + + {% endhighlight %} @@ -38,14 +32,11 @@ SfChart provides [`Start`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml {% highlight c# %} NumericalAxis axis = new NumericalAxis(); - ChartStripLine stripline = new ChartStripLine() { - - Start = 20, Width = 10, - + Start = 20, + Width = 10, Background = new SolidColorBrush(Color.FromRgb(0xBC, 0xBC, 0xBC)) - }; axis.StripLines.Add(stripline); @@ -70,19 +61,11 @@ The following code example illustrates the positioning of stripline based on pix {% highlight xaml %} - - - - - - - - - - - + + + + + {% endhighlight %} @@ -93,13 +76,10 @@ NumericalAxis axis = new NumericalAxis(); ChartStripLine stripline = new ChartStripLine() { - - Start = 20, Width = 10, - + Start = 20, + Width = 10, IsPixelWidth = true, - Background = new SolidColorBrush(Color.FromRgb(0xBC, 0xBC, 0xBC)) - }; axis.StripLines.Add(stripline); @@ -124,25 +104,17 @@ The [`LabelHorizontalAlignment`](https://help.syncfusion.com/cr/wpf/Syncfusion.U {% highlight xaml %} - - - - - - - - - - - + + + + + {% endhighlight %} @@ -153,17 +125,12 @@ NumericalAxis axis = new NumericalAxis(); ChartStripLine stripline = new ChartStripLine() { - - Start = 20, Width = 10, - + Start = 20, + Width = 10, Label = "Stock Price", - LabelHorizontalAlignment = HorizontalAlignment.Center, - LabelVerticalAlignment = VerticalAlignment.Top, - Background = new SolidColorBrush(Color.FromRgb(0xBC, 0xBC, 0xBC)) - }; axis.StripLines.Add(stripline); @@ -186,23 +153,16 @@ The label can be rotated to the specified angle using [`LabelAngle`](https://hel {% highlight xaml %} - - - - - - - - - - - + + + + + {% endhighlight %} @@ -213,15 +173,11 @@ NumericalAxis axis = new NumericalAxis(); ChartStripLine stripline = new ChartStripLine() { - - Start = 20, Width = 10, - + Start = 20, + Width = 10, Label = "Stock Price", - LabelAngle = -45, - Background = new SolidColorBrush(Color.FromRgb(0xBC, 0xBC, 0xBC)) - }; axis.StripLines.Add(stripline); @@ -245,46 +201,35 @@ N> Here, Start and Width of the stripline as adjusted based on the rotation angl {% highlight xaml %} - - + - - - - - - - - + + + - - - - - - - - - - - - + + + + + - {% endhighlight %} @@ -292,22 +237,15 @@ N> Here, Start and Width of the stripline as adjusted based on the rotation angl {% highlight c# %} SfChart chart = new SfChart(); - chart.PrimaryAxis = new NumericalAxis(); ChartStripLine stripline = new ChartStripLine() { - Width = 20, - Start = 10, - Label = "Stock Price", - Background =new SolidColorBrush(Color.FromRgb(0xC3,0XC3,0XC3)), - LabelTemplate = chart.Resources["labelTemplate"] as DataTemplate - }; chart.PrimaryAxis.StripLines.Add(stripline); @@ -328,35 +266,28 @@ You can add multiple number of striplines in the same axis like the following co {% highlight xaml %} - - - - - - - - - - - - - - - + + + + + + + + + {% endhighlight %} @@ -367,41 +298,31 @@ NumericalAxis axis = new NumericalAxis(); ChartStripLine stripline1 = new ChartStripLine() { - - SegmentStartValue = 0, Start = 0, - - Width = 10, Label = "Low", - + SegmentStartValue = 0, + Start = 0, + Width = 10, + Label = "Low", Background = new SolidColorBrush(Color.FromRgb(0xC3, 0xC3, 0xC3)) - }; ChartStripLine stripline2 = new ChartStripLine() { - - Start = 20, Width = 10, - + Start = 20, + Width = 10, Label = "Average", - Background = new SolidColorBrush(Color.FromRgb(0xC3, 0xC3, 0xC3)) - }; ChartStripLine stripline3 = new ChartStripLine() { - - Start = 40,Width = 10, - + Start = 40, + Width = 10, Label = "High", - Background = new SolidColorBrush(Color.FromRgb(0xC3, 0xC3, 0xC3)) - }; axis.StripLines.Add(stripline1); - axis.StripLines.Add(stripline2); - axis.StripLines.Add(stripline3); chart.SecondaryAxis = axis; @@ -422,15 +343,19 @@ N> This can be used to fill plot area background alternatively. {% highlight xaml %} - - - - - + + + {% endhighlight %} @@ -440,35 +365,24 @@ Width="10" Start="10" Background="#A3A3A3"/> NumericalAxis axis = new NumericalAxis(); ChartStripLine stripline1 = new ChartStripLine() - { - RepeatEvery = 20, - RepeatUntil = 50, - - Start = 0, Width = 10, - + Start = 0, + Width = 10, Background = new SolidColorBrush(Color.FromRgb(0xC3, 0xC3, 0xC3)) - }; ChartStripLine stripline2 = new ChartStripLine() - { - RepeatEvery = 20, - RepeatUntil = 50, - - Start = 10, Width = 10, - + Start = 10, + Width = 10, Background = new SolidColorBrush(Color.FromRgb(0xA3, 0xA3, 0xA3)) - }; axis.StripLines.Add(stripline1); - axis.StripLines.Add(stripline2); chart.SecondaryAxis = axis; @@ -493,45 +407,39 @@ The following code example demonstrates segmented striplines. {% highlight xaml %} - - - - - - - - - - - - - - - + + + + + + + + + {% endhighlight %} @@ -542,63 +450,42 @@ NumericalAxis axis = new NumericalAxis(); ChartStripLine stripline1 = new ChartStripLine() { - IsSegmented = true, - SegmentStartValue = 0, - SegmentEndValue = 2, - SegmentAxisName = "Segment1", - - Start = 0, Width = 10, - + Start = 0, + Width = 10, Label = "Low", - Background = new SolidColorBrush(Color.FromRgb(0xC3, 0xC3, 0xC3)) - }; ChartStripLine stripline2 = new ChartStripLine() { IsSegmented = true, - SegmentStartValue = 2, - SegmentEndValue = 4, - SegmentAxisName = "Segment2", - - Start = 20, Width = 10, - + Start = 20, + Width = 10, Label = "Average", - Background = new SolidColorBrush(Color.FromRgb(0xC3, 0xC3, 0xC3)) }; ChartStripLine stripline3 = new ChartStripLine() { - IsSegmented = true, - SegmentStartValue = 4, - SegmentEndValue = 6, - SegmentAxisName = "Segment3", - - Start = 40, Width = 10, - + Start = 40, + Width = 10, Label = "High", - Background = new SolidColorBrush(Color.FromRgb(0xC3, 0xC3, 0xC3)) - }; axis.StripLines.Add(stripline1); - axis.StripLines.Add(stripline2); - axis.StripLines.Add(stripline3); chart.SecondaryAxis = axis; @@ -619,23 +506,16 @@ The background, border brush and border thickness of the stripline can be modifi {% highlight xaml %} - - - - - - - - - - - + + + + + {% endhighlight %} @@ -645,17 +525,12 @@ Background="#C3C3C3"/> NumericalAxis axis = new NumericalAxis(); ChartStripLine stripline = new ChartStripLine() - { - - Start = 20, Width = 15, - + Start = 20, + Width = 15, BorderThickness = new Thickness(2), - BorderBrush = new SolidColorBrush(Colors.Black), - Background = new SolidColorBrush(Color.FromRgb(0xC3, 0xC3, 0xC3)) - }; axis.StripLines.Add(stripline); @@ -678,39 +553,27 @@ You can set the transparency for the striplines using `Opacity` property as in t {% highlight xaml %} - - - - - - - - - - - + + + + + - - - - - - - - - - - - - - - - - + + + + + + + + + {% endhighlight %} @@ -721,13 +584,10 @@ NumericalAxis axis = new NumericalAxis(); ChartStripLine stripline = new ChartStripLine() { - - Start = 25,Width = 15, - + Start = 25, + Width = 15, Opacity = 0.4, - Background = new SolidColorBrush(Color.FromRgb(0xC3, 0xC3, 0xC3)) - }; axis.StripLines.Add(stripline); @@ -736,19 +596,13 @@ chart.SecondaryAxis = axis; chart.Watermark = new Watermark() { - HorizontalAlignment = HorizontalAlignment.Center, - VerticalAlignment = VerticalAlignment.Center - }; TextBlock textBlock = new TextBlock(); - textBlock.Text = "StockValue"; - textBlock.FontSize = 70; - textBlock.RenderTransform = new RotateTransform() { Angle = 345 }; chart.Watermark.Content = textBlock; diff --git a/wpf/Charts/Technical-Indicators.md b/wpf/Charts/Technical-Indicators.md index 8bcc8f924..6f71ad07e 100644 --- a/wpf/Charts/Technical-Indicators.md +++ b/wpf/Charts/Technical-Indicators.md @@ -26,11 +26,7 @@ Here for instance, the [Accumulation Distribution](https://help.syncfusion.com/c {% highlight xaml %} - - - - - + {% endhighlight %} @@ -54,11 +50,12 @@ Next you need to bind the property path for the [`Open`](https://help.syncfusion {% highlight xaml %} - - - - - + + {% endhighlight %} @@ -67,11 +64,10 @@ Next you need to bind the property path for the [`Open`](https://help.syncfusion AccumulationDistributionIndicator indicator = new AccumulationDistributionIndicator() { - - Open = "Open", Close = "Close", - - High = "High", Low = "Low" - + Open = "Open", + Close = "Close", + High = "High", + Low = "Low" }; chart.TechnicalIndicators.Add(indicator); @@ -87,15 +83,14 @@ chart.TechnicalIndicators.Add(indicator); {% highlight xaml %} - - - - - + + {% endhighlight %} @@ -104,15 +99,12 @@ XBindingPath="Date"> AccumulationDistributionIndicator indicator = new AccumulationDistributionIndicator() { - - ItemsSource = new ViewModel().StockPriceDetails, - + ItemsSource = new ViewModel().StockPriceDetails, XBindingPath = "Date", - - Open = "Open", Close = "Close", - - High = "High", Low = "Low" - + Open = "Open", + Close = "Close", + High = "High", + Low = "Low" }; chart.TechnicalIndicators.Add(indicator); @@ -137,15 +129,16 @@ You can define the [`AverageTrueRangeIndicator`](https://help.syncfusion.com/cr/ {% highlight xaml %} - - - + {% endhighlight %} @@ -154,19 +147,15 @@ Open="Open" Close="Close"/ > AverageTrueRangeIndicator indicator = new AverageTrueRangeIndicator() { - ItemsSource = new ViewModel().StockPriceDetails, - XBindingPath = "Date", - - Open = "Open", Close = "Close", - - High = "High", Low = "Low", - - Volume ="Volume", Period = 3, - + Open = "Open", + Close = "Close", + High = "High", + Low = "Low", + Volume ="Volume", + Period = 3, SignalLineColor = new SolidColorBrush(Colors.Black) - }; chart.TechnicalIndicators.Add(indicator); @@ -187,17 +176,17 @@ The following code example demonstrates the usage of [`SimpleAverageIndicator`]( {% highlight xaml %} - - - - - + + {% endhighlight %} @@ -206,19 +195,15 @@ High="High" Low="Low" Open="Open" Close="Close" > SimpleAverageIndicator indicator = new SimpleAverageIndicator() { - - ItemsSource = new ViewModel().StockPriceDetails, - + ItemsSource = new ViewModel().ViewModel1, XBindingPath = "Date", - - Open = "Open", Close = "Close", - - High = "High", Low = "Low", - - Volume ="Volume", Period = 3, - + Open = "Open", + Close = "Close", + High = "High", + Low = "Low", + Volume = "Volume", + Period = 3, SignalLineColor = new SolidColorBrush(Colors.Black) - }; chart.TechnicalIndicators.Add(indicator); @@ -243,17 +228,18 @@ To define the [`RSITechnicalIndicator`](https://help.syncfusion.com/cr/wpf/Syncf {% highlight xaml %} - - - + {% endhighlight %} @@ -262,23 +248,17 @@ High="High" Low="Low" Open="Open" Close="Close"/> RSITechnicalIndicator indicator = new RSITechnicalIndicator() { - ItemsSource = new ViewModel().StockPriceDetails, - XBindingPath = "Date", - - Open = "Open", Close = "Close", - - High = "High", Low = "Low", - - Volume ="Volume", Period = 3, - + Open = "Open", + Close = "Close", + High = "High", + Low = "Low", + Volume = "Volume", + Period = 3, SignalLineColor = new SolidColorBrush(Colors.Black), - UpperLineColor = new SolidColorBrush(Colors.Blue), - LowerLineColor = new SolidColorBrush(Colors.Red) - }; chart.TechnicalIndicators.Add(indicator); @@ -300,17 +280,21 @@ The [`MomentumLineColor`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml. {% highlight xaml %} - - - + + + {% endhighlight %} @@ -318,21 +302,16 @@ High="High" Low="Low" Open="Open" Close="Close"/ > MomentumTechnicalIndicator indicator = new MomentumTechnicalIndicator() { - - ItemsSource = new ViewModel().StockPriceDetails, - + ItemsSource = new ViewModel().ViewModel1, XBindingPath = "Date", - - Open = "Open", Close = "Close", - - High = "High", Low = "Low", - - Volume ="Volume", Period = 3, - + Open = "Open", + Close = "Close", + High = "High", + Low = "Low", + Volume = "Volume", + Period = 3, MomentumLineColor = new SolidColorBrush(Colors.Black), - CenterLineColor = new SolidColorBrush(Colors.Red) - }; chart.TechnicalIndicators.Add(indicator); @@ -357,17 +336,21 @@ You can define stochastic technical indicator using the following code example: {% highlight xaml %} - - - + {% endhighlight %} @@ -376,25 +359,20 @@ High="High" Low="Low" Open="Open" Close="Close"/> StochasticTechnicalIndicator indicator = new StochasticTechnicalIndicator() { - - ItemsSource = new ViewModel().StockPriceDetails, - - XBindingPath = "Date", Volume = "Volume", - - Open = "Open", Close = "Close", - - High = "High", Low = "Low", - - Period = 3,KPeriod = 8,DPeriod = 5, - + ItemsSource = new ViewModel().ViewModel1, + XBindingPath = "Date", + Volume = "Volume", + Open = "Open", + Close = "Close", + High = "High", + Low = "Low", + Period = 3, + KPeriod = 8, + DPeriod = 5, SignalLineColor = new SolidColorBrush(Colors.Black), - PeriodLineColor = new SolidColorBrush(Colors.Red), - UpperLineColor = new SolidColorBrush(Colors.Blue), - LowerLineColor = new SolidColorBrush(Colors.Purple) - }; chart.TechnicalIndicators.Add(indicator); @@ -415,15 +393,16 @@ The [`ExponentialAverageIndicator`](https://help.syncfusion.com/cr/wpf/Syncfusio {% highlight xaml %} - - - + {% endhighlight %} @@ -432,19 +411,15 @@ Open="Open" Close="Close"/ > ExponentialAverageIndicator indicator = new ExponentialAverageIndicator() { - - ItemsSource = new ViewModel().StockPriceDetails, - + ItemsSource = new ViewModel().ViewModel1, XBindingPath = "Date", - - Open = "Open", Close = "Close", - - High = "High", Low = "Low", - - Volume ="Volume", Period = 3, - + Open = "Open", + Close = "Close", + High = "High", + Low = "Low", + Volume = "Volume", + Period = 3, SignalLineColor = new SolidColorBrush(Colors.Black) - }; chart.TechnicalIndicators.Add(indicator); @@ -465,15 +440,16 @@ The [`TriangularAverageIndicator`](https://help.syncfusion.com/cr/wpf/Syncfusion {% highlight xaml %} - - - + {% endhighlight %} @@ -482,19 +458,15 @@ Open="Open" Close="Close"/ > TriangularAverageIndicator indicator = new TriangularAverageIndicator() { - ItemsSource = new ViewModel().StockPriceDetails, - XBindingPath = "Date", - - Open = "Open", Close = "Close", - - High = "High", Low = "Low", - - Volume ="Volume", Period = 3, - + Open = "Open", + Close = "Close", + High = "High", + Low = "Low", + Volume = "Volume", + Period = 3 SignalLineColor = new SolidColorBrush(Colors.Black) - }; chart.TechnicalIndicators.Add(indicator); @@ -515,19 +487,16 @@ The following code example help you to add [`AccumulationDistributionIndicator`] {% highlight xaml %} - - - - - + + {% endhighlight %} @@ -536,19 +505,14 @@ Open="Open" Close="Close" > AccumulationDistributionIndicator indicator = new AccumulationDistributionIndicator() { - ItemsSource = new ViewModel().StockPriceDetails, - XBindingPath = "Date", - - Open = "Open", Close = "Close", - - High = "High", Low = "Low", - - Volume ="Volume", Period = 3, - + Open = "Open", + Close = "Close", + High = "High", + Low = "Low", + Volume = "Volume", SignalLineColor = new SolidColorBrush(Colors.Black) - }; chart.TechnicalIndicators.Add(indicator); @@ -571,17 +535,18 @@ You can define the [`BollingerBandIndicator`](https://help.syncfusion.com/cr/wpf {% highlight xaml %} - - - + {% endhighlight %} @@ -590,23 +555,17 @@ High="High" Low="Low" Open="Open" Close="Close"/> BollingerBandIndicator indicator = new BollingerBandIndicator() { - - ItemsSource = new ViewModel().StockPriceDetails, - + ItemsSource = new ViewModel().ViewModel1, XBindingPath = "Date", - - Open = "Open", Close = "Close", - - High = "High", Low = "Low", - - Volume ="Volume", Period = 3, - + Open = "Open", + Close = "Close", + High = "High", + Low = "Low", + Volume = "Volume", + Period = 3, SignalLineColor = new SolidColorBrush(Colors.Black), - UpperLineColor = new SolidColorBrush(Colors.Blue), - LowerLineColor = new SolidColorBrush(Colors.Red) - }; chart.TechnicalIndicators.Add(indicator); @@ -633,19 +592,22 @@ You can define the [`MACDTechnicalIndicator`](https://help.syncfusion.com/cr/wpf {% highlight xaml %} - - - - - + + {% endhighlight %} @@ -654,25 +616,20 @@ High="High" Low="Low" Open="Open" Close="Close" > MACDTechnicalIndicator indicator = new MACDTechnicalIndicator() { - ItemsSource = new ViewModel().StockPriceDetails, - - XBindingPath = "Date", Volume = "Volume", - - Open = "Open", Close = "Close", - - High = "High", Low = "Low", - - Period = 3, ShortPeriod = 2, LongPeriod = 6, - - Type = MACDType.Line , - + XBindingPath = "Date", + Volume = "Volume", + Open = "Open", + Close = "Close", + High = "High", + Low = "Low", + Period = 3, + ShortPeriod = 2, + LongPeriod = 6, + Type = MACDType.Line, SignalLineColor = new SolidColorBrush(Colors.Black), - ConvergenceLineColor = new SolidColorBrush(Colors.Red), - - DivergenceLineColor = new SolidColorBrush(Colors.Blue), - + DivergenceLineColor = new SolidColorBrush(Colors.Blue) }; chart.TechnicalIndicators.Add(indicator); diff --git a/wpf/Charts/Trendlines.md b/wpf/Charts/Trendlines.md index a73a8e3a4..15a205bb8 100644 --- a/wpf/Charts/Trendlines.md +++ b/wpf/Charts/Trendlines.md @@ -17,49 +17,42 @@ The following code examples illustrate how to add trend lines to the chart. {% highlight xaml %} - - - - - - - + + + + + + {% endhighlight %} {% highlight c# %} ScatterSeries scatterSeries = new ScatterSeries() { - ItemsSource = new ViewModel().List, - XBindingPath = "Year", - YBindingPath = "India", - ScatterHeight = 15, - ScatterWidth = 15, - Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0x4A)), - Label = "Series" - }; Trendline trendline = new Trendline() { - Label ="Trend" - }; + scatterSeries.Trendlines.Add(trendline); chart.Series.Add(scatterSeries); @@ -79,17 +72,20 @@ The visibility of the trend line is defined using [`IsTrendlineVisible`](https:/ {% highlight xaml %} - - - - - - - + + + + + @@ -99,34 +95,22 @@ ScatterHeight="15" ScatterWidth="15"> ScatterSeries scatterSeries = new ScatterSeries() { - ItemsSource = new ViewModel().List, - XBindingPath = "Year", - YBindingPath = "India", - ScatterHeight = 15, - ScatterWidth = 15, - Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0x4A)), - Label = "Series" - }; Trendline trendline = new Trendline() { - - Label ="Trend", - + Label = "Trend", IsTrendlineVisible = true - }; scatterSeries.Trendlines.Add(trendline); - chart.Series.Add(scatterSeries); {% endhighlight %} @@ -162,55 +146,40 @@ The following is the code example of this trend line. {% highlight xaml %} - - - - - + - + + + - + {% endhighlight %} {% highlight c# %} -FastLineSeries fastSeries = new FastLineSeries() { - ItemsSource = new ViewModel().StockPriceDetails, - XBindingPath = "Date", - YBindingPath = "Value", - Interior = new SolidColorBrush(Color.FromRgb(0x7f, 0x7f, 0x7f)), - Label = "Stock Price" - }; Trendline trendline = new Trendline() { - Label = "Trend", - - Stroke =new SolidColorBrush(Colors.Black), - + Stroke = new SolidColorBrush(Colors.Black), Type = TrendlineType.Linear - }; fastSeries.Trendlines.Add(trendline); -chart.Series.Add(fastS +chart.Series.Add(fastSeries); {% endhighlight %} @@ -242,46 +211,32 @@ Interior="#7F7F7F" ItemsSource="{Binding StockPriceDetails}"> - - - + - - {% endhighlight %} {% highlight c# %} FastLineSeries fastSeries = new FastLineSeries() { - ItemsSource = new ViewModel().StockPriceDetails, - XBindingPath = "Date", - YBindingPath = "Value", - Interior = new SolidColorBrush(Color.FromRgb(0x7f, 0x7f, 0x7f)), - Label = "Stock Price" - }; Trendline trendline = new Trendline() { - Label = "Trend", - Stroke =new SolidColorBrush(Colors.Black), - Type = TrendlineType.Exponential - }; fastSeries.Trendlines.Add(trendline); -chart.Series.Add(fastS +chart.Series.Add(fastSeries); {% endhighlight %} @@ -306,19 +261,15 @@ The following code example explains how to define the power trendline. {% highlight xaml %} - +< - - - - - + + + @@ -330,31 +281,22 @@ FastLineSeries fastSeries = new FastLineSeries() { ItemsSource = new ViewModel().StockPriceDetails, - XBindingPath = "Date", - YBindingPath = "Value", - Interior = new SolidColorBrush(Color.FromRgb(0x7f, 0x7f, 0x7f)), - Label = "Stock Price" - }; Trendline trendline = new Trendline() { - Label = "Trend", - Stroke =new SolidColorBrush(Colors.Black), - Type = TrendlineType.Power - }; fastSeries.Trendlines.Add(trendline); -chart.Series.Add(fastS +chart.Series.Add(fastSeries); {% endhighlight %} @@ -376,19 +318,15 @@ The following code example illustrates the use of logarithmic trend line. {% highlight xaml %} - + - - - - - + + + @@ -398,33 +336,23 @@ ItemsSource="{Binding StockPriceDetails}"> FastLineSeries fastSeries = new FastLineSeries() { - ItemsSource = new ViewModel().StockPriceDetails, - XBindingPath = "Date", - YBindingPath = "Value", - Interior = new SolidColorBrush(Color.FromRgb(0x7f, 0x7f, 0x7f)), - Label = "Stock Price" - }; Trendline trendline = new Trendline() { - Label = "Trend", - Stroke =new SolidColorBrush(Colors.Black), - Type = TrendlineType.Logarithmic - }; fastSeries.Trendlines.Add(trendline); -chart.Series.Add(fastS +chart.Series.Add(fastSeries); {% endhighlight %} @@ -446,19 +374,15 @@ To define the polynomial trendline, you can use the following code example. {% highlight xaml %} - -Interior="#7F7F7F" - -ItemsSource="{Binding StockPriceDetails}"> - - - - - - + + + @@ -468,33 +392,23 @@ ItemsSource="{Binding StockPriceDetails}"> FastLineSeries fastSeries = new FastLineSeries() { - ItemsSource = new ViewModel().StockPriceDetails, - XBindingPath = "Date", - YBindingPath = "Value", - Interior = new SolidColorBrush(Color.FromRgb(0x7f, 0x7f, 0x7f)), - Label = "Stock Price" - }; Trendline trendline = new Trendline() { - Label = "Trend", - Stroke =new SolidColorBrush(Colors.Black), - Type = TrendlineType.Polynomial - }; fastSeries.Trendlines.Add(trendline); -chart.Series.Add(fastS +chart.Series.Add(fastSeries); {% endhighlight %} @@ -510,21 +424,18 @@ You can set the Polynomial order for this trendline. Polynomial order calculates {% highlight xaml %} - -YBindingPath="Value" - -Interior="#7F7F7F" - -ItemsSource="{Binding StockPriceDetails}"> - - - - - - + + + @@ -534,30 +445,19 @@ PolynomialOrder="5"/> FastLineSeries fastSeries = new FastLineSeries() { - ItemsSource = new ViewModel().StockPriceDetails, - XBindingPath = "Date", - YBindingPath = "Value", - Interior = new SolidColorBrush(Color.FromRgb(0x7f, 0x7f, 0x7f)), - Label = "Stock Price" - }; Trendline trendline = new Trendline() { - Label = "Trend", - Stroke =new SolidColorBrush(Colors.Black), - Type = TrendlineType.Polynomial, - PolynomialOrder = 5 - }; fastSeries.Trendlines.Add(trendline); @@ -587,19 +487,20 @@ For determining the future trends (in forward direction). The following code exa {% highlight xaml %} - - - - - - - + + + + + @@ -609,32 +510,20 @@ Type="Polynomial" PolynomialOrder="3" ForwardForecast="5" /> FastLineSeries fastSeries = new FastLineSeries() { - ItemsSource = new ViewModel().StockPriceDetails, - XBindingPath = "Date", - YBindingPath = "Value", - Interior = new SolidColorBrush(Color.FromRgb(0x7f, 0x7f, 0x7f)), - Label = "Stock Price" - }; Trendline trendline = new Trendline() { - Label = "Trend", - Stroke =new SolidColorBrush(Colors.Black), - Type = TrendlineType.Polynomial, - PolynomialOrder = 3, - ForwardForecast = 5 - }; fastSeries.Trendlines.Add(trendline); @@ -655,20 +544,20 @@ For determining the past trends (in backward direction). The following code exam {% highlight xaml %} - - - - - - - - + + + + + {% endhighlight %} @@ -677,32 +566,20 @@ Type="Polynomial" PolynomialOrder="3" BackwardForecast="5" /> FastLineSeries fastSeries = new FastLineSeries() { - ItemsSource = new ViewModel().StockPriceDetails, - XBindingPath = "Date", - YBindingPath = "Value", - Interior = new SolidColorBrush(Color.FromRgb(0x7f, 0x7f, 0x7f)), - Label = "Stock Price" - }; Trendline trendline = new Trendline() { - Label = "Trend", - Stroke =new SolidColorBrush(Colors.Black), - Type = TrendlineType.Polynomial, - PolynomialOrder = 3, - BackwardForecast = 5 - }; fastSeries.Trendlines.Add(trendline); @@ -724,19 +601,20 @@ You can customize the trendline [`Stroke`](https://help.syncfusion.com/cr/wpf/Sy {% highlight xaml %} - - - - - - - + + + + + @@ -746,36 +624,23 @@ StrokeDashArray="4,4" StrokeThickness="2" /> FastLineSeries fastSeries = new FastLineSeries() { - ItemsSource = new ViewModel().StockPriceDetails, - XBindingPath = "Date", - YBindingPath = "Value", - Interior = new SolidColorBrush(Color.FromRgb(0x7f, 0x7f, 0x7f)), - Label = "Stock Price" - }; Trendline trendline = new Trendline() { - Label = "Trend", - Stroke = new SolidColorBrush(Colors.Black), - Type = TrendlineType.Linear, - StrokeThickness = 2, - StrokeDashArray = new DoubleCollection() { 4, 4 } - }; fastSeries.Trendlines.Add(trendline); - chart.Series.Add(fastSeries); {% endhighlight %} diff --git a/wpf/Charts/Vertical-Charts.md b/wpf/Charts/Vertical-Charts.md index 21b7e4fbe..f2d58f8c1 100644 --- a/wpf/Charts/Vertical-Charts.md +++ b/wpf/Charts/Vertical-Charts.md @@ -20,42 +20,34 @@ Allows to position the axis in the opposite direction to the default position. T {% highlight xaml %} - - - - - + + - - - + + {% endhighlight %} {% highlight c# %} chart.PrimaryAxis = new CategoryAxis() { - - OpposedPosition = true - + OpposedPosition = true }; chart.SecondaryAxis = new NumericalAxis() { - Minimum = 0, - - Maximum = 40, - - Interval = 10, - - OpposedPosition = true - + Minimum = 0, + Maximum = 40, + Interval = 10, + OpposedPosition = true }; {% endhighlight %} @@ -73,11 +65,12 @@ This property used to switch the plotting of the series to vertical. {% highlight xaml %} - + + {% endhighlight %} @@ -85,15 +78,10 @@ YBindingPath="ItemsCount" > LineSeries series = new LineSeries() { - - IsTransposed = true, - - ItemsSource = new ViewModel().SneakersDetail, - - XBindingPath = "Brand", - - YBindingPath = "ItemsCount" - + IsTransposed = true, + ItemsSource = new ViewModel().SneakersDetail, + XBindingPath = "Brand", + YBindingPath = "ItemsCount" }; {% endhighlight %} @@ -109,70 +97,61 @@ The following example demonstrates the vertical charts. {% highlight xaml %} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {% endhighlight %} @@ -182,94 +161,61 @@ SymbolInterior="DarkGray" SymbolWidth="10"> SfChart chart = new SfChart(); chart.ColumnDefinitions.Add(new ChartColumnDefinition()); - chart.ColumnDefinitions.Add(new ChartColumnDefinition()); chart.PrimaryAxis = new CategoryAxis() { - ShowGridLines = true - }; NumericalAxis axis = new NumericalAxis(); - chart.SecondaryAxis = axis; - ChartBase.SetColumn(axis, 1); LineSeries series1 = new LineSeries() { - IsTransposed = true, - ItemsSource = new ViewModel().SneakersDetail, - XBindingPath = "Brand", - YBindingPath = "ItemsCount" - }; ChartAdornmentInfo adornmentInfo1 = new ChartAdornmentInfo() { - ShowMarker = true, - Symbol = ChartSymbol.Ellipse, - SymbolHeight = 10, - SymbolWidth = 10, - SymbolInterior = new SolidColorBrush(Color.FromRgb(0x7f, 0x7f, 0x7f)), - }; LineSeries series2 = new LineSeries() { - IsTransposed = true, - Interior = new SolidColorBrush(Colors.DarkGray), - ItemsSource = new ViewModel().SneakersDetail, - XBindingPath = "Brand", - YBindingPath = "position", - YAxis = new NumericalAxis() - }; ChartAdornmentInfo adornmentInfo2 = new ChartAdornmentInfo() { - ShowLabel = false, - ShowMarker = true, - Symbol = ChartSymbol.Ellipse, - SymbolHeight = 10, - SymbolWidth = 10, - SymbolInterior = new SolidColorBrush(Colors.DarkGray), - }; series1.AdornmentsInfo = adornmentInfo1; - series2.AdornmentsInfo = adornmentInfo2; ChartBase.SetColumn(series1, 0); - ChartBase.SetColumn(series2, 1); chart.Series.Add(series1); - chart.Series.Add(series2); {% endhighlight %}