Skip to content

Commit bcc4c93

Browse files
author
johannal
committed
Improved documentation.
1 parent 3f732be commit bcc4c93

File tree

11 files changed

+141
-168
lines changed

11 files changed

+141
-168
lines changed

README.md

Lines changed: 40 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,79 +1,83 @@
1-
# Simple 2D Chart
1+
# Simple 2D Chart with PointLineSeries.
22

33
With LightningCharts DLLs included in your project, you are ready to create your first chart. We will begin with creating a simple line chart for WinForms and WPF platforms without MVVM implementation.
44

5-
![](./assets/Tutorial_First_Chart_Reuslt.png)
5+
![](./assets/chart-pointline-series-2d-winforms-wpf.png)
66

7-
The chart can be added to a designer e.g. \(Form, Window, Grid, Panel, etc.\) and configured by using Properties window. However, this tutorials series shows how to create everything in code, thereby providing the best way for maintainability in further project development.
7+
The chart can be added to a designer e.g. \(Form, Window, Grid, Panel, etc.\) and configured by using Properties window. However, this tutorial series shows how to create everything in code, thereby providing the best way for maintainability in further project development.
88

9-
##### 1. Declare a LightningChart instance.
9+
##### 1. Create chart.
1010

1111
```csharp
12-
// Create chart instance.
12+
// Create chart.
1313
var chart = new LightningChartUltimate();
1414
```
1515

1616
##### 2. Set the parent container of the chart where it will be rendered.
1717

18-
Windows Forms:
18+
WinForms:
1919

2020
```csharp
21-
// Set parent container of chart.
21+
// Set chart control into the parent container.
2222
chart.Parent = this;
2323
chart.Dock = DockStyle.Fill;
2424
```
2525

26-
WPF:
26+
WPF:
2727

2828
```csharp
29-
// Set the parent container of chart.
29+
// Set chart control into the parent container.
3030
(Content as Grid).Children.Add(chart);
3131
```
3232

33-
##### 3. Create linear series, e.g. PointLineSeries.
33+
##### 3. Generate data for series.
3434

3535
```csharp
36-
// New line-series instance is assigned to default X and Y axes.
37-
var series = new PointLineSeries(
38-
chart.ViewXY,
39-
chart.ViewXY.XAxes[0],
40-
chart.ViewXY.YAxes[0]
41-
);
36+
// Generate data for series.
37+
var rand = new Random();
38+
int pointCounter = 70;
39+
40+
var data = new SeriesPoint[pointCounter];
41+
for (int i = 0; i < pointCounter; i++)
42+
{
43+
data[i].X = (double)i;
44+
data[i].Y = rand.Next(0, 100);
45+
}
4246
```
4347

44-
##### 4. Generate some random data or convert from source to appropriate format.
48+
##### 4. Define variables for X- and Y-axis.
4549

4650
```csharp
47-
// Scatter data randomly.
48-
Random rand = new Random();
49-
int pointsCount = 70;
50-
51-
// Generate some data with your algorithm.
52-
var data = new SeriesPoint[pointsCount];
53-
for (int i = 0; i < pointsCount; i++) {
54-
data[i].X = (double)i; // “Your double X-value”;
55-
data[i].Y = rand.Next(0, 100); // “Your double Y-value”;
56-
}
51+
// Define variables for X- and Y-axis.
52+
var axisX = chart.ViewXY.XAxes[0];
53+
var axisY = chart.ViewXY.YAxes[0];
5754
```
5855

59-
##### 5. Set generated data-points into series.
56+
##### 5. Create linear series, e.g. PointLineSeries.
6057

6158
```csharp
62-
series.Points = data; // Assign data.
59+
// Create a new PointLineSeries.
60+
var series = new PointLineSeries(chart.ViewXY, axisX, axisY);
61+
series.LineStyle.Color = Color.Orange;
6362
```
6463

65-
##### 6. Add created linear series to chart collection of specific series type.
64+
##### 6. Set generated data-points into series.
6665

6766
```csharp
68-
// Add the series into list of point-line-series.
69-
chart.ViewXY.PointLineSeries.Add(series);
67+
// Set data-points into series.
68+
series.Points = data;
7069
```
7170

