Forums Retired Products and Controls
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Mihir
95
Group axis in a single chart
posted

I am having some trouble here configure the look of a chart.

I need to make this

 

 

but this is what I have

I've been reading over documentation, but I it is evading me on this configuration and I know it is just something simple I'm missing.

Parents
  • 30692
    Verified Answer
    Offline posted

    Here is one way how you would approach the top screenshot:
    The xaml:

    <UserControl.Resources>
        <local:BaseData x:Key="base" />
        <local:TwoXScenarioData x:Key="twoX" />
        <local:BEScenarioData x:Key="be" />
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <igChart:XamDataChart x:Name="theChart" Legend="{Binding ElementName=legend}">
            <igChart:XamDataChart.Axes>
                <igChart:NumericYAxis x:Name="yAxis" />
                <igChart:CategoryXAxis 
                    x:Name="xAxis"
                    ItemsSource="{StaticResource base}"
                    Label="{}{Label}"/>
            </igChart:XamDataChart.Axes>
            <igChart:XamDataChart.Series>
                <igChart:ColumnSeries
                    x:Name="base"
                    ItemsSource="{StaticResource base}"
                    XAxis="{Binding ElementName=xAxis}"
                    YAxis="{Binding ElementName=yAxis}"
                    ValueMemberPath="Value"
                    Title="Base"/>
                <igChart:ColumnSeries
                    x:Name="twoX"
                    ItemsSource="{StaticResource twoX}"
                    XAxis="{Binding ElementName=xAxis}"
                    YAxis="{Binding ElementName=yAxis}"
                    ValueMemberPath="Value"
                    Title="2x Scenario"/>
                <igChart:ColumnSeries
                    x:Name="be"
                    ItemsSource="{StaticResource be}"
                    XAxis="{Binding ElementName=xAxis}"
                    YAxis="{Binding ElementName=yAxis}"
                    ValueMemberPath="Value"
                    Title="B/E Scenario"/>
            </igChart:XamDataChart.Series>
        </igChart:XamDataChart>
        
        <igChart:Legend x:Name="legend" Grid.Column="1" VerticalAlignment="Top" />
    </Grid>

    And the code behind:

     public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
        }
    }

    public class BaseData
        : ObservableCollection<DataItem>
    {
        public BaseData()
        {
            Add(new DataItem()
            {
                Label = "Volume",
                Value = 1.7
            });
            Add(new DataItem()
            {
                Label = "Sales",
                Value = 5
            });
            Add(new DataItem()
            {
                Label = "Profit",
                Value = .3
            });
        }
    }

    public class TwoXScenarioData
        : ObservableCollection<DataItem>
    {
        public TwoXScenarioData()
        {
            Add(new DataItem()
            {
                Label = "Volume",
                Value = 3
            });
            Add(new DataItem()
            {
                Label = "Sales",
                Value = 10
            });
            Add(new DataItem()
            {
                Label = "Profit",
                Value = 1.2
            });
        }
    }

    public class BEScenarioData
        : ObservableCollection<DataItem>
    {
        public BEScenarioData()
        {
            Add(new DataItem()
            {
                Label = "Volume",
                Value = 3.2
            });
            Add(new DataItem()
            {
                Label = "Sales",
                Value = 10.2
            });
            Add(new DataItem()
            {
                Label = "Profit",
                Value = 1.4
            });
        }
    }

    public class DataItem
    {
        public string Label { get; set; }
        public double Value { get; set; }
    }

    Hope this helps!
    -Graham

Reply Children