Why does not Chart support hittest?

Hi There,

I have upto hundreds dataseries (lines) plot on the chart, I want to know which line I am clicking on, in other words, I need to select a dataseries, how do I do that, I cannot go through each line and find closest point on the line to be clicked.

If you can provide the HitTest on the chart and tell me which dataseries is clicked on, then it will be very helpful.

Adding a path and Event Setter for each dataseries will increase the time for plot all these series, right?

Thanks

Gordon

Hi,

In the next nightly build you'll find on the Chart a new DataSeriesSelected event - the event arguments will contain a reference to the selected series that was clicked on. You can also subscribe to SelectedDataPointChanged on the series if you need access to the individual point that was clicked.

With regards to your final remark, can you provide more details as to what you mean by adding a path to a DataSeries? Subscribing to an event for every DataSeries may start to incur some performance penalty, especially with ~100 series, although this will depend on how many DataPoints they have. By then the rendering of the visuals will start to get fairly heavy and may dominate adding events regardless.

Hi Callumg,

I downnloaded Jan 14th nightly build. I still have problem and questions

1) The SelectedDataSeries is always null in the event arguments . So it is not really working.

2) The events is only for non scattered series,

3) The SelectedDataPointChanged is only works for the Scatter Series not for the line series if the line does not have symbols.

4) If the above events works, we can ignore the Path on series.

Thanks, Gordon

Hello Gordon

In the next nightly build the event will be renamed to SelectedDataSeriesChanged. The event arguments will now give you the selected data series (or null if the series was deselected) and it will also work for Scatter/Bar series.

Jason Fauchelle

Thanks Jason, this is working now. Gordon

Hi Jason, The behaviour of SelectedDataSeriesChanged event on chart is not totally functional. Here are some problem:

1) Lets say we have more than one LineSeries on the chart 2) You click on one line, it does show e.SelectedDataSeries != null 3) You click on the same line again, then e.SelectedDataSeries == null,

which we still want to this line to be selected. No matter how many times we click on the same line, this line is selected. If you want to unselect, you can click on the empty space that does not have any series.

4) You selected one line, then you click on the different line, it shows e.SelectedDataSeries == null again until you click on the same line again.

My suggestion would be SelectedDataSeriesChangeddEventArgs will have 2 properties: PreviousSelectedDataSeries and SelectedDataSeries. So when you click on different line, it will tells you that your previous selected series is and what is the current selected series is. You can change the series, like brush back and forth according to the selection. I.e. We want to change the color of selected series to red (for it to stading out) and change it back when it is not selected. Currently we have no way to do that.

Thanks a lot!

Gordon

Please let me know if the

Hello Gordon

I've added the PreviousSelectedDataSeries property to the SelectedDataSeriesChangedEventArgs. This will be available in the next nightly build.

To change the color (or any other property) of a line when it is selected, you can put a setter in a custom line style. Here is an example:

  <Style x:Key="LineStyle" TargetType="Path">
    <Setter Property="StrokeThickness" Value="2" />
    <Style.Triggers>
      <DataTrigger Binding="{Binding IsSelected}" Value="True">
        <Setter Property="Stroke" Value="Red" />
      </DataTrigger>
    </Style.Triggers>
  </Style>

This can be used to set the LineStyle of a line series. Similar techniques can be used on all other line-based series.

Jason Fauchelle

Hi Jason, Thanks for adding the PreviousSelectedDataSeries property.

But it is still not quite working:

1) Lets say you have 2 line series, you click on one line and switch to another line (back forth for a few times), sometimes, it shows the SelectedDataSeries=null, which is not good.

2) You keep clicking on the same line, sometimes, it also gives you SelectedDataSeries=null, which is also not good. Sometimes the event not fired up (which is understandable, since the selection is not changed).

Could you also put in some property to control for the event to fire up when right click on the data series?

Is it possible, when you click on empty place on chart, it will set SelectedDataSeries = null? It has to do with our situation to enable some context menu.

