Pareto 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 Pareto Chart using JQuery. In the Pareto Chart, I am using the concept of High Charts. For more information you can visit website of High Chart
Implementation: A Pareto Chart is a combined bar and line graph used to identify and prioritize the most significant contributing factors to a problem, often following the 80/20 principle(or Pareto principle) that states 80% of results come from 20% of causes. The bars represent individual factors in descending order, while the line shows the cumulative percentage of these factors, highlighting the "vital few" causes that deserve the most attention. In the Pareto Chart, I am giving example School Complaints with various factor related to complaints like Water Logging issues near School, High Fee, and Cleaning Issues etc. 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>
<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;
}
.highcharts-figure,
.highcharts-data-table table {
min-width: 320px;
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/modules/pareto.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 Pareto Chart is a chart type based on the Pareto principle, commonly
used to maximize business efficiency. Highcharts can calculate the
Pareto line automatically based on a series, as shown in this chart.
</p>
</figure>
<script type="text/javascript">
Highcharts.chart('container', {
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'School Complaints'
},
tooltip: {
shared: true
},
xAxis: {
categories: [
'High Fee',
'Conjusted Area',
'Water Logging Issues',
'Tasteless Food in Canteen',
'Bad Behaviour of Staff',
'cleaning Issues',
'Located on Noisy Area',
'Study Level'
],
crosshair: true
},
yAxis: [{
title: {
text: ''
}
}, {
title: {
text: ''
},
minPadding: 0,
maxPadding: 0,
max: 100,
min: 0,
opposite: true,
labels: {
format: '{value}%'
}
}],
series: [{
type: 'pareto',
name: 'Pareto',
yAxis: 1,
zIndex: 10,
baseSeries: 1,
tooltip: {
valueDecimals: 2,
valueSuffix: '%'
}
}, {
name: 'Complaints',
type: 'column',
zIndex: 2,
data: [1023, 988, 653, 520, 331, 201, 25, 11]
}]
});
</script>
</body>
</html>
Check the Output of the complete Program
Regards
Using Asp.net
Comments
Post a Comment