Make chart dynamic

Author: mominur-helios

apps/pages/views.py

@@ -1,8 +1,6 @@
-from django.shortcuts import render, redirect
-from admin_datta.forms import RegistrationForm, LoginForm, UserPasswordChangeForm, UserPasswordResetForm, UserSetPasswordForm
-from django.contrib.auth.views import LoginView, PasswordChangeView, PasswordResetConfirmView, PasswordResetView
-from django.views.generic import CreateView
-from django.contrib.auth import logout
+from django.shortcuts import render
+from apps.pages.models import Product
+from django.core import serializers
 
 from .models import *
 
@@ -16,7 +14,9 @@ def index(request):
 
 
 def charts(request):
+  products = serializers.serialize('json', Product.objects.all())
   context = {
-    'segment': 'charts'
+    'segment': 'charts',
+    'products': products
   }
   return render(request, 'pages/charts.html', context)

templates/pages/charts.html

@@ -64,18 +64,22 @@ <h5>Pie Chart</h5>
 <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
 <script>
   document.addEventListener("DOMContentLoaded", function() {
+    var products = JSON.parse('{{ products|escapejs }}');
+    var names = products.map(p => p.fields.name);
+    var prices = products.map(p => p.fields.price);
+
     var barOptions = {
       chart: { type: 'bar', height: 350 },
-      series: [{ name: 'Sales', data: [30, 40, 45, 50, 49, 60, 70, 91] }],
-      xaxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug'] }
+      series: [{ name: 'Price', data: prices }],
+      xaxis: { categories: names }
     };
     var barChart = new ApexCharts(document.querySelector("#bar-chart"), barOptions);
     barChart.render();
 
     var pieOptions = {
       chart: { type: 'pie', height: 350 },
-      series: [44, 55, 13, 43, 22],
-      labels: ['Apple', 'Mango', 'Orange', 'Banana', 'Grapes']
+      series: prices,
+      labels: names
     };
     var pieChart = new ApexCharts(document.querySelector("#pie-chart"), pieOptions);
     pieChart.render();