WPF XAMDatachart Custom Tick Mark Values for XAxis/YAxis Columns with different color for different columns

VenkataRamana Chippa posted 23 days ago

Hi Team,
I need help with the below scenario, I can create one sample if you want me to.

I have one ObservableCollection in my view model like below
[

{ Layername = "LSS", Value = 7542, Depth = 200, Porosity = 0.3, Sw = 0.5, Temperature = 150}

{ Layername = "LSS base", Value = 7742, Depth = 144, Porosity = 0.25, Sw = 0.15, Temperature = 160}

{ Layername = "Dean", Value = 7886, Depth = 115, Porosity = 0.5, Sw = 0.25, Temperature = 150 }

{ Layername = "WA", Value = 8001, Depth = 64, Porosity = 0.45, Sw = 0.15, Temperature = 160 }

{ Layername = "WA Midlle", Value = 8065, Depth = 65, Porosity = 0.3, Sw = 0.45, Temperature = 150 }

{ Layername = "WA Lower", Value = 8130, Depth = 105, Porosity = 0.2, Sw = 0.5, Temperature = 160 }

];

I used XamDataChart to plot the Porosity, Sw and Temperature as shown in the Image and I have used the code below

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="50"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="280"/>
        <ColumnDefinition Width="280"/>
        <ColumnDefinition Width="280"/>
        <ColumnDefinition Width="280"/>
        <!--<ColumnDefinition MinWidth="280"/>
            <ColumnDefinition MinWidth="280"/>
            <ColumnDefinition MinWidth="280"/>
            <ColumnDefinition MinWidth="280"/>-->
    </Grid.ColumnDefinitions>
    <Label Content="Porosity" Grid.Row="0" Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Bottom" FontWeight="Bold"/>
    <ig:XamDataChart x:Name="porosityDataChart" Grid.Row="1">
        <ig:XamDataChart.LayoutTransform>
            <RotateTransform Angle="90"/>
        </ig:XamDataChart.LayoutTransform>
        <ig:XamDataChart.Axes>
            <ig:CategoryXAxis x:Name="poroXAxis" ItemsSource="{Binding CurrentProject.UTMFLayers}"
                              Label="{}{Name} ({PositiveTopDepthDisplayValue})" Title="Layers (Depth)"
                              MajorStroke="LightGray" MajorStrokeThickness="1" TickLength="0">
                <ig:CategoryXAxis.TitleSettings>
                    <ig:TitleSettings FontWeight="Bold" FontSize="12"></ig:TitleSettings>
                </ig:CategoryXAxis.TitleSettings>
                <ig:CategoryXAxis.LabelSettings>
                    <ig:AxisLabelSettings Location="OutsideBottom" Foreground="Gray"/>
                </ig:CategoryXAxis.LabelSettings>

            </ig:CategoryXAxis>
            <ig:NumericYAxis x:Name="poroYAxis" MinimumValue="0" MaximumValue="1" Interval="0.2"/>
        </ig:XamDataChart.Axes>
        <ig:XamDataChart.Series>
            <ig:StepLineSeries ItemsSource="{Binding CurrentProject.UTMFLayers}" ValueMemberPath="PorosityValue" Title="Porosity"
                               XAxis="{Binding ElementName=poroXAxis}" YAxis="{Binding ElementName=poroYAxis}" Thickness="1" MarkerType="None"/>
        </ig:XamDataChart.Series>
    </ig:XamDataChart>
    
    <Label Content="Water Saturation" Grid.Row="0" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Bottom" FontWeight="Bold"/>
    <ig:XamDataChart x:Name="swDataChart" Grid.Row="1" Grid.Column="1" Margin="0,2">
        <ig:XamDataChart.LayoutTransform>
            <RotateTransform Angle="90"/>
        </ig:XamDataChart.LayoutTransform>
        <ig:XamDataChart.Axes>
            <ig:CategoryXAxis x:Name="swXAxis" ItemsSource="{Binding CurrentProject.UTMFLayers}" MajorStroke="LightGray" MajorStrokeThickness="1" TickLength="0">
                <ig:CategoryXAxis.LabelSettings>
                    <ig:AxisLabelSettings Visibility="Collapsed"/>
                </ig:CategoryXAxis.LabelSettings>
            </ig:CategoryXAxis>
            <ig:NumericYAxis x:Name="swYAxis" MinimumValue="0" MaximumValue="1" Interval="0.2"/>
        </ig:XamDataChart.Axes>
        <ig:XamDataChart.Series>
            <ig:StepLineSeries ItemsSource="{Binding CurrentProject.UTMFLayers}" ValueMemberPath="WaterSaturationValue" Title="Porosity"
                               XAxis="{Binding ElementName=swXAxis}" YAxis="{Binding ElementName=swYAxis}" Thickness="1" MarkerType="None"/>
        </ig:XamDataChart.Series>
    </ig:XamDataChart>

    <Label Content="Temperature" Grid.Row="0" Grid.Column="2" HorizontalAlignment="Center" VerticalAlignment="Bottom" FontWeight="Bold"/>
    <ig:XamDataChart x:Name="temperatureDataChart" Grid.Row="1" Grid.Column="2">
        <ig:XamDataChart.LayoutTransform>
            <RotateTransform Angle="90"/>
        </ig:XamDataChart.LayoutTransform>
        <ig:XamDataChart.Axes>
            <ig:CategoryXAxis x:Name="temperatureXAxis" ItemsSource="{Binding CurrentProject.UTMFLayers}" 
                      MajorStroke="LightGray" MajorStrokeThickness="1" TickLength="0">
                <ig:CategoryXAxis.LabelSettings>
                    <ig:AxisLabelSettings Visibility="Collapsed"/>
                </ig:CategoryXAxis.LabelSettings>

            </ig:CategoryXAxis>
            <ig:NumericYAxis x:Name="temperatureYAxis" MinimumValue="100" MaximumValue="300" />
        </ig:XamDataChart.Axes>
        <ig:XamDataChart.Series>
            <ig:StepLineSeries ItemsSource="{Binding CurrentProject.UTMFLayerTempData}" Title="Temperature"
                       XAxis="{Binding ElementName=temperatureXAxis}" YAxis="{Binding ElementName=temperatureYAxis}" Thickness="1" MarkerType="Diamond"/>
        </ig:XamDataChart.Series>
    </ig:XamDataChart>
