dot line graph in django with mysql

Question

Thanks in Advance...!

Query: I want to display my graph in a card. The graph must look like enter image description here

but i am unable to design this... as this graph must be dynamic with Django and mysql.

my models.py file is:

class JaAiPredictions(models.Model):
    project_management_id = models.IntegerField(blank=True, null=True)
    date = models.DateField(blank=True, null=True)
    ecommerce_users = models.FloatField(blank=True, null=True)
    total_revenue = models.FloatField(blank=True, null=True)
    conversion_rate = models.FloatField(blank=True, null=True)
    total_transactions = models.IntegerField(blank=True, null=True)
    avg_order_value = models.FloatField(blank=True, null=True)
    total_ads_clicks = models.IntegerField(blank=True, null=True)
    total_ads_cost = models.FloatField(blank=True, null=True)
    ads_cpc_value = models.FloatField(blank=True, null=True)
    mcf_conversion = models.FloatField(blank=True, null=True)
    mcf_conversion_value = models.FloatField(blank=True, null=True)
    mcf_assisted_conversion = models.FloatField(blank=True, null=True)
    mcf_assisted_value = models.FloatField(blank=True, null=True)
    social_facebook_clicks = models.IntegerField(blank=True, null=True)
    social_twitter_clicks = models.IntegerField(blank=True, null=True)
    social_pinterest_clicks = models.IntegerField(blank=True, null=True)
    social_instagram_clicks = models.IntegerField(blank=True, null=True)
    new_visitors = models.IntegerField(blank=True, null=True)
    returning_visitors = models.IntegerField(blank=True, null=True)
    total_users = models.IntegerField(blank=True, null=True)
    total_pageviews = models.IntegerField(blank=True, null=True)
    bounce_rate = models.FloatField(blank=True, null=True)
    total_sessions = models.IntegerField(blank=True, null=True)
    session_duration = models.IntegerField(blank=True, null=True)
    session_by_desktop = models.FloatField(blank=True, null=True)
    session_by_tablet = models.FloatField(blank=True, null=True)
    session_by_mobile = models.FloatField(blank=True, null=True)
    total_mobile_users = models.IntegerField(blank=True, null=True)
    total_desktop_users = models.IntegerField(blank=True, null=True)
    total_tablet_users = models.IntegerField(blank=True, null=True)
    total_paid_pageviews = models.IntegerField(blank=True, null=True)
    total_paid_users = models.IntegerField(blank=True, null=True)
    total_referral_pageviews = models.IntegerField(blank=True, null=True)
    total_referral_users = models.IntegerField(blank=True, null=True)
    total_organic_pageviews = models.IntegerField(blank=True, null=True)
    total_organic_users = models.IntegerField(blank=True, null=True)
    total_direct_pageviews = models.IntegerField(blank=True, null=True)
    total_direct_users = models.IntegerField(blank=True, null=True)
    total_email_pageviews = models.IntegerField(blank=True, null=True)
    total_email_users = models.IntegerField(blank=True, null=True)
    fb_clicks = models.IntegerField(blank=True, null=True)
    fb_cpc = models.FloatField(blank=True, null=True)
    fb_impressions = models.IntegerField(blank=True, null=True)
    fb_reach = models.IntegerField(blank=True, null=True)
    fb_action_type_like = models.IntegerField(blank=True, null=True)
    fb_action_type_link_click = models.IntegerField(blank=True, null=True)
    fb_spend = models.FloatField(blank=True, null=True)
    fb_mobile_app_purchase_roas = models.FloatField(blank=True, null=True)
    fb_purchase_roas = models.FloatField(blank=True, null=True)
    fb_website_purchase_roas = models.FloatField(blank=True, null=True)

    class Meta:
        managed = False
        db_table = 'ja_ai_predictions'
        verbose_name = 'Forecast'
        ordering = ['date']

and here the targert column are: date and total_revenue

views.py

@login_required(login_url="/login/")
def index(request):
    today = datetime.date.today()
    print("today date is:", today)
    next_week = today + datetime.timedelta(days=7)
    print("Current date is:", next_week)
    com = (next_week - today)
    print(com)
    last_week = today - datetime.timedelta(days=7)
    total_revenue = JaGAnalyticsData.objects.filter(
    date__year=today.year, date__month=today.month,
    ).aggregate(total_revenue=Sum('total_revenue'))['total_revenue']
    formated_total_revenue= '{0:.2f}'.format(total_revenue) 

    context = {
        'year': today.year,
        'month': today.strftime('%B'),
        'total_revenue': formated_total_revenue,
                }
    html_template = loader.get_template('home/index.html')
    return HttpResponse(html_template.render(context, request))

index.html

<div class="row">
            <div class="col-xl-3 col-md-6">
              <div class="card card-stats">
                <!-- Card body -->
                <div class="card-body">
                  <div class="row">
                    <div class="col">
                      <h5 class="card-title text-uppercase text-muted mb-0">REVENUE <img src="/static/assets/img/icons/infoB.svg" alt="Infomation icon" width='9' height='9'> </h5> 
                      <br><br>
                        <center><span  class="card-title text-uppercase text-muted mb-0">A.I Forecast for this week</span></center>
                       <!-- chart -->
                        <br>
                        <div class="card chart-container">
                          <canvas id="chart">
                          </canvas>
                            <script
                            src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js">
                            </script>
                            <script>
                                  const ctx = document.getElementById("chart").getContext('2d');
                                  const myChart = new Chart(ctx, {
                                    type: 'line',
                                    data: {
                                       datasets: [{
                                       backgroundColor: '#B6A012',
                                       data: [3000,400],
                                      }]
                                    },
                                    options: {
                                      scales: {
                                        yAxes: [{
                                          ticks: {
                                            beginAtZero: true,
                                          }
                                        }]
                                      }
                                    },
                                  });
                            </script>
                       </div>
                       <!-- end chart -->


                    </div>
                  </div>
                  <!-- adding the last week and current values  -->
                    <div class="row">
                        <div class="col-sm-6">
                            <h5 style="margin-top:3px " class="card-title text-uppercase text-muted mb-0">Last week</h5>
                        </div>
                        <div class="col-sm-6">
                          <span style="float: right;" class="h4 font-weight-bold">Rs{{ total_revenue }}</span>
                        </div>
                        <div class="col-sm-6">
                            <h5 style="margin-top:3px" class="card-title text-uppercase text-muted mb-0">Current</h5>
                        </div>
                        <div class="col-sm-6">
                          <span style="float: right;" class="h4 font-weight-bold">Rs. 2,000</span>
                        </div>
                    </div>
                    <!--  End adding the last week and current values  -->
                  <p class="mt-3 mb-0 text-sm">
                    <span class="text-success mr-2"><i class="fa fa-arrow-up"></i> 3.48%</span>
                    <span class="text-nowrap">Since last month</span>
                  </p>
                </div>
              </div>
            </div>{% comment %}col-xl-3 col-md-6 end{% endcomment %}

          </div><!-- class = row end -->
        </div>
      </div>
    </div>

Note: Yet, I have created a simple static graph but here i want a dynamic graph. here is my card is : enter image description here