Chartjs splitting double digit numbers

Question

I have seen this question asked a few times but I couldn't find a solution that worked for me.

I am passing a Django variable into Chartjs to plot, all of the single-digit numbers are correct but it turns double-digits into single. Like 11 is 1,1...23 is 2,3.

I have tried a bunch of different ways but cant figure it out, I appreciate any help you can offer.

    var home_runs = '{% for game in all_games.home_ten %}{{ game.runs }}{% endfor %}'

        var ctx = document.getElementById('runChart').getContext('2d');
        var runChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: labels,
            datasets: [
                {
                  label: home_team,
                  data: home_runs
                },
                {
                  label: away_team,
                  data: away_runs,
                    
                    ],
                    }
            ]
        },
        options: {
            responsive: true,
        },
    });

user_10606400 · Answer

You can push that values inside array instead of directly passing them to your data. So , you can add this in your js code i.e :

  var home_runs = [];
  '{% for game in all_games.home_ten %}'
     home_runs.push(parseInt('{{ game.runs }}'))
  '{% endfor %}'

Demo Code :

/* var home_runs = [];
 {% for game in all_games.home_ten %}
home_runs.push(parseInt('{{ game.runs }}'))
{% endfor %}*/
var home_runs = [11, 52, 85, 93]
var away_runs = [12, 52, 82, 94]
var ctx = document.getElementById('runChart').getContext('2d');
var runChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ["A", "B", "C", "D"],
    datasets: [{
        label: "Abc",
        data: home_runs
      },
      {
        label: "Xyz",
        data: away_runs

      }
    ],
  },
  options: {
    responsive: true,
  },
});

Chartjs splitting double digit numbers

1 Answers