WPF Toolkit Chart problems - wpf

I am using WPF Toolkit for charting. I have to problem, that I can't solve:
If I have more than one series in chart. I am using date time axis. Problem is that chart does not display my first column correct. I think image is self explanatory:
I have a checkbox for each of that tree columns. But when I set visibility of the column to Collapsed, the column is just hidden. What I want is, that 2 visible column divide free space between them, so the width will be higher for each column.
Any ideas?
XAML of chart:
<charting:Chart BorderThickness="0"
x:Name="StackedLineChart"
Title=""
Margin="5">
<charting:Chart.Axes>
<charting:DateTimeAxis Interval="1" IntervalType="Months" x:Name="myDateTimeAxis"
Orientation="X" Title="Date">
<charting:DateTimeAxis.AxisLabelStyle>
<Style TargetType="charting:DateTimeAxisLabel">
<Setter Property="StringFormat" Value="{}{0:MMMM}"/>
</Style>
</charting:DateTimeAxis.AxisLabelStyle>
</charting:DateTimeAxis>
<charting:LinearAxis Orientation="Y" ShowGridLines="True" x:Name="myYAxis"
Title="Schedules count"/>
</charting:Chart.Axes>
<charting:Chart.LegendStyle>
<Style TargetType="datavis:Legend">
<Setter Property="Width" Value="0" />
</Style>
</charting:Chart.LegendStyle>
<charting:Chart.Series>
<charting:ColumnSeries ItemsSource="{Binding Data}"
IndependentValuePath="Date"
IsSelectionEnabled="True"
DependentValuePath="1Value">
</charting:ColumnSeries>
<charting:ColumnSeries ItemsSource="{Binding Data}"
IndependentValuePath="Date"
IsSelectionEnabled="True"
DependentValuePath="2Value">
</charting:ColumnSeries>
<charting:ColumnSeries ItemsSource="{Binding Data}"
IndependentValuePath="Date"
IsSelectionEnabled="True"
DependentValuePath="3Value">
</charting:ColumnSeries>
</charting:Chart.Series>
</charting:Chart>

Related

In multiple Y axis graph, the axis shift issue in wpf

I have chart control,depends upon the selection i have to plot a graph,here is screen shot
First case i have selected, 2 inputs and second case given 1 input. as above images it shifts axis.If i refresh it will be the proper position.
<chartingToolkit:Chart Name="lineChart" BorderThickness="0" Padding="0"
Grid.IsSharedSizeScope="True" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
<chartingToolkit:Chart.LegendStyle>
<Style TargetType="Control">
<Setter Property="Template" Value="{x:Null}"/>
</Style>
</chartingToolkit:Chart.LegendStyle>
<chartingToolkit:Chart.Axes>
<chartingToolkit:LinearAxis Orientation="X" Minimum="0" Maximum="{Binding MaxX}" Title="Time (Minutes)" />
</chartingToolkit:Chart.Axes>
<chartingToolkit:LineSeries Title="Oxygen" DependentValuePath="Value" IndependentValuePath="Key" Visibility="{Binding O2.GraphVisibility}"
ItemsSource="{Binding O2.TGraph,UpdateSourceTrigger=PropertyChanged}" IsSelectionEnabled="True" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" Padding="0" >
<chartingToolkit:LineSeries.DataPointStyle>
<Style TargetType="chartingToolkit:LineDataPoint">
<Setter Property="Template" Value="{x:Null}" />
<Setter Property="Background" Value="{StaticResource graphO2}"/>
</Style>
</chartingToolkit:LineSeries.DataPointStyle>
<chartingToolkit:LineSeries.DependentRangeAxis>
<chartingToolkit:LinearAxis Title="{Binding O2.YTitle}" Foreground="{StaticResource graphO2}" Visibility="{Binding O2.YVisibility}" Maximum="{Binding O2.MaxY}" Orientation="Y" Location="{Binding O2.YLocation}" />
</chartingToolkit:LineSeries.DependentRangeAxis>
</chartingToolkit:LineSeries>
</chartingToolkit:Chart>
Using WPF Toolkit Data Visualization for graph.Please help me solve this issue.Coding side using MVVM architecuture.
It seems that chart doesn't refreshe in proper way, when you change input or modify dependency properties.
At least in LightningChart Visualization component, you can disable chart rendering - modify properties - continue rendering. You can easily prevent such bugs.
Try that and see the result. It has free demoapp with examples and available code. Can help you.

