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



ASP.NET C#.NET GridViewRow with ASP.NET CheckBox control


by on 19. May 2011 13:55

When developing with C#.NET in Visual Studio, developers work with the ASP.NET GridView control, there are many cases when needing the ability to check each row in a GridView in order to call a function on button click or even on CheckChanged. In my case, I was needing to allow for the user to delete multiple records at once, either by selecting all or by individually checking each check box.

 

So, here we go:


In the .aspx page where you have your GridView control, you should have the following:

 

 

<asp:GridView ID="GridView1" runat="server" DataSourceID="DSN">

 

<Columns>

 

</Columns>

 

</asp:GridView>

 

 

 

 

Inside the <Columns> node, you should add the following code:


 

     <asp:TemplateField>

      <HeaderTemplate>

       <asp:CheckBox ID="cbSelectAll" runat="server" Text="All" AutoPostBack="true"

                     OnCheckedChanged="chkSelectAll_CheckedChanged" />

      </HeaderTemplate>

      <ItemTemplate>

         <asp:CheckBox ID="cb" runat="server"></asp:CheckBox>

      </ItemTemplate>

     </asp:TemplateField>

 

 

 

 

 

After adding the above code, it should look as so:


 

 

 

    <asp:GridView ID="GridView1" runat="server" DataSourceID="DSN">

 

    <Columns>

     <asp:TemplateField>

      <HeaderTemplate>

         <asp:CheckBox ID="cbSelectAll" runat="server"

                       Text="All" AutoPostBack="true"

                       OnCheckedChanged="chkSelectAll_CheckedChanged" />

      </HeaderTemplate>

      <ItemTemplate>

         <asp:CheckBox ID="cb" runat="server"></asp:CheckBox>

      </ItemTemplate>

     </asp:TemplateField>

    </Columns>

 

    </asp:GridView>

 

 

 

 

 

Now, in the code behind file, the .aspx.cs file, you will need to add the following method(s) in order to allow for select all on that column and a button click event. See below:


    

    protected void chkSelectAll_CheckedChanged(object sender, EventArgs e)

    {

        CheckBox checkbox;

        foreach (GridViewRow row in GridView1.Rows)

        {

            checkbox = (CheckBox)(row.Cells[0].FindControl("cb"));

            checkbox.Checked = ((CheckBox)sender).Checked;

        }

    }


In my particular example, I had a button on the .aspx page that was clicked once all rows were checked, to fire and grab the DataKey of each row and update the record in the database, so you may or may not find the following useful.

   

    protected void btnDeleteSelected_Click(object sender, EventArgs e)

    {

        foreach (GridViewRow r in GridView1.Rows)

        {

            String ID = GridView1.DataKeys[r.RowIndex].Values["ID"].ToString();

            CheckBox cb = ((CheckBox)r.Cells[0].FindControl("cb"));

            if (cb.Checked)

            {

                //write your SQL Connection code here

            }

        }

        GridView1.DataBind();

    }

 

 

 

 

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

Tags:

ASP.NET | C#.NET | Troubleshooting | Visual Studio 2005 | Visual Studio 2008 | Web hosting | Websites

C# - ASP.NET - Use FindControl on TemplateField ItemTemplate


by on 11. March 2011 20:46

Say for instance you have a

 

<asp:HyperLink ID="HyperLink1" runat="server" Text="Hyperlink"></asp:HyperLink>

 

 control on in you TemplateField ItemTemplate of a GridView control, and you need to some how modify the NavigateURL property of that control. You can utilize the FindControl function of the Gridview as so:

 

protected void Page_Load(object sender, EventArgs e)

{

 

    String NavigateURL =

   ((HyperLink)NameOfYourGridView1.FindControl("HyperLink1")).NavigateUrl;

 

}

 

If you try and use this on Page_Load or even in the GridView1_OnDataBound event, you will more than likely get Object reference not set to an instance of an object error. The key in using this properly is going to be in the OnRowDataBound event.

See, every row has the HyperLink control on it and how does it know which HyperLink to find in the GridView for modification purposes? It doesn't. So we must call this in the OnRowDataBound event as so:

 

 

    protected void GridView1_OnRowDataBound(object sender, GridViewRowEventArgs e)

 

    {

 

      if ((e.Row.FindControl("HyperLink1") != null))

      {         

          //this demonstrates how to append a string to a hyperlink or url using

 StringBuilder class

          StringBuilder url = new StringBuilder();         

          url.Append((HyperLink)e.Row.FindControl("HyperLink1")).NavigateURL);

      }

    }

 

 

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

 

www.z5concepts.com

 

Tags:

C#.NET | Visual Studio 2008 | Websites

C#.NET - ASP.NET : Date Format in Item Template with Bind()


