Hi,
I am evaludating the silverlight controls. There is a scenario like I need to present a month's data in column chart.
If the datas are more no scrollbars are appearing in the chart. It tries to adjust the data in the same displayed with.
How I can get a horizontal scrollbar, so that I can scroll throught the chart contents?
Thanks in advance.
please see: http://help.infragistics.com/Help/NetAdvantage/DV/2009.2/CLR3.5/html/SL_DV_xamWebChart_Working_with_ZoomBars_and_Using_the_ZoomRectangle.html
Hi Graham, how to enable the click and drag the webchat to perform zoom? thx
Many thanks Graham.
Your code helped.
Yet another option would be to throw the entire chart into a ScrollViewer, setting the HorizontalScrollbarVisibility to Auto, but this may not provide the user experience you are searching for.
You could try something like this to automatically enable the scrollbar:
<UserControl x:Class="SilverlightApplication13.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"
mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480"
xmlns:igChart="clr-namespace:Infragistics.Silverlight.Chart;assembly=Infragistics.Silverlight.DataVisualization.Chart.v9.2"
xmlns:igControls="clr-namespace:Infragistics.Silverlight.Controls;assembly=Infragistics.Silverlight.DataVisualization.Controls.v9.2">
<Grid x:Name="LayoutRoot">
<StackPanel>
<igChart:XamWebChart x:Name="chart" Width="400" Height="400">
<igChart:XamWebChart.Axes>
<igChart:Axis AxisType="PrimaryX"
ScrollEnabled="False"
ScrollScale="0.75"
ScrollPosition="0"/>
</igChart:XamWebChart.Axes>
<igChart:XamWebChart.Series>
<igChart:Series ChartType="Column"
DataSource="{Binding Data}"
DataMapping="Label = Label; Value = Value"/>
</igChart:XamWebChart.Series>
</igChart:XamWebChart>
<Button Content="Add Data Point" HorizontalAlignment="Left" Click="Button_Click"/>
</StackPanel>
</Grid>
</UserControl>
with code behind:
public partial class MainPage : UserControl
{
private ChartDataViewModel _vm;
private Axis _xAxis;
public MainPage()
InitializeComponent();
foreach (Axis axis in chart.Axes)
if (axis.AxisType == AxisType.PrimaryX)
_xAxis = axis;
}
_vm = new ChartDataViewModel(4);
_vm.Data = new ObservableCollection<DataItemViewModel>()
new DataItemViewModel() {Label = "Test1", Value = 4},
new DataItemViewModel() {Label = "Test2", Value = 5},
new DataItemViewModel() {Label = "Test3", Value = 2},
new DataItemViewModel() {Label = "Test4", Value = 1}
};
_xAxis.ScrollEnabled = _vm.ScrollbarEnabled;
_vm.PropertyChanged +=
new PropertyChangedEventHandler(vm_PropertyChanged);
DataContext = _vm;
void vm_PropertyChanged(object sender, PropertyChangedEventArgs e)
//can't bind the chart axis against at the moment, so setting
//from event handler.
if (e.PropertyName == "ScrollbarEnabled")
private int _counter = 5;
private void Button_Click(object sender, RoutedEventArgs e)
DataItemViewModel _dvm = new DataItemViewModel()
Label = "Test" + _counter,
Value = _counter
_vm.Data.Add(_dvm);
_counter++;
public class DataItemViewModel
public string Label { get; set; }
public double Value { get; set; }
public class ChartDataViewModel : INotifyPropertyChanged
public ChartDataViewModel(int threshold)
_threshold = threshold;
private int _threshold;
private ObservableCollection<DataItemViewModel> _data;
public ObservableCollection<DataItemViewModel> Data
get
return _data;
set
if (_data != null)
_data.CollectionChanged -=
new NotifyCollectionChangedEventHandler(OnDataChanged);
if (value != null)
value.CollectionChanged +=
_data = value;
UpdateScrollbarEnabled();
if (PropertyChanged != null)
PropertyChanged(this,
new PropertyChangedEventArgs("Data"));
private bool _scrollbarEnabled;
public bool ScrollbarEnabled
return _scrollbarEnabled;
private set
_scrollbarEnabled = value;
new PropertyChangedEventArgs("ScrollbarEnabled"));
private void OnDataChanged(object sender, NotifyCollectionChangedEventArgs e)
private void UpdateScrollbarEnabled()
if (Data.Count > _threshold)
ScrollbarEnabled = true;
else
ScrollbarEnabled = false;
#region INotifyPropertyChanged Members
public event PropertyChangedEventHandler PropertyChanged;
#endregion
Another option you would have here is to examine the width and height of the chart that it wants to take, and enable the scrollbar based on these settings.
-Graham