WPF: Simple MSWord-like color picker button

Is there a quick and easy way to implement a color picker button like the one in MS Word?
I want the user to choose from a number of predefined colors in a dropdown. The selected color should be displayed when the button is closed. When the user clicks the button, an event or command should be triggered. I want to use one button instance to set the text color in a RichTextBox, and another one to set the background color (similar to MS Word).
My first approach was to use a ComboBox with a DataTemplate which contains a button.
This does not work: The button's command is not triggered when the user clicks it. Instead, the dropdown of the ComboBox opens. I don't know the exact reason, but maybe the IsHitTestVisible=false attributes in the ComboBox default template? See: http://msdn.microsoft.com/en-us/library/dd334408%28v=vs.95%29.aspx
<UserControl x:Class="MyBrushPicker"
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"
mc:Ignorable="d"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
Height="Auto" Width="Auto" MinWidth="50">
<UserControl.Resources>
<!--
Provide two different DataTemplates:
- SelectionBoxTemplate is used to display the selected color when the ComboBox is closed.
It contains a button which should be clickable (does not work).
- NormalItemTemplate is used to display a color in the opened ComboBox popup.
See:
http://stackoverflow.com/questions/2214696/wpf-how-to-customize-selectionboxitem-in-combobox
-->
<DataTemplate x:Key="NormalItemTemplate">
<Border Height="44" Width="44" Margin="3,3,3,3" BorderThickness="1" BorderBrush="Black" Background="{Binding Mode=OneWay}"/>
</DataTemplate>
<DataTemplate x:Key="SelectionBoxTemplate">
<!-- This button cannot be clicked: PreviewMouseDown and Button_Click events are never triggered. -->
<Button Click="Button_Click" PreviewMouseDown="Button_PreviewMouseDown">
<Border Height="44" Width="44" Margin="3,3,3,3" BorderThickness="1" BorderBrush="Black" Background="{Binding Mode=OneWay}"/>
</Button>
</DataTemplate>
<DataTemplate x:Key="CombinedTemplate">
<ContentPresenter x:Name="Presenter"
Content="{Binding}"
ContentTemplate="{StaticResource NormalItemTemplate}" />
<DataTemplate.Triggers>
<DataTrigger
Binding="{Binding RelativeSource={RelativeSource FindAncestor,ComboBoxItem,1}}"
Value="{x:Null}">
<Setter TargetName="Presenter" Property="ContentTemplate"
Value="{StaticResource SelectionBoxTemplate}" />
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</UserControl.Resources>
<ComboBox IsReadOnly="True" IsEditable="False"
ItemsSource="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type UserControl}}, Path=SelectableBrushes, Mode=OneWay}"
SelectedItem="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type UserControl}}, Path=SelectedBrush, Mode=TwoWay}"
ScrollViewer.VerticalScrollBarVisibility="Auto"
MinHeight="50"
MaxDropDownHeight="200"
ItemTemplate="{StaticResource CombinedTemplate}"
>
<ComboBox.Resources>
<Style TargetType="ComboBox">
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<WrapPanel IsItemsHost="True" Orientation="Horizontal" Width="200" />
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="ComboBoxItem">
<Setter Property="Width" Value="50" />
<Setter Property="Height" Value="50" />
</Style>
</ComboBox.Resources>
</ComboBox>
</UserControl>
Is there a way to make the button work correctly?
Are there any better approaches?
EDIT: Using the Snoop tool revealed that the IsHitTestVisible attribute of the unnamed ContentPresenter inside the ComboBox is actually set to false (ValueSource: ParentTemplate). If I set this property to true using Snoop, the button becomes clickable.
Can I change this property from a style?
At least, the following doesn't work:
<ComboBox.Resources>
<Style TargetType="ContentPresenter">
<Setter Property="IsHitTestVisible" Value="True" />
</Style>
</ComboBox.Resources>
Assuming you are not just doing this as a learning exercise (which make using a library pointless)...
Take a look at: Extended WPF Toolkit - Color Picker
I've used it before for simple a plug-and-play WPF color-picker and it should solve your problem nicely.

