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
Also see this example code:
<UserControl x:Class="SilverlightApplication11.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">
<Grid x:Name="LayoutRoot">
<igChart:XamWebChart Width="400" Height="400">
<igChart:XamWebChart.Axes>
<igChart:Axis AxisType="PrimaryX" ScrollEnabled="True" ScrollScale="0.75" ScrollPosition="0"/>
</igChart:XamWebChart.Axes>
<igChart:XamWebChart.Series>
<igChart:Series ChartType="Column">
<igChart:Series.DataPoints>
<igChart:DataPoint Label="Test1" Value="2" />
<igChart:DataPoint Label="Test2" Value="8" />
<igChart:DataPoint Label="Test3" Value="1" />
<igChart:DataPoint Label="Test4" Value="7" />
<igChart:DataPoint Label="Test5" Value="5" />
<igChart:DataPoint Label="Test6" Value="3" />
<igChart:DataPoint Label="Test7" Value="10" />
<igChart:DataPoint Label="Test8" Value="9" />
<igChart:DataPoint Label="Test9" Value="5" />
<igChart:DataPoint Label="Test10" Value="14" />
<igChart:DataPoint Label="Test11" Value="2" />
</igChart:Series.DataPoints>
</igChart:Series>
</igChart:XamWebChart.Series>
</igChart:XamWebChart>
</Grid>
</UserControl>
Is it possible to have autoscrollbar feature? The ScrollScale enlarges the current chart. There is a chance that I can have 10 rows or 100 rows in my chart. Its based on database and can get the no. of rows only at run time. In that case how I can specify the ScrollScale.
You could try something like this to automatically enable the scrollbar:
<UserControl x:Class="SilverlightApplication13.MainPage"
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">
<StackPanel>
<igChart:XamWebChart x:Name="chart" Width="400" Height="400">
<igChart:Axis AxisType="PrimaryX"
ScrollEnabled="False"
ScrollScale="0.75"
ScrollPosition="0"/>
<igChart:Series ChartType="Column"
DataSource="{Binding Data}"
DataMapping="Label = Label; Value = Value"/>
<Button Content="Add Data Point" HorizontalAlignment="Left" Click="Button_Click"/>
</StackPanel>
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
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.
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.