Django

templates/charts/index.html

@@ -0,0 +1,63 @@
+{% extends "layouts/base.html" %}
+{% load static %}
+
+{% block title %}Charts{% endblock title %}
+
+{% block content %}
+  <div class="container-fluid py-2">
+    <div class="row">
+      <!-- [ Bar Chart ] start -->
+      <div class="col-sm-12 col-md-6">
+        <div class="card">
+          <div class="card-header">
+            <h5>Bar Chart</h5>
+          </div>
+          <div class="card-body text-center">
+            <div id="bar-chart"></div>
+          </div>
+        </div>
+      </div>
+      <!-- [ Bar Chart ] end -->
+
+      <!-- [ Pie Chart ] start -->
+      <div class="col-sm-12 col-md-6">
+        <div class="card">
+          <div class="card-header">
+            <h5>Pie Chart</h5>
+          </div>
+          <div class="card-body text-center">
+            <div id="pie-chart"></div>
+          </div>
+        </div>
+      </div>
+      <!-- [ Pie Chart ] end -->
+    </div>
+  </div>
+{% endblock content %}
+
+{% block extra_js %}
+<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: '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: prices,
+      labels: names
+    };
+    var pieChart = new ApexCharts(document.querySelector("#pie-chart"), pieOptions);
+    pieChart.render();
+  });
+</script>
+{% endblock extra_js %}