CoreChartView/Chart Core Mvc.txt

Mesaj gönderen **AzS** » 04 May 2021 16:52

@{
    ViewData["Title"] = "Index4";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Result Visualization</title>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $.ajax({
                type: "POST",
                dataType: "json",
                contentType: "application/json",
                url: '@Url.Action("VisualizeUrunResult", "Chart")',
                success: function (result) {
                    google.charts.load('current', {
                        'packages': ['corechart']
                    });
                    google.charts.setOnLoadCallback(function () {
                        drawChart(result);
                    });
                }
            });
        });

        function drawChart(result) {
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Name');
            data.addColumn('number', 'Stoklar');
            var dataArray = [];

            $.each(result, function (i, obj) {
                dataArray.push([obj.ad, obj.sayi]);
            });
            data.addRows(dataArray);

            var columnChartOptions = {
                title: "Ürün - Stok Grafiği",
                width: 1000,
                height: 400,
                bar: { groupWidth: "20%" },
            };

            var columnChart = new google.visualization.PieChart(document
                .getElementById('Piechart_div'));

            columnChart.draw(data, columnChartOptions);
        }
    </script>
</head>
<body>
    <div id="Piechart_div"></div>
</body>
</html>