How to pass an array from django views to external JS file for chart

Question

I am designing a dashboard where i need to pass labels and data to my chart from django views to Variables in Java Script. This below code is not displaying lables or data in chart.

when i pass values directly into JS it works. But when same values passed through views.py it throws error in console like : ( jQuery.Deferred exception: Cannot read properties of null (reading 'getContext') TypeError: Cannot read properties of null (reading 'getContext'))

Django Views

def chartd(request):
    labelss=["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"]
    datas = [170, 123, 125, 90, 92, 70, 75, 60, 90, 80, 110, 100]
    context = {"labelss": mark_safe(json.dumps(labelss)), "datas": mark_safe(json.dumps(datas))}
    return render(request, 'charts.html',context)

Java Script for charts.html

  var chart_labels =JSON.parse('{{labelss}}');
  var chart_data =JSON.parse('{{datas}}');

    var ctx = document.getElementById("chartBig1").getContext('2d');

    var gradientStroke = ctx.createLinearGradient(0, 230, 0, 50);

    gradientStroke.addColorStop(1, 'rgba(72,72,176,0.1)');
    gradientStroke.addColorStop(0.4, 'rgba(72,72,176,0.0)');
    gradientStroke.addColorStop(0, 'rgba(119,52,169,0)'); //purple colors
    var config = {
      type: 'line',
      data: {
        labels: chart_labels,
        datasets: [{
          label: "My First dataset",
          fill: true,
          backgroundColor: gradientStroke,
          borderColor: '#d346b1',
          borderWidth: 2,
          borderDash: [],
          borderDashOffset: 0.0,
          pointBackgroundColor: '#d346b1',
          pointBorderColor: 'rgba(255,255,255,0)',
          pointHoverBackgroundColor: '#d346b1',
          pointBorderWidth: 20,
          pointHoverRadius: 4,
          pointHoverBorderWidth: 15,
          pointRadius: 4,
          data: chart_data
        }]
      }
      options: gradientChartOptionsConfigurationWithTooltipPurple
    };
    var myChartData = new Chart(ctx, config);
    $("#0").click(function() {
      var data = myChartData.config.data;
      data.datasets[0].data = chart_data;
      data.labels = chart_labels;
      myChartData.update();
    });
    $("#1").click(function() {
      var chart_data = [80, 120, 105, 110, 95, 105, 90, 100, 80, 95, 70, 120];
      var data = myChartData.config.data;
      data.datasets[0].data = chart_data;
      data.labels = chart_labels;
      myChartData.update();
    });

    $("#2").click(function() {
      var chart_data = [60, 80, 65, 130, 80, 105, 90, 130, 70, 115, 60, 130];
      var data = myChartData.config.data;
      data.datasets[0].data = chart_data;
      data.labels = chart_labels;
      myChartData.update();
    });

Does this answer your question? Python list does not work in django with ChartJS — LeeLenalee
– LeeLenalee, Commented Nov 12, 2021 at 7:56

zelenyjan · Accepted Answer · 2021-11-12 08:55:41Z

0

Can be done like this:

def chartd(request):
    labelss=['JANS', 'FEBS', 'MARS', 'APRS', 'MAYS', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC']
    datas = [120, 123, 125, 90, 92, 70, 75, 60, 90, 80, 110, 100]
    context = {"labelss": mark_safe(json.dumps(labelss)), "datas": mark_safe(json.dumps(datas))}
    return render(request, 'charts.html',context)

labelss and datas are json strings now

<script>
var chart_labels =JSON.parse('{{labelss}}');
var chart_data =JSON.parse('{{datas}}');
</script>

and in JS/HTMl file you will convert json strings back to objects.

but better approach is just make view that returns JsonResponse and call it from JS using fetch.

UPDATE: test if data from view are same as manually set(for testing).

<script>
  // from Django's view
  var chart_labels = JSON.parse('{{labelss}}');
  var chart_data = JSON.parse('{{datas}}');

  // manually set
  var chart_labels2 = ["JANS", "FEBS", "MARS", "APRS", "MAYS", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"];
  var chart_data2 = [120, 123, 125, 90, 92, 70, 75, 60, 90, 80, 110, 100];

  // check if same
  console.log(JSON.stringify(chart_labels) === JSON.stringify(chart_labels2));
  // returns true
  console.log(JSON.stringify(chart_data) === JSON.stringify(chart_data2));
  // returns true
</script>

Fully working example:

views.py

def chartd(request):
    labelss = ["JANS", "FEBS", "MARS", "APRS", "MAYS", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"]
    datas = [120, 123, 125, 90, 92, 70, 75, 60, 90, 80, 110, 100]
    context = {"labelss": mark_safe(json.dumps(labelss)), "datas": mark_safe(json.dumps(datas))}
    return render(request, "charts.html", context)

charts.js

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Chart</title>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"></script>
</head>
<body>

<canvas id="chart1"></canvas>
<script>
  // from Django's view
  var chart_labels = JSON.parse('{{labelss}}');
  var chart_data = JSON.parse('{{datas}}');

  var ctx = document.getElementById("chart1").getContext('2d');
  var gradientStroke = ctx.createLinearGradient(0, 230, 0, 50);
  gradientStroke.addColorStop(1, "rgba(72,72,176,0.1)");
  gradientStroke.addColorStop(0.4, "rgba(72,72,176,0.0)");
  gradientStroke.addColorStop(0, "rgba(119,52,169,0)"); //purple colors
  var config = {
    type: "line",
    data: {
      labels: chart_labels,
      datasets: [{
        label: "dataset",
        fill: true,
        backgroundColor: gradientStroke,
        borderColor: "#d346b1",
        borderWidth: 2,
        borderDash: [],
        borderDashOffset: 0.0,
        pointBackgroundColor: "#d346b1",
        pointBorderColor: "rgba(255,255,255,0)",
        pointHoverBackgroundColor: "#d346b1",
        pointBorderWidth: 20,
        pointHoverRadius: 4,
        pointHoverBorderWidth: 15,
        pointRadius: 4,
        data: chart_data
      }]
    }
  };
  new Chart(ctx, config);
</script>

</body>
</html>

Result:

edited Nov 12, 2021 at 8:55

answered Nov 12, 2021 at 0:42

zelenyjan

7036 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

harish krishna Over a year ago

This didn't work. when it gets saved in var chart_labels and chart data it should be same as ['JANS', 'FEBS', 'MARS', 'APRS', 'MAYS', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'] , [120, 123, 125, 90, 92, 70, 75, 60, 90, 80, 110, 100] datatypes or else chart don't fetch these values

zelenyjan Over a year ago

@harishkrishna it's same as if you set it manually. Check if your chart works if you set these values manually because data from view are valid. I updated my answer so you can see it.

harish krishna Over a year ago

Hi, please check this. When i give same values manually it works but from views its thows error in console : (charts.html:1296 Uncaught SyntaxError: Unexpected identifier)

harish krishna Over a year ago

console log information gives empty string " " @zelenyjan

harish krishna Over a year ago

If you know JsonResponse, help me out using that in this scenario.

|

Collectives™ on Stack Overflow

How to pass an array from django views to external JS file for chart

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related