Hi Rose,
I have created a sample which full fill your requirement by referring below link.
Refer below sample code and modify the code according to your need.
SQL
CREATE PROC [dbo].[GetVehicleDetails]
@Id INT = NULL
AS
BEGIN
DECLARE @Temp AS TABLE(ID INT,MID INT,VName VARCHAR(50),Mileage INT,Name VARCHAR(50))
INSERT INTO @Temp VALUES(10366, 1, 'Alto', 351, 'car')
INSERT INTO @Temp VALUES(10366, 2, 'Merceds', 189, 'bus')
INSERT INTO @Temp VALUES(10366, 3, 'Tata', 10, 'Auto')
INSERT INTO @Temp VALUES(10444, 4, 'I20', 251, 'car')
INSERT INTO @Temp VALUES(10444, 5, 'BharatBenz', 89, 'bus')
INSERT INTO @Temp VALUES(10444, 6, 'BMW i8', 10, 'car')
INSERT INTO @Temp VALUES(10366, 7, 'Bajaj', 10, 'Auto')
INSERT INTO @Temp VALUES(10366, 8, 'Mahindra', 10, 'Auto')
INSERT INTO @Temp VALUES(10367, 9, 'Yamaha', 45, 'Bike')
INSERT INTO @Temp VALUES(10367, 10, 'Ducati', 60, 'Bike')
INSERT INTO @Temp VALUES(10367, 11, 'Harley Davidson street 750', 12, 'Bike')
SELECT VName,Mileage AS Amount FROM @Temp WHERE ID = @Id ORDER BY VName
END
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.carousel
{
width: 500px;
height: 400px;
}
.carousel-content
{
color: black;
display: flex;
text-align: center;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/modules/exporting.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:HiddenField ID="hfValues" runat="server" />
<div class="container">
<h2>
Carousel Example</h2>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div id="Piechart1">
</div>
<div class="carousel-caption">
<h3>
Los Angeles</h3>
<p>
LA is always so much fun!</p>
</div>
</div>
<div class="item">
<div id="Piechart2">
</div>
<div class="carousel-caption">
<h3>
Chicago</h3>
<p>
Thank you, Chicago!</p>
</div>
</div>
<div class="item">
<div id="Piechart3">
</div>
<div class="carousel-caption">
<h3>
New York</h3>
<p>
We love the Big Apple!</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left">
</span><span class="sr-only">Previous</span> </a><a class="right carousel-control"
href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right">
</span><span class="sr-only">Next</span> </a>
</div>
</div>
</div>
<div>
<script type="text/javascript">
$(function () {
for (var i = 0; i < $('[id*=hfValues]').val().split(',').length; i++) {
AjaxCall(i);
}
});
function AjaxCall(k) {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: '<%=ResolveUrl("~/Default.aspx/GetChartData")%>',
data: '{ ffId :"' + $('[id*=hfValues]').val().split(',')[k] + '" }',
dataType: "json",
success: function (Result) {
Result = Result.d;
var data = [];
for (var j in Result) {
var serie = new Array(Result[j][0], Result[j][1]);
data.push(serie);
}
DreawChart(data, k);
},
error: function (Result) {
alert("Error");
}
});
}
function DreawChart(series, Id) {
$('#Piechart' + (Id + 1)).highcharts({
chart: { plotBackgroundColor: null, plotBorderWidth: 1, plotShadow: false },
title: { text: 'Vehicle Details' },
tooltip: { pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' },
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}',
style: { color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black' }
}
}
},
series: [{
type: 'pie',
name: 'Vehicle Details',
data: series
}]
});
}
</script>
</div>
</form>
</body>
</html>
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
hfValues.Value = "10366,10367,10444";
}
}
[WebMethod]
public static List<object> GetChartData(int ffId)
{
List<object> vehicles = new List<object>();
String constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
SqlConnection con = new SqlConnection(constr);
con.Open();
SqlCommand cmd = new SqlCommand("GetVehicleDetails", con);
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.AddWithValue("@Id", ffId);
SqlDataReader sdr = cmd.ExecuteReader();
while (sdr.Read())
{
vehicles.Add(new List<object> { sdr["VName"], sdr["Amount"] });
}
con.Close();
return vehicles;
}
VB.Net
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
If Not IsPostBack Then
hfValues.Value = "10366,10367,10444"
End If
End Sub
<WebMethod> _
Public Shared Function GetChartData(ffId As Integer) As List(Of Object)
Dim vehicles As New List(Of Object)()
Dim constr As [String] = ConfigurationManager.ConnectionStrings("constr").ConnectionString
Dim con As New SqlConnection(constr)
con.Open()
Dim cmd As New SqlCommand("GetVehicleDetails", con)
cmd.CommandType = CommandType.StoredProcedure
cmd.Parameters.AddWithValue("@Id", ffId)
Dim sdr As SqlDataReader = cmd.ExecuteReader()
While sdr.Read()
vehicles.Add(New List(Of Object)() From { _
sdr("VName"), _
sdr("Amount") _
})
End While
con.Close()
Return vehicles
End Function
ScreenShot
