CODEWITHSUNDEEP
pythonhtmlcssdjangochart.js
Din
Din

Reputation: 61

How to put implement chart.js into an existing page django

I am making this website that has this function that shows total hours worked for the employee. I want to make so that when it shows the total hours worked, it will also show the hours worked for each day in that month. I managed to do the chart for that but the chart will show on another page so how do I show the chart and the total hours worked on the same page?

code:

def checkTotalHours(response):    
    empName = employeeName.objects.all()
    if response.method == "POST":
        if 'checkName' in response.POST:
            n = response.POST.get("check")
            emp = employeeName.objects.get(employee=n)
            time = emp.total_Hours_Worked
            messages.info(response, time + ' hours')
            f = Name.objects.filter(name=emp)
            allDate = []
            cIn = []
            today = datetime.today()
            datem = today.month
            for date in f:
                allDate.append(date.date)
                totalTime = (datetime.combine(date.date, date.timeOut)- datetime.combine(date.date, date.timeIn)).seconds/3600
                cIn.append(totalTime)
                hours = int(totalTime)
                minutes = (totalTime*60) % 60
                seconds = (totalTime*3600) % 60
                time = "%d:%02d:%02d" % (hours, minutes, seconds) 
                #cIn.append(time)
            global cInUpdated
            global allDateUpdated
            
            cInUpdated = []
            allDateUpdated = []
            for item in range(len(allDate)):
                if allDate[item].month == datem:
                    cInUpdated.append(cIn[item])
                    allDateUpdated.append(allDate[item])
                    print("Here:: ", allDate[item].month," ", cIn[item] )
                else:
                    continue
            for item in range(len(cInUpdated)):
                print("Work: ", allDateUpdated[item], " ",cInUpdated[item])
            return redirect('/totalHours')
    else: 
        form = CreateNewList()
    return render(response, "main/checkTotalHours.html",  {"empName":empName})

HTML:

{% extends 'main/base.html' %}

{% block title %}Filter{% endblock %}
{% block content %}

<h1 class="p1">Filter</h1>
<hr class="mt-0 mb-4">
<h2 class="p2">by Total Hours Worked</h3>

<div class="pad">
    <form method="post">
        {% csrf_token %}
        <div class="input-group mb-2">
            <div class="input-group-prepend">
                <input list="check" name="check"  placeholder="enter name...">
                <datalist id="check">
                    {% for empName in empName %}
                        <option value="{{empName.employee}}">
                    {% endfor %}
                </datalist>
                <button type="submit" name="checkName" value="checkName" class="button2" id="example2">Check</button>
            </div>
        </div>
    </form>
</div>

{% for message in messages %}
<div class="container-fluid p-0">
  <div class="alert {{ message.tags }} alert-info" role="alert" >
     {{ message }} 
  </div>
</div>
{% endfor %}
{% endblock %}

and I implemented chart.js on another page with this code

class HomeView(View):
    def get(self, request, *args, **kwargs):
        return render(request, 'main/index.html')
   
class ChartData(APIView):   
    def get(self, request, format = None):
        chartLabel = allDateUpdated
        chartdata = cInUpdated
        data ={
                     "labels":allDateUpdated,
                     "chartLabel":chartLabel,
                     "chartdata":chartdata,
             }
        return Response(data)

HTML for the graph:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  
<head>
  <meta charset="utf-8">
  <title>chatsjs</title>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  
  <!-- jQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  
  <!-- Latest compiled JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  
  
  
</head>
  
<body class="container-fluid">
  <center class="row">
    <h1>implementation of <b>chartJS</b> using <b>django</b></h1>
  </center>
  <hr />
  <div class="row">
    <div class="col-md-6">
      <canvas id="myChartline"></canvas>
    </div>
    <div class="col-md-6">
      <canvas id="myChartBar"></canvas>
    </div>
  </div>
  
  <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
  
  <script>
    var endpoint = '/api';
  
    $.ajax({
      method: "GET",
      url: endpoint,
      success: function(data) {
        drawLineGraph(data, 'myChartline');
        drawBarGraph(data, 'myChartBar');
        console.log("drawing");
      },
      error: function(error_data) {
        console.log(error_data);
      }
    })
  
  
    function drawLineGraph(data, id) {
      var labels = data.labels;
      var chartLabel = data.chartLabel;
      var chartdata = data.chartdata;
      var ctx = document.getElementById(id).getContext('2d');
      var chart = new Chart(ctx, {
        // The type of chart we want to create
        type: 'line',
  
        // The data for our dataset
        data: {
          labels: labels,
          datasets: [{
            label: chartLabel,
            backgroundColor: 'rgb(255, 100, 200)',
            borderColor: 'rgb(55, 99, 132)',
            data: chartdata,
          }]
        },
  
        // Configuration options go here
        options: {
          scales: {
            xAxes: [{
              display: true
            }],
            yAxes: [{
              ticks: {
                beginAtZero: true
              }
            }]
          }
        }
  
      });
    }
  
    function drawBarGraph(data, id) {
      var labels = data.labels;
      var chartLabel = data.chartLabel;
      var chartdata = data.chartdata;
      var ctx = document.getElementById(id).getContext('2d');
      var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
          labels: labels,
          datasets: [{
            label: chartLabel,
            data: chartdata,
            backgroundColor: [
              'rgba(255, 99, 132, 0.2)',
              'rgba(54, 162, 235, 0.2)',
              'rgba(255, 206, 86, 0.2)',
              'rgba(75, 192, 192, 0.2)',
              'rgba(153, 102, 255, 0.2)',
              'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
              'rgba(255, 99, 132, 1)',
              'rgba(54, 162, 235, 1)',
              'rgba(255, 206, 86, 1)',
              'rgba(75, 192, 192, 1)',
              'rgba(153, 102, 255, 1)',
              'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
          }]
        },
        options: {
          scales: {
            yAxes: [{
              scaleLabel: {
                display: true,
                labelString: 'Time'
              }
            }]
          }
        }
      });
    }
  </script>
</body>
  
</html>

I am wondering how to make it so that both shows in one page?

urls:

path("totalHours/", views.checkTotalHours, name="totalHours"),
path('api/', views.ChartData.as_view()),
path('chart/', views.HomeView.as_view(), name = "chart")

Upvotes: 0

Views: 197

Answers (1)

Frederic Perron
Frederic Perron

Reputation: 798

You simply need to combine the code of your two templates. You can pass you data to your JS via the template by adding values in a <style></style> tag if needed. Apart from there's really nothing else there need to be done...

Upvotes: 1

Related Questions