Thanks

Gordon

Hello Gordon

Thanks for all this feedback regarding chart selection. All of this is certainly possible/fixable, we just need to find the best way to implement it and expose the options in the API. We will be looking into this very soon. What time frame do you need this by?

Jason Fauchelle

Thanks for putting up with my unending demands, Jason.

I am doing the selection stuff right now in our project. for now, I can implement the functionality with current version of chart, even thought it is not always working.

If you can fix/add the function by next one week or 2, we can use it in our beta2 release. How is the DataGrid efficiency improvement going for the lot of row/column DataTable (constantly update)?

Thanks, Gordon

We should be able to get the selection stuff done within 2 weeks.

We have not quite started the DataGrid improvements as we have been hard at work on releasing the Metro Elements product. Now that it is finished, improving the DataGrid is currently scheduled to begin in a few days. It is hard to say when this will be ready though. I'll keep you posted.

Jason Fauchelle

Hello Gordon

The next nightly build will include the selection bug fix and features you have requested:

1) Clicking back and forward between 2 series will no longer raise an incorrect event with SelectedDataSeries = null.

2) The default behavior is that clicking on a selected series will toggle the selection back to de-selected. I've now added the Chart.CanToggleSelection property which you can set to false which will mean clicking a selected data series will not deselect it.

3) The new Chart.IsRightClickSelectionEnabled property will allow the right mouse button to select series.

4) Setting the Chart.CanDeselectOnClickNothing property to true will cause all series to be deselected when clicking on a blank area of the chart.

Jason Fauchelle

Thanks Jason.

We are grateful for your hard working on this. It seemed working fine so far.

I have one more request, can you make it SelectedDataPointChanged event fired up on right click for scatterseries? So that I don't have to left click on a point and then right click on it.

Thanks

Gordon

Hello Gordon

This will be available in the next nightly build. Of course IsRightClickSelectionEnabled will need to be true for this to work.

Jason Fauchelle

Thanks Jason,

One more thing I found is that when you select on a scatter series (non line series actually), and click on empty place, the SelectedDataSeriesChanged event is not fired up, so the scatterseries is still selected.

Can you make it, so when click on the empty place, any kind data series previous selected, will not be selected anymore (or fire up SelectedDataSeriesChanged event with SelectedDataSeries = null) if we set Chart.CanDeselectOnClickNothing = true?

Thanks

Gordon

Hello Gordon

This corrected behavior will also be available in the next nightly build.

Jason Fauchelle

Hi Jason,

This is old post but I do find the one problem:

if you click on a series then click on empty place the SelectedDataPointChanged or SelectedDataSeriesChanged Will get fired up. Which is good.

But if you click on a series then right click on empty place the SelectedDataPointChanged or SelectedDataSeriesChanged won't get fired up. This is bad, since the user want to right click chart and want to enable/disable certain context menu. However, It will fired up if you right click on a series or data point.

Can you fix this?

Thanks, Gordon

Hello Gordon

This logic will be implemented in the next nightly build.

Jason Fauchelle

Jason,

I'm using the bar chart and would like to display a different context menu depending upon which bar/series was clicked on. I'm using the SelectedDataSeriesChanged event to figure out what was clicked on, i.e. SelectedDataSeriesChangeddEventArgs.SelectedDataSeries.SelectedDataPoint.DataContext

Is it possible to trigger the SelectedDataSeriesChanged event on right mouse button? Looks like right now it is only firing for left button.

Thanks, Scott Ferris

Hello Scott

In order for right click selection to work, make sure to first set IsRightClickSelectionEnabled on the chart control. Keep in mind that the SelectedDataSeriesChanged event is only raised when an entirely new series is selected. If you click on a different bar in the currently selected series, then the event won't be raised again. You'll want to listen to the SelectedDataPointChanged event on the individual BarSeries to listen to selection changes between different bars.

Jason Fauchelle

Thanks Jason, that worked perfectly!

