Prevent jQuery Morris Line chart inside ASP.Net UpdatePanel disappear after timer tick

Hi tonabc123,

You need to re-apply the code in the ASP.Net UpdatePanel endRequest event handler.

Refer below code.

HTML

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <asp:Timer ID="Timer1" runat="server" Interval="5000" OnTick="Timer1_Tick"></asp:Timer>
        <div id="line-chart" style="height: 356px;"></div>
    </ContentTemplate>
</asp:UpdatePanel>
<script type="text/javascript">
    $(document).ready(function () {
        BindMorrisLineChart();
    });

    //On UpdatePanel Refresh.
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    if (prm != null) {
        prm.add_endRequest(function (sender, e) {
            if (sender._postBackSettings.panelsToUpdate != null) {
                BindMorrisLineChart();
            }
        });
    };

    function BindMorrisLineChart() {
        $.ajax({
            type: 'POST',
            url: "Index.aspx/GetGraphData",
            dataType: 'json',
            contentType: "application/json; charset=utf-8",
            data: {},
            success: function (result) {
                new Morris.Line({
                    element: 'line-chart',
                    data: result.d,
                    xkey: 'year',
                    ykeys: ['C', 'D', 'E', 'F'],
                    labels: ['C', 'D', 'E', 'F'],
                    pointSize: 3,
                    fillOpacity: 0,
                    pointStrokeColors: ['#ae521e', '#17941c', '#7b20dd', '#5d051a'],
                    behaveLikeLine: true,
                    gridLineColor: '#e0e0e0',
                    lineWidth: 1,
                    hideHover: 'auto',
                    lineColors: ['#ae521e', '#17941c', '#7b20dd', '#5d051a'],
                    resize: true,
                    redraw: true,
                    parseTime: false,
                    goalLineColors: ['#FF0000', '#00FF3A'],
                    goals: [80, 50],
                    goalStrokeWidth: [2],
                    postUnits: '%'
                    //preUnits: 'Use: '
                });
            },
            error: function (error) {
                alert(error.responseText);
            }
        });
    }
</script>