72-
##### 7. Autoscale chart axes to show all series data-points.
71+
##### 7. Add series to chart.
7372

7473
```csharp
75-
// Autoscale view according to given data.
76-
chart.ViewXY.ZoomToFit();
74+
// Add series to chart.
75+
chart.ViewXY.PointLineSeries.Add(series);
7776
```
7877

79-
##### 8. Build and Run the application.
78+
##### 8. Auto-scale axes to show all series data.
79+
80+
```csharp
81+
// Auto-scale X- and Y-axes.
82+
chart.ViewXY.ZoomToFit();
83+
```

Simple2DChart_WF/Form1.Designer.cs

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Simple2DChart_WF/Form1.cs

Lines changed: 32 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
11
// ------------------------------------------------------------------------------------------------------
2-
// LightningChart® example code: First Simple 2D Chart Demo
2+
// LightningChart® example code: First Simple 2D Chart Demo.
33
//
44
// If you need any assistance, or notice error in this example code, please contact support@arction.com.
55
//
66
// Permission to use this code in your application comes with LightningChart® license.
77
//
88
// http://arction.com/ | support@arction.com | sales@arction.com
99
//
10-
// © Arction Ltd 2009-2017. All rights reserved.
10+
// © Arction Ltd 2009-2019. All rights reserved.
1111
// ------------------------------------------------------------------------------------------------------
1212
using System;
1313
using System.Drawing;
1414
using System.Windows.Forms;
1515

16-
// Arction namespaces
17-
using Arction.WinForms.Charting; // LightningChartUltimate and general types
18-
using Arction.WinForms.Charting.SeriesXY; // Series for 2D chart
16+
// Arction namespaces.
17+
using Arction.WinForms.Charting; // LightningChartUltimate and general types.
18+
using Arction.WinForms.Charting.SeriesXY; // Series for 2D chart.
1919

2020
namespace SimpleLine_WF
2121
{
@@ -25,44 +25,57 @@ public Form1()
2525
{
2626
InitializeComponent();
2727

28-
// 1. Create chart instance and store it member variable.
28+
// 1. Create chart.
2929
var chart = new LightningChartUltimate();
3030

31+
// Disable rendering before updating chart properties to improve performance
32+
// and to prevent unnecessary chart redrawing while changing multiple properties.
33+
chart.BeginUpdate();
34+
3135
// 2. Set chart control into the parent container.
32-
chart.Parent = this; //Set form as parent
33-
chart.Dock = DockStyle.Fill; //Maximize to parent client area
36+
chart.Parent = this; // Set form as parent.
37+
chart.Dock = DockStyle.Fill; // Maximize to parent client area.
3438

35-
// 3. Prepare data for line-series.
39+
// 3. Generate data for series.
3640
var rand = new Random();
3741
int pointCounter = 70;
3842

3943
var data = new SeriesPoint[pointCounter];
40-
for (int i = 0; i < pointCounter; i++) {
44+
for (int i = 0; i < pointCounter; i++)
45+
{
4146
data[i].X = (double)i;
4247
data[i].Y = rand.Next(0, 100);
4348
}
4449

45-
// 4. Add PointLineSeries for variable-interval data, progressing by X.
46-
var series = new PointLineSeries(chart.ViewXY, chart.ViewXY.XAxes[0], chart.ViewXY.YAxes[0]);
50+
// 4. Define variables for X- and Y-axis.
51+
var axisX = chart.ViewXY.XAxes[0];
52+
var axisY = chart.ViewXY.YAxes[0];
53+
54+
// 5. Create a new PointLineSeries.
55+
var series = new PointLineSeries(chart.ViewXY, axisX, axisY);
4756
series.LineStyle.Color = Color.Orange;
4857

49-
// 5. Set data-points into series.
58+
// 6. Set data-points into series.
5059
series.Points = data;
5160

52-
// 6. Add the series into list of point-line-series.
61+
// 7. Add series to chart.
5362
chart.ViewXY.PointLineSeries.Add(series);
5463

55-
// 7. Auto-scale X and Y axes.
64+
// 8. Auto-scale X- and Y-axes.
5665
chart.ViewXY.ZoomToFit();
5766

58-
#region Hiden polishing
67+
#region Hidden polishing
5968

60-
CusomizeChart(chart);
69+
CustomizeChart(chart);
6170

6271
#endregion
72+
73+
// Call EndUpdate to enable rendering again.
74+
chart.EndUpdate();
6375
}
6476

65-
void CusomizeChart(LightningChartUltimate chart)
77+
#region Hidden polishing
78+
void CustomizeChart(LightningChartUltimate chart)
6679
{
6780
chart.Background.Color = Color.FromArgb(255, 30, 30, 30);
6881
chart.Background.GradientFill = GradientFill.Solid;
@@ -88,5 +101,6 @@ void CusomizeChart(LightningChartUltimate chart)
88101
xAxis.ValueType = AxisValueType.Number;
89102
}
90103
}
104+
#endregion
91105
}
92106
}

