[Solved] No scrolling when grouping is used

[Adam]

Hello,

I have a problem with scrolling in my script. If clicked i must wait minimum 10s for response and than nothing is done. When i didn't use grouping, scrolling was ok, but i need it to show data categorised by date and grouped by name.

I tried setting AutoRange=False and Min/MaxValue based on Date.ToOADate(), unfortunately script is freezing my IE.

MainPage Class:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

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

MainPage XAML:

<UserControl x:Class="NewCharting.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:control="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Charting"
    xmlns:chart="clr-namespace:Telerik.Windows.Controls.Charting;assembly=Telerik.Windows.Controls.Charting"
    xmlns:app="clr-namespace:NewCharting"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="1000">
    <UserControl.DataContext>
        <app:PersonalIncomeViewModel />
    </UserControl.DataContext>

    <Grid x:Name="LayoutRoot" Background="White">
        <control:RadChart x:Name="RadChart1" ItemsSource="{Binding DataView}">
            <control:RadChart.SeriesMappings>
                <chart:SeriesMapping>
                    <chart:SeriesMapping.SeriesDefinition>
                        <chart:StackedBarSeriesDefinition ShowItemLabels="False" />
                    </chart:SeriesMapping.SeriesDefinition>
                    <chart:SeriesMapping.GroupingSettings>
                        <chart:GroupingSettings ShouldCreateSeriesForLastGroup="True">
                            <chart:ChartGroupDescriptor Member="Date" />
                            <chart:ChartGroupDescriptor Member="Name" />
                        </chart:GroupingSettings>
                    </chart:SeriesMapping.GroupingSettings>
                    <chart:SeriesMapping.ItemMappings>
                        <chart:ItemMapping DataPointMember="YValue" FieldName="Income" AggregateFunction="Sum" />
                        <chart:ItemMapping DataPointMember="XCategory" FieldName="Date" />
                    </chart:SeriesMapping.ItemMappings>
                    <chart:SeriesMapping.SortDescriptors>
                        <chart:ChartSortDescriptor Member="Date" SortDirection="Ascending" />
                    </chart:SeriesMapping.SortDescriptors>
                </chart:SeriesMapping>
            </control:RadChart.SeriesMappings>
            <control:RadChart.DefaultView>
                <chart:ChartDefaultView>
                    <!--ChartArea-->
                    <chart:ChartDefaultView.ChartArea>
                        <chart:ChartArea LegendName="chartLegend" EnableAnimations="False">
                            <chart:ChartArea.AxisX>
                                <chart:AxisX IsDateTime="True" DefaultLabelFormat="MMM-y" MinorTicksVisibility="Visible" />
                                <!-- AutoRange="False" MinValue="{Binding DataDateMinOA}" MaxValue="{Binding DataDateMaxOA}" -->
                            </chart:ChartArea.AxisX>
                            <chart:ChartArea.AxisY>
                                <chart:AxisY DefaultLabelFormat="#VAL{C3}" MajorGridLinesVisibility="Visible" MinorTicksVisibility="Collapsed" StripLinesVisibility="Collapsed" />
                            </chart:ChartArea.AxisY>
                            <chart:ChartArea.ZoomScrollSettingsX>
                                <chart:ZoomScrollSettings ScrollMode="ScrollOnly" RangeEnd="0.5" />
                            </chart:ChartArea.ZoomScrollSettingsX>
                        </chart:ChartArea>
                    </chart:ChartDefaultView.ChartArea>
                    <!--ChartLegend-->
                    <!--
                    <chart:ChartDefaultView.ChartLegend>
                        <chart:ChartLegend x:Name="chartLegend" ItemsSource="{Binding DataPersonList}" />
                    </chart:ChartDefaultView.ChartLegend>
                    -->
                    <!--ChartTitle-->
                </chart:ChartDefaultView>
            </control:RadChart.DefaultView>
        </control:RadChart>
    </Grid>
</UserControl>

ViewModel Class:

using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Collections.Generic;

using Telerik.Windows.Controls;
using Telerik.Windows.Controls.Charting;
using Telerik.Windows.Data;
using System.Linq;

