Z5 Concepts

ASP.NET C#.Net - Microsoft Chart Controls with Two Y-Axes


by on 2. June 2011 15:00

In ASP.NET, you may want to implement a solution with the Microsoft Chart controls that has multiple series, but have two different scales for the Y-Axis. First of all, your “SelectCommand” must return the correct number of columns, with data, for this to work smoothly. Secondly, you must make sure the properties are set properly for each series for the Chart controls to know how to display them. Please see my example below.

 

<asp:Chart ID="Chart5" runat="server" Width="750px" Height="500px"

                       Palette="BrightPastel" DataSourceID="SQLDataSource1">

 

 <titles>

 

  <asp:title Name="Title1" Text="Our Chart"

             ShadowColor="32, 0, 0, 0" Font="verdana, 14.25pt, style=Bold"

             ShadowOffset="3" Alignment="TopCenter" ForeColor="SteelBlue">

  </asp:title>

  <asp:title Name="Subtitle2" Text="Me vs. You"

             ShadowColor="32, 0, 0, 0" Font="verdana, 10pt, style=Bold"                                                     

             ShadowOffset="3" Alignment="TopCenter" ForeColor="SteelBlue">                         

  </asp:title>

 </titles>

 

 <borderskin skinstyle="Emboss"></borderskin>

 

   <series>

    <asp:Series Name="You" ChartArea="ChartArea1" ChartType="column"

               IsValueShownAsLabel="true" XValueMember="yourxvalue_datacolumn"

               YValueMembers="yourY1value_datacol">

    </asp:Series>

    <asp:Series Name="Me" Color="Green" ChartArea="ChartArea1"

                IsValueShownAsLabel="true"  ChartType="column"

                XValueMember="yourxvalue_datacolumn"

                YValueMembers="yourY2value_datacol" YAxisType="Primary">

    </asp:Series>

    <asp:Series Name="Overall" Color="Goldenrod" ChartArea="ChartArea1"

               LabelFormat="{0:##0}%" IsValueShownAsLabel="true" BorderColor="Goldenrod"

               BorderWidth="3" ChartType="Line" XValueMember="yourxvalue_datacolumn"

               YValueMembers="yourY3value_datacol" YAxisType="Secondary">

    </asp:Series>                              

   </series>

 

     <chartareas>

<asp:ChartArea Name="ChartArea1" BackColor="Transparent" >

        <AxisX Interval="1" Title="XAxis Title" >

          <MajorGrid LineColor="Silver" />

          <LabelStyle font="verdana, 10pt" />

        </AxisX>

        <AxisY Title="Y1 Axis Title">

          <MajorGrid LineColor="Silver" />

          <MajorTickMark LineColor="Black" LineDashStyle="Dash" LineWidth="3" />

          <LabelStyle font="verdana, 10pt" />

        </AxisY>

        <AxisY2 Title="Y2 Axis Title" Minimum="0" Maximum="100">

        <LabelStyle ForeColor="Black" font="verdana, 10pt" />

        </AxisY2>

       </asp:ChartArea>

       </chartareas>

 

</asp:Chart>

 

<asp:SQLDataSource ID="SQLDataSource1" runat="server"

                  ConnectionString="<%$ ConnectionStrings:default %>"

                  SelectCommand="YourStoredProcedure" SelectCommandType="StoredProcedure">

</asp:SQLDataSource>

 

 

 

 

In the first section, you can set your width and height property for better viewing and needs to be relevant to the page you are displaying them on. You also must set your DataSourceID property to whatever data source you are using. There are also different palettes to choose from to spice it up a bit.

<asp:Chart ID="Chart5" runat="server" Width="750px" Height="500px"

                       Palette="BrightPastel" DataSourceID="SQLDataSource1">

 

Within the “Chart” node, there are several different sub-nodes, such as the “Titles” node. Here we get to set the titles and sub-titles for the particular chart to give a brief overview of what the data in the chart is displaying. You can modify the font however you like. The alignment property allows you to move it around the top of the chart.

