Verilerin değişik şekillerde kullanıcıya gösterilmesi amacıyla grafikler kullanılır. Grafikler sunucu tarafında ya da terminal tarafında hazırlanabilir. Bu uygulamamızda sunucu tarafında statik bir şekilde grafik oluşturmayı göstereceğiz.
Visual Studio 2022 programını açalım.
Yeni bir boş Core projesi oluşturalım. İsmini GrafikListesi olarak belirleyelim.
Temel ayarların yapıldığı program.cs dosyasını düzenleyelim.
var builder = WebApplication.CreateBuilder(args);
builder.Services.AddMvc();
var app = builder.Build();
app.UseDefaultFiles();
app.UseStaticFiles();
app.MapControllerRoute(
name: "default",
pattern: "{controller=Grafik}/{action=Index}"
);
app.Run();
Projeyi çalıştıralım. Controller bulunamadığı için hata verecektir. Öncelikle MVC projesi için gerekli olan klasörleri oluşturalım. Projemizi çalıştıralım. Controllers panelinde dosya olmadığı için hata verecektir. Şimdi Controllers klasörü içine GrafikController dosyasını oluşturalım. Aşağıdaki gibi bir action metodu oluşturulacaktır. Bu metod Index() isimli view dosyasını döndürecektir.
public IActionResult Index()
{
return View();
}
Break point atalım. Projeyi çalıştıralım. Index() isimli metod çalıştırılacak ancak bu dosya Views klasöründe olmadığı için hata verecektir. Şimdi Views klasörü altında Grafik klasörünü, bunun altında Index dosyasını oluşturalım. Bu işlemi gerçekleştirmek için şu yolu takip edelim. GrafikController sayfasında Index() metodunun içindeyken farenin sağ tuşuna basalım. Ekrana gelen içerik menüsünden Add View komutunu çalıştıralım. Çıkan form sayfasında Razor View seçeneğini seçelim ve Add butonuna basalım. Gelen ekranda Use a layout page onay kutusunu kaldıralım. Add diyerek işlemi tamamlayalım. Bu yöntemi kullanarak Views klasöründe hem Grafik isminde bir klasör oluşturacağız hem de view sayfası html kodlarının tamamını gösterir şekilde ekrana gelecektir.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Bar Grafik Oluşturma</title>
</head>
<body>
</body>
</html>
Projeyi çalıştıralım. Proje hatasız bir şekilde çalıştırılır. Projede bootstrap ve jquery kütüphanelerini yüklemek için wwwroot klasörünü ekleyelim. Projeye bootstrap eklemek için proje isminin üzerinde farenin sağ tuşuna basalım. Ekrana gelen içerik menüsünden Add diyelim. Burada yer alan komutlardan Client-Side Library komutunu çalıştıralım. Ekrana gelen form sayfasında library kutusuna bootstrap yazalım. Install diyerek kurulum işlemini tamamlayalım. Aynı komutu kullanarak projeye jquery kütüphanesini de ekleyelim. Index view dosyasına bootstrap ve jquery kütüphanelerini dahil edelim.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Bar Grafik Oluşturma</title>
<link href="~/lib/bootstrap/css/bootstrap.min.css"
rel="stylesheet" />
<script src="~/lib/jquery/jquery.min.js"></script>
<script src="~/lib/bootstrap/js/bootstrap.min.js">
</script>
</head>
<body>
</body>
</html>
Projeyi çalıştıralım. Kütüphanelerin projeye hatasız bir şekilde eklendiğinden emin olalım. Öncelikle bar grafiğe ait gerekli bilgilerin tutulacağı Models tasarımını yapalım. Amacımız oluşturduğumuz modele ait tüm özellikleri hem view hem de controller tarafında kullanabilmek. Şimdi Models klasörü altına Urunler isminde bir class oluşturalım. Dosyanın içeriği aşağıdaki gibi olacaktır.
public class Urunler
{
public string? urunAdi { get; set; }
public int miktar { get; set; }
}
Bu kalıba göre verileri almış olacağız. Şimdi controller tarafında urunler listesini almak urunList() isminde bir metod tanımlayalım. Bu metod içinde değerleri girelim. İçine 3 adet değer girelim.
public List<Urunler> urunList()
{
List<Urunler> urun = new List<Urunler>();
urun.Add(new Urunler
{
urunAdi = "Deneme1",
miktar = 15
});
urun.Add(new Urunler
{
urunAdi = "Deneme2",
miktar = 20
});
urun.Add(new Urunler
{
urunAdi = "Deneme3",
miktar = 25
});
return urun;
}
Oluşturduğumuz ürünlerin view tarafında alınabilmesi için controller tarafında post ile çağrılacak olan action metodunu yazalım.
[HttpPost]
public IActionResult Sonuclar()
{
return Json(urunList());
}
View tarafına geçelim. Öncelikle grafik çiizmi için kullanılacak olan api dosyasını web sayfasına ekleyelim.
<script src="https://www.google.com/jsapi"></script>
Web sayfasında grafik çiziminin gösterileceği div etiketini oluşturalım.
<div id="grafik"></div>
Controller tarafında Sonuclar metodunu çağırmak için Ajax kullanalım.
<script>
$(document).ready(function () {
$.ajax({
type: "POST",
dataType: "json",
contentType: "application/json",
url: '@Url.Action("Sonuclar", "Grafik")',
success: function (result) {
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(function () {
alert(result);
});
}
});
});
</script>
Son olarak elde edilen bilgiler ışığında grafiğimizi oluşturalım.
<script>
$(document).ready(function () {
$.ajax({
type: "POST",
dataType: "json",
contentType: "application/json",
url: '@Url.Action("Sonuclar", "Grafik")',
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', 'Ürün Adı');
data.addColumn('number', 'Miktarı');
var dataArray = [];
$.each(result, function (i, obj) {
dataArray.push([obj.urunAdi, obj.miktar]);
});
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('grafik'));
columnChart.draw(data, columnChartOptions);
}
</script>
Projeyi çalıştırdığımızda baklava grafiğinin oluştuğunu görürsünüz.