I am creating a web page in ASP.NET WebForms that reads data from a file and plots a graph form that data. It's drawn in an update panel so that the data can be refreshed every second.

The problem is that when I redraw the graph, I lose my range selection.

Can I just pass data to the graph and make it update without redrawing the whole thing?

Here's the aspx code:

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<script src="Scripts/jquery-1.10.2.min.js"></script>
<script src="Scripts/jquery.flot.min.js"></script>
<script src="Scripts/jquery.flot.rangeselection.js"></script>
<script type="text/javascript">
    function pageLoad() {
        plotGraphs();
    }
    var plotGraphs = function () {
        var pGraph;
        var rangeselectionCallback = function (o) {
            console.log("New selection:" + o.start + "," + o.end);
            var xaxis = pGraph.getAxes().xaxis;
            xaxis.options.min = o.start;
            xaxis.options.max = o.end;
            pGraph.setupGrid();
            pGraph.draw();
        }
        var data = [];
        var mydata = $("#<%=MyHiddenField.ClientID%>").val();
        var res = JSON.parse("[" + mydata + "]");

        data[0] = {
            color: 'red',
            data: JSON.parse("[" + mydata + "]")
        }

        pGraph = $.plot("#biggraph", data, {
            xaxis: {
                min: 0,
                max: 1000
            },
            yaxis: {
                min: 0,
                max: 200
            }
        });

        var sData = $.extend(true, [], data);
        for (var i = 0; i < sData.length; i++) {
            sData[i].color = 'black';
            sData[i].label = undefined;
        }
        $.plot("#smallgraph", sData, {
            yaxis: {
                show: false
            },
            grid: {
                color: "#666",
                backgroundColor: { colors: ["#ddd", "#fff"] }
            },
            rangeselection: {
                color: "red",
                start: 0,
                end: 100,
                enabled: true,
                callback: rangeselectionCallback
            }
        });
    }
</script>
<br />
<br />
<asp:Timer runat="server" Enabled="true" ID="Timer" Interval="1000"></asp:Timer>
<asp:UpdatePanel ID="GraphPanel" runat="server">
    <Triggers>
        <asp:AsyncPostBackTrigger EventName="Tick" ControlID="Timer" />
    </Triggers>
    <ContentTemplate>
        <asp:HiddenField ClientIDMode="Static" runat="server" ID="MyHiddenField"></asp:HiddenField>
        <div id="biggraph" style="width: 600px; height: 400px;"></div>
        <br />
        <div id="smallgraph" style="width: 600px; height: 50px;"></div>
    </ContentTemplate>
</asp:UpdatePanel>

Related posts

Recent Viewed