XamChart - Background Shows Through Graph

Chris posted over 13 years ago

I am creating a XamChart with multiple background colors to represent visually if the current value is within a desired range. I create a ViewBox so that the control will resize itself and place a XamChart inside of the view box. I am using 3 area series to draw the 3 colored background ranges and then a line series to draw my data. The issue here is when the control resizes from being inside of the ViewBox, pixels for a given x-value are not repainted properly and I end up with vertical lines across the graph the same color as the Background property's brush. The graph looks fine once it gets to be a certain size, but as it becomes smaller, the vertical lines become visible. Setting the Background property is not a solution since that colors both the graph and a large rectangular area around the graph.

Parents

No Data

Reply

30692

Offline Graham Murray posted over 13 years ago

Given this:

<Viewbox Name="m_oButtPressureContainer" Grid.Row="1" Grid.Column="2" 
                     VerticalAlignment="Bottom">
        <Infragistics:XamChart Name="m_oButtPressureChart">

            <Infragistics:XamChart.Legend>
                <Infragistics:Legend Visible="False"/>
            </Infragistics:XamChart.Legend>

            <Infragistics:XamChart.Axes>
                <Infragistics:Axis AxisType="PrimaryX" Minimum="1" Maximum="10" AutoRange="False" Unit="101" StrokeThickness="10"/>
                <Infragistics:Axis AxisType="PrimaryY" Minimum="0" Maximum="20" AutoRange="False" Unit="256" StrokeThickness="10"/>
            </Infragistics:XamChart.Axes>

            <Infragistics:XamChart.Series>
                <Infragistics:Series ChartType="Area" Fill="Red" Name="m_oButtPressureUpperOutOfRangeSeries" StrokeThickness="0">
                    <Infragistics:Series.DataPoints>
                        <Infragistics:DataPoint Label="0" Value="20" />
                        <Infragistics:DataPoint Label="1" Value="20" />
                        <Infragistics:DataPoint Label="2" Value="20" />
                        <Infragistics:DataPoint Label="3" Value="20" />
                        <Infragistics:DataPoint Label="4" Value="20" />
                        <Infragistics:DataPoint Label="5" Value="20" />
                        <Infragistics:DataPoint Label="5" Value="20" />
                        <Infragistics:DataPoint Label="6" Value="20" />
                        <Infragistics:DataPoint Label="7" Value="20" />
                        <Infragistics:DataPoint Label="8" Value="20" />
                    </Infragistics:Series.DataPoints>
                </Infragistics:Series>
                <Infragistics:Series ChartType="Area" Fill="Green" Name="m_oButtPressureInRangeSeries" StrokeThickness="0">
                    <Infragistics:Series.DataPoints>
                        <Infragistics:DataPoint Label="0" Value="10" />
                        <Infragistics:DataPoint Label="1" Value="10" />
                        <Infragistics:DataPoint Label="2" Value="10" />
                        <Infragistics:DataPoint Label="3" Value="10" />
                        <Infragistics:DataPoint Label="4" Value="10" />
                        <Infragistics:DataPoint Label="5" Value="10" />
                        <Infragistics:DataPoint Label="6" Value="10" />
                        <Infragistics:DataPoint Label="7" Value="10" />
                        <Infragistics:DataPoint Label="8" Value="10" />
                        <Infragistics:DataPoint Label="9" Value="10" />
                    </Infragistics:Series.DataPoints>
                </Infragistics:Series>
                <Infragistics:Series ChartType="Area" Fill="Red" Name="m_oButtPressureLowerOutOfRangeSeries" StrokeThickness="0">
                    <Infragistics:Series.DataPoints>
                        <Infragistics:DataPoint Label="0" Value="5" />
                        <Infragistics:DataPoint Label="1" Value="5" />
                        <Infragistics:DataPoint Label="2" Value="5" />
                        <Infragistics:DataPoint Label="3" Value="5" />
                        <Infragistics:DataPoint Label="4" Value="5" />
                        <Infragistics:DataPoint Label="5" Value="5" />
                        <Infragistics:DataPoint Label="6" Value="5" />
                        <Infragistics:DataPoint Label="7" Value="5" />
                        <Infragistics:DataPoint Label="8" Value="5" />
                        <Infragistics:DataPoint Label="9" Value="5" />
                    </Infragistics:Series.DataPoints>
                </Infragistics:Series>
                <Infragistics:Series ChartType="Line" Fill="Black" Name="m_oButtPressureDataSeries">
                    <Infragistics:Series.DataPoints>
                        <Infragistics:DataPoint Label="0" Value="1" />
                        <Infragistics:DataPoint Label="1" Value="15" />
                        <Infragistics:DataPoint Label="2" Value="18" />
                        <Infragistics:DataPoint Label="3" Value="8" />
                        <Infragistics:DataPoint Label="4" Value="5" />
                        <Infragistics:DataPoint Label="5" Value="4" />
                        <Infragistics:DataPoint Label="6" Value="8" />
                        <Infragistics:DataPoint Label="7" Value="12" />
                        <Infragistics:DataPoint Label="8" Value="13" />
                        <Infragistics:DataPoint Label="9" Value="15" />
                    </Infragistics:Series.DataPoints>
                </Infragistics:Series>
            </Infragistics:XamChart.Series>

        </Infragistics:XamChart>
    </Viewbox>

Can you explain what I need to do to see the undesired behavior? What is your purpose of using the viewbox? Do you need the text/graphic size to increase along with the size of the chart? The chart can resize on its own to accomodate the change in size of its container.

