3D Pie Chart using Jquery
Introduction: Hello Guys, “Welcome back” Today, i am here with another one new great article. In this article I am explain about the implementation of 3D Charts. In this example I will implement 3D Pie Chart. In this article I am using the concept of High Charts. For more information you Can visit website of High Chart
For more Update Please follow us on our Whtsapp Channel
For more Update Please follow us on our Facebook Page
Implementation: In this article i am giving example of % of all Subjects of the Student named Ruhika, Result 2025. In the pie chart I am showing a single students subject wise percentage. I this article I am giving static data but you can create it dynamically too by using 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 articles. In last article in the same concept pie chart. Here I am using for loop. And in this article I am passing the values dynamically from the database.
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. 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">
<i>*Social Studies</i><br><br>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s .
</p>
</figure>
<script type="text/javascript">
Highcharts.chart('container', {
chart: {
type: 'pie',
options3d: {
enabled: true,
alpha: 45,
beta: 0
}
},
title: {
text: '% of all Subjects of the Student named Ruhika, Result 2025'
},
subtitle: {
text: 'Source: ' +
'<a href="https://usingaspdotnet.blogspot.com/"' +
'target="_blank">Using Asp.net</a>'
},
accessibility: {
point: {
valueSuffix: '%'
}
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
depth: 35,
dataLabels: {
enabled: true,
format: '{point.name}'
}
}
},
series: [{
type: 'pie',
name: 'Numbers in %',
data:
[
<!-- if you want to create this concept dynamically using database, then you need to pass values here by using for loop -->
['English', 23],
['Punjabi', 18],
{
name: 'Math',
y: 12,
sliced: true,
selected: true
},
['Social Studies*', 9],
['Economics', 8],
['Zoology', 30]
]
}]
});
</script>
</body>
</html>
Please see the output of this program below
Regards
Using Asp.net
Comments
Post a Comment