توضیحات و دانلود

نمونه نمودار گوگل (Pie - Doughnut) با پایگاه داده در ASP.Net MVC
0 0
نمونه نمودار گوگل (Pie - Doughnut) با پایگاه داده در ASP.Net MVC

با سلام در این مقاله، با مثال، نحوه استفاده، پیاده سازی و جمع آوری نمودارها از پایگاه داده با استفاده از API نمودارهای گوگل در ASP.Net MVC Razor توضیح خواهیم داد.
این مقاله نشان می دهد چگونه می توان نمودارهای دایره ای و دونات را از پایگاه داده با استفاده از API نمودارهای گوگل در ASP.Net MVC Razor بارگذاری کرد.
بانک اطلاعاتی
در اینجا از پایگاه Northwind استفاده می کنیم. شما می توانید آن را از اینجا دانلود کنید.
پایگاه داده Northwind را دانلود و نصب کنید
فضاهای نام
شما باید فضای نامهای زیر را وارد کنید.

using System.Data;
using System.Data.SqlClient;
using System.Configuration;

Controller
Controller متشکل از دو روش است.
روش دست زدن به عملیات GET
در داخل این روش View بازگردانده می شود.
روش دست زدن به عملیات AJAX POST
در داخل این روش ، داده های آماری برای نمودار Google از جدول سفارشات استخراج شده و در یک آرایه شیء دو بعدی با استفاده از DataReader، که در نهایت به View به عنوان یک لیست کلی از اشیاء در فرمت JSON ارسال می شود، جمع می شود.

public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        return View();
    }
 
    [HttpPost]
    public JsonResult AjaxMethod()
    {
        string query = "SELECT ShipCity, COUNT(orderid) TotalOrders";
        query += " FROM Orders WHERE ShipCountry = 'USA' GROUP BY ShipCity";
        string constr = ConfigurationManager.ConnectionStrings["Constring"].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;
                con.Open();
                using (SqlDataReader sdr = cmd.ExecuteReader())
                {
                    while (sdr.Read())
                    {
                        chartData.Add(new object[]
                        {
                            sdr["ShipCity"], sdr["TotalOrders"]
                        });
                    }
                }
 
                con.Close();
            }
        }
 
        return Json(chartData);
    }
}

View
در زیر View های مختلف برای نمایش نمودار دایره ای، نمودار دایره ای 3D و نمودار دونات است. این مفهوم ساده است که در داخل View ، یک DIV HTML وجود دارد که نمودار و استفاده از ارتباط جی کوئری AJAX را ارائه می دهد، روش Action Controller برای فراخوانی داده های نموداراز پایگاه داده است.
در نهایت داده های نمودار برای استفاده از نمودارهای Google استفاده میشوند .
نمودار دایره ای
 هنگامی بسته های API Google Chart را بارگذاری می کند و  که تمام بسته ها بارگذاری می شوند، روش drawChart فراخوانی می شود.
در داخل این روش، یک ارتباط جی کوئری AJAX به روش Action Controller آغاز می شود که سوابق را از پایگاه داده به عنوان آرایه ای از اشیا می گیرد.
آرایه ای از اشیاء به یک DataTable ویژوال بیسیک تبدیل و برای طراحی نمودار بر روی عنصر HTML DIV مشخص شده استفاده می شود.

@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width"/>
    <title>Index</title>
</head>
<body>
    <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() {
            $.ajax({
                type: "POST",
                url: "/Home/AjaxMethod",
                data: '{}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (r) {
                    var data = google.visualization.arrayToDataTable(r);
 
                    //Pie
                    var options = {
                        title: 'USA City Distribution'
                    };
                    var chart = new google.visualization.PieChart($("#chart")[0]);
                    chart.draw(data, options);
                },
                failure: function (r) {
                    alert(r.d);
                },
                error: function (r) {
                    alert(r.d);
                }
            });
        }
    </script>
    <div id="chart" style="width: 500px; height: 400px;">
    </div>
</body>
</html>


نمودار دایره ای 3D
نمودار دایره ای 3D در واقع یک نمودار دایره ای با یک نگاه سه بعدی است. بخش جمعیت بسیار شبیه نمودار دایره ای است و ما فقط نیاز داریم ویژگی اضافی is3D را به true تنظیم کنیم.

@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width"/>
    <title>Index</title>
</head>
<body>
    <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() {
            $.ajax({
                type: "POST",
                url: "/Home/AjaxMethod",
                data: '{}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (r) {
                    var data = google.visualization.arrayToDataTable(r);
 
                    //3D Pie
                    var options = {
                        title: 'USA City Distribution',
                        is3D: true
                    };
                    var chart = new google.visualization.PieChart($("#chart")[0]);
                    chart.draw(data, options);
                },
                failure: function (r) {
                    alert(r.d);
                },
                error: function (r) {
                    alert(r.d);
                }
            });
        }
    </script>
    <div id="chart" style="width: 500px; height: 400px;">
    </div>
</body>
</html>

نمودار دونات
نمودار نهایی نمودار دونات است که دوباره شبیه به یک نمودار دایره ای است، اما دارای یک سوراخ در مرکزکه شباهت به یک دونات دارد . بخش جمعیت بسیار شبیه به نمودار دایره ای است و ما فقط نیاز ویژگی اضافی pieHole داریم .

@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width"/>
    <title>Index</title>
</head>
<body>
    <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() {
            $.ajax({
                type: "POST",
                url: "/Home/AjaxMethod",
                data: '{}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (r) {
                    var data = google.visualization.arrayToDataTable(r);
 
                    //Doughnut
                    var options = {
                        title: 'USA City Distribution',
                        pieHole: 0.5
                    };
                    var chart = new google.visualization.PieChart($("#chart")[0]);
                    chart.draw(data, options);
                },
                failure: function (r) {
                    alert(r.d);
                },
                error: function (r) {
                    alert(r.d);
                }
            });
        }
    </script>
    <div id="chart" style="width: 500px; height: 400px;">
    </div>
</body>
</html>


دانلود
  • لینک های دانلود دوره های آموزشی تا پایان دوره قابل دانلود می باشد.
  • برای خارج کردن فایل ها از حالت فشرده از ورژن جدید نرم افزار winrar استفاده کنید.
  • برای خارج کردن فایل ها از حالت فشرده لینک های دانلودی که چندین قسمت می باشند فقط قسمت اول را از حالت فشرده خارج کنید.
  • لطفا توضیحات نوشته شده برای مطالب را با دقت بخوانید.
  • برای نمایش فیلم ها می توانید از نرم افزار هایی مانند Km Player , VLC Player یا Media Player Classic استفاده کنید.

ارسال نظر
ارسال پیام به :