Jump to content
JChartFX Community
  • 0

how i clear previously loaded chart in jchartfx?


renish patel

Question

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>

post-2107-13939743542994_thumb.jpg

Link to comment
Share on other sites

1 answer to this question

Recommended Posts

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...