namespace NewCharting
{
    public class PersonalIncomeViewModel
    {
        public List<PersonalIncome> Data { get; set; }
        public List<PersonalIncome> DataView { get; set; }

        public DateTime DataDateMin
        {
            get { return new DateTime(Data.Min(d => d.Date.Year), 1, 1); }
        }

        public DateTime DataDateMax
        {
            get { return new DateTime(Data.Max(d => d.Date.Year) + 1, 1, 1).AddDays(-1); }
        }

//        public Double DataDateMinOA
//        {
//            get { return DataDateMin.ToOADate(); }
//        }

//        public Double DataDateMaxOA
//        {
//            get { return DataDateMax.ToOADate(); }
//        }

//        public String ChartScrollRangeMax
//        {
//            get { return (1 / (DataDateMax.Year - DataDateMin.Year + 1)).ToString() ; }
//        }

        public List<String> DataPersonList
        {
            get
            {
                return (from p in Data
                        group p.Name by p.Name into gr
                        select gr.Key.ToString()).ToList();
            }
        }

        public PersonalIncomeViewModel()
        {
            Data = GenerateData();
            Data = FillDataFullRange(Data);

            DataView = Data;
            DataView = (from d in Data
                        group d by new { year = d.Date.Year, month = d.Date.Month, name = d.Name } into gr
                        select new PersonalIncome(){
                            Name = gr.Key.name,
                            Income = gr.Sum(o => o.Income),
                            Date = new DateTime(gr.Key.year, gr.Key.month, 1)
                        }).ToList();
        }

        public List<PersonalIncome> GenerateData()
        {
            return new List<PersonalIncome>
            {
                new PersonalIncome{ Name = "Dr. Brown",Date = DateTime.Now.AddMonths(5),Income = 12 },
                new PersonalIncome{ Name = "Dr. Brown",Date = DateTime.Now.AddMonths(12),Income = 12 },
                new PersonalIncome{ Name = "Dr. Brown",Date = DateTime.Now.AddMonths(17),Income = 12 },
                new PersonalIncome{ Name = "Dr. Brown",Date = DateTime.Now.AddMonths(5).AddDays(2),Income = 12 },
                new PersonalIncome{ Name = "Dr. Brown",Date = DateTime.Now.AddMonths(4),Income = 15 },
                new PersonalIncome{ Name = "Dr. Brown",Date = DateTime.Now.AddMonths(3),Income = 13 },

                new PersonalIncome{ Name = "Dr. Down",Date = DateTime.Now.AddMonths(2),Income = 14 },
                new PersonalIncome{ Name = "Dr. Down",Date = DateTime.Now.AddMonths(13),Income = 0 },
                new PersonalIncome{ Name = "Dr. Down",Date = DateTime.Now.AddMonths(4),Income = 20 },
                new PersonalIncome{ Name = "Dr. Down",Date = DateTime.Now.AddMonths(5),Income = 22 },

                new PersonalIncome{ Name = "Dr. Smith",Date = DateTime.Now.AddMonths(6),Income = 10 },
                new PersonalIncome{ Name = "Dr. Smith",Date = DateTime.Now.AddMonths(4),Income = 17 },
                new PersonalIncome{ Name = "Dr. Smith",Date = DateTime.Now.AddMonths(2),Income = 5 }
            };
        }

        private List<PersonalIncome> FillDataFullRange(List<PersonalIncome> data)
        {
            // fix for custom range in chart
            foreach (var person in DataPersonList)
            {
                for (var loopYr = DataDateMin.Year; loopYr <= DataDateMax.Year; loopYr++)
                    for (var loopMth = 1; loopMth <= 12; loopMth++)
                        data.Add(new PersonalIncome { Name = person, Date = new DateTime(loopYr, loopMth, 1), Income = 0 });
            }

            return data;
        }
    }

    public class PersonalIncome
    {
        public String Name { get; set; }
        public Int32 Income { get; set; }
        public DateTime Date { get; set; }

//        public Double DateOA { get { return Date.ToOADate(); } }
    }
}

I appriciate your help.
Adam Tarkowski

[Ves]

Hello Adam,

This scenario (grouping and zoom/scroll) is not currently supported in RadChart. Please, find attached a small example, showing how to place the ChartArea in a ScrollViewer in order to achieve this behavior.

