Stack Chart, how to have dynamic stack areas in a chart

6 posts, 0 answers
  1. T
    T avatar
    3 posts
    Member since:
    Mar 2014

    Posted 12 Jul Link to this post

    I need to have a stack chart with dynamic stacks based on the data provided. Please check the attached image for more details. I've found only to have fixed number of stacks in the following examples/forum posts

    http://docs.telerik.com/devtools/wpf/controls/radchart/how-to/howto-select-whole-stack-of-bars-using-the-interactivity-effects

    How to do this.

     

  2. Martin Ivanov
    Admin
    Martin Ivanov avatar
    1404 posts

    Posted 14 Jul Link to this post

    Hello,

    Please keep in mind that the link in your last reply describes an approach with RadChart. This is the old charting component that has some issues and limitations. I would recommend you to use the new RadChartView which brings better implementation and improved performance. Read more about this in the RadChart vs. RadChartView help article.

    With RadChartView you can achieve your requirement via the SeriesProvider API and the CombineMode property of the series. In this case, each chart series will be a stack on the bar. You can use the SeriesProvider to provide a dynamic number of series (stacks in this case). And set the CombineMode property of each series to Stack so that they will be stacked.

    You can see this demonstrated in several examples from the UI for WPF Demos app. For example, you can check the Exporting, Pie Smart Labels and Bar examples.

    Regards,
    Martin Ivanov
    Progress Telerik
    Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
  3. T
    T avatar
    3 posts
    Member since:
    Mar 2014

    Posted 17 Jul in reply to Martin Ivanov Link to this post

    Hi,

    Thanks for the reply. I was manage to do as you guided. One question, can I show custom labels as shown in the previous image in each stack bar. And also change the label view mode like from horizontal to vertical letters. 

    I'll try to change the implementation to RadChartView once the required functionality is implemented.

    Thanks.

  4. Martin Ivanov
    Admin
    Martin Ivanov avatar
    1404 posts

    Posted 20 Jul Link to this post

    Hello,

    To display a label for each bar in the stack you can set the ShowLabels property of each series to True. To customize the labels you can add a Label Definition. For example, if you want to rotate the label and display it vertically you can define a DataTemplate with a TextBlock which has applied RotateTransform. And set the DataTemplate on the Template property of the label definition. Here is an example in code:
    <telerik:BarSeries.LabelDefinitions>
        <telerik:ChartSeriesLabelDefinition>
            <telerik:ChartSeriesLabelDefinition.Template>
                <DataTemplate>
                    <TextBlock Text="Some label here">
                        <TextBlock.LayoutTransform>
                            <RotateTransform Angle="90" />
                        </TextBlock.LayoutTransform>
                    </TextBlock>
                </DataTemplate>
            </telerik:ChartSeriesLabelDefinition.Template>
        </telerik:ChartSeriesLabelDefinition>
    </telerik:BarSeries.LabelDefinitions>

    Regards,
    Martin Ivanov
    Progress Telerik
    Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
  5. T
    T avatar
    3 posts
    Member since:
    Mar 2014

    Posted 20 Jul in reply to Martin Ivanov Link to this post

    HI,

    Thanks for the reply. But the issue is the each bar in the stack is a different series. For an example in the attached image Employee 1, Employee 4 and Employee 6 are different series. Even though they are represented in same color (red). They are not related. So I can not keep the text in a simple variable in the binding object. Then it should be a complex object.  Check the attached image if the sample data set. Machine 1 has 3 employees, with each employee is having SMV value and CycleTime value. So how to set text for complex object?

     

    And also does charts support complex objects?

     

  6. Martin Ivanov
    Admin
    Martin Ivanov avatar
    1404 posts

    Posted 25 Jul Link to this post

    Hello,

    I am not sure that I understand your concern about the labels. You can define an additional field that holds the label value for each data point (bar). Then bind this field to show the label. Can you please take a look at the attached project and let me know if this is what you are looking for?

    If this is not what you are looking for, can you send me some runnable code that shows how you set up your models, populate them with data and display them in the chart. This will give me better idea of how the chart is set up.

    Regards,
    Martin Ivanov
    Progress Telerik
    Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
Back to Top