Thursday, July 10, 2014

Chart in asp.net


1:By Google Api
    <script type="text/javascript" src="//www.google.com/jsapi"></script>
    <script type="text/javascript">

        google.load('visualization', '1', { packages: ['corechart'] });
    </script>
    <script type="text/javascript">
        function drawVisualization(dataValues) {

            var data = google.visualization.arrayToDataTable([
                 ['drgrg', 'Pending', 'Rejected', 'Approved'],
                    ['Scheme-2', 3, 5, 8],
                      ['Scheme-1', 2, 3, 5]
            ]);
            new google.visualization.BarChart(document.getElementById('visualization')).
               draw(data,
                    {
                        title: "Application Status Chart",
                        width: 500, height: 350,
                        vAxis: { title: "Scholarship Scheme" },
                        hAxis: { title: "Number of Application" }
                    }
               );
        }
        google.setOnLoadCallback(drawVisualization);

    </script>

        <div id="visualization" style="margin-left: 300px; margin-bottom: 50px;"></div>




2:By Dot net Control


 <div id="ScholarChart">
                    <asp:Chart ID="Chart1" runat="server" BorderlineWidth="0" Width="500px" Visible="true" Palette="None" PaletteCustomColors="0, 192, 0; Blue; 192, 0, 0" ImageType="Jpeg">
                        <series>
                 
                    <asp:Series Name="Series1"  XValueMember="SchemeName" YValueMembers="ApprovedApplication"
                        LegendText="Approved Application" IsValueShownAsLabel="false"  LabelToolTip="Approved" ChartArea="ChartArea1"
                        MarkerBorderColor="#DBDBDB">
                       <SmartLabelStyle  MovingDirection="Left" IsMarkerOverlappingAllowed="true"/>
                    </asp:Series>
                   
                    <asp:Series  Name="Series2" XValueMember="SchemeName" YValueMembers="PendingApplication"
                        LegendText="Pending Application" IsValueShownAsLabel="false"  LabelToolTip="Pending" IsVisibleInLegend="true"   ChartArea="ChartArea1"
                        MarkerBorderColor="#DBDBDB">
                    </asp:Series>

                    <asp:Series Name="Series3" XValueMember="SchemeName" YValueMembers="RejectedApplication"
                        LegendText="Rejected Application"   IsValueShownAsLabel="false" LabelToolTip="Reject" IsVisibleInLegend="true"  ChartArea="ChartArea1"
                        MarkerBorderColor="#DBDBDB">
                    </asp:Series>

                   
                </series>
                        <legends>
                    <asp:Legend Title="Status" />
                </legends>
                        <titles>
                    <asp:Title Docking="Bottom"  Text="Scheme Name" />
                             <asp:Title Docking="Left"  Text="No. Of Applicant" />
                </titles>
                        <chartareas>
                    <asp:ChartArea Name="ChartArea1" >
                       

                    </asp:ChartArea>
                </chartareas>
                    </asp:Chart>
                </div>



Code Behind:


 protected void Page_Load(object sender, EventArgs e)
        {
            if (!Page.IsPostBack)
            {          
                    Chart1.DataSource = gettable();
                    Chart1.DataBind();                
           
            }
        }
        public DataTable gettable() {
            DataTable dt = new DataTable();
            dt.Columns.Add("Schemename", typeof(string));
            dt.Columns.Add("PendingApplication",  typeof(int));
            dt.Columns.Add("RejectedApplication",  typeof(int));
            dt.Columns.Add("ApprovedApplication",  typeof(int));          
            dt.Rows.Add("Sheme-1", 4,5,8);
              dt.Rows.Add("Sheme-2", 2,7,4);
            return dt;
        }

No comments:

Post a Comment