{"id":42137,"date":"2026-05-28T09:11:34","date_gmt":"2026-05-28T06:11:34","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/django-admine-tek-bir-paket-bile-kurmadan-canli-grafikler-nasil-ekledim\/"},"modified":"2026-05-28T09:12:09","modified_gmt":"2026-05-28T06:12:09","slug":"django-admine-tek-bir-paket-bile-kurmadan-canli-grafikler-nasil-ekledim","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/django-admine-tek-bir-paket-bile-kurmadan-canli-grafikler-nasil-ekledim\/","title":{"rendered":"Django Admin’e Tek Bir Paket Bile Kurmadan Canl\u0131 Grafikler Nas\u0131l Ekledim?"},"content":{"rendered":"

Django Admin’e Tek Bir Paket Bile Kurmadan Canl\u0131 Grafikler Nas\u0131l Ekledim?<\/h2>\n

Django y\u00f6netim panelinizdeki statik veriler sizi yoruyor ve anl\u0131k kararlar alman\u0131z\u0131 engelliyor mu? \u0130\u015f zekas\u0131 (Business Intelligence) ara\u00e7lar\u0131na yat\u0131r\u0131m yapmadan veya karma\u015f\u0131k \u00fc\u00e7\u00fcnc\u00fc taraf entegrasyonlar\u0131na girmeden, verilerinizi anl\u0131k olarak g\u00f6rselle\u015ftirmek mi istiyorsunuz? Bu makalede, herhangi bir ek Python paketi kurmaya gerek kalmadan, sadece Django’nun kendi yeteneklerini ve modern web teknolojilerini kullanarak, canl\u0131 ve dinamik grafikler eklemenin t\u00fcm ad\u0131mlar\u0131n\u0131 ke\u015ffedece\u011fiz. Art\u0131k verilerinizle daha interaktif bir ili\u015fki kurarak i\u015f s\u00fcre\u00e7lerinizi anl\u0131k olarak takip edebileceksiniz.<\/p>\n

Pek \u00e7ok geli\u015ftirici, Django Admin panelinin sundu\u011fu esnekli\u011fi ve g\u00fcc\u00fc takdir eder. Ancak, varsay\u0131lan olarak sunulan veri g\u00f6r\u00fcnt\u00fcleme y\u00f6ntemleri genellikle statiktir ve anl\u0131k analizler i\u00e7in yetersiz kalabilir. \u00d6zellikle b\u00fcy\u00fck veri setleriyle \u00e7al\u0131\u015f\u0131rken veya h\u0131zl\u0131 de\u011fi\u015fen i\u015f metriklerini izlerken, dinamik ve canl\u0131 grafikler vazge\u00e7ilmez bir ihtiya\u00e7 haline gelir. Bu rehber, size bu ihtiyac\u0131 nas\u0131l kar\u015f\u0131layaca\u011f\u0131n\u0131z\u0131, \u00fcstelik projenize tek bir yeni Python ba\u011f\u0131ml\u0131l\u0131\u011f\u0131 eklemeden nas\u0131l ba\u015faraca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m g\u00f6sterecek.<\/p>\n

Neden Harici Paket Kullanmadan Bu \u0130\u015fi \u00c7\u00f6zmeliyiz?<\/h3>\n

Bir\u00e7ok durumda, bir problemi \u00e7\u00f6zmek i\u00e7in hemen yeni bir k\u00fct\u00fcphane veya paket kurma e\u011filiminde oluruz. Ancak bu yakla\u015f\u0131m\u0131n uzun vadede baz\u0131 dezavantajlar\u0131 olabilir. Django Admin paneline canl\u0131 grafikler eklemek s\u00f6z konusu oldu\u011funda, harici paket kullanmaman\u0131n birden fazla \u00f6nemli faydas\u0131 bulunmaktad\u0131r. \u0130lk olarak, projenizin ba\u011f\u0131ml\u0131l\u0131k (dependency) say\u0131s\u0131n\u0131 azalt\u0131rs\u0131n\u0131z. Daha az ba\u011f\u0131ml\u0131l\u0131k, daha az bak\u0131m y\u00fck\u00fc, daha az g\u00fcvenlik a\u00e7\u0131\u011f\u0131 riski ve daha sorunsuz g\u00fcncellemeler anlam\u0131na gelir. Her yeni paket, potansiyel bir uyumluluk sorununu veya gelecekteki bir g\u00fcvenlik a\u00e7\u0131\u011f\u0131n\u0131 beraberinde getirebilir. Bu nedenle, mevcut ara\u00e7larla \u00e7\u00f6z\u00fclebilecek bir sorunu harici bir paketle \u00e7\u00f6zmek, bazen gereksiz bir karma\u015f\u0131kl\u0131k yaratabilir.<\/p>\n

\u0130kinci olarak, projenizin da\u011f\u0131t\u0131m (deployment) s\u00fcrecini basitle\u015ftirirsiniz. Yeni bir paket kurmak genellikle pip install<\/code> komutunu \u00e7al\u0131\u015ft\u0131rmay\u0131 ve requirements.txt<\/code> dosyas\u0131n\u0131 g\u00fcncellemeyi gerektirir. Bu durum, \u00f6zellikle s\u00fcrekli entegrasyon\/s\u00fcrekli teslimat (CI\/CD) s\u00fcre\u00e7lerinde ek ad\u0131mlar anlam\u0131na gelebilir. Harici paket kullanmad\u0131\u011f\u0131n\u0131zda, bu ad\u0131mlar\u0131 atlam\u0131\u015f olursunuz ve da\u011f\u0131t\u0131m s\u00fcreciniz daha h\u0131zl\u0131 ve daha az hataya a\u00e7\u0131k hale gelir. Projenin genel performans\u0131na da olumlu yans\u0131malar\u0131 olabilir; daha az paket, daha k\u00fc\u00e7\u00fck bir uygulama boyutu ve potansiyel olarak daha h\u0131zl\u0131 ba\u015flang\u0131\u00e7 s\u00fcreleri demektir.<\/p>\n

\u00dc\u00e7\u00fcnc\u00fc ve belki de en \u00f6nemli fayda, kontrol\u00fcn tamamen sizde olmas\u0131d\u0131r. Harici bir paketin sundu\u011fu \u00f6zellikler ve k\u0131s\u0131tlamalarla s\u0131n\u0131rl\u0131 kalmazs\u0131n\u0131z. Kendi \u00e7\u00f6z\u00fcm\u00fcn\u00fcz\u00fc in\u015fa etti\u011finizde, tam olarak neye ihtiyac\u0131n\u0131z varsa onu geli\u015ftirirsiniz ve bu \u00e7\u00f6z\u00fcm projenizin \u00f6zel gereksinimlerine m\u00fckemmel bir \u015fekilde uyar. G\u00f6rselle\u015ftirme \u015feklini, veri \u00e7ekme mant\u0131\u011f\u0131n\u0131 ve g\u00fcncelleme s\u0131kl\u0131\u011f\u0131n\u0131 tamamen kendi ihtiya\u00e7lar\u0131n\u0131za g\u00f6re ayarlayabilirsiniz. Bu da size daha fazla esneklik ve \u00f6zelle\u015ftirme imkan\u0131 sunar. Ayr\u0131ca, bu yakla\u015f\u0131m, web geli\u015ftirme temelleri olan HTML, CSS ve JavaScript bilginizi peki\u015ftirmenize de yard\u0131mc\u0131 olur. Django’nun g\u00fc\u00e7l\u00fc arka plan (backend) yeteneklerini, modern \u00f6n y\u00fcz (frontend) teknikleriyle birle\u015ftirerek tam kapsaml\u0131 bir \u00e7\u00f6z\u00fcm \u00fcretme becerinizi geli\u015ftirirsiniz. Bu s\u00fcre\u00e7, sadece bir problem \u00e7\u00f6zmekle kalmaz, ayn\u0131 zamanda teknik bilgi birikiminizi de art\u0131r\u0131r.<\/p>\n

Temelleri Anlamak: Django Admin ve Modern Web Teknolojileri<\/h3>\n

Django Admin, geli\u015ftiricilere veritaban\u0131 modelleri \u00fczerinde h\u0131zl\u0131 bir \u015fekilde CRUD (Create, Read, Update, Delete) i\u015flemleri yapabilecekleri, haz\u0131r bir y\u00f6netim aray\u00fcz\u00fc sunar. Bu panel, bir\u00e7ok i\u015f uygulamas\u0131 i\u00e7in ba\u015flang\u0131\u00e7 noktas\u0131 veya hatta nihai \u00e7\u00f6z\u00fcm olabilir. Ancak, varsay\u0131lan olarak sunulan aray\u00fcz, veri g\u00f6rselle\u015ftirme veya canl\u0131 raporlama gibi dinamik \u00f6zelliklerden yoksundur. \u0130\u015fte bu noktada modern web teknolojileri devreye girer. Django’nun arka plan g\u00fcc\u00fcn\u00fc, \u00f6n y\u00fczdeki (frontend) JavaScript k\u00fct\u00fcphaneleriyle birle\u015ftirerek bu eksikli\u011fi giderebiliriz.<\/p>\n

Django Admin panelini \u00f6zelle\u015ftirmek, asl\u0131nda Django’nun \u015fablon (template) sistemini ve statik dosya (static file) y\u00f6netimini iyi anlamaktan ge\u00e7er. Django, y\u00f6netim panelinin her bir b\u00f6l\u00fcm\u00fc i\u00e7in belirli \u015fablonlar kullan\u0131r ve bu \u015fablonlar\u0131 kendi projenizde ge\u00e7ersiz k\u0131larak (override) istedi\u011finiz de\u011fi\u015fiklikleri yapman\u0131za olanak tan\u0131r. \u00d6rne\u011fin, ana admin sayfas\u0131n\u0131 de\u011fi\u015ftirmek i\u00e7in admin\/base_site.html<\/code> \u015fablonunu, belirli bir modelin listeleme sayfas\u0131n\u0131 de\u011fi\u015ftirmek i\u00e7in ise admin\/change_list.html<\/code> \u015fablonunu kullanabilirsiniz. Bu, bizim canl\u0131 grafiklerimizi ekleyece\u011fimiz temel mekanizmad\u0131r.<\/p>\n

\u00d6n y\u00fcz taraf\u0131nda ise JavaScript, HTML ve CSS \u00fc\u00e7l\u00fcs\u00fc bizim ana ara\u00e7lar\u0131m\u0131z olacak. \u00d6zellikle JavaScript, dinamik i\u00e7erik olu\u015fturma ve verilerle etkile\u015fim kurma konusunda kilit rol oynar. Canl\u0131 grafikler i\u00e7in bir JavaScript grafik k\u00fct\u00fcphanesine ihtiyac\u0131m\u0131z olacak. Bu makalede, kullan\u0131m\u0131 kolay ve pop\u00fcler bir se\u00e7enek olan Chart.js<\/a>‘i kullanaca\u011f\u0131z. Chart.js, HTML <canvas><\/code> elementi \u00fczerine \u00e7e\u015fitli grafik t\u00fcrlerini (\u00e7izgi, \u00e7ubuk, pasta vb.) \u00e7izmenize olanak tan\u0131r ve CDN (Content Delivery Network) \u00fczerinden kolayca projenize dahil edilebilir, b\u00f6ylece herhangi bir ek paket kurulumuna gerek kalmaz.<\/p>\n

Verilerin canl\u0131 olarak g\u00fcncellenmesi i\u00e7in ise AJAX (Asynchronous JavaScript and XML) teknolojisinden faydalanaca\u011f\u0131z. AJAX, bir web sayfas\u0131n\u0131n tamam\u0131n\u0131 yeniden y\u00fcklemeden, arka planda sunucuya istek g\u00f6nderip yan\u0131t almas\u0131n\u0131 sa\u011flayan bir tekniktir. Bu sayede, Django arka plan\u0131nda haz\u0131rlad\u0131\u011f\u0131m\u0131z veri u\u00e7 noktalar\u0131ndan (API endpoints) d\u00fczenli aral\u0131klarla yeni verileri \u00e7ekebilir ve bu verileri kullanarak grafiklerimizi anl\u0131k olarak g\u00fcncelleyebiliriz. Django’nun kendi URL y\u00f6nlendirme (URL routing) ve g\u00f6r\u00fcn\u00fcm (view) sistemini kullanarak, grafiklerimizin ihtiya\u00e7 duydu\u011fu JSON format\u0131ndaki verileri sunacak basit bir API ucu olu\u015fturaca\u011f\u0131z. Bu entegrasyon, Django’nun g\u00fc\u00e7l\u00fc veri i\u015fleme yeteneklerini, modern taray\u0131c\u0131lar\u0131n zengin g\u00f6rselle\u015ftirme kapasitesiyle birle\u015ftirerek, ger\u00e7ekten dinamik ve kullan\u0131c\u0131 dostu bir y\u00f6netim paneli deneyimi sunmam\u0131z\u0131 sa\u011flayacak.<\/p>\n

Veri Kayna\u011f\u0131n\u0131 Haz\u0131rlamak: Django Modellerinden API U\u00e7 Noktas\u0131na<\/h3>\n

Canl\u0131 grafiklerin temelini, g\u00fcncel ve do\u011fru veri olu\u015fturur. Bu verileri Django modellerimizden al\u0131p, \u00f6n y\u00fczdeki JavaScript kodumuzun kolayca t\u00fcketebilece\u011fi bir formatta sunmam\u0131z gerekiyor. Bu genellikle JSON (JavaScript Object Notation) format\u0131nda bir API u\u00e7 noktas\u0131 olu\u015fturmak anlam\u0131na gelir. Django, bu t\u00fcr bir u\u00e7 nokta olu\u015fturmak i\u00e7in olduk\u00e7a esnek ve g\u00fc\u00e7l\u00fc ara\u00e7lar sunar, \u00fcstelik hi\u00e7bir ek paket kurman\u0131za gerek kalmaz.<\/p>\n

\u00d6ncelikle, hangi verileri g\u00f6rselle\u015ftirmek istedi\u011fimize karar vermeliyiz. Diyelim ki bir e-ticaret uygulaman\u0131z var ve g\u00fcnl\u00fck sat\u0131\u015f miktarlar\u0131n\u0131 veya belirli bir \u00fcr\u00fcn\u00fcn stok durumunu canl\u0131 olarak g\u00f6rmek istiyorsunuz. Bu veriler muhtemelen Siparis<\/code> (Order) veya Urun<\/code> (Product) gibi modellerinizde tutuluyordur. \u00d6rne\u011fin, son 7 g\u00fcn\u00fcn sat\u0131\u015f verilerini almak i\u00e7in \u015f\u00f6yle bir sorgu yapabiliriz:<\/p>\n

\n
\n# models.py\nfrom django.db import models\n\nclass Siparis(models.Model):\n    urun = models.CharField(max_length=100)\n    miktar = models.IntegerField()\n    fiyat = models.DecimalField(max_digits=10, decimal_places=2)\n    tarih = models.DateField(auto_now_add=True)\n\n    def __str__(self):\n        return f\"Sipari\u015f #{self.id} - {self.urun}\"\n  <\/code><\/pre>\n<\/div>\n
\u015eimdi, bu verileri JSON format\u0131nda sunacak bir Django g\u00f6r\u00fcn\u00fcm\u00fc (view) olu\u015ftural\u0131m. Bu g\u00f6r\u00fcn\u00fcm, belirli bir zaman aral\u0131\u011f\u0131ndaki sipari\u015f verilerini i\u015fleyecek ve bir s\u00f6zl\u00fck (dictionary) listesi olarak d\u00f6nd\u00fcrecektir. Daha sonra bu s\u00f6zl\u00fck listesini JsonResponse<\/code> kullanarak JSON format\u0131na d\u00f6n\u00fc\u015ft\u00fcrece\u011fiz. JsonResponse<\/code>, Django’nun kendi i\u00e7inde gelen bir yard\u0131mc\u0131 fonksiyondur ve harici bir serile\u015ftirme (serialization) k\u00fct\u00fcphanesine ihtiya\u00e7 duymadan JSON yan\u0131tlar\u0131 olu\u015fturman\u0131z\u0131 sa\u011flar.<\/p>\n
\n
\n# myapp\/views.py\nfrom django.http import JsonResponse\nfrom django.db.models import Sum\nfrom datetime import date, timedelta\nfrom .models import Siparis\n\ndef get_daily_sales_data(request):\n    today = date.today()\n    last_seven_days = [today - timedelta(days=i) for i in range(7)]\n    last_seven_days.reverse() # En eskiden en yeniye s\u0131rala\n\n    sales_data = []\n    for day in last_seven_days:\n        daily_total = Siparis.objects.filter(tarih=day).aggregate(total_sales=Sum('fiyat'))['total_sales']\n        sales_data.append({\n            'date': day.strftime('%Y-%m-%d'),\n            'total_sales': float(daily_total) if daily_total else 0\n        })\n\n    return JsonResponse({'sales': sales_data})\n  <\/code><\/pre>\n<\/div>\n
Bu g\u00f6r\u00fcn\u00fcm, son yedi g\u00fcn\u00fcn her biri i\u00e7in toplam sat\u0131\u015f miktar\u0131n\u0131 hesaplar. E\u011fer belirli bir g\u00fcnde sat\u0131\u015f yoksa, toplam sat\u0131\u015f miktar\u0131n\u0131 s\u0131f\u0131r olarak d\u00f6nd\u00fcr\u00fcr. Verileri date<\/code> ve total_sales<\/code> anahtarlar\u0131yla bir liste i\u00e7inde paketleyerek JSON olarak sunar. float(daily_total)<\/code> d\u00f6n\u00fc\u015f\u00fcm\u00fc, Decimal<\/code> tipinin do\u011frudan JSON’a serile\u015ftirilememesi sorununu \u00e7\u00f6zer.<\/p>\n
Son olarak, bu g\u00f6r\u00fcn\u00fcm\u00fc bir URL ile ili\u015fkilendirmemiz gerekiyor. Bu URL, \u00f6n y\u00fczdeki JavaScript kodumuzun veri \u00e7ekmek i\u00e7in kullanaca\u011f\u0131 adres olacakt\u0131r. Bu URL’yi Django Admin panelinin URL’lerinden ayr\u0131, kendi uygulaman\u0131z\u0131n urls.py<\/code> dosyas\u0131na ekleyebilirsiniz:<\/p>\n
\n
\n# myapp\/urls.py\nfrom django.urls import path\nfrom . import views\n\nurlpatterns = [\n    path('api\/daily-sales\/', views.get_daily_sales_data, name='daily_sales_api'),\n]\n  <\/code><\/pre>\n<\/div>\n
Ana projenizin urls.py<\/code> dosyas\u0131na da bu uygulamay\u0131 dahil etmeyi unutmay\u0131n:<\/p>\n
\n
\n# myproject\/urls.py\nfrom django.contrib import admin\nfrom django.urls import path, include\n\nurlpatterns = [\n    path('admin\/', admin.site.urls),\n    path('myapp\/', include('myapp.urls')), # Uygulaman\u0131z\u0131n URL'lerini dahil edin\n]\n  <\/code><\/pre>\n<\/div>\n
Art\u0131k \/myapp\/api\/daily-sales\/<\/code> adresine bir HTTP iste\u011fi g\u00f6nderdi\u011finizde, son yedi g\u00fcn\u00fcn sat\u0131\u015f verilerini i\u00e7eren bir JSON yan\u0131t\u0131 alacaks\u0131n\u0131z. Bu veri kayna\u011f\u0131, canl\u0131 grafiklerimizi beslemek i\u00e7in haz\u0131r hale gelmi\u015f oldu. Bu yakla\u015f\u0131m, veritaban\u0131ndan \u00e7ekilen karma\u015f\u0131k verileri bile kolayca i\u015fleyip, \u00f6n y\u00fcz i\u00e7in sade ve anla\u015f\u0131l\u0131r bir formata d\u00f6n\u00fc\u015ft\u00fcrmenin temelini olu\u015fturur. Bu sayede, grafiklerinizin her zaman g\u00fcncel ve do\u011fru bilgileri yans\u0131tmas\u0131n\u0131 sa\u011flars\u0131n\u0131z.<\/p>\n
G\u00f6rselle\u015ftirmenin Kalbi: JavaScript ve Chart.js<\/h3>\n
Veri kayna\u011f\u0131m\u0131z\u0131 Django arka plan\u0131nda haz\u0131rlad\u0131ktan sonra, s\u0131ra bu verileri kullan\u0131c\u0131ya g\u00f6rsel olarak sunmaya geldi. Bu noktada, \u00f6n y\u00fczdeki (frontend) JavaScript ve bir grafik k\u00fct\u00fcphanesi devreye giriyor. Daha \u00f6nce de belirtti\u011fimiz gibi, herhangi bir Python paketi kurmayaca\u011f\u0131m\u0131z i\u00e7in, grafik \u00e7izimini tamamen istemci taraf\u0131nda (client-side) ger\u00e7ekle\u015ftirece\u011fiz. Bu i\u015f i\u00e7in Chart.js<\/a>, basitli\u011fi, esnekli\u011fi ve CDN \u00fczerinden kolayca entegre edilebilir olmas\u0131 nedeniyle m\u00fckemmel bir se\u00e7imdir.<\/p>\n
Chart.js, HTML <canvas><\/code> elementi \u00fczerine \u00e7e\u015fitli interaktif ve duyarl\u0131 (responsive) grafikler \u00e7izmenize olanak tan\u0131r. \u00c7ubuk grafikler, \u00e7izgi grafikler, pasta grafikler ve daha fazlas\u0131n\u0131 destekler. En g\u00fczeli de, do\u011frudan bir CDN’den y\u00fcklenebilir olmas\u0131, projenize herhangi bir Node.js veya npm ba\u011f\u0131ml\u0131l\u0131\u011f\u0131 eklemenizi gerektirmez. Bu, bizim “tek bir paket bile kurmadan” hedefimize m\u00fckemmel bir \u015fekilde uyan bir yakla\u015f\u0131md\u0131r.<\/p>\n
\u0130lk ad\u0131m olarak, grafiklerimizi yerle\u015ftirece\u011fimiz bir HTML <canvas><\/code> elementine ihtiyac\u0131m\u0131z var. Bu element, Chart.js’in grafi\u011fi \u00e7izece\u011fi tuval g\u00f6revi g\u00f6recektir. Daha sonra, bu canvas elementini hedef alarak JavaScript ile Chart.js’i ba\u015flataca\u011f\u0131z. \u00d6rnek bir \u00e7izgi grafik olu\u015fturmak i\u00e7in temel yap\u0131 \u015fu \u015fekildedir:<\/p>\n
\n
\n<!-- HTML B\u00f6l\u00fcm\u00fc -->\n<canvas id=\"mySalesChart\"><\/canvas>\n\n<!-- JavaScript B\u00f6l\u00fcm\u00fc -->\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n<script>\n  \/\/ \u00d6rnek statik veri\n  const labels = ['Ocak', '\u015eubat', 'Mart', 'Nisan', 'May\u0131s', 'Haziran', 'Temmuz'];\n  const data = {\n    labels: labels,\n    datasets: [{\n      label: 'Ayl\u0131k Sat\u0131\u015flar',\n      backgroundColor: 'rgb(75, 192, 192)',\n      borderColor: 'rgb(75, 192, 192)',\n      data: [0, 10, 5, 2, 20, 30, 45],\n    }]\n  };\n\n  const config = {\n    type: 'line',\n    data: data,\n    options: {}\n  };\n\n  \/\/ Grafi\u011fi \u00e7iz\n  const myChart = new Chart(\n    document.getElementById('mySalesChart'),\n    config\n  );\n<\/script>\n  <\/code><\/pre>\n<\/div>\n
Yukar\u0131daki \u00f6rnekte, \u00f6nce Chart.js k\u00fct\u00fcphanesini CDN’den y\u00fckl\u00fcyoruz. Ard\u0131ndan, bir <canvas><\/code> elementi tan\u0131ml\u0131yor ve JavaScript kodu i\u00e7inde bu canvas’\u0131 hedef alarak yeni bir Chart.js \u00f6rne\u011fi olu\u015fturuyoruz. labels<\/code> dizisi X ekseni etiketlerini, datasets<\/code> ise grafikte g\u00f6sterilecek veri serilerini (veri k\u00fcmelerini) i\u00e7erir. Her bir veri k\u00fcmesi, bir etiket, renkler ve ger\u00e7ek veri noktalar\u0131ndan olu\u015fur. config<\/code> nesnesi, grafi\u011fin t\u00fcr\u00fcn\u00fc (\u00f6rne\u011fin, 'line'<\/code> veya 'bar'<\/code>) ve veri ile se\u00e7eneklerini belirler.<\/p>\n
Bu statik \u00f6rnek, Chart.js’in nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131na dair temel bir fikir verir. Ancak bizim amac\u0131m\u0131z canl\u0131 grafikler oldu\u011fu i\u00e7in, bu statik verileri daha \u00f6nce olu\u015fturdu\u011fumuz Django API u\u00e7 noktas\u0131ndan \u00e7ekece\u011fimiz dinamik verilerle de\u011fi\u015ftirmemiz gerekecek. Bu, AJAX istekleri ve Chart.js’in veri g\u00fcncelleme mekanizmalar\u0131 kullan\u0131larak yap\u0131lacakt\u0131r. JavaScript’in fetch()<\/code> API’si veya eski taray\u0131c\u0131lar i\u00e7in XMLHttpRequest<\/code> gibi ara\u00e7larla sunucuya istek at\u0131p, d\u00f6nen JSON verisini Chart.js grafi\u011fimize entegre edece\u011fiz.<\/p>\n
Bir sonraki ad\u0131mda, bu Chart.js kodunu Django Admin paneline nas\u0131l entegre edece\u011fimizi ve verileri dinamik olarak nas\u0131l \u00e7ekece\u011fimizi detayland\u0131raca\u011f\u0131z. Buradaki ana fikir, HTML ve JavaScript’in g\u00fcc\u00fcn\u00fc kullanarak, arka plandaki veri kayna\u011f\u0131ndan ba\u011f\u0131ms\u0131z olarak zengin ve interaktif bir \u00f6n y\u00fcz deneyimi sunmakt\u0131r. Bu yakla\u015f\u0131m, Django Admin’i sadece bir veri giri\u015f paneli olmaktan \u00e7\u0131kar\u0131p, ger\u00e7ek zamanl\u0131 i\u015f zekas\u0131 paneline d\u00f6n\u00fc\u015ft\u00fcrmenin kap\u0131lar\u0131n\u0131 aralar.<\/p>\n
Django Admin \u015eablonlar\u0131n\u0131 Geni\u015fletmek: Kendi Grafi\u011fimizi Entegre Etmek<\/h3>\n
Django Admin’e \u00f6zel grafiklerimizi eklemenin en uygun yolu, Django’nun kendi \u015fablon sistemini kullanarak Admin panelinin \u015fablonlar\u0131n\u0131 geni\u015fletmek (extend) veya ge\u00e7ersiz k\u0131lmak (override) olacakt\u0131r. Bu y\u00f6ntem, Admin panelinin genel g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc ve i\u015flevselli\u011fini bozmadan kendi \u00f6zel i\u00e7eri\u011fimizi eklememizi sa\u011flar. Genellikle, t\u00fcm Admin paneline etki etmek i\u00e7in admin\/base_site.html<\/code> \u015fablonunu veya belirli bir modelin listeleme veya detay sayfas\u0131na eklemek i\u00e7in admin\/change_list.html<\/code> ya da admin\/change_form.html<\/code> \u015fablonlar\u0131n\u0131 hedef al\u0131r\u0131z.<\/p>\n
Bu \u00f6rnekte, ana Admin panelinin ana sayfas\u0131nda (dashboard) bir grafik g\u00f6stermek istedi\u011fimizi varsayal\u0131m. Bunun i\u00e7in admin\/base_site.html<\/code> \u015fablonunu geni\u015fletmek en mant\u0131kl\u0131 yakla\u015f\u0131m olacakt\u0131r. \u0130lk olarak, projenizin ana dizininde (veya bir uygulaman\u0131z\u0131n i\u00e7inde) templates\/admin<\/code> ad\u0131nda bir klas\u00f6r olu\u015fturman\u0131z gerekir. Django, bu klas\u00f6rdeki \u015fablonlar\u0131, kendi Admin \u015fablonlar\u0131ndan \u00f6nce arayacakt\u0131r.<\/p>\n
\n
\n# Proje dizini yap\u0131s\u0131\nmyproject\/\n\u251c\u2500\u2500 myproject\/\n\u2502   \u251c\u2500\u2500 settings.py\n\u2502   \u2514\u2500\u2500 urls.py\n\u251c\u2500\u2500 myapp\/\n\u2502   \u251c\u2500\u2500 models.py\n\u2502   \u251c\u2500\u2500 views.py\n\u2502   \u2514\u2500\u2500 urls.py\n\u2514\u2500\u2500 templates\/\n    \u2514\u2500\u2500 admin\/\n        \u2514\u2500\u2500 base_site.html  <-- Buraya ekleyece\u011fiz\n  <\/code><\/pre>\n<\/div>\n
base_site.html<\/code> dosyas\u0131n\u0131 olu\u015fturduktan sonra, Django’nun orijinal base_site.html<\/code> \u015fablonunu geni\u015fletmemiz ve kendi i\u00e7eri\u011fimizi uygun bir blo\u011fa eklememiz gerekiyor. Genellikle {% block content %}<\/code> blo\u011fu, ana i\u00e7eri\u011fi yerle\u015ftirmek i\u00e7in idealdir. Ayr\u0131ca, Chart.js k\u00fct\u00fcphanesini ve kendi JavaScript kodumuzu da bu \u015fablona dahil etmeliyiz.<\/p>\n
\n
\n<!-- templates\/admin\/base_site.html -->\n{% extends \"admin\/base.html\" %}\n{% load static %}\n\n{% block extrahead %}\n  <!-- Chart.js k\u00fct\u00fcphanesini CDN'den y\u00fckle -->\n  <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n{% endblock %}\n\n{% block content %}\n  {{ block.super }} <!-- Orijinal admin i\u00e7eri\u011fini koru -->\n\n  <div style=\"margin: 20px;\"> <!-- Grafi\u011fi biraz bo\u015flukla yerle\u015ftir -->\n    <h3>Son 7 G\u00fcnl\u00fck Sat\u0131\u015f Grafi\u011fi<\/h3>\n    <div class=\"chart-container\" style=\"position: relative; height:40vh; width:80vw\">\n      <canvas id=\"dailySalesChart\"><\/canvas>\n    <\/div>\n  <\/div>\n\n  <script>\n    document.addEventListener('DOMContentLoaded', function() {\n      const ctx = document.getElementById('dailySalesChart').getContext('2d');\n      let salesChart; \/\/ Grafik nesnesini d\u0131\u015far\u0131da tan\u0131mla\n\n      function fetchSalesData() {\n        fetch('\/myapp\/api\/daily-sales\/') \/\/ Daha \u00f6nce olu\u015fturdu\u011fumuz API u\u00e7 noktas\u0131\n          .then(response => response.json())\n          .then(data => {\n            const labels = data.sales.map(item => item.date);\n            const salesAmounts = data.sales.map(item => item.total_sales);\n\n            if (salesChart) {\n              \/\/ Grafik zaten varsa veriyi g\u00fcncelle\n              salesChart.data.labels = labels;\n              salesChart.data.datasets[0].data = salesAmounts;\n              salesChart.update();\n            } else {\n              \/\/ Grafik yoksa yeni olu\u015ftur\n              salesChart = new Chart(ctx, {\n                type: 'line',\n                data: {\n                  labels: labels,\n                  datasets: [{\n                    label: 'Toplam Sat\u0131\u015f (\u20ba)',\n                    data: salesAmounts,\n                    backgroundColor: 'rgba(75, 192, 192, 0.2)',\n                    borderColor: 'rgba(75, 192, 192, 1)',\n                    borderWidth: 1,\n                    fill: true\n                  }]\n                },\n                options: {\n                  responsive: true,\n                  maintainAspectRatio: false,\n                  scales: {\n                    y: {\n                      beginAtZero: true,\n                      title: {\n                        display: true,\n                        text: 'Sat\u0131\u015f Miktar\u0131'\n                      }\n                    },\n                    x: {\n                        title: {\n                            display: true,\n                            text: 'Tarih'\n                        }\n                    }\n                  }\n                }\n              });\n            }\n          })\n          .catch(error => console.error('Sat\u0131\u015f verileri \u00e7ekilirken hata olu\u015ftu:', error));\n      }\n\n      \/\/ Sayfa y\u00fcklendi\u011finde veriyi \u00e7ek ve grafi\u011fi olu\u015ftur\n      fetchSalesData();\n\n      \/\/ \u0130ste\u011fe ba\u011fl\u0131: Grafi\u011fi belirli aral\u0131klarla g\u00fcncelle (\u00f6rn: her 30 saniyede bir)\n      \/\/ setInterval(fetchSalesData, 30000);\n    });\n  <\/script>\n{% endblock %}\n  <\/code><\/pre>\n<\/div>\n
Bu kod blo\u011funda dikkat etmemiz gereken birka\u00e7 \u00f6nemli nokta var:<\/p>\n