Best regards,
Ves
the Telerik team

[Adam]

Thank you for your help.

This solution is good but not perfect due to Y axis which will flow with whole area and disapear while scrolling to the right. Isn't there a way to move Y Axis outside ScrollViewer? Or maybe there is a way to build custom axis separated from ChartArea? If it is possible to set range for Y values (like for X), then i can calculate max value, set it for chart area and make my own axis, but i don't know how to build separated axis without chart area.

Or maybe... add another ChartArea on the left with only Y axis, and hide Y axis for current (scrolled) area. But in this scenerio i don't want to add another SeriesMapping to new ChartArea. My seriesMapping refers to chart area by ChartAreaName property, so i can't map data series to two chart areas. For this scenerio question is: is it possible to reuse SeriesMapping for two chart areas?

I hope i explained what i want to achieve.
Most important is to use MVVM pattern :).

Best regards
Adam :)

[Ves]

Hi Adam,

I have attached an example, which shows how to achieve X axis scrolling, while keeping the Y axis visible and without using ZoomScrollSettings.  I hope this would be applicable.

Best regards,
Ves
the Telerik team

[Adam]

Thank you very very much for your help.

That is exactly what i need.

[Cameron]

Hi Ves,

I also have an additional Y axis. Can I do the same for the additional Y axis and have it always be visible when I pan? In other words, have all Y axes always visible as I scroll back and forth?

Thanks,

Cameron

[Ves]

Hi Cameron,

Yes, this is possible. Actually, the above example does not need any specific updates as long as the ChartArea template is concerned. You will only need to configure the chart with the additional Y axes. You can find this explained in details in the corresponding help topic. You can also check this online example.

Best regards,
Ves
the Telerik team

[Cameron]

Hi Ves,

I actually had done that. I had created additional Y axes and added to "myChartArea". Trouble is that all the additional Y axes are not visible. I have to scroll to the right to see them. I would like for additional Y axes to "always" be visible without having to scroll. Kind of like having all Y axes displayed on the left side of the chart so that they're always visible whether I scroll or not.

Thanks,

Cameron

[Cameron]

Hi Ves,

I kind of figured out how to place all axes (the main Y axis and all additonal Y axes) on the left side of the chart area. That way as I scroll back and forth all Y axes are visible. See the xaml below. My original question was how to make all additonal Y axes on the "right" side of the chart area always visible no matter how far one scrolls to the right or the left.

Thanks,

Cameron

 

 

 

<UserControl.Resources>

 

 

 

 

<Style TargetType="telerikCharting:ChartArea">

 

 

 

 

<Setter Property="Template2D">

 

 

 

 

<Setter.Value>

 

 

 

 

<ControlTemplate TargetType="telerikCharting:ChartArea">

 

 

 

 

<Border Padding="{TemplateBinding Padding}"

 

 

 

Margin="{TemplateBinding Margin}"

 

 

 

Background="{TemplateBinding Background}">

 

 

 

 

<Grid>

 

 

 

 

<Grid.RowDefinitions>

 

 

 

 

<RowDefinition Height="auto" />

 

 

 

 

<RowDefinition Height="*" />

 

 

 

 

<RowDefinition Height="auto" />

 

 

 

 

</Grid.RowDefinitions>

 

 

 

 

<Grid.ColumnDefinitions>

 

 

 

 

<ColumnDefinition Width="auto" />

 

 

 

 

<ColumnDefinition Width="auto" />

 

 

 

 

<ColumnDefinition Width="*" />

 

 

 

 

</Grid.ColumnDefinitions>

 

 

 

 

<telerikCharting:AdditionalAxes2DContainer x:Name="PART_AdditionalHorizontalAxesPanel" StackOrientation="Vertical" Grid.Row="0" Grid.Column="1" />

 

 

 

 

<telerikCharting:AdditionalAxes2DContainer x:Name="PART_AdditionalVerticalAxesPanel" StackOrientation="Horizontal" Grid.Row="1" Grid.Column="1" Height="{TemplateBinding Height}" />

 

 

 

 

 

