Search code examples
c#customizationzedgraph

ZedGraph smoothly move Y2Axis with chart line


In following my question "ZedGraph custom graph" I have chart with every second inserting of datas, now I have other questions:

  1. How to smoothly move down Y2Axis (DateTime type) with a chart line and show in chart always only last 30 minutes?

  2. How to format Y2Axis labels "HH:mm" to get 10:05, 10:10, 10:15, ..., 10:30?

Thanks for help!

UPD1: Thanks kmp! I try your code - its good, but with issue: when I started I see this: enter image description here When after few minutes I see this picture: enter image description here

I have a "compression" of chart area, but I want statically show always last 30 minute and slowly move down old datas, without of scaling or "packing" chart with axis. I hope you understand me.

UPD2: Yet another issue - labels of Y2Axis haven't fixed values. For example now: enter image description here

And after few seconds: enter image description here


Solution

  • Starting with the easiest - formatting the labels can be done like so:

    myPane.Y2Axis.Scale.Format = "HH:mm";
    

    One way you could do this (and it feels a bit flaky but I will let you decide) is to simply remove the points from the curve once they go beyond your threshold (in this case more than 30 minutes). That way when the chart redraws the axis will update accordingly.

    I feel like taking the scale min value might be a better approach than this, but failing that you can simply maintain a queue as you add the points like so and then remove them when they go beyond your threshold:

    private Queue<DateTime> axisTimes;
    
    private static readonly Random rnd = new Random();
    
    private void button1_Click(object sender, EventArgs e)
    {
        GraphPane myPane = zg1.GraphPane;
    
        myPane.XAxis.IsVisible = false;
    
        myPane.X2Axis.IsVisible = true;
        myPane.X2Axis.MajorGrid.IsVisible = true;
        myPane.X2Axis.Scale.Min = 0;
        myPane.X2Axis.Scale.Max = 600;
    
        myPane.YAxis.IsVisible = false;
    
        myPane.Y2Axis.IsVisible = true;
        myPane.Y2Axis.Scale.MajorUnit = DateUnit.Minute;
        myPane.Y2Axis.Scale.MinorUnit = DateUnit.Second;
        myPane.Y2Axis.Scale.Format = "HH:mm";
        myPane.Y2Axis.Type = AxisType.DateAsOrdinal;
    
        LineItem myCurve = myPane.AddCurve("Alpha",
                                      new PointPairList(),
                                      Color.Red,
                                      SymbolType.None);
    
        myCurve.Symbol.Fill = new Fill(Color.White);
        myCurve.IsX2Axis = true;
        myCurve.IsY2Axis = true;
    
        myPane.Chart.Fill = new Fill(Color.White, Color.LightGray, 45.0f);
        zg1.IsShowPointValues = true;
    
        axisTimes = new Queue<DateTime>();
    
        var t = new System.Windows.Forms.Timer();
        t.Interval = 1000;
        t.Tick += ShowData;
    
        Thread.Sleep(100);
    
        t.Start();
    }
    
    private void ShowData(object sender, EventArgs e)
    {
        var t = (System.Windows.Forms.Timer) sender;
        t.Enabled = false;
    
        int x = rnd.Next(500, 600);
        var y = new XDate(DateTime.Now);
    
        var myCurve = zg1.GraphPane.CurveList[0];
    
        if (axisTimes.Any())
        {             
            // Remove any points that go beyond our time threshold
            while ((((DateTime)y) - axisTimes.Peek()).TotalMinutes > 30)
            {
                myCurve.RemovePoint(0);
                axisTimes.Dequeue();
    
                if (!axisTimes.Any())
                {
                    break;
                }
            }
        }
    
        // Add the new point and store the datetime that it was added in
        // our own queue
        axisTimes.Enqueue(y);
        myCurve.AddPoint(x, y);
    
        zg1.AxisChange();
        zg1.Invalidate();
    
        t.Enabled = true;
    }