DataVisualization.Charting.Chart Can't overlay lineseries on columnseries

I'm using the WPFToolkit v 3.5.4 to overlay two line series on a column series, but the line series are 'pushed' to the left of the column series as seen in the top graph of the image. All series are of List<KeyValuePair<double, int>> and I've checked the key/value pairs are what I want displayed.
The second graph successfully overlays three LineSeries (using different data) but looks poorly.
Is there a way to mix charting series types (ColumnSeries, LineSeries) on the same chart?
Thanks
Here's the Xaml for the two graphs in the image:
<chartingToolkit:Chart Name="lineChart1" Title="Series1" VerticalAlignment="Top" Margin="449,39,43,0" Height="262">
<chartingToolkit:ColumnSeries DependentValuePath="Value" IndependentValuePath="Key" ItemsSource="{Binding [0]}"
IsSelectionEnabled="True" />
<chartingToolkit:LineSeries DependentValuePath="Value" IndependentValuePath="Key" ItemsSource="{Binding [1]}"
IsSelectionEnabled="True" />
<chartingToolkit:LineSeries DependentValuePath="Value" IndependentValuePath="Key" ItemsSource="{Binding [2]}"
IsSelectionEnabled="True" />
<!-- Remove the legend -->
<chartingToolkit:Chart.LegendStyle>
<Style TargetType="Control">
<Setter Property="Width" Value="0"/>
<Setter Property="Height" Value="0"/>
</Style>
</chartingToolkit:Chart.LegendStyle>
</chartingToolkit:Chart>
<chartingToolkit:Chart Name="lineChart2" Title="Series2" VerticalAlignment="Top" Margin="33,330,440,0" Height="262">
<chartingToolkit:LineSeries DependentValuePath="Value" IndependentValuePath="Key" ItemsSource="{Binding [0]}"
IsSelectionEnabled="True" />
<chartingToolkit:LineSeries DependentValuePath="Value" IndependentValuePath="Key" ItemsSource="{Binding [1]}"
IsSelectionEnabled="True" />
<chartingToolkit:LineSeries DependentValuePath="Value" IndependentValuePath="Key" ItemsSource="{Binding [2]}"
IsSelectionEnabled="True" />
<chartingToolkit:Chart.LegendStyle>
<Style TargetType="Control">
<Setter Property="Width" Value="0"/>
<Setter Property="Height" Value="0"/>
</Style>
</chartingToolkit:Chart.LegendStyle>
</chartingToolkit:Chart>
You need to set LinearAxis for the first chart, because you put ColumnSeries first and they use CategoryAxis instead of the correct one.
Here is the code for the first chart:
<chartingToolkit:Chart Name="lineChart1" Title="Series1" VerticalAlignment="Top" Margin="449,39,43,0" Height="262">
<chartingToolkit:Chart.Axes>
<chartingToolkit:LinearAxis Orientation="X" />
</chartingToolkit:Chart.Axes>
...
The code of the second chart is correct, but the chart looks bad because of the data that you use for binding.
Post C# code where you set the DataContext property and post what values you use there.

How to remove the dots in Wpf Chart which is using Data Visualzation tool kit dll

