Generally, a graph contains only one Y Axis. The C1CompositeChart control can display multiple Y Axes which allows for the graphing of more complex data.
Use the YAxes property to set the multiple axes and the YAxis property to indicate which Y Axis reflects the series values. Clicking the ellipsis button next to the YAxes property will open the CompositeChartYAxis collection editor, from where you can add multiple axes and set their properties.
Following markup shows an example of multiple axes added to the composite chart.
| Source View |
Copy Code
|
|---|---|
<YAxes> <cc1:CompositeChartYAxis AutoMax="False" AutoMin="False" Compass="East" Max="35" Min="5" Text="Temperature"> <TextStyle> <Fill Color="#89A54E"> </Fill> </TextStyle> <Labels TextAlign="Center"> <AxisLabelStyle> <Fill Color="#89A54E"> </Fill> </AxisLabelStyle> </Labels> <GridMajor Visible="True"> </GridMajor> <GridMinor Visible="False"> </GridMinor> <cc1:CompositeChartYAxis> <cc1:CompositeChartYAxis AutoMax="False" AutoMin="False" Compass="West" Max="300" Text="Rainfall"> <Labels TextAlign="Center"> </Labels> <GridMajor Visible="True"> </GridMajor> <GridMinor Visible="False"> </GridMinor> <cc1:CompositeChartYAxis> <cc1:CompositeChartYAxis Compass="East"> <Labels TextAlign="Center"> </Labels> <GridMajor Visible="True"> </GridMajor> <GridMinor Visible="False"> </GridMinor> <cc1:CompositeChartYAxis> </YAxes> |
|
The complete markup for the control will appear as shown below:
| Source View |
Copy Code
|
|---|---|
<cc1:C1CompositeChart runat="server" ID="C1CompositeChart1" Height="475" Width="756">
<Hint>
<Content Function="hintContent" />
</Hint>
<YAxes>
<cc1:CompositeChartYAxis AutoMax="False" AutoMin="False" Compass="East"
Max="35" Min="5" Text="Temperature">
<TextStyle>
<Fill Color="#89A54E">
</Fill>
</TextStyle>
<Labels TextAlign="Center">
<AxisLabelStyle>
<Fill Color="#89A54E">
</Fill>
</AxisLabelStyle>
</Labels>
<GridMajor Visible="True">
</GridMajor>
<GridMinor Visible="False">
</GridMinor>
<cc1:CompositeChartYAxis>
<cc1:CompositeChartYAxis AutoMax="False" AutoMin="False" Compass="West"
Max="300" Text="Rainfall">
<Labels TextAlign="Center">
</Labels>
<GridMajor Visible="True">
</GridMajor>
<GridMinor Visible="False">
</GridMinor>
<cc1:CompositeChartYAxis>
<cc1:CompositeChartYAxis Compass="East">
<Labels TextAlign="Center">
</Labels>
<GridMajor Visible="True">
</GridMajor>
<GridMinor Visible="False">
</GridMinor>
<cc1:CompositeChartYAxis>
</YAxes>
<SeriesList>
<cc1:CompositeChartSeries Label="West" LegendEntry="True" Type="Column"
YAxis="1">
<Data>
<X>
<Values>
<cc1:ChartXData StringValue="Jan" />
<cc1:ChartXData StringValue="Feb" />
<cc1:ChartXData StringValue="Mar" />
<cc1:ChartXData StringValue="Apr" />
<cc1:ChartXData StringValue="May" />
<cc1:ChartXData StringValue="Jun" />
<cc1:ChartXData StringValue="Jul" />
<cc1:ChartXData StringValue="Aug" />
<cc1:ChartXData StringValue="Sep" />
<cc1:ChartXData StringValue="Oct" />
<cc1:ChartXData StringValue="Nov" />
<cc1:ChartXData StringValue="Dec" />
</Values>
</X>
<Y>
<Values>
<cc1:ChartYData DoubleValue="49.9" />
<cc1:ChartYData DoubleValue="71.5" />
<cc1:ChartYData DoubleValue="106.4" />
<cc1:ChartYData DoubleValue="129.2" />
<cc1:ChartYData DoubleValue="144" />
<cc1:ChartYData DoubleValue="176" />
<cc1:ChartYData DoubleValue="135.6" />
<cc1:ChartYData DoubleValue="148.5" />
<cc1:ChartYData DoubleValue="216.4" />
<cc1:ChartYData DoubleValue="194.1" />
<cc1:ChartYData DoubleValue="95.6" />
<cc1:ChartYData DoubleValue="54.4" />
</Values>
</Y>
</Data>
<cc1:CompositeChartSeries>
<cc1:CompositeChartSeries Label="East" LegendEntry="True" Type="Spline"
YAxis="2">
<Data>
<X>
<Values>
<cc1:ChartXData StringValue="Jan" />
<cc1:ChartXData StringValue="Feb" />
<cc1:ChartXData StringValue="Mar" />
<cc1:ChartXData StringValue="Apr" />
<cc1:ChartXData StringValue="May" />
<cc1:ChartXData StringValue="Jun" />
<cc1:ChartXData StringValue="Jul" />
<cc1:ChartXData StringValue="Aug" />
<cc1:ChartXData StringValue="Sep" />
<cc1:ChartXData StringValue="Oct" />
<cc1:ChartXData StringValue="Nov" />
<cc1:ChartXData StringValue="Dec" />
</Values>
</X>
<Y>
<Values>
<cc1:ChartYData DoubleValue="1016" />
<cc1:ChartYData DoubleValue="1016" />
<cc1:ChartYData DoubleValue="1015.9" />
<cc1:ChartYData DoubleValue="1015.5" />
<cc1:ChartYData DoubleValue="1012.3" />
<cc1:ChartYData DoubleValue="1009.5" />
<cc1:ChartYData DoubleValue="1009.6" />
<cc1:ChartYData DoubleValue="1010.2" />
<cc1:ChartYData DoubleValue="1013.1" />
<cc1:ChartYData DoubleValue="1016.9" />
<cc1:ChartYData DoubleValue="1018.2" />
<cc1:ChartYData DoubleValue="1016.7" />
</Values>
</Y>
</Data>
<cc1:CompositeChartSeries>
<cc1:CompositeChartSeries Label="South" LegendEntry="True" Type="Line">
<Data>
<X>
<Values>
<cc1:ChartXData StringValue="Jan" />
<cc1:ChartXData StringValue="Feb" />
<cc1:ChartXData StringValue="Mar" />
<cc1:ChartXData StringValue="Apr" />
<cc1:ChartXData StringValue="May" />
<cc1:ChartXData StringValue="Jun" />
<cc1:ChartXData StringValue="Jul" />
<cc1:ChartXData StringValue="Aug" />
<cc1:ChartXData StringValue="Sep" />
<cc1:ChartXData StringValue="Oct" />
<cc1:ChartXData StringValue="Nov" />
<cc1:ChartXData StringValue="Dec" />
</Values>
</X>
<Y>
<Values>
<cc1:ChartYData DoubleValue="7" />
<cc1:ChartYData DoubleValue="6.9" />
<cc1:ChartYData DoubleValue="9.5" />
<cc1:ChartYData DoubleValue="14.5" />
<cc1:ChartYData DoubleValue="18.2" />
<cc1:ChartYData DoubleValue="21.5" />
<cc1:ChartYData DoubleValue="25.2" />
<cc1:ChartYData DoubleValue="26.5" />
<cc1:ChartYData DoubleValue="23.3" />
<cc1:ChartYData DoubleValue="18.3" />
<cc1:ChartYData DoubleValue="13.9" />
<cc1:ChartYData DoubleValue="9.6" />
</Values>
</Y>
</Data>
<LineMarkers Visible="True">
</LineMarkers>
<cc1:CompositeChartSeries>
</SeriesList>
<Header Compass="North" Text="Average Monthly Weather Data"></Header>
<Footer Compass="South" Visible="False"></Footer>
<Axis>
<X>
<GridMajor Visible="True"></GridMajor>
<GridMinor Visible="False"></GridMinor>
</X>
<Y Visible="False" Compass="West">
<Labels TextAlign="Center"></Labels>
<GridMajor Visible="True"></GridMajor>
<GridMinor Visible="False"></GridMinor>
</Y>
</Axis>
<cc1:C1CompositeChart>
|
|
