Scroll Only

[Natália]

Hello

I am working on a chart type StackedBar and would like to add
Scroll to him.
are many columns and viewing area is small.

How can I do this in XAML?

[Ves]

Hi Natália,

This is a sample implementation of RadChart with scrol-only chart area:

<telerik:RadChart x:Name="RadChart1">
            <telerik:RadChart.DefaultView>
                <telerik:ChartDefaultView>
                    <telerik:ChartDefaultView.ChartArea>
                        <telerik:ChartArea>
                            <telerik:ChartArea.ZoomScrollSettingsX>
                                <telerik:ZoomScrollSettings RangeStart="0" RangeEnd="0.2" ScrollMode="ScrollOnly"></telerik:ZoomScrollSettings>
                            </telerik:ChartArea.ZoomScrollSettingsX>
                        </telerik:ChartArea>
                    </telerik:ChartDefaultView.ChartArea>
                </telerik:ChartDefaultView>
            </telerik:RadChart.DefaultView>
        </telerik:RadChart>

Regards,
Ves
the Telerik team

[Natália]

Hello,

I added the scroll bar to the graph code as above.
However, the image of the graph does not move as you move the scroll bar.
 
What remains for him to render the chart image according to the scroll bar?

Thanks ...

[Ves]

Hello Natália,

Please, find attached a small example showing such chart. Note, that you need to have a mapping for either XValue or XCategory, so that the axis is aware of the bars position.

Regards,
Ves
the Telerik team

[Natália]

Hi,

Thanks for the responses.
But it still did not understand how the scroll bar works.
I'm sending part of the code for you to tell me if this way will be possible to use the scroll or should I change the structure of the graph.

Thank you!


XAML:

<Telerik_Windows_Controls_Charting:ChartArea.ZoomScrollSettingsX>

<Telerik_Windows_Controls_Charting:ZoomScrollSettings RangeStart="0"   RangeEnd="0.1" ScrollMode="ScrollOnly">

</Telerik_Windows_Controls_Charting:ZoomScrollSettings>

</Telerik_Windows_Controls_Charting:ChartArea.ZoomScrollSettingsX>  <Telerik_Windows_Controls_Charting:ChartArea.DataSeries>         <Telerik_Windows_Controls_Charting:DataSeries x:Name="Serie1" Label="Serie1" LegendLabel="serie1">          <Telerik_Windows_Controls_Charting:DataSeries.Definition>           <Telerik_Windows_Controls_Charting:StackedBarSeriesDefinition ShowItemLabels="False" ShowItemToolTips="True" StackGroupName="2009"/>          </Telerik_Windows_Controls_Charting:DataSeries.Definition>          <Telerik_Windows_Controls_Charting:DataPoint YValue="10"/>          <Telerik_Windows_Controls_Charting:DataPoint YValue="10" />          <Telerik_Windows_Controls_Charting:DataPoint YValue="10" />          <Telerik_Windows_Controls_Charting:DataPoint YValue="10" />          <Telerik_Windows_Controls_Charting:DataPoint YValue="10" />          <Telerik_Windows_Controls_Charting:DataPoint YValue="10"/>          <Telerik_Windows_Controls_Charting:DataPoint YValue="10" />          <Telerik_Windows_Controls_Charting:DataPoint YValue="10" />          <Telerik_Windows_Controls_Charting:DataPoint YValue="10" />          <Telerik_Windows_Controls_Charting:DataPoint YValue="10" />          <Telerik_Windows_Controls_Charting:DataPoint YValue="10" />          <Telerik_Windows_Controls_Charting:DataPoint YValue="10" />         </Telerik_Windows_Controls_Charting:DataSeries>         <Telerik_Windows_Controls_Charting:DataSeries x:Name="Serie2" Label="Serie2" LegendLabel="serie2">          <Telerik_Windows_Controls_Charting:DataSeries.Definition>           <Telerik_Windows_Controls_Charting:StackedBarSeriesDefinition ShowItemLabels="False" ShowItemToolTips="True" StackGroupName="2009"/>          </Telerik_Windows_Controls_Charting:DataSeries.Definition>          <Telerik_Windows_Controls_Charting:DataPoint YValue="20"/>          <Telerik_Windows_Controls_Charting:DataPoint YValue="20" />          <Telerik_Windows_Controls_Charting:DataPoint YValue="20" />          <Telerik_Windows_Controls_Charting:DataPoint YValue="20" />          <Telerik_Windows_Controls_Charting:DataPoint YValue="20" />          <Telerik_Windows_Controls_Charting:DataPoint YValue="20"/>          <Telerik_Windows_Controls_Charting:DataPoint YValue="20" />          <Telerik_Windows_Controls_Charting:DataPoint YValue="20" />          <Telerik_Windows_Controls_Charting:DataPoint YValue="20" />          <Telerik_Windows_Controls_Charting:DataPoint YValue="20" />          <Telerik_Windows_Controls_Charting:DataPoint YValue="20" />          <Telerik_Windows_Controls_Charting:DataPoint YValue="20" />         </Telerik_Windows_Controls_Charting:DataSeries> </Telerik_Windows_Controls_Charting:ChartArea.DataSeries>

 

 

 

