3D Bar Stacked 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 Bar Stacked Chart using JQuery. In this article I used the concept of High Charts. For more information you can visit website of High Chart
Implementation: In this article, I am giving example of Yearly of Sales of vehicle in Year 2024. In the Yearly of Sales of vehicle in Year 2024 chart one side I am showing the vehicle name like as two wheeler Motorcycle or Cycle and Four Wheeler Car or Jeep and on the other side I am showing the name of the month of 2024. 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 am using for loop. And in the below mentioned article I am passing the values dynamically from the database. You can create area 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>
<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;
}
.highcharts-figure,
.highcharts-data-table table {
min-width: 310px;
max-width: 800px;
margin: 1em auto;
}
#container {
height: 400px;
}
.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/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">
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.
</p>
</figure>
<script type="text/javascript">
// Data retrieved from: https://ferjedatabanken.no/statistikk
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Sales of vehicle in Year 2024',
align: 'left'
},
subtitle: {
text: 'Source: <a href="https://usingaspdotnet.blogspot.com" target="_blank">Using ASp.Net</a>.',
align: 'left'
},
xAxis: {
<!-- if you want to create this concept dynamically using database, then you need to pass values here by using for loop for the month of the years -->
categories: [
'January', 'February', 'March', 'April', 'May',
'June', 'july', 'August', 'September', 'october', 'November', 'December'
]
},
yAxis: {
min: 0,
title: {
text: ''
}
},
legend: {
reversed: true
},
plotOptions: {
series: {
stacking: 'normal',
dataLabels: {
enabled: true
}
}
},
series: [{
<!-- if you want to create this concept dynamically using database, then you need to pass values here by using for loop for to pass data -->
name: 'Motorcycles',
data: [4474, 5227, 6252, 7193, 8572, 9785, 9978, 10242, 10589, 10999, 11562, 12589]
}, {
name: 'Car',
data: [806, 998, 1046, 2195, 2516, 2789, 2898, 3056, 3256, 3658,3897, 3985]
}, {
name: 'Jeep',
data: [213, 321, 542, 618, 737, 856, 785, 895, 985, 1025, 1125, 1289]
},
{
name: 'Cycle',
data: [513, 821, 1042, 1699, 1785, 1869, 1920, 2034, 2155, 2225, 2325, 2489]
},
]
});
</script>
</body>
</html>
Check the Output of the complete Program
Regards
Using Asp.net
Comments
Post a Comment