by on 25. February 2011 21:29

The following information is to show how to use the date format in item template in ASP.NET with C#.

To format the date when calling the Bind() function on your .aspx page, see below for details:

 

 

<asp:TextBoxID="txtBox" runat="server" Text='<%# Bind("DateDataField", "{0:d}") %>'>

</asp:TextBox>

 

 

 

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

Tags:

Troubleshooting | Visual Studio 2005 | Visual Studio 2008 | Web hosting | Websites

C#.NET - Converting milliseconds since Epoch to DateTime


by on 14. September 2010 02:42

     Have you ever retrieved a long string of numbers for a datetime before? Chances are that this string of numbers is the number of milliseconds since Epoch, aka Unix Date. According to Wikipedia, Epoch or Unix date is "defined as the number of seconds elapsed since midnight proleptic Coordinated Universal Time (UTC) of January 1, 1970. Yes, believe it or not, this sometimes happens when trying to retrieve the datetime of some piece of data.

     C#.NET allows for you to convert this long string of milliseconds to retrieve a more user friendly date and time. Depending on Daylight Savings Time, the converted time may be off by an hour, which you can modify the code to add/subtract an hour if needed. You can see this in the code below.

 

 


 

 

    static string epochTime(string d)

    {

 

        long e = long.Parse(d);

        DateTime dt = DateTime.Parse("1970-01-01").AddMilliseconds(e);

        dt = dt.AddHours(-4);   // This is to allow for specific time zones.

        d = dt.ToString();

        return d;

 

    }

 

 

      If you have any questions or need help, feel free to e-mail me at dj@z5concepts.com.

 

Tags:

Troubleshooting | Visual Studio 2005 | Visual Studio 2008 | Websites

ASP.NET C#.NET - Using CausesValidation


by on 13. September 2010 23:03

    In ASP.NET, when using the RequiredFieldValidator control on a textbox, you must always enter a value in the textbox before postback occurs. In the event you have a form which has a textbox that cannot be null or must have a value, you want to use the ASP.NET RequiredFieldValidator control.

    On most forms, you typically have a submit button. You also should have either a cancel button, or a reset button of some sort to either refresh the page, or clear the form fields. If this is the case, and you have a requiredfieldvalidator control tied to one of your textbox controls, then whenever the textbox is empty, and a user clicks cancel, your requiredfieldvalidator control will kick in and state you must have a value in the textbox.

    There is a way around this and that is using the "CausesValidation" property. CausesValidation can be added to many different ASP.NET controls. In this instance, you will want to add it to your cancel button control. See example below for more details.

 

 


       

   

  <asp:TextBox ID="TextBox1" runat="server"> </asp:TextBox>

   <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"

                               ErrorMessage="RequiredFieldValidator"

                               ControlToValidate="TextBox1">

   </asp:RequiredFieldValidator>

   <asp:Button ID="btnSubmit" runat="server" Text="Submit" />

   <asp:Button ID="btnCancel" runat="server" Text="Cancel" CausesValidation="false" />

 

 

   

     If you do not understand how this works or need help, please comment, and I'd be glad to help. Or feel free to go to our contact page and send us an e-mail.

 

 

Tags:

ASP.NET | C#.NET | Troubleshooting | Visual Studio 2005 | Visual Studio 2008 | Websites

Installing BlogEngine.Net in Visual Studio


by on 9. January 2010 07:26

I'm assuming if you are viewing this, you are experiencing some issues setting up BlogEngine.Net in your website. Your error may be along the lines of:

1. 500 - Internal Server Error

or

2. It is an error to use a section registered as allowDefinition=’MachineToApplication’ beyond application level.  This error can be caused by a virtual directory not being configured as an application in IIS.

Other posts have stated the issues of having sub-folders that have multiple web.config files, however, that is not necessarily the issue.

Goal: To integrate BlogEngine.Net into existing website in Visual Studio 2008 or Visual Studio 2005

Steps:

1. Separate your site's root folder from the blog folder.

2. Start Visual Studio 2008 or Visual Studio 2005 and go to File > Open Website.

3. Locate your blog folder and select Open.

4. Build website and View in browser. (Just to make sure everything is working accordingly)

5. On the Main toolbar, go to Website > Copy Website. (You can edit styles later, but for now, lets get it out on the web server.)

6. Once you connect via FTP, upload the files to your blog directory on your site.

7. Done! You should be running as normal.

 

*If you have any issues with this solution, or additional questions, feel free to ask/comment away.

 

www.z5concepts.com

 

Tags:

BlogEngine.Net | Troubleshooting | Visual Studio 2005 | Visual Studio 2008 | Websites


Theme by Z5 Concepts