[Ves]

Hello Natália,

Zooming and Scrolling in RadChart is only available when the chart is databound, i.e. it is populated through its ItemsSource property as shown in the example I have attached to my previous reply. You can find more details about zooming and scrolling in this help topic. For populating RadChart with series mapping please check the following article - DataBinding with Manual Series Mappings.


Best regards,
Ves
the Telerik team

[Manish Kumar]

Hi

I also have the same issue. But after changing my code to incorporate data through the item source as through the below method.

/// <summary>
/// Loads the time chart data.
/// </summary>
/// <param name="chartData"></param>
private void LoadTimeChartData(TimeChartData chartData)
{
try
{
this.chrtMain.DefaultView.ChartArea.DataSeries.Clear();
List<DataPoint> lstDataPoints = new List<DataPoint>();
SeriesMapping seriesMapping = new SeriesMapping();
//Int32 iCollectionIndex = 0;
if (chartData._ListData != null && chartData._ListData.Count > 0)
{
//Sets Chart Type
foreach (TimeDataSet timeDataSet in chartData._ListData)
{

DataSeries dataSeries = new DataSeries();
//Set the chart definition
switch (this.ChartType)
{
case ChartType.Line:
dataSeries.Definition = new LineSeriesDefinition();
seriesMapping.SeriesDefinition = new LineSeriesDefinition();
break;
case ChartType.Bar2D:
dataSeries.Definition = new BarSeriesDefinition();
seriesMapping.SeriesDefinition = new BarSeriesDefinition();
break;
case ChartType.Bar3D:
dataSeries.Definition = new Bar3DSeriesDefinition();
seriesMapping.SeriesDefinition = new Bar3DSeriesDefinition();
break;
case ChartType.Pie:
dataSeries.Definition = new Pie3DSeriesDefinition();
seriesMapping.SeriesDefinition = new Pie3DSeriesDefinition();
break;
case ChartType.StackedBar:
dataSeries.Definition = new StackedBarSeriesDefinition();
seriesMapping.SeriesDefinition = new StackedBarSeriesDefinition();
break;
case ChartType.Area:
dataSeries.Definition = new Area3DSeriesDefinition();
seriesMapping.SeriesDefinition = new Area3DSeriesDefinition();
break;
default:
dataSeries.Definition = new BubbleSeriesDefinition();
seriesMapping.SeriesDefinition = new BubbleSeriesDefinition();
break;
}

//Item tool tip format setting
dataSeries.Definition.ItemToolTipFormat = "0";
seriesMapping.SeriesDefinition.ItemToolTipFormat = "0";

//Show tool tip
dataSeries.Definition.ShowItemToolTips = true;
seriesMapping.SeriesDefinition.ShowItemToolTips = true;

//Show item lables
dataSeries.Definition.ShowItemLabels = true;
seriesMapping.SeriesDefinition.ShowItemLabels = true;

//Set Legend Label
dataSeries.LegendLabel = timeDataSet._XLabelDetails._ProductName;
seriesMapping.LegendLabel = timeDataSet._XLabelDetails._ProductName;

//Set the SeriesItemLableStyle
dataSeries.Definition.SeriesItemLabelStyle = this.EnableStyle ? Application.Current.Resources["SeriesItemLabelStyle"] as Style : null;
seriesMapping.SeriesDefinition.SeriesItemLabelStyle = this.EnableStyle ? Application.Current.Resources["SeriesItemLabelStyle"] as Style : null;

if (this.LegendValuesToDisplay != null)
{
//TODO: to be displayed based on the legend values displayed.

dataSeries.LegendLabel = dataSeries.LegendLabel + " [" + timeDataSet._XLabelDetails._ShiftName + "]";

foreach (string displayValue in this.LegendValuesToDisplay)
{

}
}


//Set the data points
foreach (TimeDataPoint timeDataPoint in timeDataSet._Points)
{
ItemMapping itemMapping = new ItemMapping();
itemMapping.DataPointMember = DataPointMember.YValue;
itemMapping.FieldName = "YValue";
seriesMapping.ItemMappings.Add(itemMapping);

itemMapping = new ItemMapping();
itemMapping.DataPointMember = DataPointMember.XCategory;
itemMapping.FieldName = "XCategory";
seriesMapping.ItemMappings.Add(itemMapping);

itemMapping = new ItemMapping();
itemMapping.DataPointMember = DataPointMember.LegendLabel;
itemMapping.FieldName = "LegendLabel";
seriesMapping.ItemMappings.Add(itemMapping);

DataPoint dataPoint = new DataPoint();
dataPoint.XCategory = timeDataPoint._XValue;
dataPoint.YValue = timeDataPoint._YValue;
dataPoint.LegendLabel = timeDataSet._XLabelDetails._ProductName;
dataPoint.DataItem = timeDataSet;
lstDataPoints.Add(dataPoint);
dataSeries.Add(dataPoint);
}

//Add the dataSeries to the chart control
//this.chrtMain.DefaultView.ChartArea.DataSeries.Add(dataSeries);
if (this.EnableChartScrolling)
{ 
        this.chrtMain.ItemsSource = lstDataPoints; 
        this.chrtMain.SeriesMappings.Add(seriesMapping);
}
else
{ 
        //Add the dataSeries to the chart control 
        this.chrtMain.DefaultView.ChartArea.DataSeries.Add(dataSeries);
}
}
}
}
catch
{
//To be cached by the caller.
throw;
}
}


