0

I have the following JS code:

data: [40, 60, 30, 65, 60, 95, 90, 100, 96, 120, 105, 134]

This represents a curve in a graph on HTML.

I want to draw a line (same value 12 times), and this value is brought by Django.

The value is 100. I tried the following:

in Django: limit = [mylimit for i in range(1,12)]

in JS: data: {{ limit }}

didn't work.

I even tried creating the list manually on Django: limit = f"{limit}, {limit}, ...." and doing this on JS: data: [{{ limit }}] and nothing works.

My goal is to take whatever limit I have (aka: 100), and have the following JavaScript: data: [100, 100, 100.....

Here is the full JavaScript code:

// sales analytics Chart
let situationSocieteChart = {
    labels: ["Jan", "Fev", "Mar", "Avr", "Mai", "Jun", "Jul", "Aou", "Sep", "Oct", "Nov", "Dec"],
    legend: true,
    lineTension: .4,
    ticksValue: 'k',
    ticksColor: '#9CA3AF',
    ticksFontSize: 11,
    ticksFontWeight: 100,
    gridBorderDash: [8, 4],
    maxTicksLimit: 10,
    xAxis: true,
    gridColorX: NioApp.Colors.white,
    gridColorY: NioApp.Colors.gray100,
    gridBorderColorX: NioApp.Colors.white,
    gridBorderColorY: NioApp.Colors.white,
    datasets: [
        {
            borderWidth: 3,
            color: NioApp.Colors.yellow,
            backgroundGradient: NioApp.Colors.yellow,
            pointBorderColor: 'transparent',
            pointBackgroundColor: 'transparent',
            pointHoverBackgroundColor: NioApp.Colors.yellow,
            label: "Transactions",
            data: [40, 60, 30, 65, 60, 95, 90, 100, 96, 120, 105, 134]
        },
        {
            borderWidth: 2,
            pointBorderColor: 'transparent',
            pointBackgroundColor: 'transparent',
            color: NioApp.Colors.danger,
            pointHoverBackgroundColor: NioApp.Colors.danger,
            label: "Plafond",
            borderDash: [8, 4],
            data: document.getElementById("situation") <<<<<<<<<-------------------
        },
    ]
};
Kaiss B.
  • 249
  • 1
  • 12
  • I even tried this: `data: ["{{ limit }}", "{{ limit }}", "{{ limit }}", "{{ limit }}", "{{ limit }}", "{{ limit }}", "{{ limit }}", "{{ limit }}", "{{ limit }}", "{{ limit }}", "{{ limit }}", "{{ limit }}"]` and it didn't work – Kaiss B. Nov 01 '22 at 11:21
  • In django you are passing the limit variable as a context on the response? If you try to use {{limit}} in the html and not in the js, is this renderized? – Pablo Estevez Nov 01 '22 at 11:36
  • yes it is. I put it on the HTML file and it renders. – Kaiss B. Nov 01 '22 at 11:38
  • I have the same problem once. The simple solution is render in html in a hide div (with display none and some id) and read that from javascript – Pablo Estevez Nov 01 '22 at 11:46
  • Maybe one of this answer have your solution https://stackoverflow.com/questions/298772/django-template-variables-and-javascript – Pablo Estevez Nov 01 '22 at 11:51
  • I tried the hidden element and didnt work: here's what I did: `` and in JS: `data: document.getElementById("situationJS")` – Kaiss B. Nov 01 '22 at 12:17
  • if you do a console.log to document.getElementById("situationJS"), what is the result? maybe is a string and not a list? – Pablo Estevez Nov 02 '22 at 13:26
  • 1
    I resolved the issue. I just took the code from the javascript file and put it inside the html file in a – Kaiss B. Nov 08 '22 at 15:26

0 Answers0