Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to create a Chart with 2 series of data having different scales?

I need to develop a Chart with 2 series of data having quite different scales.

Is this posible?, I reviewed the chart's properties, but I don't know how. Can you help me please?

This graphic is in Excel. This is E.G. that I neet to finish!. I want to tell you that my question is how to unite, because I the code's chart is ready, I just want to use different scales in one.

<asp:Chart ID="graf_calificacion_servicio_mensual" runat="server" Height="396px" Width="760px">
            <Series>
                <asp:Series Name="Series1" CustomProperties="DrawingStyle=Cylinder">
                </asp:Series>
            </Series>
            <ChartAreas>
                <asp:ChartArea Name="ChartArea1">
                    <AxisY IsLabelAutoFit="False" TextOrientation ="Auto"
                            TitleFont="Verdana, 10pt" Interval="Auto">
                            <LabelStyle Font="Microsoft Sans Serif" />
                    </AxisY>

                    <AxisX IsLabelAutoFit="false" LabelAutoFitMaxFontSize="10" 
                            LabelAutoFitMinFontSize="8" LabelAutoFitStyle="None" Interval="1">
                            <LabelStyle Angle ="90" Font="Microsoft Sans Serif" IsEndLabelVisible ="false" />

                    </AxisX>
                </asp:ChartArea>
            </ChartAreas>
        </asp:Chart>

enter image description here

like image 998
Ric_hc Avatar asked Oct 17 '25 00:10

Ric_hc


1 Answers

For the second scale use the secondary y-axis by enabling it on the chartarea and by setting the series' y-axistype to secondary.

If you do this after having added the data, you also need to refresh the axes' scales:

   ChartArea ca = chart1.ChartAreas[0];

   Series s1 = chart1.Series[0];
   Series s2 = chart1.Series[1];

   ca.AxisY2.Enabled = AxisEnabled.True;
   s1.YAxisType = AxisType.Primary;
   s2.YAxisType = AxisType.Secondary;

   ca.RecalculateAxesScale();

Note that you may also want to either turn off the gridlines as they tend to get confusing coming from different scales or color them, and maybe even the axes themselves in the series' color.

To do so you will need to 'apply' the palette:

   chart1.ApplyPaletteColors();

   ca.AxisY.MajorGrid.LineColor = s1.Color;
   ca.AxisY2.MajorGrid.LineColor = s2.Color;

   ca.AxisY.LineColor = s1.Color;
   ca.AxisY2.LineColor = s2.Color;
   ca.AxisY.LineWidth = 2;
   ca.AxisY2.LineWidth = 2;
   ca.AxisX.MajorGrid.Enabled  = false;

enter image description here

The code is for the Winforms MSChart control but the ASP version should work just the same.

like image 190
TaW Avatar answered Oct 18 '25 14:10

TaW