Hi,
I wanto Load High chartsPie chart into the carousel auto slider. Here My Complete Code is, kindly Help Anyone.
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder2" runat="server">
<div class="row">
<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">
<div class="item active">
<div id="Piechart1" style="height: 200px; width: 600px;" ></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" style="height: 200px; width: 600px;" ></div>
<div class="carousel-caption">
<h3>Chicago</h3>
<p>Thank you, Chicago!</p>
</div>
</div>
<div class="item">
<div id="Piechart3" style="height: 200px; width: 600px;" ></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> <asp:HiddenField ID="hfXKey" runat="server" />
</div>
</div>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
Dynamicpiekeywrd('Piechart1')
//Dynamicpiekeywrd('piechart2')
//Dynamicpiekeywrd('piechart3')
function Dynamicpiekeywrd(piekey) {
var _serhfXKey = JSON.parse($('[id$=_hfXKey]').val());
// Build the chart
// $('#' + piekey).highcharts({
$('#Piechart1').highcharts({
chart: {
type: 'pie',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
},
title: {
//text: 'KeyWords'
text: 'Students Details',
},
tooltip: {
//pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
//pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b> ({point.y:,.0f})',
//format: '<b>{point.name}</b>: {point.percentage:.1f} %',
//format: '<b>{point.name}</b>: {point.y:} No.',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
},
connectorColor: 'silver'
}
}
},
credits: {
enabled: false
},
series: [_serhfXKey]
});
}
</script>
</asp:Content>