I am trying to visualize data in my django project using Chartjs. right now I'm only concerned with the visualize part and not the backend stuff but for some strange reason the charts refuses to display even though I copied and pasted them directly from Chartjs website.

<div id="chart_div" >
            <canvas id="myChart" width="648" height="495"></canvas>
          </div> 
          <script>
            const ctx = document.getElementById('myChart');
            const myChart = {
                type : 'bar',
                data : {
                    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
                    datasets: [{
                        label: '# of Votes',
                        data: [12, 19, 3, 5, 2, 3],
                        backgroundColor: [
                            'rgba(255, 99, 132, 0.2)',
                            'rgba(54, 162, 235, 0.2)',
                            'rgba(255, 206, 86, 0.2)',
                            'rgba(75, 192, 192, 0.2)',
                            'rgba(153, 102, 255, 0.2)',
                            'rgba(255, 159, 64, 0.2)'
                        ],
                        borderColor: [
                            'rgba(255, 99, 132, 1)',
                            'rgba(54, 162, 235, 1)',
                            'rgba(255, 206, 86, 1)',
                            'rgba(75, 192, 192, 1)',
                            'rgba(153, 102, 255, 1)',
                            'rgba(255, 159, 64, 1)'
                        ],
                        borderWidth: 1
                    }]
                },
                options : {
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            };
            </script>

As you can see from the code above. its boilerplate but I just cant get it to visualize.

CodePudding user response：

I think you have not added the cdn link