Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
770
How to mix stacked area chart and line chart with 2 y axis
posted

Hi,

  I need to show stacked chart and line chart in single chart. Stacked area chart has very large value range on y axis and line series has vary low value range.

For example Im trying like below

 if(value<100)

{

 Infragistics.Silverlight.Chart.Series igLineSeries = new Infragistics.Silverlight.Chart.Series();

igLineSeries.ChartType =

ChartType.Line;

 

 

 

 

 

 

 

for (int lstCount = 0; lstCount < lstChartFinal[rowcnt].Count(); lstCount++)

{

 

  Infragistics.Silverlight.Chart.DataPoint igDatapoint = new Infragistics.Silverlight.Chart.DataPoint();

  igDatapoint.Value =

Convert.ToDouble(lstChartFinal[rowcnt].ToList()[lstCount].MyValue);

  igLineSeries.DataPoints.Add(igDatapoint);

 

}

//Adding y aixs in chart only once 

if (intCountRatio == 0)

{

  Infragistics.Silverlight.Chart.

Axis yAxis = new Infragistics.Silverlight.Chart.Axis { AxisType =   AxisType.SecondaryY, Minimum  AutoRange = true };

 

igChart.Axes.Add(yAxis);

}

igChart.Series.Add(igLineSeries);

 

intCountRatio++;

}

//this is for stacked area chart

else

{

 

infragistics.Silverlight.Chart.

Series igSeries = new Infragistics.Silverlight.Chart.Series();

igSeries.ChartType =

ChartType.StackedArea;

 

 

 

for (int lstCount = 0; lstCount < lstChartFinal[rowcnt].Count(); lstCount++)

  {

 

ChartParameter chParamm = new ChartParameter();

Infragistics.Silverlight.Chart.

DataPoint igDatapoint = new Infragistics.Silverlight.Chart.DataPoint();

 

igDatapoint.Value =

Convert.ToDouble(lstChartFinal[rowcnt].ToList()[lstCount].MyValue);

 

 igSeries.DataPoints.Add(igDatapoint);

}

 

//Adding y axis as primary only once 

 

 

 

if (intCountAreaSeries == 0)

  {

 

 Infragistics.Silverlight.Chart.Axis yAxis = new Infragistics.Silverlight.Chart.Axis { AxisType =   AxisType.PrimaryY, AutoRange = true };

  igChart.Axes.Add(yAxis);

   }

 

 

 

 

 

 

  igChart.Series.Add(igSeries);

   intCountAreaSeries++;

 

 

}

 

 

here its showing 2 y axis..but showing same value range on primary y axis and secondary y axis.

First its plotting stacked area series and then line series. So i think y axis has autorange as true. so for secondary axis taking range of primary y axis.So not showing line series.

Please tell how to assign stacked series range for primary y axis and line series range for secondary y axis.

Also i have 2006,2007,2008 values on x axis.How to plot common x axis starting from 2006 not from zero.Should show 2006 instead of zero at start.

 

Please give modify code.Any help is appreciated

Thanks in advance,

Nandu

 

 

  • 1765
    Suggested Answer
    posted

    Hi Nandu,

     

    You can try the following code:

    This is in the MainPage.xaml.cs:

            public MainPage()
            {
                InitializeComponent();

                Axis primXAxis = new Axis
                {
                    AxisType = AxisType.PrimaryX,
                    Name = "PrimXAxis"
                };
                Axis primYAxis = new Axis
                {
                    AxisType = AxisType.PrimaryY,
                    Name = "PrimYAxis"
                };
                Axis secondYAxis = new Axis
                {
                    AxisType = AxisType.SecondaryY,
                    Name = "SecondYAxis",
                    Minimum = 2006,
                    Maximum = 9000,
                    Unit = 1000,
                    AutoRange = false
                };

                theChart.Axes.Add(primXAxis);
                theChart.Axes.Add(primYAxis);
                theChart.Axes.Add(secondYAxis);

                Series stackedAreaSeries = new Series
                {
                    ChartType = ChartType.StackedArea,
                    AxisX = "PrimXAxis",
                    AxisY = "PrimYAxis"
                };

                Series lineSeries = new Series
                {
                    StrokeThickness = 4,
                    ChartType = ChartType.Line,
                   AxisX = "PrimXAxis",
                   AxisY = "SecondYAxis",
                };

                stackedAreaSeries.DataPoints.Add(new DataPoint(5));
                stackedAreaSeries.DataPoints.Add(new DataPoint(6));
                stackedAreaSeries.DataPoints.Add(new DataPoint(8));

                lineSeries.DataPoints.Add(new DataPoint(2500));
                lineSeries.DataPoints.Add(new DataPoint(3000));
                lineSeries.DataPoints.Add(new DataPoint(4000));

                theChart.Series.Add(lineSeries);
                theChart.Series.Add(stackedAreaSeries);
            }
        }

     

    This is in the MainPage.xaml:

            <igChart:XamWebChart Width="400" Height="300" Name="theChart">
            </igChart:XamWebChart>

     

     

    Best regards,

    Anatoli Iliev