0

How to create a line chart that gives daily updates in django and js. i want to know the theory of creating a daily analysis line chart in django. That show the data of whole week, and it's max value each day. Like in any graph.

GamesWarehouse 4u
  • 1
  • 1

2 Answers2

1

You can use CanvasJS Django charts in your case. Checkout CanvasJS gallery for numerous examples with different sets of use-cases. Below is a code-snippet for simple line chart to show daily data in Django.

Template:

<!-- index.html -->
{% load static %} 
<html>
<head>
<script>
window.onload = function () {
  var chart= new CanvasJS.Chart("chartContainer", {
    theme: "light2",
    title: {
      text: "Step Count Over a Week"
    },
    axisY: {
      title: "Number of Steps",
      stripLines: [{
        value: 10000,
        label: "Goal"
      }]
    },
    data: [{
      type: "line",
      yValueFormatString: "#,### Steps",
      dataPoints: {{ stepcount|safe }}
    }]
  });
  chart.render();
}
</script>    
</head>
<body>
    <div id="chartContainer" style="width: 100%; height: 360px;"></div>
    <script src="{% static 'canvasjs.min.js' %}"></script>
</body>
</html>

View:

from django.shortcuts import render
 
def index(request):
 
  stepcount = [
    { "y": 10560, "label":"Sunday" },
    { "y": 9060, "label":"Monday" },
    { "y": 6650, "label":"Tuesday" },
    { "y": 8305, "label":"Wednesday" },
    { "y": 8531, "label":"Thursday" },
    { "y": 10150, "label":"Friday" },
    { "y": 8921, "label":"Saturday" }
  ]
  
  return render(request, 'index.html', { "stepcount": stepcount })
Vishwas R
  • 3,340
  • 1
  • 16
  • 37
0

You can use chartjs for visualizing the data, i think based on your question about show the data of whole week or maximum value for each day, you can see the answer to this identical question : Django and ChartJS

To find the maximum value in one day you can use django aggregation, see the references in here : https://docs.djangoproject.com/en/3.1/topics/db/aggregation/

Dharman
  • 30,962
  • 25
  • 85
  • 135
ryaneatdinosaurs
  • 103
  • 1
  • 8