Sunday, 5 October 2025

3D Pie Donut Chart using jQuery

Introduction: Hello Guys, “Welcome back” Today, i am here with another one new great article. In this article I explained about the implementation of 3D Pie Donut Chart using jQuery. In this article I am using the concept of High Charts. For more information you can visit website of High Chart 

Join our Channel  on Whtsapp and Telagram for All Updates                                          

Implementation: In this article, I am giving example of Cricket Asia Cup 2025 Final Match India Inning or Score of the every player of India. In the chart every player that played match of bating mentioned in the chart with name of the player and their score. In this article I am giving static data but you can create it dynamically by using the values of Database. For creating it dynamically you need to create the for loop at the time of passing parameters as values to the program. You can check in my list of articles. In last article I already created chart concept with dynamically data from database. Here I used for loop. And in the below mentioned article I am passing the values dynamically from the database. You can create 3D Pie Donut Chart dynamically too by following this link. You need to create the for loop to pass the parameters to the chart same created as in below mentioned link

https://usingaspdotnet.blogspot.com/2011/07/visualization-pie-chart-in-aspnet.html

Now here i am writing the complete code of the HTML page. You can copy the whole code and paste the whole code at your HTML page. And enjoy the execution of the whole concept. You can also print the chart; you can also download the JPG or PNG of the chart. There are more options available in this chart. You really enjoy this code. It’s really too fantastic

<!DOCTYPE HTML>
<html>
        <head>
               <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
               <meta name="viewport" content="width=device-width, initial-scale=1">
               <title>Highcharts Example</title>
 
                <style type="text/css">
* {
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
        sans-serif;
}
 
#container {
    height: 400px;
}
 
.highcharts-figure,
.highcharts-data-table table {
    min-width: 310px;
    max-width: 800px;
    margin: 1em auto;
}
 
.highcharts-data-table table {
    font-family: Verdana, sans-serif;
    border-collapse: collapse;
    border: 1px solid var(--highcharts-neutral-color-10, #e6e6e6);
    margin: 10px auto;
    text-align: center;
    width: 100%;
    max-width: 500px;
}
 
.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: var(--highcharts-neutral-color-60, #666);
}
 
.highcharts-data-table th {
    font-weight: 600;
    padding: 0.5em;
}
 
.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
    padding: 0.5em;
}
 
.highcharts-data-table thead tr,
.highcharts-data-table tbody tr:nth-child(even) {
    background: var(--highcharts-neutral-color-3, #f7f7f7);
}
 
.highcharts-description {
    margin: 0.3rem 10px;
}
 
@media (prefers-color-scheme: dark) {
    body {
        background-color: #141414;
        color: #ddd;
    }
    a {
        color: #2caffe;
    }
}
               </style>
        </head>
        <body>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/themes/adaptive.js"></script>
 
<figure class="highcharts-figure">
    <div id="container"></div>
    <p class="highcharts-description">
        A variation of a 3D pie chart with an inner radius added.
        These charts are often referred to as donut charts.
    </p>
</figure>
 
 
               <script type="text/javascript">
// Data retrieved from https://olympics.com/en/olympic-games/beijing-2022/medals
Highcharts.chart('container', {
    chart: {
        type: 'pie',
        options3d: {
            enabled: true,
            alpha: 45
        }
    },
    title: {
        text: 'Cricket Asia Cup 2025 Final Match India Inning'
    },
    subtitle: {
        text: '<a href="http://usingaspdotnet.blogspot.com" ' +
            'target="_blank">Programming Hub</a>'
    },
    plotOptions: {
        pie: {
            innerSize: 100,
            depth: 45
        }
    },
    series: [{
        name: 'Score',
        data: [
            ['Abhishek Sharma', 05],
            ['Shubman Gill', 12],
            ['S Yadav', 01],
            ['T Varma', 69],
            ['S Samson', 24],
            ['S Dube', 33],
            ['R Singh', 04]
            
 
        ]
    }]
});
 
               </script>
        </body>
</html>

 

Check the Output of the complete Program

Conclusion: In above code, I explained about the implementation of 3D Pie Donut Chart using jQuery. This code is very helpful for every developer. Bye bye and take care of you all Developers. We will come back shortly with the new article.

 

Regards

Programming Hub

 

 

at

1 comment:

  1. Gowtham PPS14 October 2025 at 03:04

    Excellent article! The way you’ve highlighted the harmony between theoretical education and hands-on experience is commendable. It truly represents how learning is evolving to align with modern industry demands.

    Full Stack Course In Chennai
    Mean Stack Course
    Mern Stack Course
    Wordpress Training

    ReplyDelete

Subscribe to: Post Comments (Atom)