Hi Team,

I have got a strange requirement from the end user to customize graph in a double plotted way of Column Series.

Where we need to display one report over other where the same report plots two values after user changes.

I have attached the screen shot of the requirement that i am looking for.

Existing functionality:Currently we have reports displayed with their data densities.

New functionality :Double plotted graph with dashed lines(2nd reading) which denotes the increase/decrease on data density values after end user changes.

Any help from your end is highly appreciated.

Existing Xaml Code:

<Grid>
<Grid.RowDefinitions>

<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" >
<!--<Border Grid.Row="0" Height="{Binding ElementName=gdReportGraph,Path=Height}"
BorderBrush="Black"
BorderThickness="0.5"
HorizontalAlignment="Stretch"
Margin="20,20,20,20"
VerticalAlignment="Stretch" Visibility="Hidden" ></Border>-->
<Grid Name="gdReportGraph" >

<Grid.Resources>
<ContentControl x:Key="theTooltip" Background="Black">
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal">
<TextBlock Text="Service: " FontWeight="Bold"/>
<TextBlock Text="{Binding Item.ServiceName}"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Report: " FontWeight="Bold"/>
<TextBlock Text="{Binding Item.ReportName}"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Value: " FontWeight="Bold"/>
<TextBlock Text="{Binding Item.DataDensityValue}"/>
</StackPanel>
</StackPanel>
</ContentControl>

</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>

</Grid.RowDefinitions>

<ig:XamDataChart x:Name="chart" Height="450" Margin="2,2,2,50" Grid.Row="1" >
<ig:XamDataChart.Axes>
<ig:CategoryXAxis x:Name="xAxis" ItemsSource="{Binding DataContext, RelativeSource={RelativeSource Self}}" Title="Reports" Label="{}{ReportName}" >
<ig:CategoryXAxis.LabelSettings >
<ig:AxisLabelSettings Angle="-60"/>
</ig:CategoryXAxis.LabelSettings>
</ig:CategoryXAxis>
<ig:NumericYAxis x:Name="yAxis" MinimumValue="0" MajorStrokeThickness="0" MinorStrokeThickness="0" Title="Data Density (pts/ft)" >
<ig:NumericYAxis.TitleSettings >
<ig:TitleSettings Angle="-90" Position="Auto" />
</ig:NumericYAxis.TitleSettings>
</ig:NumericYAxis>
</ig:XamDataChart.Axes>
<ig:XamDataChart.Series>

<ig:ColumnSeries ShowDefaultTooltip="True" HorizontalAlignment="Stretch" XAxis="{Binding ElementName=xAxis}" YAxis="{Binding ElementName=yAxis}" ItemsSource="{Binding RelativeSource={RelativeSource Self},Path=DataContext}"
ValueMemberPath="DataDensityValue" Thickness='0' MinWidth="200" Outline='Black' LegendItemVisibility="Visible" IsHighlightingEnabled="True" IsTransitionInEnabled="True" ToolTip="{StaticResource theTooltip}" IsCustomCategoryStyleAllowed="True" AssigningCategoryStyle="ColumnSeries_AssigningCategoryStyle" >
<!--<ig:ColumnSeries.MarkerTemplate>
<DataTemplate>
<Grid Width="80" Height="70" Margin="0,0,0,10" >
<Border CornerRadius="5" Background="Transparent"
BorderThickness="0.5">
<TextBlock Margin="2"
Text="{Binding Item.DataDensityValue, StringFormat='+ {0}' }"
Foreground="Black"
FontSize="16"
HorizontalAlignment="Center" />
</Border>
</Grid>
</DataTemplate>
</ig:ColumnSeries.MarkerTemplate>-->
</ig:ColumnSeries>

</ig:XamDataChart.Series>
</ig:XamDataChart>
<!--<ig:Legend x:Name="XmLegend" Grid.Row="0" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="10"/>
<Button x:Name="addColumnBtn" Content="Add Column/Series" Click="addColumnBtn_Click" Grid.Row="1"/>-->
</Grid>

Regards,

Sridhar.