This is a migrated thread and some comments may be shown as answers.

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

5 Answers 213 Views
ChartView
This is a migrated thread and some comments may be shown as answers.
T
Top achievements
Rank 1
T asked on 12 Jul 2017, 07:59 AM

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.

 

5 Answers, 1 is accepted

Sort by
0
Martin Ivanov
Telerik team
answered on 14 Jul 2017, 12:19 PM
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.
0
T
Top achievements
Rank 1
answered on 17 Jul 2017, 10:34 AM

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.

0
Martin Ivanov
Telerik team
answered on 20 Jul 2017, 09:15 AM
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.
0
T
Top achievements
Rank 1
answered on 20 Jul 2017, 12:20 PM

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?

 

0
Martin Ivanov
Telerik team
answered on 25 Jul 2017, 10:00 AM
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.
Tags
ChartView
Asked by
T
Top achievements
Rank 1
Answers by
Martin Ivanov
Telerik team
T
Top achievements
Rank 1
Share this question
or