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
Hello John,
I have modified the sample, so now it has a Button, which shows each CheckBox’ state. In its Click event handler you can see how to get each CheckBox.
Hope this helps you.
One more question with this. How can I programatically access the checkbox control? For example, a user unchecks one of the legends and next time they look at the graph, it should remember that it was unchecked. I don't see how I can access that control.
Thank you for your feedback. I am glad that you resolved your issue and I believe that other community members may benefit from this as well.
Thanks again.
Thanks for the help! That solved my issue and helped me greatly!
I have been looking into your sample and I modified it, so now it works as you want. Basically I moved the DataTempaltes for the LegendItemTemplate and LegendItemBadgeTemplate in the Window’s Resources, so I could be able to get them in the code behind in order to set the to the Series you add dynamically. Also I bound the CheckBox’ Tag Property to the Series’ Index, so in the Click’s event handler I could determine which Series should I hide. Please let me know if this helps you or you need further assistance on this matter.
Looking forward for your reply.