Adding bars on Chart without resizing

[Efthymios]

Hello,
I have a small problem and I would appreciate it if someone can help me with that.
I have the following chart:

<telerikChart:RadCartesianChart x:Name="chart" Margin="0 0" Height="170">
    <telerikChart:RadCartesianChart.HorizontalAxis>
        <telerikChart:CategoricalAxis LabelOffset="4" LabelInterval="5" />
    </telerikChart:RadCartesianChart.HorizontalAxis>
    <telerikChart:RadCartesianChart.VerticalAxis>
        <telerikChart:LinearAxis/>
    </telerikChart:RadCartesianChart.VerticalAxis>
    <telerikChart:RadCartesianChart.Behaviors>
        <telerikChart:ChartPanAndZoomBehavior ZoomMode="Horizontal"  PanMode="Horizontal" HandleDoubleTap="False"/>
        <telerikChart:ChartTrackBallBehavior ShowIntersectionPoints="True" ShowTrackInfo="True"/>
    </telerikChart:RadCartesianChart.Behaviors>
    <telerikChart:BarSeries x:Name="barSeries" Foreground="#00FF0000">
        <telerikCharting:CategoricalDataPoint Value="1" Label="2"/>
        <telerikCharting:CategoricalDataPoint Value="21" Label="2"/>
        <telerikCharting:CategoricalDataPoint Value="5" Label="2"/>
        <telerikCharting:CategoricalDataPoint Value="3" Label="2"/>
        <telerikCharting:CategoricalDataPoint Value="1" Label="2"/>
        <telerikCharting:CategoricalDataPoint Value="9" Label="2"/>
        <telerikCharting:CategoricalDataPoint Value="1" Label="2"/>
        <telerikCharting:CategoricalDataPoint Value="11" Label="2"/>
        <telerikCharting:CategoricalDataPoint Value="10" Label="2"/>
        <telerikCharting:CategoricalDataPoint Value="17" Label="2"/>
    </telerikChart:BarSeries>
</telerikChart:RadCartesianChart>

Currently it displays 10 bars on the page. What I want to do is add more bars at specific intervals (eg. add another 1 every one minute) without resizing the bars. Also, the chart must be automatically panned to the last item inserted. I mean that I want the bars to always be the same width. I have also added the behavior ChartPanAndZoomBehavior so that when bars are out of screen the user can pan it, but with no luck. Currently my C# code for this is very small:

        ObservableCollection<double> chartValues = new ObservableCollection<double>();
        Random rnd = new Random();

        private void startLocationButton2_Click(object sender, RoutedEventArgs e)
        {
//            Debug.WriteLine(this.chart.PanOffset.X);

            this.chart.Series[0].ItemsSource = chartValues;
            chartValues.Add(rnd.NextDouble() * 300);

//            this.chart.Zoom = new Size(chartValues.Count / 10, 1);
        }

I think that I might have to do some trick with the chart.zoom, but I do not know how I can calculate the correct zooming factor.

Thank you very much.

Efthymios Kalyviotis
Computer Programmer

[Victor]

Hi Efthymios,

Thank you for writing.
Using the zoom feature is crucial if you want to keep the bars at the same size. What you need to do is when you add a new data point, you have to wait for the layout pass to finish (the LayoutUpdatedEvent) and then determine the ratio of the old bar size to the new bar size. This ratio will be your zoom factor. The pan offset on the other hand can be determined by scaling the initial pan offset with the zoom factor.

For example, you add a new bar. Now the old bars are 4/3 bigger than the new bars, therefore your zoom factor will be 4/3.

Now say for example that initially you didn't have to pan at all. However with the new bar, a zoom factor is applied and panning is now possible. The pan offset should be chartSize * zoomFactor - chartSize. That is, the difference between the new and old sizes of the chart.

Kind regards,
Victor
the Telerik team