And I am setting scrolling functionality on UserControl_Load method

private void UserControl_Loaded(object sender, RoutedEventArgs e)
{ 
    if (this.EnableChartScrolling) 
    { 
            this.chrtMain.DefaultView.ChartArea.ZoomScrollSettingsX.SetSelectionRange(0, .5); 
            this.chrtMain.DefaultView.ChartArea.EnableAnimations = false; 
       } 
 }

But the thing is though i am able to populate the chart successfully but scrolling do not happen after setting range as SetSelectionRange(0, .5); 
can you please guide me where i am going wrong. Another this I have the other methods wher i have set the scrolling functionality as below:

 

/// <summary>
/// Sets the scrolling functionality for the chart control.
/// </summary>
private void SetChartScrolling()
{
this.chrtMain.DefaultView.ChartArea.ZoomScrollSettingsX.ScrollMode = this.EnableChartScrolling ? ScrollMode.ScrollOnly: ScrollMode.None;
this.chrtMain.DefaultView.ChartArea.ZoomScrollSettingsX.RangeStart = 0;
this.chrtMain.DefaultView.ChartArea.ZoomScrollSettingsX.RangeEnd = 1;

//this.chrtMain.DefaultView.ChartArea.ZoomScrollSettingsX.PropertyChanged += new PropertyChangedEventHandler(ZoomScrollSettingsX_PropertyChanged);
}