Now - on the pie chart, is there a way to disable the animated slice movement? We are displaying a context menu based upon which slice was clicked on, but don't want the slices to move.

Scott Ferris

Hello Scott

This can be achieved by writing your own PieSlice style. Below is the code for the generic style. You can see the very last ControlTemplate Trigger contains enter and exit animations for the ExplodedDistance property. If you still want the slices to popout, but not animate, then you can change the Duration to 0. Or if you don't want the ExplodedDistance to change at all, you can remove that whole Trigger. Creating this style also gives you the opportunity to change the gradient overlay and selection visuals if you want. This style can be applied by setting the PieSliceStyle property of each PieSeries.

  <ms:PieSliceToRadialGradientBrushConverter x:Key="PieSliceBrushConverter">
    <ms:PieSliceToRadialGradientBrushConverter.GradientStops>
      <GradientStop Offset="0" Color="#00000000" />
      <GradientStop Offset="0.7" Color="#22000000" />
      <GradientStop Offset="0.8" Color="#33000000" />
      <GradientStop Offset="1" Color="#77000000" />
    </ms:PieSliceToRadialGradientBrushConverter.GradientStops>
    <ms:PieSliceToRadialGradientBrushConverter.DoughnutGradientStops>
      <GradientStop Offset="0" Color="#77000000" />
      <GradientStop Offset="0.2" Color="#33000000" />
      <GradientStop Offset="0.3" Color="#22000000" />
      <GradientStop Offset="0.5" Color="#00000000" />
      <GradientStop Offset="0.7" Color="#22000000" />
      <GradientStop Offset="0.8" Color="#33000000" />
      <GradientStop Offset="1" Color="#77000000" />
    </ms:PieSliceToRadialGradientBrushConverter.DoughnutGradientStops>
  </ms:PieSliceToRadialGradientBrushConverter>

  <Style x:key="PieSliceStyle" TargetType="ms:PieSlice">
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="ms:PieSlice">
          <Grid>
            <Path Fill="{TemplateBinding Background}" Data="{Binding PathData, RelativeSource={RelativeSource TemplatedParent}}"
                  ToolTipService.Placement="Mouse">
            </Path>
            <Path Name="MouseOverPath" Fill="#44FFFFFF" Data="{Binding PathData, RelativeSource={RelativeSource TemplatedParent}}" Opacity="0"
                  StrokeThickness="1" Stroke="Gray" StrokeLineJoin="Round" IsHitTestVisible="False" />
            <Path Name="SelectedPath" Data="{Binding PathData, RelativeSource={RelativeSource TemplatedParent}}" Opacity="0"
                  StrokeThickness="2" Stroke="Black" StrokeLineJoin="Round" IsHitTestVisible="False" />
            <Canvas Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" Clip="{Binding PathData, RelativeSource={RelativeSource TemplatedParent}}"
                    Background="{Binding Self, Converter={StaticResource PieSliceBrushConverter}, RelativeSource={RelativeSource TemplatedParent}}"
                    IsHitTestVisible="False" />
          </Grid>
          <ControlTemplate.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
              <Setter TargetName="MouseOverPath" Property="Opacity" Value="1" />
            </Trigger>
            <Trigger Property="IsSelected" Value="True">
              <Trigger.EnterActions>
                <BeginStoryboard>
                  <Storyboard>
                    <DoubleAnimation Duration="0:0:000.20" Storyboard.TargetProperty="ExplodedDistance" To="10" />
                  </Storyboard>
                </BeginStoryboard>
              </Trigger.EnterActions>
              <Trigger.ExitActions>
                <BeginStoryboard>
                  <Storyboard>
                    <DoubleAnimation Duration="0:0:000.20" Storyboard.TargetProperty="ExplodedDistance" To="0" />
                  </Storyboard>
                </BeginStoryboard>
              </Trigger.ExitActions>
            </Trigger>
          </ControlTemplate.Triggers>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

Jason Fauchelle