Monday, March 10, 2008

How to: Enable zooming on Infragistics composite charts

To do this on a regular UltraChart chart layout is not a difficult thing but when we consider the composite charts it seems to be not supported. Well, this is not true. Actually we use the same properties to do it excepting that for the composite chart those properties are not shown by IntelliSense. You can find here a possible reason for this.
Infragistics winchart hidden properties
In my example I will consider a UltraChart in composite mode, containing a column, and a line area charts. To create my chart I use the Infragistics UltraChart’s wizard. I need one chart area and my two chart layers. Both layers can share same Y axis, but for the X axis, each chart layer has different axes types: for the column chart I will use a string data type and group by series axis; for the line area chart I will use a string data type and continuous data axis.
Infragistics UltraChart wizardInfragistics UltraChart wizard
Infragistics UltraChart wizardInfragistics UltraChart wizard
Infragistics UltraChart wizardInfragistics UltraChart wizard

Here is the "secret" code that will enable the scaling and the scrolling for your composite chart.

using Infragistics.UltraChart.Shared.Events;

using Infragistics.UltraChart.Resources.Appearance;

using Infragistics.UltraChart.Shared.Styles;

...

public Form1()

{

    InitializeComponent();

    this.ultraChart1.CompositeChart.ChartAreas[0]. Axes[0].ScrollScale.Visible = true;

    this.ultraChart1.CompositeChart.ChartAreas[0]. Axes[1].ScrollScale.Visible = true;

}



Enabling the scaling for a composite chart, will render only one scaling/scrolling region, so it will affect only one chart layer. To fix this I have to handle the scrolling and the scaling manually:

private void ultraChart1_Scrolling(object sender, ChartScrollScaleEventArgs e)

{

    foreach (ChartLayerAppearance layer in this.ultraChart1.CompositeChart.ChartLayers)

    {

        if (layer.Visible == true)

        {

            switch (e.AxisNumber)

            {

                case AxisNumber.X_Axis:

                    layer.AxisX.ScrollScale.Scroll = e.NewValue;

                    break;

                case AxisNumber.Y_Axis:

                    layer.AxisY.ScrollScale.Scroll = e.NewValue;

                    break;

            }

        }

    }

}



private void ultraChart1_Scaling(object sender, ChartScrollScaleEventArgs e)

{

    foreach (ChartLayerAppearance layer in this.ultraChart1.CompositeChart.ChartLayers)

    {

        if (layer.Visible == true)

        {

            switch (e.AxisNumber)

            {

                case AxisNumber.X_Axis:

                    layer.AxisX.ScrollScale.Scale = e.NewValue;

                    break;

                case AxisNumber.Y_Axis:

                    layer.AxisY.ScrollScale.Scale = e.NewValue;

                    break;

            }

        }

    }

}

Infragistics composite UltraChart with zoomingInfragistics composite UltraChart with scrolling


kick it on DotNetKicks.com

1 comment:

Jani Amit said...

Thanks a ton dude. It really helped me out from my problem. I have a quick question. Do you know how to share the same X-axis in the code layout for Infragistics Chart. In my Chart i have 4 chart out of which 3 charts share x and y-axis and the last has different y-axis and same x-axis. If you know this please reply me at janiamit123@yahoo.co.in