Chartjs-First and last value is not displaying in chart.js used with django

by

0đź‘Ť

âś…

Actually, i got it right ..the mistake was silly as i got the value with ” ” that is 

let data={% autoescape off %}
                   "{{ data }}"
                {% endautoescape %};

instead of 

let data={% autoescape off %}
                  {{ data }}
         {% endautoescape %};

so , no need of split()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Chart.js</title>
</head>
<body>
<div >
    <div>
        <canvas id="genderchart" width="1000"></canvas>
    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
<script>
let data={% autoescape off %}
                        {{ data }}
                      {% endautoescape %};
console.log(data)


            new Chart(document.getElementById("genderchart"),{
                type:'bar',
                data:{
                    labels:data.label_data,
                    datasets:[
                        {
                            label:"employee",
                            backgroundColor:"rgba(62,149,205,1)",
                            borderColor: "rgba(62,149,205,1)",
                            pointBackgroundColor:"rgba(62,149,205,1)",
                            data: data.salary_data,

                        },

                    ]
                },
                options:{
                    legend:{
                        labels:{
                            fontSize:18
                        }
                    },
                    title:{
                        display : true,
                        text : "Salary Wise",
                        fontSize : 22.0
                    },
                    scales:{
                        yAxes:[{
                            offset: true,

                            ticks:{
                                suggestedMin: 0,
                                fontSize:15.0,
                            },
                            scaleLabel: {
                                display:true,
                                labelString:'Salary',
                                fontSize:20.0,
                            }
                        }],

                        xAxes:[{
                            display: true,
                            offset: true,
                            ticks:{
                                beginAtZero: true,
                                fontSize:15.0,

                            },
                            scaleLabel: {
                                display:true,
                                labelString:'Employee',
                                fontSize:20.0,
                            }
                        }]
                     },
                    responsive: false,
                }
            });

</script>

</body>
</html>

0đź‘Ť

I actually can’t reproduce your error. Here is what I was doing with generated data (and it gets displayed fine). 

const count = 26
for (let x = 0; x < count; x++) {
  sData.salary.push(Math.floor(Math.random()*100)*1000)
  sData.label.push(Math.random().toString(36).substr(2, 5))
}

Can you make an online editor version so we can check it easier?
I would guess the problem are the label strings or the options, but it’s hard to guess…

Btw you have some spelling errors, e.g. “desplay”, scriptsrc, and suggestedMin is no boolean, it’s an int.

Leave a comment