void ZoomScrollSettingsX_PropertyChanged(object sender, PropertyChangedEventArgs e)
{
ZoomScrollSettings settings = sender as ZoomScrollSettings;
int iRangeMaxIndex = PdataSeries.Count;
iPStart = (int)Math.Ceiling(iRangeMaxIndex * settings.RangeStart);
iPEnd = (int)Math.Ceiling(iRangeMaxIndex * settings.RangeEnd);
this.chrtMain.DefaultView.ChartArea.ZoomScrollSettingsX.SetSelectionRange(settings.RangeStart, settings.RangeEnd);
//(this.chrtMain.DefaultView.ChartArea.DataSeries[0]).Count;

/*
var result = from DataSeries ds in this.chrtMain.DefaultView.ChartArea.DataSeries
where ds
*/
}

 

thanks 
Manish
 

[Ves]

Hello Manish Kumar,

I am afraid, it is hard to investigate such issue by just looking at several pages of code. The code seems to be correct, given that the correct part is executed i.e. the one that does not add DataPoints manually. Still, in order to get a specific advice, I suggest that you create a small project, which shows your configuration and reproduces the problem. Once we are able to debug it, we will get back to you with our findings.

Best regards,
Ves
the Telerik team

[Shanmuga]

Hi Team,

I used above code it's working fine.. But not displayed Legend Label ..

<telerikChart:RadChart x:Name="RadChart1" SeriesMappings="{Binding Mappings}" ItemsSource="{Binding Path=SectorInfos}" Width="586">
                        <telerik:RadChart.DefaultView>
                            <telerik:ChartDefaultView>
                                <telerik:ChartDefaultView.ChartArea>
                                    <telerik:ChartArea>
                                        <telerik:ChartArea.ZoomScrollSettingsY>
                                            <telerik:ZoomScrollSettings ScrollMode="ScrollAndZoom"/>
                                        </telerik:ChartArea.ZoomScrollSettingsY>
                                        <telerik:ChartArea.ZoomScrollSettingsX>
                                            <telerik:ZoomScrollSettings ScrollMode="ScrollAndZoom"/>
                                        </telerik:ChartArea.ZoomScrollSettingsX>
                                    </telerik:ChartArea>
                                </telerik:ChartDefaultView.ChartArea>
                            </telerik:ChartDefaultView>
                        </telerik:RadChart.DefaultView>
                    </telerikChart:RadChart>

Please Help Me.. What mistake i did...


public void DrawDashboard()
        {
            ItemWidthPercent = 20;
            SeriesMapping seriesMapping = new SeriesMapping { LegendLabel = "Alpha 0" };
            seriesMapping.ItemMappings.Add(new ItemMapping("Sector0", DataPointMember.YValue));
            seriesMapping.ItemMappings.Add(new ItemMapping("CellName", DataPointMember.XCategory));
            seriesMapping.SeriesDefinition = new StackedBarSeriesDefinition() { ShowItemLabels = false };


            SeriesMapping seriesMapping1 = new SeriesMapping { LegendLabel = "Alpha 1" };
            seriesMapping1.ItemMappings.Add(new ItemMapping("Sector1", DataPointMember.YValue));
            seriesMapping1.ItemMappings.Add(new ItemMapping("CellName", DataPointMember.XCategory));
            seriesMapping1.SeriesDefinition = new StackedBarSeriesDefinition() { ShowItemLabels = false };


        StackedBarSeriesDefinition horBar = new StackedBarSeriesDefinition();
        seriesMapping1.SeriesDefinition = horBar;
            seriesMapping.SeriesDefinition = horBar;

         var seriesMappingcollection = new SeriesMappingCollection();

            seriesMappingcollection.Add(seriesMapping);
            seriesMappingcollection.Add(seriesMapping1);

        this.Mappings = seriesMappingcollection;
}

[Peshito]

Hi Shanmuga,

It does not become clear what might be causing this issue. I tried to reproduce it with a similar code to yours and the legend label appeared just fine. Please take a look at the attached sample as it might clear where your issue is located. More information on how the legend works can be found here.

Hope it helps.

Regards,
Peshito
Telerik