Simple2DChart_WF/SimpleLine_WF.csproj

Lines changed: 1 addition & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -32,32 +32,8 @@
3232
<WarningLevel>4</WarningLevel>
3333
</PropertyGroup>
3434
<ItemGroup>
35-
<Reference Include="Arction.DirectX">
36-
<HintPath>..\..\packages\LightningChartUltimateWinForms7.7.2.4.1\lib\net40-client\Arction.DirectX.dll</HintPath>
37-
</Reference>
38-
<Reference Include="Arction.DirectXFiles">
39-
<HintPath>..\..\packages\LightningChartUltimateWinForms7.7.2.4.1\lib\net40-client\Arction.DirectXFiles.dll</HintPath>
40-
</Reference>
41-
<Reference Include="Arction.DirectXInit">
42-
<HintPath>..\..\packages\LightningChartUltimateWinForms7.7.2.4.1\lib\net40-client\Arction.DirectXInit.dll</HintPath>
43-
</Reference>
44-
<Reference Include="Arction.Licensing">
45-
<HintPath>..\..\packages\LightningChartUltimateWinForms7.7.2.4.1\lib\net40-client\Arction.Licensing.dll</HintPath>
46-
</Reference>
47-
<Reference Include="Arction.RenderingDefinitions">
48-
<HintPath>..\..\packages\LightningChartUltimateWinForms7.7.2.4.1\lib\net40-client\Arction.RenderingDefinitions.dll</HintPath>
49-
</Reference>
50-
<Reference Include="Arction.RenderingEngine">
51-
<HintPath>..\..\packages\LightningChartUltimateWinForms7.7.2.4.1\lib\net40-client\Arction.RenderingEngine.dll</HintPath>
52-
</Reference>
53-
<Reference Include="Arction.RenderingEngine11">
54-
<HintPath>..\..\packages\LightningChartUltimateWinForms7.7.2.4.1\lib\net40-client\Arction.RenderingEngine11.dll</HintPath>
55-
</Reference>
56-
<Reference Include="Arction.RenderingEngine9">
57-
<HintPath>..\..\packages\LightningChartUltimateWinForms7.7.2.4.1\lib\net40-client\Arction.RenderingEngine9.dll</HintPath>
58-
</Reference>
5935
<Reference Include="Arction.WinForms.Charting.LightningChartUltimate">
60-
<HintPath>..\..\packages\LightningChartUltimateWinForms7.7.2.4.1\lib\net40-client\Arction.WinForms.Charting.LightningChartUltimate.dll</HintPath>
36+
<HintPath>..\..\..\..\..\..\..\LightningChart\v84\LibNET4\Arction.WinForms.Charting.LightningChartUltimate.dll</HintPath>
6137
</Reference>
6238
<Reference Include="System" />
6339
<Reference Include="System.Core" />

Simple2DChart_WPF_NB/MainWindow.xaml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<Window x:Class="SimpleLine_WPF_NB.MainWindow"
22
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
33
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4-
Title="LightningChart tutorial 01 - First 2D Chart" Height="350" Width="525">
4+
Title="LightningChart Tutorial - Simple 2D Chart with PointLineSeries" Height="350" Width="525">
55
<Grid>
66

77
</Grid>

Simple2DChart_WPF_NB/MainWindow.xaml.cs

