Nepal Population Trend Chart 2022 in JavaScript

We have attempted to experiment on the recent trends in Nepali schooling system with whatever we have at our disposal.

To give you the context – we have preliminary data from the concluded census 2021; and the data from previous population census reports of Nepal. Since we have JavaScript codes (provided further down), we are hereby suggesting involve the students in working on both. This will be relevant in learning social studies, mathematics, computer science, and environmental sciences.

Nepal Population Trend Chart 2021

First, please see the final chart below.

How to Make Interactive Chart Using JavaScript

  • First, work with .js file link (Backend)
    • Copy the script linking the .js file (For code, see below.)
    • Create the new post or page in Blogger or in any web editor that allows HTML editing.
    • Edit the file in HTML mode, or add HTML segment in the post/page.
    • Paste the script copied earlier.
    • You can save the page.
  • Second, work with the JavaScript (Frontend)
    • Copy the JavaScript code (For code, see below.)
    • Come again to the same page/post where you pasted the link to .js file.
    • Make sure you are going to paste in HTML mode, or in the segment that is for HTML codes.
    • Paste the JavaScript.
    • Save the page.

Code to link .js file (Backend)

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>

JavaScript (Frontend)

<canvas id="myChart" width="400" height="400"></canvas>

<script>

const ctx = document.getElementById('myChart').getContext('2d');

const myChart = new Chart(ctx, {

    type: 'bar',

    data: {

        labels: ['reference 0', '1970 Census', '1980 Census', '1990 Census', '2000 Census', '2010 Census', '2020/21 Census'],

        datasets: [{

            label: 'Population in millions',

            data: [0, 11.56, 15.02, 18.49, 23.15, 26.49, 29.19],

            backgroundColor: [
              
                'rgba(255, 99, 132, 0.2)',

                '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(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>

While creating the charts with values, please do not forget to create a chart with 0 value. We realized that the automatized JS codes tend to shorten the Y-axis close to the least value. If you find any difficulty in implementing this in your teaching, do comment below. I would like to thank my friend The Taluat for permitting to use the code from his blog.

Conclusion

Now, we have learned that we can make our students present the population data in interactive manner using the JavaScript.