Jump to content
JChartFX Community

renish patel

Members
  • Posts

    1
  • Joined

  • Last visited

renish patel's Achievements

Newbie

Newbie (1/14)

0

Reputation

  1. 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>
×
×
  • Create New...