<telerikCharting:AxisY2D x:Name="PART_AxisY" Grid.Row="1" Grid.Column="0" Margin="0,0,0,52"

 

 

 

Style="{TemplateBinding AxisYStyle}" VerticalContentAlignment="Top" />

 

 

 

 

 

<ScrollViewer Grid.Row="1" Grid.Column="2" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Hidden" Padding="0,0,0,0" >

 

 

 

 

<Grid Width="3000">

 

 

 

 

<Grid.RowDefinitions>

 

 

 

 

<RowDefinition Height="*"></RowDefinition>

 

 

 

 

<RowDefinition Height="85"></RowDefinition>

 

 

 

 

</Grid.RowDefinitions>

 

 

 

 

<telerikCharting:ClipPanel x:Name="PART_PlotAreaPanel" Style="{TemplateBinding PlotAreaStyle}" HorizontalAlignment="Stretch" >

 

 

 

 

<telerikCharting:HorizontalStripLines2D x:Name="PART_HorizontalStripLines" />

 

 

 

 

<telerikCharting:VerticalStripLines2D x:Name="PART_VerticalStripLines" />

 

 

 

 

<telerikCharting:AdditionalAxes2DContainer x:Name="PART_AdditionalVerticalAxesPanel2" StackOrientation="Horizontal" Height="{TemplateBinding Height}" />

 

 

 

 

<telerikCharting:AnnotationLayer x:Name="PART_AnnotationLayer" ItemsSource="{TemplateBinding Annotations}" />

 

 

 

 

<telerikCharting:VerticalMinorGridLines2D x:Name="PART_VerticalMinorGridLines" />

 

 

 

 

<telerikCharting:HorizontalMinorGridLines2D x:Name="PART_HorizontalMinorGridLines" />

 

 

 

 

<telerikCharting:HorizontalGridLines2D x:Name="PART_HorizontalGridLines" />

 

 

 

 

<telerikCharting:VerticalGridLines2D x:Name="PART_VerticalGridLines" />

 

 

 

 

<telerikCharting:AdditionalPlotAreaAxes2DContainer x:Name="PART_AdditionalPlotAreaHorizontalAxesPanel" StackOrientation="Vertical" />

 

 

 

 

<telerikCharting:AdditionalPlotAreaAxes2DContainer x:Name="PART_AdditionalPlotAreaVerticalAxesPanel" StackOrientation="Horizontal" />

 

 

 

 

<telerikCharting:DragZoomLayerControl x:Name="PART_DragZoomLayer" Style="{TemplateBinding DragZoomLayerControlStyle}">

 

 

 

 

<ItemsPresenter />

 

 

 

 

</telerikCharting:DragZoomLayerControl>

 

 

 

 

<telerikCharting:LabelsPanel x:Name="PART_LabelsPanel"/>

 

 

 

 

</telerikCharting:ClipPanel>

 

 

 

 

<telerikCharting:AxisX2D x:Name="PART_AxisX" HorizontalAlignment="Stretch" Style="{TemplateBinding AxisXStyle}" Grid.Row="1" />

 

 

 

 

</Grid>

 

 

 

 

</ScrollViewer>

 

 

 

 

<telerikCharting:NoDataControl x:Name="PART_NoData" Style="{TemplateBinding NoDataControlStyle}" Grid.RowSpan="3" Grid.ColumnSpan="3" />

 

 

 

 

</Grid>

 

 

 

 

</Border>

 

 

 

 

</ControlTemplate>

 

 

 

 

</Setter.Value>

 

 

 

 

</Setter>

 

 

 

 

</Style>

 

 

 

 

</UserControl.Resources>

 

 

 

 

 

<telerik:RadChart x:Name="Chart" UseDefaultLayout="False">

 

 

 

 

<telerikCharting:ChartArea x:Name="MyChartArea" LegendName="MyLegend">

 

 

 

 

</telerikCharting:ChartArea>

 

 

 

 

</telerik:RadChart>

 

</

 

 

UserControl>

 

.

[Ves]

Hello Cameron,

You only need to add the additional Y axes to the ChartArea's AdditionalYAxes collection. The chart will take care of positioning them on the right and they will remain visible when scrolling. I have attached an updated version of the example.

Best regards,
Ves
the Telerik team