<titles>

 

  <asp:title Name="Title1" Text="Our Chart"

             ShadowColor="32, 0, 0, 0" Font="verdana, 14.25pt, style=Bold"

             ShadowOffset="3" Alignment="TopCenter" ForeColor="SteelBlue">

  </asp:title>

  <asp:title Name="Subtitle2" Text="Me vs. You"

             ShadowColor="32, 0, 0, 0" Font="verdana, 10pt, style=Bold"                                                     

             ShadowOffset="3" Alignment="TopCenter" ForeColor="SteelBlue">                         

  </asp:title>

 </titles>

 

Also under the Chart node, you have the series node which sets up the data on the chart for you. In the section below, you will see that you will need to know the columns of data you will want to represent for each series.

In each <asp:Series> node, you set up the “ChartType”, “XValueMember”, and the “YValueMember.” The ChartType can be many different types, but you usually want each series to have the same ChartType and in this case, we have it as column. Now for the third series, our second Y-Axis, we will use a ChartType of “Line” for a better representation of the data for that series.

Now remember, we are setting up this chart to have two separate scales for the second and third series. So notice the additional property YAxisType. In the second series we have it set to “Primary” which will be the main Y-Axis on the left of the chart, and in the third, we have it set to “Secondary” which will display on the right of the chart.

There are also other properties you can add, such as the LabelFormat. In this case, we have a percentage, and we want the label on the chart to have the % sign displayed. 

<series>

    <asp:Series Name="You" ChartArea="ChartArea1" ChartType="column"

               IsValueShownAsLabel="true" XValueMember="yourxvalue_datacolumn"

               YValueMembers="yourY1value_datacol">

    </asp:Series>

    <asp:Series Name="Me" Color="Green" ChartArea="ChartArea1"

                IsValueShownAsLabel="true"  ChartType="column"

                XValueMember="yourxvalue_datacolumn"

                YValueMembers="yourY2value_datacol" YAxisType="Primary">

    </asp:Series>

    <asp:Series Name="Overall" Color="Goldenrod" ChartArea="ChartArea1"

               LabelFormat="{0:##0}%" IsValueShownAsLabel="true" BorderColor="Goldenrod"

               BorderWidth="3" ChartType="Line" XValueMember="yourxvalue_datacolumn"

               YValueMembers="yourY3value_datacol" YAxisType="Secondary">

    </asp:Series>                              

</series>

 

 

 

Lastly, we get to the section of the ChartAreas which does the beautifying of our scales. J

In order for you to have two Y-Axes, you need this section in your code. Most of it is pretty self explanatory. The key thing to notice in <AxisY2> is the properties, Minimum and Maximum. This will allow you to set the scale for your second Y-Axis. Typically, the primary Y-Axis can range from 0-10000, but your secondary Y-Axis may only range from 0-100 (for percent anyhow). Without this range being set, chances are you won’t see the Y2-Axis, depending on the primary Y-Axis range.

<chartareas>

<asp:ChartArea Name="ChartArea1" BackColor="Transparent" >

        <AxisX Interval="1" Title="XAxis Title" >

          <MajorGrid LineColor="Silver" />

          <LabelStyle font="verdana, 10pt" />

        </AxisX>

        <AxisY Title="Y1 Axis Title">

          <MajorGrid LineColor="Silver" />

          <MajorTickMark LineColor="Black" LineDashStyle="Dash" LineWidth="3" />

          <LabelStyle font="verdana, 10pt" />

        </AxisY>

        <AxisY2 Title="Y2 Axis Title" Minimum="0" Maximum="100">

        <LabelStyle ForeColor="Black" font="verdana, 10pt" />

        </AxisY2>

       </asp:ChartArea>

</chartareas>

 

 

 

 

If you have any questions or problems, feel free to e-mail me at DJ@z5concepts.com



Comments are closed


Theme by Z5 Concepts