locked
Removing line chart datapoints where dependency property is null RRS feed

  • Question

  • I have a line and bar chart showing the monthly movement in a bank account and the account balance (cashflow) as illustrated:

    The account in this example was only opened in December.  I want to have all previous datapoints removed (Mar to Nov) so that the line starts only at December (but for design consistency with other accounts I need to keep the whole 12 months range).  I had thought that making the dependency value null would do this and accordingly set up my DataPointSeries dependency value as nullable:

            private void GetCashLine()
            {
                List<KeyValuePair<string, decimal?>> balanceList = new List<KeyValuePair<string, decimal?>>();
                decimal? balance = null;
                for (int i = 0; i < 12; i++)
                {
                    if (monthResult[i].Balance.HasValue)
                    {
                        balance = decimal.Parse(((decimal)monthResult[i].Balance).ToString("N2"));
                    }
                    else if (i == 0)// Necessary to prevent"No suitable axis is available for plotting the dependent value" error if first X value is null
                    {
                        balance = 0M;
                    }
                    KeyValuePair<string, decimal?> balancePoint = new KeyValuePair<string, decimal?>(months[startMonth - 1 + i < 0 ? 12 : startMonth - 1 + i], balance?? balance);
                    balanceList.Add(balancePoint);
                }
                (columnChart.Series[1] as DataPointSeries).ItemsSource = balanceList;
            }
    

    but the datapoints still show as above (note that the first dependency value datapoint cannot be null as this produces an "No suitable axis is available for plotting the dependent value" run-time error).

    My XAML is:

    <chartingToolkit:Chart  Height="260" HorizontalAlignment="Left" VerticalAlignment="Top" 
                            Margin="75,-240,0,0" x:Name="columnChart" Title="Cashflow" Width="580" Background="White" ScrollViewer.CanContentScroll="True"  BorderBrush="{x:Null}">
                            <chartingToolkit:Chart.Axes>
                                <chartingToolkit:CategoryAxis x:Name="labelXAxis" MinWidth="20" VerticalAlignment="Bottom" Orientation="X" ShowGridLines="False" 
                                    Margin="2,0,0,-10" />
                                <chartingToolkit:CategoryAxis x:Name="labelYAxis" Title=" ◄ Overspend        Saving ►" MinWidth="20" VerticalAlignment="Bottom" Orientation="Y" 
                                    ShowGridLines="False"  />
                            </chartingToolkit:Chart.Axes>
                            <chartingToolkit:ColumnSeries x:Name="clnsExpenses" Title="Saving or deficit" DependentValuePath="Value" IndependentValuePath="Key" ItemsSource="{Binding}" />
                            <chartingToolkit:LineSeries x:Name="clnsBalanceLineChart" Foreground="Red"  Title="Account balance" DependentValuePath="Value" 
                                                        IndependentValuePath="Key" ItemsSource="{Binding}">
                                
                            </chartingToolkit:LineSeries>
                        </chartingToolkit:Chart>

    I need to remove all datapoints where the value of the dependency property is null (but not zero) and would also prefer to overcome the need to set the first datapoint value to null as well.

    Many solutions deal only with hiding or removing only the datapoint itself, or the whole series, but I want to delete an individual datapoint and the line joining it to the next datapoints if the it is null.

    How can I achieve this?


    Mike Whalley

    Monday, March 16, 2020 12:38 PM

All replies

  • Hi,

    Do you want to delete the previous data or just the LineSeries?

      private void Button_Click(object sender, RoutedEventArgs e)
            {           
                LineSeries ls = (LineSeries)Chart.Series[1];
                ObservableCollection<KeyValuePair<string, int>> list = (ObservableCollection<KeyValuePair<string, int>>)ls.ItemsSource;
                for (int index = 0; index < 6; index++)
                {
                    list.RemoveAt(0);
                }
            }

    Best Regards,

    Alex


    "Windows Presentation Foundation" forum will be migrating to a new home on Microsoft Q&A (Preview)!
    We invite you to post new questions in the "Developing Universal Windows apps" forum’s new home on Microsoft Q&A (Preview)!
    For more information, please refer to the sticky post.

    Wednesday, March 18, 2020 3:32 AM
  • @AlexLi, thank you - that worked, with the addition of a .Refresh() command after the loop to refresh the chart image.  One small issue: when I put your code into the GetCashLine() method that initially renders the chart (see last 7 lines below):

    private void GetCashLine()
            {
                List<KeyValuePair<string, decimal?>> balanceList = new List<KeyValuePair<string, decimal?>>();
                decimal? balance = null;
                for (int i = 0; i < 12; i++)
                {
                    if (monthResult[i].Balance.HasValue)
                    {
                        balance = decimal.Parse(((decimal)monthResult[i].Balance).ToString("N2"));
                    }
                    else if (i == 0)// Necessary to prevent"No suitable axis is available for plotting the dependent value" error if first X value is null
                    {
                        balance = 0M;
                    }
                    KeyValuePair<string, decimal?> balancePoint = new KeyValuePair<string, decimal?>(months[startMonth - 1 + i < 0 ? 12 : startMonth - 1 + i], balance?? balance);
                    balanceList.Add(balancePoint);
                }
                (columnChart.Series[1] as DataPointSeries).ItemsSource = balanceList;
                LineSeries ls = (LineSeries)columnChart.Series[1];
                List<KeyValuePair<string, decimal?>> list = (List<KeyValuePair<string, decimal?>>)ls.ItemsSource;
                for (int index = 0; index < 9; index++)
                {
                    list.RemoveAt(0);
                }
                (columnChart.Series[1] as DataPointSeries).Refresh();
            }
    I get:

    but when I put it into a button_Click event after the chart has been rendered, I get:

    I'm not sure I can explain the difference, but I'd like to get the second result (i.e. showing the datapoints as well as the line) with the initial rendering of the chart, and without having to generate a later event.  (I have tried generating the _Click event in code automatically (after the GetCashLine() method has been called) to avoid user intervention, but this still produces just the line.)  Can you suggest a solution?

    Many thanks for the prompt response.


    Mike Whalley

    Wednesday, March 18, 2020 8:54 AM
  • Hi Mike,

    Since MSDN WPF forum will be read only from 3/30/2020, we have created a new thread on Microsoft Q&A Removing line chart datapoints where dependency property is null, please follow this thread for further discussion about your question.

    Best Regards,

    Charles


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    Friday, March 27, 2020 8:05 AM