-Graham

Children

60

Chris posted over 13 years ago in reply to Graham Murray

You should be able to see the bug with your code snippet. I copied and pasted your code into a new project, here is the entire xaml file: (sorry, I'm not sure how to insert a code snippet)

<Window x:Class="ChartTest.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:Infragistics="clr-namespace:Infragistics.Windows.Chart;assembly=Infragistics3.Wpf.Chart.v10.1"
    Title="Window1" Height="300" Width="300">

        <Viewbox Name="m_oButtPressureContainer" Grid.Row="1" Grid.Column="2"
                         VerticalAlignment="Bottom">
            <Infragistics:XamChart Name="m_oButtPressureChart">

                <Infragistics:XamChart.Legend>
                    <Infragistics:Legend Visible="False"/>
                </Infragistics:XamChart.Legend>

                <Infragistics:XamChart.Axes>
                      <Infragistics:Axis AxisType="PrimaryX" Minimum="1" Maximum="10" AutoRange="False" Unit="101" StrokeThickness="10"/>
                   <Infragistics:Axis AxisType="PrimaryY" Minimum="0" Maximum="20" AutoRange="False" Unit="256" StrokeThickness="10"/>
               </Infragistics:XamChart.Axes>

               <Infragistics:XamChart.Series>
                   <Infragistics:Series ChartType="Area" Fill="Red" Name="m_oButtPressureUpperOutOfRangeSeries" StrokeThickness="0">
                       <Infragistics:Series.DataPoints>
                           <Infragistics:DataPoint Label="0" Value="20" />
                           <Infragistics:DataPoint Label="1" Value="20" />
                           <Infragistics:DataPoint Label="2" Value="20" />
                           <Infragistics:DataPoint Label="3" Value="20" />
                           <Infragistics:DataPoint Label="4" Value="20" />
                           <Infragistics:DataPoint Label="5" Value="20" />
                           <Infragistics:DataPoint Label="5" Value="20" />
                           <Infragistics:DataPoint Label="6" Value="20" />
                           <Infragistics:DataPoint Label="7" Value="20" />
                           <Infragistics:DataPoint Label="8" Value="20" />
                       </Infragistics:Series.DataPoints>
                   </Infragistics:Series>
                   <Infragistics:Series ChartType="Area" Fill="Green" Name="m_oButtPressureInRangeSeries" StrokeThickness="0">
                       <Infragistics:Series.DataPoints>
                           <Infragistics:DataPoint Label="0" Value="10" />
                           <Infragistics:DataPoint Label="1" Value="10" />
                           <Infragistics:DataPoint Label="2" Value="10" />
                           <Infragistics:DataPoint Label="3" Value="10" />
                           <Infragistics:DataPoint Label="4" Value="10" />
                           <Infragistics:DataPoint Label="5" Value="10" />
                           <Infragistics:DataPoint Label="6" Value="10" />
                           <Infragistics:DataPoint Label="7" Value="10" />
                           <Infragistics:DataPoint Label="8" Value="10" />
                           <Infragistics:DataPoint Label="9" Value="10" />
                       </Infragistics:Series.DataPoints>
                   </Infragistics:Series>
                   <Infragistics:Series ChartType="Area" Fill="Red" Name="m_oButtPressureLowerOutOfRangeSeries" StrokeThickness="0">
                       <Infragistics:Series.DataPoints>
                           <Infragistics:DataPoint Label="0" Value="5" />
                           <Infragistics:DataPoint Label="1" Value="5" />
                           <Infragistics:DataPoint Label="2" Value="5" />
                           <Infragistics:DataPoint Label="3" Value="5" />
                           <Infragistics:DataPoint Label="4" Value="5" />
                           <Infragistics:DataPoint Label="5" Value="5" />
                           <Infragistics:DataPoint Label="6" Value="5" />
                           <Infragistics:DataPoint Label="7" Value="5" />
                           <Infragistics:DataPoint Label="8" Value="5" />
                           <Infragistics:DataPoint Label="9" Value="5" />
                       </Infragistics:Series.DataPoints>
                   </Infragistics:Series>
                   <Infragistics:Series ChartType="Line" Fill="Black" Name="m_oButtPressureDataSeries">
                       <Infragistics:Series.DataPoints>
                           <Infragistics:DataPoint Label="0" Value="1" />
                           <Infragistics:DataPoint Label="1" Value="15" />
                           <Infragistics:DataPoint Label="2" Value="18" />
                           <Infragistics:DataPoint Label="3" Value="8" />
                           <Infragistics:DataPoint Label="4" Value="5" />
                           <Infragistics:DataPoint Label="5" Value="4" />
                           <Infragistics:DataPoint Label="6" Value="8" />
                           <Infragistics:DataPoint Label="7" Value="12" />
                           <Infragistics:DataPoint Label="8" Value="13" />
                           <Infragistics:DataPoint Label="9" Value="15" />
                       </Infragistics:Series.DataPoints>
                   </Infragistics:Series>
               </Infragistics:XamChart.Series>

           </Infragistics:XamChart>
       </Viewbox>

</Window>

When the graph is large, the lines are not visible. When you drag the corner of the window and resize it, you can begin to see vertical lines at the bottom of the graph when then graph becomes small.

I also tried removing the viewbox around the chart in my current code after reading your comment. The graph does resize fine without the viewbox around it and the vertical lines are not visible when I resize it. However, without the viewbox, the stroke thickness of the data series (line fill) does not resize with the control.
Cancel
Reply

Cancel