</Grid>

Now I want to Align the TickMarks(Layers) according to their Depth Values, and Each Layer with Different Color as shown in Img_2
Can this be achievable..?
I followed the xamdatachart forum and tried to use CustomTickMarvalues.cs and ChartBehaviors.cs. But somehow the binding data is not working from My ViewModel and have difficulty in setting background color for each layer.
Any help would be greatly appreciated, I can create one sample app if you need..

Thanks,
Venkat

Top Replies

2520

Offline Bozhidara Pachilova posted 19 days ago in reply to VenkataRamana Chippa +1 verified
Hi Venkat, After further investigation I believe your requirement can still be achieved with further modifications of the previously suggested solution...view reply »

Parents

2520

Offline Bozhidara Pachilova posted 22 days ago

Hi Venkat,

Thank you for sharing sample code!

I am not aware of which other forum threads you have looked into and which specific ChartBehavior you are referring to, nevertheless, I found this forum thread, where the same topic is initially discussed and Graham Murray has provided code to implement this requirement on application level. Please, note that currently this would be the only approach to achieve this, as there is no built-in API for this in the XamDataChart.

What is built-into the chart instead is the Axis Strip property, which allows to define a single color that will be applied to alternating strips. If this suits your requirement, I can suggest leveraging it as well.

So, for your convenience I created a sample app with the chart and data code you have provided along with the custom dependency properties defined by Graham in the above referenced thread. With it, one could achieve a similar esult as in your picture, for example:

Please, note that those are three spearate charts that you have defined, so a uniform stripe above all three would not be achievable even with a custom workaround solution like this. Also please, note, that even in your screenshot, the vertical height of the colored strips does not represent the "Depth" value, really. It rather seems to divide the strip area in two. Please, refer to the sample's MainWindow.xaml for how this can be achieved with the custom strips. Keep in mind that any other customizations have to be implemented on application level.

Please, find attached the sample below and let me know if it helps.

Best regards,
Bozhidara Pachilova
Associate Software Developer

2352.XDCSample4.zip
Cancel
Reply

Cancel
15

Offline VenkataRamana Chippa posted 22 days ago in reply to Bozhidara Pachilova

Hi Pachilova,
That was really quick answer I got. I must appreciate your work for creating the sample for me. Thank you..!

This looks close to what I expected, just need a little improvement for this.
If you see the Data. The value of first Layer(LSS) is 7542, and the value of second Layer(LSS base) is 7742. The difference between these two layers is 200, that we call Depth of Layer 1(i.e LSS). Similarly with subsequent layers

So, here in the example you provided the layers LSS base and Dean have two different color strips that is good, But seems both represents same layer(i.e LSS base) but the third layers/strip should belongs to Layer(Dean).

I'll check the code that you provided in the sample, I'll get back here If I can fix that, Can you please help me if you can with this meantime.

Thank you so much for the quick help.

-Venkat
Cancel
Reply

Cancel

Reply

2520

Offline Bozhidara Pachilova posted 15 days ago in reply to VenkataRamana Chippa

Hi Venkat,

Thank you for following up.

Sure, this can be refactored and there can be different approaches depending on how you would like the classes to be structured. A straightforward one I can suggest is to alter the CustomTickMarkValues class constructor to accept a collection of the LayerData (that would represent the VerticalDepthValues):

 public CustomTickmarkValues(ObservableCollection<LayerData> verticalDepthValues)
 {
     // define custom tickmark values
     this.Tickmarks = new DoubleCollection(verticalDepthValues.Select(i => (double)i.Depth).ToArray<double>());
 }

Then a property for the tick mark values can be added to the ViewModel class and the CustomTickMarkValues class could be initialized with the needed data and assigned to it. What is left is to bind the custom tick marks to the numeric Y axis’ TickMarks property:

 private CustomTickmarkValues _ctv;

 public CustomTickmarkValues CustomTickMarkVals
 {

     get
     {
         return _ctv;
     }
     set
     {
         _ctv = value;
         NotifyPropertyChanged();
     }
 }

 public ViewModel()
 {
//  ...
     this.CustomTickMarkVals = new CustomTickmarkValues(this.VerticalDepthValues);
 }

    <ig:NumericYAxis x:Name="YAxisPorosity"
                     IsInverted="True"
                     MaximumValue="{Binding MaxYValue}"
                     TickmarkValues="{Binding CustomTickMarkVals}"></ig:NumericYAxis>

I am attaching the modified sample for reference.

Best regards,

Bozhidara Pachilova

2402.XDCSample4-latest.zip

Children

15

Offline VenkataRamana Chippa posted 15 days ago in reply to Bozhidara Pachilova

Thank you so much..! Pachilova..
You have been very helpful in implementing this.
I have used it in my application, and it worked well for me.
Below is the Plotting done in my application.

StepLineSeries is supporting only one MemberPath(either X/Y) so I had to go with ScatterLineSeries for plotting the points(it supporting both XMemberPath and YMemberPath). It would have been better if StepLineSeries also supports both X and Y MemberPaths.
Anyways, thank you so much for your help, I must appreciate that..

Thanks,

Venkat
Cancel
Reply

Cancel