Tạo biểu đồ với Google chart trong MVC

Tạo biểu đồ với Google Chart trong ASP.NET MVC

Khi làm việc với các ứng dụng liên quan đến số liệu chúng ta hay có nhu cầu thống kê. Có thể thống kê theo dạng bảng, tuy nhiên nó không trực quan như biểu đồ. Các ứng dụng được sử dụng biểu đồ nhiều nhất phải kể đến các ứng dụng phân tích tài chính như chứng khoán…, phân tích dữ liệu, thời tiết, địa lý, kinh tế… và nhiều lĩnh vực khác của cuộc sống. Biểu đồ cung cấp cho chúng ta cái nhìn trực quan, từ đơn giản đến chi tiết, từ đó đưa ra các phân tích, đánh giá, định hướng một cách hiệu quả hơn.
Để tạo biểu đồ trong ứng dụng web ASP.NET MVC chúng ta có thể dùng các plugin jQuery như Highcharts, Charts.JS , FlotjqPlot… trong đó có cả miễn phí và có phí.
Trong bài viết này sẽ hướng dẫn các bạn sử dụng biểu đồ trong ASP.NET MVC kết hợp JSON, thông qua một thư viện miễn phí, đó là Google Charts. Thư viện này cung cấp cho chúng ta rất nhiều kiểu biểu đồ khác nhau, tùy vào mục đích ứng dụng, như biểu đồ cột, biểu đồ phần trăm (pie), biểu đồ line, biểu đồ bar, area…

Yêu cầu bài toán đơn giản như sau:
Xây dựng website đơn giản bằng ASP.NET MVC thống kê số lượng sinh viên theo lớp học, thứ tự xếp hạng của từng lớp.

Bước 1: Tạo class Lop. Class này chứa các thuộc tính như Tên lớp, số lượng sinh viên, xếp hạng (thứ hạng)

Bước 2: Tạo Controller & View. Chúng ta tạo ra một Controller tên là Chart, View = Index
Index.cshtml

Bước 3: Tạo JsonResult trả về kiểu JSON. Hàm này viết luôn trong file ChartController.cs
Bước 4: Tạo hàm Ajax jQuery lấy dữ liệu từ JsonResult (Các bạn chú ý thêm thư viện jQuery vào.)

Bước 5: Tạo hàm javascript để tạo biểu đồ với Google Chart (Các bạn chú ý thêm thư viện jsapi của Google) Ví dụ 1: Vẽ biểu đồ phần trăm (pie) thể hiện số lượng sinh viên từng lớp.

Demo

Tạo biểu đồ với Google chart trong MVC
Tạo biểu đồ với Google Chart trong MVC

Ví dụ 2: Vẽ biểu đồ cột, thể hiện số lượng sinh viên và xếp hạng từng lớp.
Demo

Tạo biểu đồ cột với Google Chart trong ASP.NET MVC
Tạo biểu đồ cột với Google Chart trong ASP.NET MVC

Code full

ChartController.cs
Index.cshtml

Chúc các bạn thành công.

Published by

tuanitpro

Tôi là Lê Thanh Tuấn, và tôi chia sẻ những điều mình cho rằng nó là thú vị, hay giúp ích cho bạn!

One thought on “Tạo biểu đồ với Google Chart trong ASP.NET MVC”

Leave a Reply