locked
Google Chart on page load RRS feed

  • Question

  • User2101416554 posted

    Google chart on page load ...

    The below is my code which is working fine ... Instead of loading on dropdown list index change, I would like to load the chart on page load itself. How to do so?

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="GoogleChart.aspx.cs" Inherits="GoogleChart" %>
    
    <!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 runat="server">
        <title></title>
    
      
    
    </head>
    <body>
        <form id="form1" runat="server">
       
          <center>
        <asp:DropDownList ID="DrpMonth" runat="server" >
       
            <asp:ListItem Text="Finland" Value="Finland" ></asp:ListItem>
            <asp:ListItem Text="Brazil" Value="Brazil" Selected="True"></asp:ListItem>
            <asp:ListItem Text="USA" Value="USA"></asp:ListItem>
            <asp:ListItem Text="Italy" Value="Italy"></asp:ListItem>
            <asp:ListItem Text="Germany" Value="Germany"></asp:ListItem>
        </asp:DropDownList>
    </center>
    
    <div id="chart" style="width: 900px; height: 500px;">
    </div>
    
    
       
    
    
        </form>
    
       
    
     
      <script src="https://www.google.com/jsapi" type="text/javascript"></script>
    
     
      <script src="jquery.min.js" type="text/javascript"></script>
      <script src="code.min.js" type="text/javascript"></script>
    
    
    </body>
    </html>
    
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Data;
    using System.Web.Services;
    using System.Configuration;
    using System.Data.SqlClient;
    
    public partial class GoogleChart : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
    
        }
    
        public class trafficSourceData
        {
            public string label { get; set; }
            public string value { get; set; }
            public string color { get; set; }
            public string hightlight { get; set; }
        }
    
        [WebMethod]
        public static List<object> GetChartData(string country)
        {
            string query = "SELECT ShipCity, COUNT(orderid) TotalOrders FROM Orders WHERE ShipCountry = @Country GROUP BY ShipCity";
            string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
            List<object> chartData = new List<object>();
            chartData.Add(new object[] { "ShipCity", "TotalOrders" });
            using (SqlConnection con = new SqlConnection(constr))
            {
                using (SqlCommand cmd = new SqlCommand(query))
                {
                    cmd.CommandType = CommandType.Text;
                    cmd.Connection = con;
                    cmd.Parameters.AddWithValue("@Country", country);
                    con.Open();
                    using (SqlDataReader sdr = cmd.ExecuteReader())
                    {
                        while (sdr.Read())
                        {
                            chartData.Add(new object[] { sdr["ShipCity"], sdr["TotalOrders"] });
                        }
                    }
                    con.Close();
                    return chartData;
                }
            }
        }
    
    }
    JS file
    
    function drawChart() { var a = $("#DrpMonth option:selected").val(); $.ajax({ type: "POST", url: "ChartWithoutPostback.aspx/GetChartData", data: "{country: '" + a + "'}", contentType: "application/json; charset=utf-8", dataType: "json", success: function (t) { var o = google.visualization.arrayToDataTable(t.d), e = new google.visualization.PieChart($("#chart")[0]); e.draw(o, { title: a + " Distribution", is3D: !0 }); var n = 0, r = setInterval(function () { n += 1, o.setValue(0, 1, n), o.setValue(1, 1, 100 - n), e.draw(o, { title: a + " Distribution", is3D: !0, chartArea: { left: "5%", width: "90%", height: 350 }, slices: { 1: { offset: .2 }, 2: { offset: .15 }, 3: { offset: .16 }, 4: { offset: .12}} }), n > 74 && clearInterval(r) }, 30) }, failure: function (a) { alert(a.d) }, error: function (a) { alert(a.d) } }) } google.load("visualization", "1", { packages: ["corechart"] }), google.setOnLoadCallback(function () { $("#DrpMonth").on("change", function () { drawChart() }) });
    
    // colors: ["#99B898", "#FECEA8", "#FF847C", "#E84A5F", "#474747"]

    I have used northwind database ...

    Friday, January 10, 2020 10:54 AM

Answers

  • User-1519014291 posted

    Hi, umerfaiz123

    Try to use the following script this is worked for me and when the page loaded ( var a = $("#DrpMonth option:selected").val(); ) get select value from the DrpMonth DropDownList

     Hope this helps you.

    <script type="text/javascript">
    
              
            $(document).ready(function () { 
    
               
                var a = $("#DrpMonth option:selected").val();
    
    
                $.ajax({
                    type: "POST", url: "GoogleChart.aspx/GetChartData", data: "{country: '" + a + "'}", contentType: "application/json; charset=utf-8", dataType: "json", success: function (t) { var o = google.visualization.arrayToDataTable(t.d), e = new google.visualization.PieChart($("#chart")[0]); e.draw(o, { title: a + " Distribution", is3D: !0 }); var n = 0, r = setInterval(function () { n += 1, o.setValue(0, 1, n), o.setValue(1, 1, 100 - n), e.draw(o, { title: a + " Distribution", is3D: !0, chartArea: { left: "5%", width: "90%", height: 350 }, slices: { 1: { offset: .2 }, 2: { offset: .15 }, 3: { offset: .16 }, 4: { offset: .12 } } }), n > 74 && clearInterval(r) }, 30) }, failure: function (a) { alert(a.d) }, error: function (a) { alert(a.d) }
                })
    
    
                
    
            });
    
             
         
            google.load("visualization", "1", { packages: ["corechart"] }),
                google.setOnLoadCallback(function () { $("#DrpMonth").on("change", function () { drawChart() }) });
    
             
    
            function drawChart() {
    
    
    
                var a = $("#DrpMonth option:selected").val();
    
                $.ajax({
                    type: "POST", url: "GoogleChart.aspx/GetChartData", data: "{country: '" + a + "'}", contentType: "application/json; charset=utf-8", dataType: "json", success: function (t) { var o = google.visualization.arrayToDataTable(t.d), e = new google.visualization.PieChart($("#chart")[0]); e.draw(o, { title: a + " Distribution", is3D: !0 }); var n = 0, r = setInterval(function () { n += 1, o.setValue(0, 1, n), o.setValue(1, 1, 100 - n), e.draw(o, { title: a + " Distribution", is3D: !0, chartArea: { left: "5%", width: "90%", height: 350 }, slices: { 1: { offset: .2 }, 2: { offset: .15 }, 3: { offset: .16 }, 4: { offset: .12 } } }), n > 74 && clearInterval(r) }, 30) }, failure: function (a) { alert(a.d) }, error: function (a) { alert(a.d) }
                })
    
    
            }
    
             
    
    
    
    
           
                 
      
    
        </script>
    

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, January 10, 2020 6:04 PM