Saturday, 3 August 2013

Dynamic Pie-Chart

Create table
==========
CREATE TABLE [dbo].[tb_student_average](
      [id] [bigint] IDENTITY(1,1) NOT NULL,
      [student_name] [varchar](50) COLLATE SQL_Latin1_General_CP1_CI_AS NULL,
      [average_marks] [decimal](18, 0) NULL
)

aspx Page
========
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Pie_Chart.aspx.cs" Inherits="Pie_Chart" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Dynamic pie Chart</title>
     <script src="GoogleApi.js" type="text/javascript"></script>
    </head>
<body>
    <form id="form1" runat="server">
    <div>

        <asp:Literal ID="lt" runat="server"></asp:Literal>
    </div>
    <div id="chart_div"></div>

    </form>
   </body>
</html>

.Cs Page
=======
  // complete code of Visualization: Combo Chart
    SqlConnection con = new SqlConnection();
    // here am declairing the stringbuilder class
    StringBuilder str = new StringBuilder();
    protected void Page_Load(object sender, EventArgs e)
    {
        // here i am declare connection
        con.ConnectionString = ConfigurationManager.ConnectionStrings["StrConn"].ConnectionString;
        con.Open();
        if (Page.IsPostBack == false)
        {
            // here i am calling function  chart_bind(); in the page load event of the page
            chart_bind();
        }


    }
    private void chart_bind()
    {
        // here i am using SqlDataAdapter for the sql server select query
        SqlDataAdapter adp = new SqlDataAdapter("select top(7)* from tb_student_average", con);
        // here am taking datatable
        DataTable dt = new DataTable();
        try
        {
            // here datatale dt is fill wit the adp
            adp.Fill(dt);
            // this string m catching in the stringbuilder class
            // in the str m writing same javascript code that is given by the google.

            str.Append(@"<script type=text/javascript>  google.load('visualization', '1', {'packages':['corechart']});
                     google.setOnLoadCallback(drawChart);
                     function drawChart() {
                     var data = new google.visualization.DataTable();");
            // but m changing  only below line
            // (" data.addColumn('string'(datatype), 'student_name'(column name));");
            // str.Append(" data.addColumn('number'(datatype), 'average_marks'(column name));");
            // my data that will come from the sql server
            str.Append(" data.addColumn('string', 'student_name');");
            str.Append(" data.addColumn('number', 'average_marks');");
            str.Append(" data.addRows([");
            // here i am declairing the variable i in int32 for the looping statement
            Int32 i;
            // loop start from 0 and its end depend on the value inside dt.Rows.Count - 1
            for (i = 0; i <= dt.Rows.Count - 1; i++)
            {
                // here i am fill the string builder with the value from the database
                str.Append("['" + (dt.Rows[i]["student_name"].ToString()) + "'," + dt.Rows[i]["average_marks"].ToString() + "],");
            }
            // other all string is fill according to the javascript code
            str.Append(" ]);");
            str.Append(" var chart = new google.visualization.PieChart(document.getElementById('chart_div'));");
            //  str.Append(" var chart = new google.visualization.BarChart(document.getElementById('chart_div'));");
            str.Append("chart.draw(data, {width: 1200, height: 500,title: 'Students Record'});}");
            str.Append("</script>");
            // here am using literal conrol to display the complete graph
            lt.Text = str.ToString().TrimEnd(',');
            con.Close();
        }
        catch { }
    }

No comments:

Post a Comment