Doughnut Chart Using ChartJS in HTML

 

Doughnut Chart Using ChartJS in HTML

Introduction: Hello Guys, “Welcome back” Today i am here with another one new great article. In this article I will explain about to create Doughnut Chart Using ChartJS in HTML. Here i am going to implement  HTML5 Canvas charts using Chart.js library to which JSON  object will supplied inside source of data.

  

ChartJS plugin

Please use the following link for documentation for the Jquery  Chart plugin.

https://www.chartjs.org/

 

 

HTML

The HTML Markup consists of following element:

canvas – For displaying chart.

<canvas id="dvChart"></canvas>

 

 

Code for Creating and Displaying the Chart

Explanation about implementing Chart plugin

Inside the HTML page, the below mentioned script files is inherited.

1. jquery.min.js

2. chart.umd.min.js

 

Inside the jQuery document ready event handler, an Array will be created which will hold the JSON objects and you can add multiple JSON objects in the Array as per your requirement.

Each JSON object comprises of

1. Name - This value will be displayed in legend.(Names of Brand that you need to  

    display in the chart)

2. Popularity - This value will be used to populate the Doughnutchart. (Popularity of Branch in Percentage in the chart)

3. Color – This value will be used to add color to the Doughnutchart. (Color of the Brand that you need to display inside the chart as per your requirement)

 

Then, the PopulateChart JAVASCRIPT function is called which accepts two parameters:

1. JSON object - The JSON string received from Server-Side (Code-Behind) is converted to JSON object.

2. Chart type - The type of chart.

 

PopulateChart JavaScript function

Inside this function, the canvas element is referenced and passed the parameter to the Chart object of the Chart.js library.

Then, type and data is assigned and the data is defined with labels and datasets.

Inside the labels the Name property of the JSON object is set.

For datasets, the following properties i.e data, backgroundColor, borderColor, borderWidth are set.

Implementation: Here i am giving the complete code with example Doughnut Chart Using ChartJS in HTML

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js"></script>

<script type="text/javascript">

    $(function () {

        // Array of Shoess

        var shoess = new Array();

 

        var shoes = {};

        shoes.Name = "Reebok";

        shoes.Popularity = 40;

        shoes.Color = "# 7b5b54 ";

        shoess.push(shoes);

 

        shoes = {};

        shoes.Name = "Bata";

        shoes.Popularity = 20;

        shoes.Color = " #8d788f ";

        shoess.push(shoes);

 

        shoes = {};

        shoes.Name = "Redtape";

        shoes.Popularity = 20;

        shoes.Color = " #111c6e ";

        shoess.push(shoes);

 

        shoes = {};

        shoes.Name = "NIKE";

        shoes.Popularity = 20;

        shoes.Color = " #e7b73d ";

        shoess.push(shoes);

 

 

        PopulateChart(shoess, 'doughnut');

    });

 

    function PopulateChart(chartData, chatyType) {

        var dvChart = $('#dvChart');

        var chart = new Chart(dvChart, {

            type: chatyType,

            data: {

                labels: chartData.map(shoes => shoes.Name),

                datasets: [{

                    data: chartData.map(shoes => shoes.Popularity),

                    backgroundColor: chartData.map(shoes => shoes.Color),

                    borderColor: ['#FFF'],

                    borderWidth: 1

                }]

            },

           options: {

                plugins: {

                    legend: {

                        labels: {

                            boxWidth: 10, // Width of legend box

                            boxHeight: 10 // Height of legend box

                        },

                        display: true, // Show hide legends

                        position: 'right', //'left', 'right', 'top', 'bottom'

                        align: 'center', // 'start', 'center', 'end'

                        reverse: false // Reverse order

                    }

                }

            }

        });

    };

</script>

 

Output: Check the output as Doughnut Chart after implementing he above code.

Conclusion: In above code, I have been explained that how we can create Doughnut Chart Using ChartJS in HTML. This code is very helpful for every developer. Bye BYE and take care of yourself Developers. We will come back shortly with the new article.

 

Regards

Using Asp.net