Hi,
I'm trying to create checkboxes on the legend that turn the different series on and off but I have been unable to get it to work. I'm concerned that I need to add these like the legend setup when I'm creating each series dynamically. I set this up based on examples from forum. Here is my code:
Public Sub ShowGraph()
For Each item As DataGraphItems.GraphItem In DataGraphItems.GraphItemsList
Dim data = From row In mTemplateData.Rows.OfType(Of DataRow)() Select New DateDataItem() With {.[Date] = CDate(row("DATEFIELD")), .Value1 = CDbl(row(item.MappingField))}
Dim lSeries As New LineSeries
mMainWindow.MainXAxis.DateTimeMemberPath = "Date"
lSeries.XAxis = mMainWindow.MainXAxis
lSeries.YAxis = mMainWindow.MainYAxis
lSeries.Title = item.FieldDesc
lSeries.Legend = mMainWindow.TitleLegend
lSeries.ItemsSource = data 'ds.Tables(0)
lSeries.ValueMemberPath = "Value1"
Dim minVal As Date = mTemplateData.Rows(0).Item("DATEFIELD")
Dim maxVal As Date = mTemplateData.Rows(mTemplateData.Rows.Count - 1).Item("DATEFIELD")
Dim axisRange As TimeSpan = maxVal - minVal
With mMainWindow.MainXAxis
.DataContext = data
.MinimumValue = minVal
.MaximumValue = maxVal
.LabelSettings.Angle = 45
If axisRange.Days > 0 Then
.Label = "{Date:dddd MMMM dd}"
.Interval = axisRange
Else
.Label = "{Date:T}"
.Interval = TimeSpan.FromHours(1)
End If
End With
Dim spMain As New StackPanel()
spMain.Background = Brushes.LightGray
Dim txtBlock1 As New TextBlock()
txtBlock1.Text = lSeries.Title
spMain.Children.Add(txtBlock1)
Dim dataText As New TextBlock()
dataText.SetBinding(TextBlock.TextProperty, New Binding() With {.Path = New PropertyPath("Item.Date"), .StringFormat = "Date: {0}"})
spMain.Children.Add(dataText)
Dim dataText1 As New TextBlock()
dataText1.SetBinding(TextBlock.TextProperty, New Binding() With {.Path = New PropertyPath("Item.Value1"), .StringFormat = "Value: {0}"})
spMain.Children.Add(dataText1)
lSeries.ToolTip = spMain
mMainWindow.fcMainChart.Series.Add(lSeries)
Next
mMainWindow.graphConfigView.ViewModel.Model = mMainWindow.GraphConfig
If mMainWindow.fcMainChart.Series.Count > 0 Then
mMainWindow.fcMainChart.Visibility = Visibility.Visible
mMainWindow.fcMainChart.Visibility = Visibility.Hidden
End Sub
<ig:XamDock x:Name="dockContainer" >
<ig:XamDataChart x:Name="fcMainChart" HorizontalZoomable="True" VerticalZoomable="True" HorizontalZoombarVisibility="Visible"
VerticalZoombarVisibility="Visible" IsDragCrosshairEnabled="True" CrosshairVisibility="Visible" Legend="{Binding ElementName=TitleLegend}"
OverviewPlusDetailPaneVisibility="Visible" Margin="2" Grid.Row="1" ToolTipStyle="{StaticResource ToolTipStyle}">
<ig:XamDataChart.Axes>
<ig:CategoryDateTimeXAxis
x:Name="MainXAxis"
ItemsSource="{Binding}"
DateTimeMemberPath="Date"
Label="{}{Date}">
<ig:CategoryDateTimeXAxis.LabelSettings >
<ig:AxisLabelSettings Location="OutsideBottom" Extent="75" />
</ig:CategoryDateTimeXAxis.LabelSettings>
</ig:CategoryDateTimeXAxis>
<ig:NumericYAxis x:Name="MainYAxis">
<ig:NumericYAxis.LabelSettings>
<ig:AxisLabelSettings Extent="25" />
</ig:NumericYAxis.LabelSettings>
</ig:NumericYAxis>
</ig:XamDataChart.Axes>
<ig:XamDataChart.Series>
<ig:LineSeries
ValueMemberPath="Value1"
MarkerType="None"
Legend="{Binding ElementName=TitleLegend}"
XAxis="{Binding ElementName=MainXAxis}"
YAxis="{Binding ElementName=MainYAxis}">
<ig:LineSeries.LegendItemTemplate>
<DataTemplate>
<Border BorderThickness="0.5" Margin="2" CornerRadius="5" Visibility="{Binding Series.Visibility}">
<StackPanel Orientation="Horizontal" Margin="5">
<CheckBox x:Name="chbLineSeries1" Click="LineSeries1VisibilityClick" IsChecked="True" VerticalAlignment="Center" HorizontalAlignment="Left">
</CheckBox>
<ContentPresenter Content="{Binding}" Margin="5,0,5,0" ContentTemplate="{Binding Series.LegendItemBadgeTemplate}" />
<ContentPresenter Content="{Binding Series.Title, TargetNullValue=Series Title}" Margin="0,0,5,0" />
</StackPanel>
</Border>
</DataTemplate>
</ig:LineSeries.LegendItemTemplate>
<ig:LineSeries.LegendItemBadgeTemplate>
<Grid Width="18" Height="16" Margin="0 0 2 0">
<Grid.Effect>
<DropShadowEffect Color="Black" BlurRadius="5" ShadowDepth="2" Opacity="0.3">
</DropShadowEffect>
</Grid.Effect>
<Line VerticalAlignment="Center" HorizontalAlignment="Center" X1="0" Y1="0" X2="16" Y2="0" Stroke="{Binding Series.ActualBrush}" StrokeThickness="{Binding Series.Thickness}" StrokeEndLineCap="{Binding Series.EndCap}" StrokeStartLineCap="{Binding Series.StartCap}" Effect="{Binding Series.Effect}" />
<ContentPresenter Width="11" Height="11" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="0 0 2 0" ContentTemplate="{Binding Series.ActualMarkerTemplate}" Content="{Binding}" />
</Grid>
</ig:LineSeries.LegendItemBadgeTemplate>
</ig:LineSeries>
</ig:XamDataChart.Series>
</ig:XamDataChart>
<ig:Legend x:Name="TitleLegend" Orientation="Horizontal" OverridesDefaultStyle="True" Margin="1"
ig:XamDock.Edge="InsideTop" ig:XamDock.HorizontalDockAlignment="Center" ig:XamDock.VerticalDockAlignment="Bottom">
</ig:Legend>
<ComboBox Name="ItemLegendDirection" Margin="2" Width="100" HorizontalAlignment="Left"/>
</ig:XamDock>
Thanks in advance for your help!
John
Hi Nassim,
I modified the sample from my previous post, so now it has the functionality you want. Basically I copied the default Style of the Legend and added a Checkbox inside its Template. I also handled its Checked and Unchecked events and in the handlers i iterate through all the checkboxes and update them. Please let me know if this helps you or you have further question on this matter.
Looking forward for your reply.
Hello Stefen,
Is it possible to add a select all /Un Select checkbox to this legend datatemplate.
Thanks
Hello Katy,
I converted the sample in C# and attached it to my post.
Hello Stefan
I found this thread online and it is exactly what I want to do! Unfortunately I am very new to all this and I cannot make it work with my WPF Form, Column Series and c#. I tried using the data template from your example but it seems I cannot have a Click Event then(?). I am also creating the series dynamically in the code behind and as there are more than 20 series to show I'd like the user to be able to select which columns to show and which not.
Do you by any chance have a similar/the same example using WPF and c#? Any help would be very much appreciated!
Thank you!
Katy
Thanks again for the help! This is great!