Sample 2: Trending, 3 Profiles, 1 X-Scale, 1 Y-Scale, Toolbar & Legend

This sample demonstrates continuous trending using random generated y-values. 3 Profiles are displayed, with 3600 total samples each. The length of the trending display window is 60 units. Use the Start and Stop buttons to control the trending. When the trend is stopped, the x-axis scrollbar appears, allowing the user to scroll through the entire trace if desired. Snapshots of the resulting chart are included below.

To test this code, the trial or full version of XY Chart NET must be installed on your computer.

Start a new project
Copy the code below directly into the project
On the form, place a new XYChartNET control named XYChartNETCtl1 (default)
On the form, add two command buttons named Button1 and Button2 (defaults)
On the form, add one timer control named Timer1 (default)
Run the project

Sample Code

Dim TrendSample As Integer

Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
   Dim myFont As New Font("Arial", 16, FontStyle.Italic Or FontStyle.Bold)

   Button1.Text = "Start"
   Button2.Text = "Stop"
   Button1.BringToFront()
   Button2.BringToFront()

   ' Configure XY Chart NET control
   With XyChartNETCtl1
      .NumProfiles = 3
      .NumXScales = 1
      .NumYScales = 1

      .Title.Label = "Sample 2"
      .Title.Font = myFont
      .Title.Color = Color.White

      .Trend.Enable = True
      .Trend.DisplayLength = 60

      .Legend.Visible = True
      .Legend.BorderVisible = False
      .Legend.YScaleVisible = False

      ' Gradient
      .Gradient.GradientOption = XYChartNet.XYChartNETCtl.GradientOptions.goCustom
      .Gradient.StartColor = Color.LightSteelBlue
      .Gradient.EndColor = Color.RoyalBlue
      .Gradient.Orientation = XYChartNet.XYChartNETCtl.OrientationOptions.ooVertical

      ' Plot formatting
      .Plot.Transparent = True
      .Plot.Border.LineOption = XYChartNet.XYChartNETCtl.LineOptions.loNone

      ' Toolbar
      .Toolbar.Visible = True
      .Toolbar.BackColor = Color.LightSteelBlue
      .Toolbar.Dock = XYChartNet.XYChartNETCtl.PositionOptions.poTop

      ' Y Axis
      With .YAxis(0)
         With .Grid
            .LineOption = XYChartNet.XYChartNETCtl.LineOptions.loCustom
            .LineStyle = XYChartNet.XYChartNETCtl.StyleOptions.soSolid
            .LineColor = Color.Green
         End With
         With .Scale
            .Visible = True
            .ScaleMode = XYChartNet.XYChartNETCtl.ScaleModes.smManual
            .ScaleManualMax = 100
            .ScaleManualMin = 0
            .Label = ""
            .LabelColor = Color.White
            .TicksColor = Color.White
         End With
      End With

      ' X Axis
      With .XAxis(0)
         With .Grid
            .LineOption = XYChartNet.XYChartNETCtl.LineOptions.loCustom
            .LineStyle = XYChartNet.XYChartNETCtl.StyleOptions.soSolid
            .LineColor = Color.Green
         End With
         With .Scale
            .ScaleMode = XYChartNet.XYChartNETCtl.ScaleModes.smAuto
            .Label = ""
            .TicksColor = Color.White
         End With
      End With

      ' Format Profile 0
      With .Profile(0)
         .YScale = 0
         .Label = "Random 0"
         .LineOption = XYChartNet.XYChartNETCtl.LineOptions.loCustom
         .LineWidth = XYChartNet.XYChartNETCtl.WidthOptions.woOnePoint
         .LineStyle = XYChartNet.XYChartNETCtl.StyleOptions.soSolid
         .LineColor = Color.Red
         .MarkerOption = XYChartNet.XYChartNETCtl.LineOptions.loNone
         .NumSamples = 3600
      End With

      ' Format Profile 1
      With .Profile(1)
         .YScale = 0
         .Label = "Random 1"
         .LineOption = XYChartNet.XYChartNETCtl.LineOptions.loCustom
         .LineWidth = XYChartNet.XYChartNETCtl.WidthOptions.woOnePoint
         .LineStyle = XYChartNet.XYChartNETCtl.StyleOptions.soSolid
         .LineColor = Color.Blue
         .MarkerOption = XYChartNet.XYChartNETCtl.LineOptions.loNone
         .NumSamples = 3600
      End With

      ' Format Profile 2
      With .Profile(2)
         .YScale = 0
         .Label = "Random 2"
         .LineOption = XYChartNet.XYChartNETCtl.LineOptions.loCustom
         .LineWidth = XYChartNet.XYChartNETCtl.WidthOptions.woOnePoint
         .LineStyle = XYChartNet.XYChartNETCtl.StyleOptions.soSolid
         .LineColor = Color.Yellow
         .MarkerOption = XYChartNet.XYChartNETCtl.LineOptions.loNone
         .NumSamples = 3600
      End With

      .ClearChartData()

      ' Format Crosshairs
      With .Crosshairs
         .Color = Color.Green
         .Width = XYChartNet.XYChartNETCtl.WidthOptions.woThreePoint
         .HorizontalVisible = False
         .YCoordInLegend = True
         .CoordsBackcolor = Color.Green
      End With

      .Refresh()

   End With

   ' Start timer
   Timer1.Interval = 100
   Timer1.Enabled = True
