Chart with modify option button 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 Chart with modify button using JQuery. In this chart there will be three charts option. User can modify or change the chart by button click. In this article I am using the concept of High Charts. For more information you can visit website of High Chart
Implementation: In this article, I am giving example of Details of yearly Sale Units of Samsung Mobiles. In the Yearly Sales of Samsung Phones chart I am showing Number of Units Sold from 2012-2024. There will be three button Plane, Inverted and polar. On the button click you can change the chart design with the same values. 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;
}
#container {
height: 400px;
}
.highcharts-description {
margin: 10px;
}
.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-demo-button {
background: #f2f2f2;
border: none;
border-radius: 4px;
cursor: pointer;
display: inline-block;
font-size: 0.8rem;
padding: 0.5rem 1.5rem;
margin: 0.5rem -5px 0.5rem 10px;
transition: background 250ms;
}
.highcharts-demo-button:hover {
background: #e6e6e6;
}
@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-more.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">
Chart with buttons to modify options, showing how options can be changed
on the fly. This flexibility allows for more dynamic charts.
</p>
<button id="plain" class="highcharts-demo-button">Plain</button>
<button id="inverted" class="highcharts-demo-button">Inverted</button>
<button id="polar" class="highcharts-demo-button">Polar</button>
</figure>
<script type="text/javascript">
const chart = Highcharts.chart('container', {
title: {
text: 'Details of Yealy Sale Units of Samsung Mobiles, 2012-2024 '
},
subtitle: {
text: 'Chart option: Plain | Source: ' +
'<a href="https://usingaspdotnet.blogspot.com/"' +
'target="_blank">NAV</a>'
},
colors: [
'#4caefe',
'#3fbdf3',
'#35c3e8',
'#2bc9dc',
'#20cfe1',
'#16d4e6',
'#0dd9db',
'#03dfd0',
'#00e4c5',
'#00e9ba',
'#00eeaf',
'#23e274'
],
xAxis: {
categories: [
<!-- if you want to create this concept dynamically using database, then you need to pass values of years or anything else you want as per requirement and data also here by using for loop -->
series: [{
'2012', '2013', '2014', '2015', '2016', '2017', '2018', '2019', '2020',
'2021', '2022', '2023'
]
},
series: [{
type: 'column',
name: 'Units',
borderRadius: 5,
colorByPoint: true,
data: [
18789, 20368, 22491, 24602, 25536, 28618, 29928, 31899,
33680, 40153, 45523, 52999
],
showInLegend: false
}]
});
document.getElementById('plain').addEventListener('click', () => {
chart.update({
chart: {
inverted: false,
polar: false
},
subtitle: {
text: 'Chart option: Plain | Source: ' +
'<a href="https://usingaspdotnet.blogspot.com/"' +
'target="_blank">NAV</a>'
}
});
});
document.getElementById('inverted').addEventListener('click', () => {
chart.update({
chart: {
inverted: true,
polar: false
},
subtitle: {
text: 'Chart option: Inverted | Source: ' +
'<a href="https://usingaspdotnet.blogspot.com/"' +
'target="_blank">NAV</a>'
}
});
});
document.getElementById('polar').addEventListener('click', () => {
chart.update({
chart: {
inverted: false,
polar: true
},
subtitle: {
text: 'Chart option: Polar | Source: ' +
'<a href="https://usingaspdotnet.blogspot.com/"' +
'target="_blank">NAV</a>'
}
});
});
</script>
</body>
</html>
Check all the three Outputs of the complete Program
Regards
Using Asp.net
Comments
Post a Comment