Here is my code please look into this and suggent me what i changed for it..Here i getting more than one chart means when i change start date as well as end date..Thanks in advance
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
<link rel="stylesheet" type="text/css" href="Styles/jchartfx.css" />
<link href="Styles/datepicker.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="Scripts/jchartfx.system.js"></script>
<script type="text/javascript" src="Scripts/jchartfx.coreBasic.js"></script>
<script src="Scripts/jchartfx.animation.js" type="text/javascript"></script>
<script src="Scripts/jquery-2.0.3.min.js" type="text/javascript"></script>
<script src="Scripts/bootstrap-datepicker.js" type="text/javascript"></script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<div class="input-append date" id="dp1" style="width: 200px; height: 100px; float: right;
margin-top: 60px; margin-left: 200px; display: inline-block">
End Date:
<input class="span1" size="16" type="text" id="end" runat="server" />
<span class="add-on"><i class="icon-calendar"></i></span>
</div>
<div class="input-append date" id="dp2" style="width: 200px; height: 100px; float: right;
margin-top: 60px; margin-left: 100px; display: inline-block">
Start Date:
<input class="span2" size="16" type="text" id="start" runat="server" />
<span class="add-on"><i class="icon-calendar"></i></span>
</div>
<div id="ChartDiv" style="width: 400px; height: 200px; padding-top: 100px; display: inline-block">
</div>
<script type="text/javascript" lang="javascript">
var chart1;
chart1 = new cfx.Chart();
var startDate;
var endDate;
$('#dp2').datepicker().on('changeDate', function (ev) {
chart1.doUpdate(true);
loadChart();
});
$('#dp1').datepicker().on('changeDate', function (ev) {
chart1.doUpdate(true);
loadChart();
});
function loadChart() {
chart1.getAnimations().getLoad().setEnabled(true);
chart1.setGallery(cfx.Gallery.Pie);
var startDate = $("#dp2 input").val();
var endDate = $("#dp1 input").val();
$.ajax({
type: "POST",
url: ("Default2.aspx/GetData"),
data: "{startDate:'" + startDate + "',endDate:'" + endDate + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (result) {
var data = $.parseJSON(result.d);
chart1.setDataSource(data);
var divHolder = document.getElementById('ChartDiv');
chart1.create(divHolder);
},
error: function (xhr, txt, err) {
alert("error connecting to data: " + txt);
}
});
}
</script>
</asp:Content>