End Sub

     
'Resize Event
Private Sub Form1_Resize(ByVal sender As Object, ByVal e As System.EventArgs) Handles MyBase.Resize
   Button1.Top = 42
   Button1.Left = 220
   Button1.Width = 48
   Button1.Height = 20

   Button2.Top = 42
   Button2.Left = Button1.Left + Button1.Width
   Button2.Width = 48
   Button2.Height = 20
  
   With XyChartNETCtl1
      .Left = 0
      .Top = 0
      .Width = Me.ClientRectangle.Width
      .Height = Me.ClientRectangle.Height
   End With
End Sub

     
'Timer Event
Private Sub Timer1_Tick(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Timer1.Tick
   Dim NewData(0, 5) As Double

   NewData(0, 0) = TrendSample
   NewData(0, 1) = 30 * Rnd() + 70
   NewData(0, 2) = TrendSample
   NewData(0, 3) = 30 * Rnd() + 40
   NewData(0, 4) = TrendSample
   NewData(0, 5) = 30 * Rnd() + 10

   ' Add new trend data to chart array
   With XyChartNETCtl1
      .Trend.AddData(1, NewData, XYChartNet.XYChartNETCtl.AppendOpts.aoAppendToEnd)
      .Refresh()
   End With
   TrendSample += 1
End Sub
   
   
'Start Trending
Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
   Timer1.Enabled = True
   With XyChartNETCtl1
      .Trend.Enable = True
      .Refresh()
   End With
End Sub

     
'Stop Trending
Private Sub Button2_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button2.Click
   Timer1.Enabled = False

   With XyChartNETCtl1
      .Trend.Enable = False
      .Refresh()
   End With
End Sub

// NOTE:  Set the XYChartNET control's Anchor property to 'Top, Bottom, Left, Right'.

private int TrendSample;
private Random rnd = new Random();

public Form1()
{
    // Add the following code after the call to InitializeComponent
    const int myNumSamples = 3600;

    Font myFont = new Font("Arial", 16, FontStyle.Bold | FontStyle.Italic);

    button1.Top = 42;
    button1.Left = 220;
    button1.Width = 48;
    button1.Height = 20;

    button2.Top = 42;
    button2.Left = button1.Left + button1.Width;
    button2.Width = 48;
    button2.Height = 20;

    button1.Text = "Start";
    button2.Text = "Stop";

    button1.BringToFront();
    button2.BringToFront();

    // Configure XY Chart NET control
    XYChartNETCtl1.NumProfiles = 3;
    XYChartNETCtl1.NumXScales = 1;
    XYChartNETCtl1.NumYScales = 1;

    XYChartNETCtl1.Title.Label = "Sample 2";
    XYChartNETCtl1.Title.Font = myFont;
    XYChartNETCtl1.Title.Color = Color.White;

    XYChartNETCtl1.Trend.Enable = true;
    XYChartNETCtl1.Trend.DisplayLength = 60;

    // Legend
    XYChartNETCtl1.Legend.Visible = true;
    XYChartNETCtl1.Legend.BorderVisible = false;
    XYChartNETCtl1.Legend.YScaleVisible = false;

    // Gradient
    XYChartNETCtl1.Gradient.GradientOption = XYChartNet.XYChartNETCtl.GradientOptions.goCustom;
    XYChartNETCtl1.Gradient.StartColor = Color.LightSteelBlue;
    XYChartNETCtl1.Gradient.EndColor = Color.RoyalBlue;
    XYChartNETCtl1.Gradient.Orientation = XYChartNet.XYChartNETCtl.OrientationOptions.ooVertical;

    // Plot formatting
    XYChartNETCtl1.Plot.Transparent = true;
    XYChartNETCtl1.Plot.Border.LineOption = XYChartNet.XYChartNETCtl.LineOptions.loNone;

    // Toolbar
    XYChartNETCtl1.Toolbar.Visible = true;
    XYChartNETCtl1.Toolbar.BackColor = Color.LightSteelBlue;
    XYChartNETCtl1.Toolbar.Dock = XYChartNet.XYChartNETCtl.PositionOptions.poTop;

    // Crosshairs
    XYChartNETCtl1.Crosshairs.YCoordInLegend = true;
    XYChartNETCtl1.Crosshairs.Color = Color.Green;
    XYChartNETCtl1.Crosshairs.Width = XYChartNet.XYChartNETCtl.WidthOptions.woThreePoint;
    XYChartNETCtl1.Crosshairs.CoordsBackcolor = Color.Green;
    XYChartNETCtl1.Crosshairs.HorizontalVisible = false;
    XYChartNETCtl1.Crosshairs.VerticalVisible = true;

    // X Axis Grid & Scale properties
    XYChartNet.XYChartNETCtl.XSCALEPROP xAxis;
    xAxis = XYChartNETCtl1.get_XAxis(0);
    xAxis.Grid.LineOption = XYChartNet.XYChartNETCtl.LineOptions.loCustom;
    xAxis.Grid.LineStyle =  XYChartNet.XYChartNETCtl.StyleOptions.soSolid;
    xAxis.Grid.LineColor = Color.Green;
    xAxis.Scale.Label = "";
    xAxis.Scale.TicksColor = Color.White;
    xAxis.Scale.ScaleMode = XYChartNet.XYChartNETCtl.ScaleModes.smAuto;

    // Y Axis Grid & Scale properties
    XYChartNet.XYChartNETCtl.YSCALEPROP yAxis;
    yAxis = XYChartNETCtl1.get_YAxis(0);
    yAxis.Grid.LineOption = XYChartNet.XYChartNETCtl.LineOptions.loCustom;
    yAxis.Grid.LineStyle =  XYChartNet.XYChartNETCtl.StyleOptions.soSolid;
    yAxis.Grid.LineColor = Color.Green;
    yAxis.Scale.Label = "";
    yAxis.Scale.LabelColor = Color.White;
    yAxis.Scale.TicksColor = Color.White;
    yAxis.Scale.ScaleMode = XYChartNet.XYChartNETCtl.ScaleModes.smManual;
    yAxis.Scale.ScaleManualMin = 0;
    yAxis.Scale.ScaleManualMax = 100;

    XYChartNet.XYChartNETCtl.C_Profile profile;

    // Profile 0
    profile = XYChartNETCtl1.get_Profile(0);
    profile.YScale = 0;
    profile.Label = "Random 0";
    profile.LineOption = XYChartNet.XYChartNETCtl.LineOptions.loCustom;
    profile.LineWidth = XYChartNet.XYChartNETCtl.WidthOptions.woOnePoint;
    profile.LineStyle = XYChartNet.XYChartNETCtl.StyleOptions.soSolid;
    profile.LineColor = Color.Red;
    profile.MarkerOption = XYChartNet.XYChartNETCtl.LineOptions.loNone;
    profile.NumSamples = myNumSamples;

    // Profile 1
    profile = XYChartNETCtl1.get_Profile(1);
    profile.YScale = 0;
    profile.Label = "Random 1";
    profile.LineOption = XYChartNet.XYChartNETCtl.LineOptions.loCustom;
    profile.LineWidth = XYChartNet.XYChartNETCtl.WidthOptions.woOnePoint;
    profile.LineStyle = XYChartNet.XYChartNETCtl.StyleOptions.soSolid;
    profile.LineColor = Color.Blue;
    profile.MarkerOption = XYChartNet.XYChartNETCtl.LineOptions.loNone;
    profile.NumSamples = myNumSamples;

    // Profile 2
    profile = XYChartNETCtl1.get_Profile(2);
    profile.YScale = 0;
    profile.Label = "Random 2";
    profile.LineOption = XYChartNet.XYChartNETCtl.LineOptions.loCustom;
    profile.LineWidth = XYChartNet.XYChartNETCtl.WidthOptions.woOnePoint;
    profile.LineStyle = XYChartNet.XYChartNETCtl.StyleOptions.soSolid;
    profile.LineColor = Color.Yellow;
    profile.MarkerOption = XYChartNet.XYChartNETCtl.LineOptions.loNone;
    profile.NumSamples = myNumSamples;

    XYChartNETCtl1.ClearChartData();

    XYChartNETCtl1.Refresh();

    // Start timer
    timer1.Interval = 1000;
    timer1.Enabled = true;
}


// Timer Event
private void timer1_Tick(object sender, System.EventArgs e)
{
    double [,] NewData = new double [1, 6];

    NewData[0, 0] = TrendSample;
    NewData[0, 1] = 30 * rnd.NextDouble() + 70;
    NewData[0, 2] = TrendSample;
    NewData[0, 3] = 30 * rnd.NextDouble() + 40;
    NewData[0, 4] = TrendSample;
    NewData[0, 5] = 30 * rnd.NextDouble() + 10;

    // Add new trend data to chart array
    XYChartNETCtl1.Trend.AddData(1, NewData, XYChartNet.XYChartNETCtl.AppendOpts.aoAppendToEnd);
    XYChartNETCtl1.Refresh();

    TrendSample += 1;
}


// Start Trending
private void button1_Click(object sender, System.EventArgs e)
{
    timer1.Enabled = true;

    XYChartNETCtl1.Trend.Enable = true;
    XYChartNETCtl1.Refresh();
}

// Stop Trending
private void button2_Click(object sender, System.EventArgs e)
{
    timer1.Enabled = false;
   
    XYChartNETCtl1.Trend.Enable = false;
    XYChartNETCtl1.Refresh();
}

// NOTE:  Set the XYChartNET control's Anchor property to 'Top, Bottom, Left, Right'.

private: int TrendSample;
private: Random* rnd;

public: Form1(void)
{
    // Add the following code after the call to InitializeComponent
    const int myNumSamples = 3600;

    int                     myFontStyle = (int)Drawing::FontStyle::Bold | (int)Drawing::FontStyle::Italic;
    System::Drawing::Font*  myFont = new Drawing::Font("Arial", 16, (Drawing::FontStyle)myFontStyle);

    rnd = new Random();

    button1->Top = 42;
    button1->Left = 220;
    button1->Width = 48;
    button1->Height = 20;

    button2->Top = 42;
    button2->Left = button1->Left + button1->Width;
    button2->Width = 48;
    button2->Height = 20;

    button1->Text = "Start";
    button2->Text = "Stop";

    button1->BringToFront();
    button2->BringToFront();

    // Configure XY Chart NET control
    XYChartNETCtl1->NumProfiles = 3;
    XYChartNETCtl1->NumXScales = 1;
    XYChartNETCtl1->NumYScales = 1;

    XYChartNETCtl1->Title->Label = "Sample 2";
    XYChartNETCtl1->Title->Font = myFont;
    XYChartNETCtl1->Title->Color = Color::White;

    XYChartNETCtl1->Trend->Enable = true;
    XYChartNETCtl1->Trend->DisplayLength = 60;

    // Legend
    XYChartNETCtl1->Legend->Visible = true;
    XYChartNETCtl1->Legend->BorderVisible = false;
    XYChartNETCtl1->Legend->YScaleVisible = false;
           
    // Gradient
    XYChartNETCtl1->Gradient->GradientOption = XYChartNETCtl::GradientOptions::goCustom;
    XYChartNETCtl1->Gradient->StartColor = Color::LightSteelBlue;
    XYChartNETCtl1->Gradient->EndColor = Color::RoyalBlue;
    XYChartNETCtl1->Gradient->Orientation = XYChartNETCtl::OrientationOptions::ooVertical;

    // Plot formatting
    XYChartNETCtl1->Plot->Transparent = true;
    XYChartNETCtl1->Plot->Border->LineOption = XYChartNETCtl::LineOptions::loNone;

    // Toolbar
    XYChartNETCtl1->Toolbar->Visible = true;
    XYChartNETCtl1->Toolbar->BackColor = Color::LightSteelBlue;
    XYChartNETCtl1->Toolbar->Dock = XYChartNETCtl::PositionOptions::poTop;

    // Crosshairs
    XYChartNETCtl1->Crosshairs->YCoordInLegend = true;
    XYChartNETCtl1->Crosshairs->Color = Color::Green;
    XYChartNETCtl1->Crosshairs->Width = XYChartNETCtl::WidthOptions::woThreePoint;
    XYChartNETCtl1->Crosshairs->CoordsBackcolor = Color::Green;
    XYChartNETCtl1->Crosshairs->HorizontalVisible = false;
    XYChartNETCtl1->Crosshairs->VerticalVisible = true;

    // X Axis Grid & Scale properties
    XYChartNETCtl1->get_XAxis(0).Grid->LineOption = XYChartNETCtl::LineOptions::loCustom;
    XYChartNETCtl1->get_XAxis(0).Grid->LineStyle =  XYChartNETCtl::StyleOptions::soSolid;
    XYChartNETCtl1->get_XAxis(0).Grid->LineColor = Color::Green;
    XYChartNETCtl1->get_XAxis(0).Scale->Label = "";
    XYChartNETCtl1->get_XAxis(0).Scale->TicksColor = Color::White;
    XYChartNETCtl1->get_XAxis(0).Scale->ScaleMode = XYChartNETCtl::ScaleModes::smAuto;

    // Y Axis Grid & Scale properties
    XYChartNETCtl1->get_YAxis(0).Grid->LineOption = XYChartNETCtl::LineOptions::loCustom;
    XYChartNETCtl1->get_YAxis(0).Grid->LineStyle =  XYChartNETCtl::StyleOptions::soSolid;
    XYChartNETCtl1->get_YAxis(0).Grid->LineColor = Color::Green;
    XYChartNETCtl1->get_YAxis(0).Scale->Label = "";
    XYChartNETCtl1->get_YAxis(0).Scale->LabelColor = Color::White;
    XYChartNETCtl1->get_YAxis(0).Scale->TicksColor = Color::White;
    XYChartNETCtl1->get_YAxis(0).Scale->ScaleMode = XYChartNETCtl::ScaleModes::smManual;
    XYChartNETCtl1->get_YAxis(0).Scale->ScaleManualMin = 0;
    XYChartNETCtl1->get_YAxis(0).Scale->ScaleManualMax = 100;

    // Profile 0
    XYChartNETCtl1->get_Profile(0)->YScale = 0;
    XYChartNETCtl1->get_Profile(0)->Label = "Random 0";
    XYChartNETCtl1->get_Profile(0)->LineOption = XYChartNETCtl::LineOptions::loCustom;
    XYChartNETCtl1->get_Profile(0)->LineWidth = XYChartNETCtl::WidthOptions::woOnePoint;
    XYChartNETCtl1->get_Profile(0)->LineStyle = XYChartNETCtl::StyleOptions::soSolid;
    XYChartNETCtl1->get_Profile(0)->LineColor = Color::Red;
    XYChartNETCtl1->get_Profile(0)->MarkerOption = XYChartNETCtl::LineOptions::loNone;
    XYChartNETCtl1->get_Profile(0)->NumSamples = myNumSamples;

    // Profile 1
    XYChartNETCtl1->get_Profile(1)->YScale = 0;
    XYChartNETCtl1->get_Profile(1)->Label = "Random 1";
    XYChartNETCtl1->get_Profile(1)->LineOption = XYChartNETCtl::LineOptions::loCustom;
    XYChartNETCtl1->get_Profile(1)->LineWidth = XYChartNETCtl::WidthOptions::woOnePoint;
    XYChartNETCtl1->get_Profile(1)->LineStyle = XYChartNETCtl::StyleOptions::soSolid;
    XYChartNETCtl1->get_Profile(1)->LineColor = Color::Blue;
    XYChartNETCtl1->get_Profile(1)->MarkerOption = XYChartNETCtl::LineOptions::loNone;
    XYChartNETCtl1->get_Profile(1)->NumSamples = myNumSamples;

    // Profile 2
    XYChartNETCtl1->get_Profile(2)->YScale = 0;
    XYChartNETCtl1->get_Profile(2)->Label = "Random 2";
    XYChartNETCtl1->get_Profile(2)->LineOption = XYChartNETCtl::LineOptions::loCustom;
    XYChartNETCtl1->get_Profile(2)->LineWidth = XYChartNETCtl::WidthOptions::woOnePoint;
    XYChartNETCtl1->get_Profile(2)->LineStyle = XYChartNETCtl::StyleOptions::soSolid;
    XYChartNETCtl1->get_Profile(2)->LineColor = Color::Yellow;
    XYChartNETCtl1->get_Profile(2)->MarkerOption = XYChartNETCtl::LineOptions::loNone;
    XYChartNETCtl1->get_Profile(2)->NumSamples = myNumSamples;

    XYChartNETCtl1->ClearChartData();

    XYChartNETCtl1->Refresh();

    // Start timer
    timer1->Interval = 1000;
    timer1->Enabled = true;
}
            
            
// Timer Event
private: System::Void timer1_Tick(System::Object *  sender, System::EventArgs *  e)
{
    double NewData __gc[,]  = new double __gc[1, 6];

    NewData[0, 0] = TrendSample;
    NewData[0, 1] = 30 * rnd->NextDouble() + 70;
    NewData[0, 2] = TrendSample;
    NewData[0, 3] = 30 * rnd->NextDouble() + 40;
    NewData[0, 4] = TrendSample;
    NewData[0, 5] = 30 * rnd->NextDouble() + 10;

    // Add new trend data to chart array
    XYChartNETCtl1->Trend->AddData(1, NewData, XYChartNETCtl::AppendOpts::aoAppendToEnd);
    XYChartNETCtl1->Refresh();

    TrendSample += 1;
}
        

// Start Trending
private: System::Void button1_Click(System::Object *  sender, System::EventArgs *  e)
{
    timer1->Enabled = true;
       
    XYChartNETCtl1->Trend->Enable = true;
    XYChartNETCtl1->Refresh();
}

// Stop Trending
private: System::Void button2_Click(System::Object *  sender, System::EventArgs *  e)
{
    timer1->Enabled = false;
   
    XYChartNETCtl1->Trend->Enable = false;
    XYChartNETCtl1->Refresh();
}

Start of Trending

While Trending

Trending Stopped

Zoom Out All