نمایش GoogleChart در MVC

یکی از گزینه‌های نمایش آماردر سایت‌هایی که از پلاگین‌های خاصی استفاده نمی‌کنند، بهره بردن از قابلیت‌های Google Chart هست. برای نمایش این مورد در MVC از نمونه کد زیر استفاده نمایید:

Controller:

        [HttpGet]
        public ActionResult GetTopProducts()
        {
            BLL.Products.Products_BLL products_BLL = new BLL.Products.Products_BLL();
            var top10 = products_BLL.GetTop10();
            if (top10 != null)
            {
                return Json(top10, JsonRequestBehavior.AllowGet);
            }
            else
            {
                return Content("آیتمی موجود نیست!");
            }
        }

UI:

        $(document).ready(function () {
            $.ajax({
                url: '@Url.Action("GetTopProducts", "Admin")',
                type: 'GET',
                cache: false,
                dataType: 'json',
                success: function (result) {
                    if (result.length > 0) {
                        if ($.isArray(result)) {
                            var itemArray = new Array();
                            itemArray.push(["محصول", "تعداد نمایش"]);
                            for (var i = 0; i < result.length; i++) {
                                var tempArray = new Array(result[i].ProductTitle, result[i].ProductViewCount)
                                itemArray.push(tempArray);
                            }

                            if (itemArray.length > 0) {
                                // Load google charts
                                google.charts.load('current', { 'packages': ['corechart'] });
                                google.charts.setOnLoadCallback(drawChart);

                                // Draw the chart and set the chart values
                                // Draw the chart and set the chart values
                                function drawChart() {
                                    var data = google.visualization.arrayToDataTable(itemArray);

                                        // Optional; add a title and set the width and height of the chart
                                        var options = { 'title': 'نمایش 10 محصول پربازدید', 'width': 550, 'height': 400 };

                                        // Display the chart inside the <div> element with id="piechart"
                                        var chart = new google.visualization.PieChart(document.getElementById('piechart'));
                                        chart.draw(data, options);
                                    }
                            }
                            else {
                                ("#piechart").html("خطا در نمایش 10 محصول پربازدید.");
                            }
                        }
                        else {
                            ("#piechart").html(result);
                        }
                    }
                },
                error: function (error) { },
                statusCode: {
                    404: function (content) { alert(content); },
                    500: function (content) { alert(content);}
                }
            });
        });