[how i clear previously loaded chart in jchartfx?]

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>