locked
MS Charts Reporting Based On DropDown List RRS feed

  • Question

  • User1171172248 posted

    Hi,

    I am working on a employee performance web application(C#), where i want to show reports using MS Charts. I want to filter data from database and bind the chart with that data. I have a table with EMP, MONTH, REVENUE columns. Now i want to use two drop down for Month & Employee and filter data and then display what revenue a selected individual employee has made during the selected month.

    Please help me write the piece of code for this. Thanks in anticipation

    Regards.

    Tuesday, July 5, 2016 7:58 AM

Answers

  • User1559292362 posted

    Hi circut009,

    What if i want to use the bar graph, how can i implement that.

    Please select the chart control, then please chick right arrow (please see images). then at carttype option, you could choose bar graph, and the code like below:

    <asp:Chart ID="Chart1" runat="server">
                <Series>
                    <asp:Series Name="Series1" ChartType="Bar"></asp:Series>
                </Series>
                <ChartAreas>
                    <asp:ChartArea Name="ChartArea1"></asp:ChartArea>
                </ChartAreas>
            </asp:Chart>

    Best regards,

    Cole Wu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, July 17, 2016 2:02 AM

All replies

  • User1559292362 posted

    Hi circut009,

    I am working on a employee performance web application(C#), where i want to show reports using MS Charts. I want to filter data from database and bind the chart with that data. I have a table with EMP, MONTH, REVENUE columns. Now i want to use two drop down for Month & Employee and filter data and then display what revenue a selected individual employee has made during the selected month.

    According to your description, it seems that you could use ado.net to filter the data from database, I create a simple demo as below for your reference.

    ASPX

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ChatWithDDLFilter.aspx.cs" Inherits="ADONETDEMO.ChartDemo.ChatWithDDLFilter" %>
    
    <%@ Register Assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" Namespace="System.Web.UI.DataVisualization.Charting" TagPrefix="asp" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:DropDownList ID="DropDownList1" runat="server">
                <asp:ListItem>select</asp:ListItem>
                <asp:ListItem>a</asp:ListItem>
            </asp:DropDownList>
            <asp:DropDownList ID="DropDownList2" runat="server">
                <asp:ListItem>select</asp:ListItem>
                <asp:ListItem>1</asp:ListItem>
            </asp:DropDownList>
            <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
    
            <asp:Chart ID="Chart1" runat="server">
                <Series>
                    <asp:Series Name="Series1"></asp:Series>
                </Series>
                <ChartAreas>
                    <asp:ChartArea Name="ChartArea1"></asp:ChartArea>
                </ChartAreas>
            </asp:Chart>
        </div>
        </form>
    </body>
    </html>
    

    #Code Behind.

    using System;
    using System.Data;
    using System.Data.SqlClient;
    
    namespace ADONETDEMO.ChartDemo
    {
        public partial class ChatWithDDLFilter : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                if (!IsPostBack)
                {
                    string connstr = @"Data Source=(localdb)\MSSQLLocalDB;Initial Catalog=AspDotNetDemo;Integrated Security=True";
                    string sqlStrig = @"select * from ChartTable";
                    using (SqlConnection conn = new SqlConnection(connstr))
                    {
                        try
                        {
                            SqlCommand myCommand = new SqlCommand(sqlStrig, conn);
                            conn.Open();
                            SqlDataReader myReader = myCommand.ExecuteReader(CommandBehavior.CloseConnection);
                            // Specify the Name column to be used for point's X values. 
                            Chart1.DataBindTable(myReader, "REVENUE");
    
                            myReader.Close();
                        }
                        catch (Exception ex)
                        {
                            throw ex;
                        }
                    }
                    
                }
            }
    
    
    
            protected void Button1_Click(object sender, EventArgs e)
            {
                int month = 0;
                int.TryParse(DropDownList2.SelectedValue,out month);
                string emp = DropDownList1.SelectedValue;
                string connstr = @"Data Source=(localdb)\MSSQLLocalDB;Initial Catalog=AspDotNetDemo;Integrated Security=True";
                string sqlStrig = @"select * from ChartTable where emp = @emp and month=@month";
                using (SqlConnection conn = new SqlConnection(connstr))
                {
                    try
                    {
                        SqlCommand myCommand = new SqlCommand(sqlStrig, conn);
                        myCommand.Parameters.Add("@month", SqlDbType.Int);
                        myCommand.Parameters["@month"].Value = month;
    
                        myCommand.Parameters.Add("@emp", SqlDbType.VarChar, 50);
                        myCommand.Parameters["@emp"].Value = emp;
    
                        conn.Open();
                        SqlDataReader myReader = myCommand.ExecuteReader(CommandBehavior.CloseConnection);
                        // Specify the Name column to be used for point's X values. 
                        Chart1.DataBindTable(myReader, "REVENUE");
    
                        myReader.Close();
                    }
                    catch (Exception ex)
                    {
                        throw ex;
                    }
                }
    
               
            }
        }
    }

    Best regards,

    Cole Wu

    Wednesday, July 6, 2016 3:26 AM
  • User1171172248 posted

    Thanks, let me try it & i will get back to you with the results....

    Wednesday, July 6, 2016 2:25 PM
  • User1171172248 posted

    Bravoo...The code worked 

    What if i want to use the bar graph, how can i implement that.

    Regards

    Thursday, July 7, 2016 6:55 PM
  • User1559292362 posted

    Hi circut009,

    What if i want to use the bar graph, how can i implement that.

    Please select the chart control, then please chick right arrow (please see images). then at carttype option, you could choose bar graph, and the code like below:

    <asp:Chart ID="Chart1" runat="server">
                <Series>
                    <asp:Series Name="Series1" ChartType="Bar"></asp:Series>
                </Series>
                <ChartAreas>
                    <asp:ChartArea Name="ChartArea1"></asp:ChartArea>
                </ChartAreas>
            </asp:Chart>

    Best regards,

    Cole Wu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, July 17, 2016 2:02 AM