Google Charts with ASP.NET

เพิ่มคลาส public class ChartDataModel ในส่วนของ Model

    public class ChartDataModel
    {
        public string? year { get; set; }
        public int? sales { get; set; }
        public int? expenses { get; set; }
        public int? profit { get; set; }
    }

เพิ่ม public JsonResult DataSample() ในส่วนของ Controller

        public JsonResult DataSample()
        {
            var data = new List<ChartDataModel>();

            var random = new Random();
            int start = DateTime.Now.Year - 4;
            int end = DateTime.Now.Year;

            for (int i = start; i <= end; i++)
            {
                int _sales = random.Next(1000000, 99999999);
                int _expenses = random.Next(1000000, 99999999);

                data.Add(
                    new ChartDataModel
                    {
                        year = i.ToString(),
                        sales = _sales,
                        expenses = _expenses,
                        profit = _sales - _expenses
                    });
            }

            return Json(data);
        }

เพิ่ม JavaScript ในส่วนของ View

        function drawChart() {
            $(function () {
                $.ajax({
                    url: "@Url.Action("DataSample", "Home")",
                    data: JSON.stringify(),
                    type: 'POST',
                    dataType: 'html',
                    contentType: "application/json; charset=utf-8",
                    success: function (response) {
                        var Data = JSON.parse(response);
                        var data = new google.visualization.DataTable();

                        data.addColumn('string', 'Year');
                        data.addColumn('number', 'Sales');
                        data.addColumn('number', 'Expenses');
                        data.addColumn('number', 'Profit');

                        for (var i = 0; i < Data.length; i++) {
                            data.addRow([Data[i].year, Data[i].sales, Data[i].expenses, Data[i].profit]);
                        }

                        /*** options and google.visualization.???Chart ***/

                    },
                    error: function () {
                        alert("Error loading data! Please try again.");
                    }
                });
            })
        }

options and google.visualization.AreaChart

                        var areaOptions = {
                            title: 'Area Chart',
                            hAxis: { title: 'Year', titleTextStyle: { color: '#333' } },
                            vAxis: { minValue: 0 }
                        };
                        var areaChart = new google.visualization.AreaChart(document.getElementById('areaChart'));
                        areaChart.draw(data, areaOptions);

options and google.visualization.BarChart

                        var barOptions = {
                            title: 'Horizontal Bar Chart',
                            bars: 'horizontal'
                        };
                        var barChart = new google.visualization.BarChart(document.getElementById('barChart'));
                        barChart.draw(data, barOptions);

options and google.visualization.BubbleChart

                        var bubbleOptions = {
                            title: 'Bubble Chart',
                            bubble: { textStyle: { fontSize: 11 } }
                        };
                        var bubbleChart = new google.visualization.BubbleChart(document.getElementById('bubbleChart'));
                        bubbleChart.draw(data, bubbleOptions);

options and google.visualization.ColumnChart

                        var columnOptions = {
                            title: 'Column Chart'
                        };
                        var columnChart = new google.visualization.ColumnChart(document.getElementById('columnChart'));
                        columnChart.draw(data, columnOptions);

options and google.visualization.ColumnChart

                        var comboOptions = {
                            title: 'Combo Chart',
                            series: {
                                0: { type: 'line' },
                                1: { type: 'line' }
                            },
                        };
                        var comboChart = new google.visualization.ColumnChart(document.getElementById('comboChart'));
                        comboChart.draw(data, comboOptions);

options and google.visualization.PieChart

                        var donutOptions = {
                            title: 'Donut Chart',
                            pieHole: 0.5
                        };
                        var donutChart = new google.visualization.PieChart(document.getElementById('donutChart'));
                        donutChart.draw(data, donutOptions);

options and google.visualization.LineChart

                        var lineOptions = {
                            title: 'Line Chart',
                            curveType: 'function',
                            legend: { position: 'right' }
                        };
                        var lineChart = new google.visualization.LineChart(document.getElementById('lineChart'));
                        lineChart.draw(data, lineOptions);

options and google.visualization.PieChart

                        var pieOptions = {
                            title: 'Pie Chart'
                        };
                        var pieChart = new google.visualization.PieChart(document.getElementById('pieChart'));
                        chart.draw(data);

options and google.visualization.PieChart

                        var is3dOptions = {
                            title: 'is3D Chart',
                            is3D: true
                        };
                        var is3dChart = new google.visualization.PieChart(document.getElementById('is3dChart'));
                        is3dChart.draw(data, is3dOptions);

options and google.visualization.PieChart

                        var sliceOptions = {
                            title: 'Slice Chart',
                            legend: 'none',
                            pieSliceText: 'label',
                            slices: {
                                4: { offset: 0.2 },
                                12: { offset: 0.3 },
                                14: { offset: 0.4 },
                                15: { offset: 0.5 },
                            },
                        };
                        var sliceChart = new google.visualization.PieChart(document.getElementById('sliceChart'));
                        sliceChart.draw(data, sliceOptions);