I am working MVVM & Wpf Application, in that I am developing a chart using Data visualization tool kit Chart Line series...
This is my Xaml Code..
xmlns:chartingToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting; assembly=System.Windows.Controls.DataVisualization.Toolkit"
<chartingToolkit:Chart>
<chartingToolkit:LineSeries
DataContext="{Binding}"
DependentValueBinding="{Binding Path=y}"
IndependentValueBinding="{Binding Path=x}"
ItemsSource="{Binding Path=Data}" >
</chartingToolkit:LineSeries>
<chartingToolkit:Chart.Axes>
<chartingToolkit:LinearAxis ShowGridLines="False" Orientation="X" Interval="0">
</chartingToolkit:LinearAxis>
<chartingToolkit:LinearAxis ShowGridLines="False" Orientation="Y" Interval="0">
</chartingToolkit:LinearAxis>
</chartingToolkit:Chart.Axes>
</chartingToolkit:Chart>
I am able to display my chart, but the problem is how to hide dots. (I marked them with pink Circle in the picture (graph/ chart))
You have to set a style with Opacity = 0
<Style x:Key="LineDataPointStyle" TargetType="{x:Type chartingToolkit:LineDataPoint}">
<Setter Property="Background" Value="Blue" ></Setter>
<Setter Property="Opacity" Value="0" />
</Style>
<chartingToolkit:LineSeries
Title="Line"
ItemsSource="{Binding}"
IndependentValuePath="Int"
DependentValuePath="LineValue"
DataPointStyle="{StaticResource LineDataPointStyle}"/>

silverlight 4 display multiple pie charts

Code:
<toolkit:Chart x:Name="pieChart" Grid.Row="2" Title="">
<toolkit:Chart.Series>
<toolkit:PieSeries ItemsSource="{Binding}"
IndependentValueBinding="{Binding A}"
DependentValueBinding="{Binding X}"
Margin="-500,0,0,0">
</toolkit:PieSeries>
<toolkit:PieSeries ItemsSource="{Binding}"
IndependentValueBinding="{Binding A}"
DependentValueBinding="{Binding Y}"
Margin="0,0,0,0"/>
<toolkit:PieSeries ItemsSource="{Binding}"
IndependentValueBinding="{Binding A}"
DependentValueBinding="{Binding Z}"
Margin="500,0,0,0"/>
</toolkit:Chart.Series>
</toolkit:Chart>
Without margins three pies overlay to one. How do I make them split into three? Note: with <toolkit:ColumnSeries everything works as expected.
I guess a better question would be: how do I show three pies with one legend?
EDIT: Solution
Like vorrtex suggested, I found no simpler way of doing this. A chart without a legend:
<toolkit:Chart x:Name="pieChart" LegendStyle="{StaticResource NoLegendStyle}">
<toolkit:Chart.Series>
<toolkit:PieSeries ItemsSource="{Binding}"
IndependentValueBinding="{Binding A}"
DependentValueBinding="{Binding X}"/>
</toolkit:Chart.Series>
</toolkit:Chart>
A Legend without a chart:
<toolkit:Chart x:Name="pieChart3" ChartAreaStyle="{StaticResource NoChartStyle}">
<toolkit:Chart.Series>
<toolkit:PieSeries ItemsSource="{Binding}"
IndependentValueBinding="{Binding A}"
DependentValueBinding="{Binding X}"/>
</toolkit:Chart.Series>
</toolkit:Chart>
Where styles are:
<UserControl.Resources>
<Style x:Key ="NoLegendStyle" TargetType="toolkit:Legend">
<Setter Property="Height" Value="0" />
<Setter Property="Width" Value="0" />
</Style>
<Style x:Key ="NoChartStyle" TargetType="chartingPrimitivesToolkit:EdgePanel">
<Setter Property="Height" Value="0" />
<Setter Property="Width" Value="0" />
</Style>
</UserControl.Resources>
and
xmlns:chartingPrimitivesToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting.Primitives;assembly=System.Windows.Controls.DataVisualization.Toolkit"
All charts share same datacontext.
Disable the legend on 2 of the charts. Then programmatically add the legend items to the legend you are displaying.

Resources