Chart Feature Scrolling guide for ASP.NET AJAX, C#, VB.NET, include scroll mode, Xscale and Yscale

Chart Feature Scrolling in ASP.NET

Home > How to > Chart Scrolling

Information to Chart Scrolling Feature

Sometimes we may meet following situation that the plot area of the chart is not large enough for us to display all the data series points in a clear way. Under this situation, we may need to add a scrollbar to the chart so that viewers can scroll the chart to see the data that they want to read. Besides, to show the data in a more detailed way, we may also need the chart zooming function. And the asp.net KaxChart control enables users to add the chart scrolling and zooming functions via the chart scrolling feature.

Chart Scrolling Feature Properties

In order to make sure the chart scrolling and zooming feature can be perfectly used in different web programming applications, the KaxChart control offers following several properties to help users create a fully customized scrollbar in the target html chart.

ScrollMode

ScrollMode: this property offers users the ability to make the chart scrollbar visible or not. One thing that needs to be mentioned here is when you want to scroll the chart only in one axis (either X axis or Y axis), you need to set the EnableZoom property to false.

XScale and YScale

XScale and YScale: these two properties allow users to change the chart zooming function programmatically on the server-side. XScale and YScale properties control the scaling effect for the X Axis and Y Axis respectively. You can define there properties using C# code in your asp.net web projects.

For instance, suppose the chart Xaxis has 30 values, then, you can display 5 data values if you set the value of Xscale as 5. If you define the value of Xscale as 3, then 10 data values will be visible in the current Xaix bar. The YScale property works the same way.

XScrollOffset and YScrollOffset

XScrollOffset and YScrollOffset: these two properties control the scrolled position and they just accept the values from 0 and 1. For example, if you define the XScrollOffset as 0, then the scrollbar will be displayed at the far left side. If you set the XScrollOffset as 1, the scrollbar will be positioned at the far right side.

How to Customize Chart Scrolling Function

In this part, we will offer sample ASP.NET and C# programming codes to show you how to create a web chart that enables users to scroll along the Xaxis.

ASPX


<kettic:KaxChart  ID="KaxChart1"  runat="Server"  Width="495px"  IsAutoLayout="true" Skin="KetticStyle">
                <ClientSettings  EnableZoom="false"  ScrollMode="XOnly" XScale="5"  XScrollOffset="0"></ClientSettings>
                <Series>
                    <kettic:ChartSeries  View="Bar">    
                    </kettic:ChartSeries>
                </Series>
                <Series>
                    <kettic:ChartSeries  View="Bar">
                    </kettic:ChartSeries>
                </Series>                            
</kettic:KaxChart>

C# Code


KaxChart1.ClientSettings.EnableZoom = false;
KaxChart1.ClientSettings.ScrollMode = ChartClientScrollMode.XOnly;
KaxChart1.ClientSettings.XScale = 5;
KaxChart1.ClientSettings.XScrollOffset = 0;

With the purpose to help you have a better understanding of the chart scrolling feature, we here specifically attach an image which presents the result of above chart scrollbar adding programming application.
view chart scroll feature in asp.net ajax

view chart scroll feature in asp.net ajax

Other Chart Feature Recommendations

ASP.NET AJAX UI Controls

ASP.NET AJAX Chart UI Control

Overview Getting Started

Chart Element

Diagram Series Axes Legend Caption Tick Data Grid

Chart Type

Bar Chart Point Chart Line Chart Pie Chart Area Chart Gantt Chart Bubble Chart Bezier Chart Spline Chart Spline Area Chart Candle Chart Chart With Stacked Full Stacked Chart

Features

Automatic Layout Automatic Text-wrapping

Scrolling

Empty Values Scale Break Multiline Labels Wise Labels Marking Areas Multiple Types Interactive Drill Down Shadow Edting

Data Binding

Array Data List Data Database Data XML Data

Chart Style

Chart Skin ASP.NET AJAX Grid UI Control