64 lines
1.7 KiB
HTML
64 lines
1.7 KiB
HTML
{% 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 %}
|