Lines changed: 30 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
11
// ------------------------------------------------------------------------------------------------------
2-
// LightningChart® example code: First Simple 2D Chart Demo
2+
// LightningChart® example code: First Simple 2D Chart Demo.
33
//
44
// If you need any assistance, or notice error in this example code, please contact support@arction.com.
55
//
66
// Permission to use this code in your application comes with LightningChart® license.
77
//
88
// http://arction.com/ | support@arction.com | sales@arction.com
99
//
10-
// © Arction Ltd 2009-2017. All rights reserved.
10+
// © Arction Ltd 2009-2019. All rights reserved.
1111
// ------------------------------------------------------------------------------------------------------
1212
using System;
1313
using System.Windows;
1414
using System.Windows.Controls;
1515
using System.Windows.Media;
1616

17-
// Arction namespaces
18-
using Arction.Wpf.Charting; // LightningChartUltimate and general types
19-
using Arction.Wpf.Charting.SeriesXY; // Series for 2D chart
17+
// Arction namespaces.
18+
using Arction.Wpf.Charting; // LightningChartUltimate and general types.
19+
using Arction.Wpf.Charting.SeriesXY; // Series for 2D chart.
2020

2121
namespace SimpleLine_WPF_NB
2222
{
@@ -26,43 +26,56 @@ public MainWindow()
2626
{
2727
InitializeComponent();
2828

29-
// 1. Create chart instance and store it member variable
29+
// 1. Create chart.
3030
var chart = new LightningChartUltimate();
3131

32+
// Disable rendering before updating chart properties to improve performance
33+
// and to prevent unnecessary chart redrawing while changing multiple properties.
34+
chart.BeginUpdate();
35+
3236
// 2. Set chart control into the parent container.
3337
(Content as Grid).Children.Add(chart);
3438

35-
// 3. Prepare data for line-series.
39+
// 3. Generate data for series.
3640
var rand = new Random();
3741
int pointCounter = 70;
3842

3943
var data = new SeriesPoint[pointCounter];
40-
for (int i = 0; i < pointCounter; i++) {
44+
for (int i = 0; i < pointCounter; i++)
45+
{
4146
data[i].X = (double)i;
4247
data[i].Y = rand.Next(0, 100);
4348
}
4449

45-
// 4. Add PointLineSeries for variable-interval data, progressing by X.
46-
var series = new PointLineSeries(chart.ViewXY, chart.ViewXY.XAxes[0], chart.ViewXY.YAxes[0]);
50+
// 4. Define variables for X- and Y-axis.
51+
var axisX = chart.ViewXY.XAxes[0];
52+
var axisY = chart.ViewXY.YAxes[0];
53+
54+
// 5. Create a new PointLineSeries.
55+
var series = new PointLineSeries(chart.ViewXY, axisX, axisY);
4756
series.LineStyle.Color = Colors.Orange;
4857

49-
// 5. Set data-points into series.
58+
// 6. Set data-points into series.
5059
series.Points = data;
5160

52-
// 6. Add the series into list of point-line-series.
61+
// 7. Add series to chart.
5362
chart.ViewXY.PointLineSeries.Add(series);
5463

55-
// 7. Auto-scale X and Y axes.
64+
// 8. Auto-scale X- and Y-axes.
5665
chart.ViewXY.ZoomToFit();
5766

58-
#region Hiden polishing
67+
#region Hidden polishing
5968

60-
CusomizeChart(chart);
69+
CustomizeChart(chart);
6170

6271
#endregion
72+
73+
// Call EndUpdate to enable rendering again.
74+
chart.EndUpdate();
6375
}
6476

65-
private void CusomizeChart(LightningChartUltimate chart)
77+
#region Hidden polishing
78+
private void CustomizeChart(LightningChartUltimate chart)
6679
{
6780
chart.ChartBackground.Color = System.Windows.Media.Color.FromArgb(255, 30, 30, 30);
6881
chart.ChartBackground.GradientFill = GradientFill.Solid;
@@ -88,5 +101,6 @@ private void CusomizeChart(LightningChartUltimate chart)
88101
xAxis.ValueType = AxisValueType.Number;
89102
}
90103
}
104+
#endregion
91105
}
92106
}

0 commit comments

Comments
 (0)