Wednesday 13 March 2019

Chart with Dynamic Values

Use namespace :

using System.Web.Services;

Paste this in design page

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

    <script type="text/javascript" src="https://www.google.com/jsapi"></script>

    <script type="text/javascript">
        google.load("visualization", "1", { packages: ["corechart"] });
        google.setOnLoadCallback(drawChart);
        function drawChart() {
            var options = {
                title: 'CHART',
                width: 400,
                height: 400,
                bar: { groupWidth: "95%" },
                legend: { position: "none" },
                isStacked: true
            };
            var Lbl_Text = $('#<%=Label3.ClientID %>').text();
            debugger;
            $.ajax({
                type: "POST",
                url: "Chart.aspx/GetChartData",
                data: "{Lbl_Text:'" + Lbl_Text + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (r) {
                    debugger;
                    var data = google.visualization.arrayToDataTable(r.d);
                    //var chart = new google.visualization.LineChart($("#chart")[0]);   //***BarChart***
                    var chart = new google.visualization.PieChart($("#chart")[0]); //***PieChart***
                    chart.draw(data, options);
                },
                failure: function (r) {
                    alert(r.d);
                },
                error: function (r) {
                    alert(r.d);
                }
            });
        }
    </script>
     
    <div id="chart" style="width: 500px; height: 500px;">
    </div>

Paste this in your c# page

public static List<object> GetChartData(string Lbl_Text)
    {
        string query = "select Share,Value  from Table4 where Date='" + Lbl_Text + "';"
        string constr = ConfigurationManager.ConnectionStrings["dbcn"].ConnectionString;
        List<object> chartData = new List<object>();
        chartData.Add(new object[]
    {
        "Share", "Value"
    });
        using (SqlConnection con = new SqlConnection(constr))
        {
            using (SqlCommand cmd = new SqlCommand(query))
            {
                cmd.CommandType = CommandType.Text;
                cmd.Connection = con;
                con.Open();
                using (SqlDataReader sdr = cmd.ExecuteReader())
                {
                    while (sdr.Read())
                    {
                        chartData.Add(new object[]
                    {
                        sdr["Share"], sdr["Value"]
                    });
                    }
                }
                con.Close();
                return chartData;
            }
        }
    }

No comments:

Post a Comment