Skip to content

J
JARVIS
Commit 935a370a authored by Dexter Sapugay's avatar Dexter Sapugay
Browse files
Options

s

parent d3b3629f
Hide whitespace changes
Inline Side-by-side
Showing with 29 additions and 39 deletions
IPS/IPSapp/templates/EmployeeProdDB/chart_template.html
View file @ 935a370a
<html>
<head>
<title>Bar Chart Example using Chart.js</title>
<!-- Load Chart.js from jsdelivr -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<!-- <body>
{% extends 'EmployeeProdDB/base.html' %}
{% block content %}
<div>
<canvas id="myChart"></canvas>
<script>
// Get the data from the server using Django templates
const data = JSON.parse('{{ summary_data | safe }}');
</div>
// Get the labels and values from the data
const labels = data.map(entry => entry.employee_name);
const values = data.map(entry => entry.prod_score);
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
// Create a new Chart.js instance
const ctx = document.getElementById('myChart').getContext('2d');
const chart = new Chart(ctx, {
type: 'bar',
data: {
labels: labels,
datasets: [{
label: 'Productivity Score',
data: values,
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
<script>
const ctx = document.getElementById('myChart');
new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>
</body> -->
</html>
</script>
{% endblock %}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment