.NET-logo

.NET Data VisualizationIntroduction to Cartesian System & 17 Charts Examples

ArticleLearn more about Cartesian charts and review different Cartesian charting components

Cartesian Charts  

Once in a while, everybody is faced with the dilemma of how data should be presented. Maybe we want to present the data to other people or visualize it for ourselves. It is often more convenient to show data using a graph or chart, rather than a table or diagram. This is especially true for complex data sets.

Generally, the most widely spread type of chart shows the relation between two variables, each measured along one of a pair of axes at right angles. The general name for this kind of chart is Cartesian Chart. Below we will look at the history of this chart type, some definitions, and examples.

  Once in a while, everybody is faced with the dilemma of how data should be presented.

Maybe we want to present the data to other people or visualize it for ourselves.

It is often more convenient to show data using a graph or chart, rather than a table or diagram.

This is especially true for complex data sets.

Generally, the most widely spread type of chart shows the relation between two variables, each measured along one of a pair of axes at right angles.

The general name for this kind of chart is Cartesian Chart.

Below we will look at the history of this chart type, some definitions, and examples.

History of Cartesian Charts

For the development of the Cartesian coordinate system (aka Cartesian charts), we should be grateful to 17th-century French philosopher and mathematician René Descartes. His Latinized name is Renatus Cartesius, which contemporary and later scientists used to name coordinate systems (in recognition of his contribution).

Although probably not true, there is a fun legend of how René Descartes come up with the idea of the Cartesian coordinate system. Legend has it that Descartes, who liked to stay in bed until noon, was watching a fly on the ceiling from his bed.

He was wondering how best to describe the location of the fly. And he came up with an ingenious solution – one of the corners of the ceiling could be used as a reference point.

This fun story should not deceive us about René Descartes’s actual contribution. He is universally considered a seminal figure in the emergence of modern philosophy and science.

René Descartes worked on ideas of merging algebra and geometry for some time and introduced new ideas in 1637.

For the development of the Cartesian coordinate system (aka Cartesian charts), we should be grateful to 17th-century French philosopher and mathematician René Descartes

His Latinized name is Renatus Cartesius, which contemporary and later scientists used to name coordinate systems (in recognition of his contribution).

Although probably not true, there is a fun legend of how René Descartes come up with the idea of the Cartesian coordinate system. 

Legend has it that Descartes, who liked to stay in bed until noon, was watching a fly on the ceiling from his bed.

He was wondering how best to describe the location of the fly.

And he came up with an ingenious solution – one of the corners of the ceiling could be used as a reference point.

This fun story should not deceive us about René Descartes’s actual contribution.

He is universally considered a seminal figure in the emergence of modern philosophy and science.

René Descartes worked on ideas of merging algebra and geometry for some time and introduced new ideas in 1637.

Cartesian Chart Concept

In general, one can uniquely define a point in the space of any dimension n by use of n Cartesian coordinates. Each coordinate represents the distance from point of origin in the ‘positive’ or ‘negative’ direction. N-Axes defining n-dimensional space are mutually perpendicular (at an angle of 90°).

In general, one can uniquely define a point in the space of any dimension n by use of n Cartesian coordinates. 

Each coordinate represents the distance from point of origin in the ‘positive’ or ‘negative’ direction.

N-Axes defining n-dimensional space are mutually perpendicular (at an angle of 90°).

One dimension

The Cartesian coordinate system (Cartesian charts), for a one-dimensional space is a straight line having the origin (coordinate 0) and a positive side and a negative side of the line. Each point on the line is defined relative to the origin, and with a unit of length.

The coordinate of the point has a + or – sign (signaling binary direction) and the numeric value to represent its distance from the origin O.

Frequently, such a one-dimensional coordinate system is called a number line and any of the real numbers can be conveniently represented on this number line (see figure 1).

One dimension

As introduction to Cartesian coordinate system (Cartesian charts), for a one-dimensional space is a straight line having the origin (coordinate 0) and a positive side and a negative side of the line.

Each point on the line is defined relative to the origin, and with a unit of length.

The coordinate of the point has a + or – sign (signaling binary direction) and the numeric value to represent its distance from the origin O.

Frequently, such a one-dimensional coordinate system is called a number line and any of the real numbers can be conveniently represented on this number line (see figure 1).

Cartesian-charts-number-line

Figure 1. Two dimensions

A Cartesian coordinate system in two dimensions is defined by two axes, at right angles (90°) to each other, forming a plane (an XY plane). Hence also called a rectangular coordinate system or an orthogonal coordinate system.

The point where the axes meet is taken as the origin for both, the origin has coordinates (0, 0). The horizontal axis (or abscissa) is normally labeled x, and the vertical axis (or ordinate) is normally labeled y.

For any point P, projection onto any axis is interpreted as a number. The two numbers are the Cartesian coordinates of P (figure 1). The reverse reconstruction allows one to put the point P on the plain at given coordinates.

The intersection of the two axes creates four regions, called quadrants. Commonly these marked by the Roman numerals I (+,+), II (−,+), III (−,−), and IV (+,−).

Typically, the quadrants are labeled counter-clockwise starting from the upper right (“northeast”) quadrant. In the first quadrant, both coordinates are positive, in the second quadrant x-coordinates are negative and y-coordinates are positive.

In the third quadrant, both coordinates are negative and in the fourth quadrant, the x-coordinates are positive and the y-coordinates negative (see figure 2).

A Cartesian coordinate system in two dimensions is defined by two axes, at right angles (90°) to each other, forming a plane (an XY plane).

Hence also called a rectangular coordinate system or an orthogonal coordinate system.

The point where the axes meet is taken as the origin for both, the origin has coordinates (0, 0).

The horizontal axis (or abscissa) is normally labeled x, and the vertical axis (or ordinate) is normally labeled y.

For any point P, projection onto any axis is interpreted as a number.

The two numbers are the Cartesian coordinates of P (figure 1).

The reverse reconstruction allows one to put the point P on the plain at given coordinates.

The intersection of the two axes creates four regions, called quadrants.

Commonly these marked by the Roman numerals I (+,+), II (−,+), III (−,−), and IV (+,−).

Typically, the quadrants are labeled counter-clockwise starting from the upper right (“northeast”) quadrant. 

In the first quadrant, both coordinates are positive, in the second quadrant x-coordinates are negative and y-coordinates are positive.

In the third quadrant, both coordinates are negative and in the fourth quadrant, the x-coordinates are positive and the y-coordinates negative (see figure 2).

Cartesian-Charts-Quadrants

Figure 2. Three dimensions

A Cartesian coordinate system for a three-dimensional space consists of a triplet of lines/axes that go through a common point (the origin). Each pair of axes is perpendicular and defines the coordinates of a point within the plane (similar to the XY plane discussed above). 

Similar to the 2-dimensional coordinate system, any point P defines in the form of 3 numbers (usually {x,y,z}). Each number comes from point P projection to the corresponding Axis (X, Y, or Z). The reverse reconstruction allows one to put the point P in 3D space at given coordinates (see figure 3).

The XY-, YZ-, and XZ planes divide the three-dimensional space into eight subdivisions known as octants, similar to the quadrants of 2D space. The z-coordinate is sometimes called applicate.

A Cartesian coordinate system for a three-dimensional space consists of a triplet of lines/axes that go through a common point (the origin). 

Each pair of axes is perpendicular and defines the coordinates of a point within the plane (similar to the XY plane discussed above). 

Similar to the 2-dimensional coordinate system, any point P defines in the form of 3 numbers (usually {x,y,z}). 

Each number comes from point P projection to the corresponding Axis (X, Y, or Z).

The reverse reconstruction allows one to put the point P in 3D space at given coordinates (see figure 3).

The XY-, YZ-, and XZ planes divide the three-dimensional space into eight subdivisions known as octants, similar to the quadrants of 2D space.

The z-coordinate is sometimes called applicate.

3D-Cartesian-Coordinate-System

Figure 3. A three-dimensional Cartesian system, with origin (0,0,0) and axis lines X, Y, and Z (Y is upwards). The red dot shows the point with coordinates x = 30, y = 40, and z = 20, or (30, 40, 20).

Higher dimensions

Although a typical human being has difficulties imagining more than 3-dimensional space, that did not stop people from using an n-dimensional Cartesian coordinate system (where n could be 4, 5, and more).

For many fields of mathematics and physics, abstract thinking allows solving a ‘problem’ for n-dimensional And the solution may have very real-life applications.

Many familiar ideas from the geometry of 2 and 3 dimensions can be generalized to space of higher dimensions. For an n-dimensional space, we have n perpendicular axis and point of origin concept also there. The common convention for coordinate naming is to use subscripts.

For example, point P has coordinates (x1, x2,…, xn) for the n coordinates in an n-dimensional space.

Higher dimensions

Although a typical human being has difficulties imagining more than 3-dimensional space, that did not stop people from using an n-dimensional Cartesian coordinate system (where n could be 4, 5, and more).

For many fields of mathematics and physics, abstract thinking allows solving a ‘problem’ for n-dimensional And the solution may have very real-life applications.

Many familiar ideas from the geometry of 2 and 3 dimensions can be generalized to space of higher dimensions. 

For an n-dimensional space, we have n perpendicular axis and point of origin concept also there.

The common convention for coordinate naming is to use subscripts.

For example, point P has coordinates (x1, x2,…, xn) for the n coordinates in an n-dimensional space.

Cartesian Chart with LightningChart® .NET control

ViewXY allows presenting various series and axes in the Cartesian chart system, XY graph format. The series is bound to X and Y axes, and they are using the value range of the assigned axes.

ViewXY could be combined with geographical maps. View3D allows presenting various series and axes in Cartesian, 3D graph format. Analogous to XY, in 3D series bound/assigned to 3 axes.

    ViewXY allows presenting various series and axes in the Cartesian chart system, XY graph format.

    The series is bound to X and Y axes, and they are using the value range of the assigned axes.

    ViewXY could be combined with geographical maps.

    View3D allows presenting various series and axes in Cartesian, 3D graph format. 

    Analogous to XY, in 3D series bound/assigned to 3 axes.

      Cartesian-charts-view-XY

      Figure 4. On the left ViewXY property tree is shown. On the right View3D property tree is shown. The property trees include all Series types, Axes as well as other properties controlling behavior or appearance of the Cartesian Chart.

      Figure 4. On the left ViewXY property tree is shown. On the right View3D property tree is shown.

      The property trees include all Series types, Axes as well as other properties controlling behavior or appearance of the Cartesian Chart.

      LightningChart Cartesian Axes

      The axes for 2D and 3D Cartesian charts are derived from the same base class. Therefore, most of the properties are the same. However, there are some specific properties for the axis.

      For example, only ViewXY X-axis is used for data streaming (sweeping/scrolling / real-time) behavior. Several general types of Axes could be defined: linear, logarithmic, DateTime, time, geographical map coordinate, categorical/CustomTick.

      Overall Axis has more than 60 properties, which affect the behavior and appearance of the axis: grid, tick, title, color, font, labels’ format, etc.

      LightningChart Cartesian Axes

      The axes for 2D and 3D Cartesian charts are derived from the same base class. Therefore, most of the properties are the same.

      However, there are some specific properties for the axis.

      For example, only ViewXY X-axis is used for data streaming (sweeping/scrolling / real-time) behavior. 

      Several general types of Axes could be defined: linear, logarithmic, DateTime, time, geographical map coordinate, categorical/CustomTick.

      Overall Axis has more than 60 properties, which affect the behavior and appearance of the axis: grid, tick, title, color, font, labels’ format, etc.

      LightningChart Cartesian coordinate system examples

      LightningChart has many different series types, which are suitable for different types of data and could produce almost any type of Cartesian Chart known today. Below is the list of that series type with examples

      Ten different line-series XY:

      1. SampleDataSeries
      2. SampleDataBlockSeries
      3. PointLineSeries
      4. LiteLineSeries
      5. FreeformPointLineSeries
      6. LiteFreeformLineSeries
      7. HighLowSeries
      8. AreaSeries
      9. LineCollection
      10. DigitalLineSeries
      XY-LineSeries

      AreaSeries (XY)

      In an Area XY series chart, each data point is represented by a dot or a marker that is plotted on the chart’s x and y coordinates. The dots or markers are then connected by a continuous line or curve to form a closed area, which can be filled with color to emphasize the data’s magnitude.

      AreaSeries (XY)

      In an Area XY series chart, each data point is represented by a dot or a marker that is plotted on the chart’s x and y coordinates.

      The dots or markers are then connected by a continuous line or curve to form a closed area, which can be filled with color to emphasize the data’s magnitude.

      AreaSeries

      BarSeries (XY)

      In a Bar XY series chart, each data point is represented by a horizontal bar that spans a specific range of the x-axis and has a height determined by the corresponding value on the y-axis.

      BarSeries (XY)

      FreeformPointLineSeries (XY) for scatter plots

      FreeformPointLineSeries

      HighLowSeries (XY)

      HighLowSeries (XY)

      IntensityGridSeries / Heatmap (XY)

      In a heatmap chart, each cell in the matrix represents a data point and is color-coded based on its value. Typically, a gradient of colors is used to represent the range of values, with lighter colors representing lower values and darker colors representing higher values.

      IntensityGridSeries / Heatmap (XY)

      In a heatmap chart, each cell in the matrix represents a data point and is color-coded based on its value.

      Typically, a gradient of colors is used to represent the range of values, with lighter colors representing lower values and darker colors representing higher values.

      IntensityGridSeries - Heatmap (XY)

      IntensityMeshSeries (XY)

      Cartesian chart - IntensityMeshSeries (XY)

      PolygonSeries (XY)

      violin plot

      Cartesian Graph Stock Series (XY)

      A Stock Series Chart is a type of Cartesian chart, also known as a Candlestick Chart or OHLC (Open, High, Low, Close) chart, is a type of chart used in financial analysis to display the price movement of a stock or other financial instrument over a period of time.

      In a Stock Series Chart, each data point represents the price movement of a stock or financial instrument during a specific time period, such as a day, a week, or a month.

      The chart displays the opening price, the highest price, the lowest price, and the closing price of the stock or financial instrument for each time period.

      StockSeries (XY)

      BarSeries3D

      BarSeries3D

      MeshModel (3D)

      MeshModel (3D)

      PointLineSeries3D

      PointLineSeries3D

      Polygons (3D)

      Polygons (3D)

      SurfaceGridSeries3D

      SurfaceGridSeries3D

      SurfaceMeshSeries3D

      SurfaceMeshSeries3D

      VolumeModel (3D) (volume ray casting)

      VolumeModel (3D) (volume ray casting)

      WaterfallSeries3D

      WaterfallSeries3D

      Conclusion

      It should be noted that Cartesian charts is not the only coordinate system used in mathematics or physics. Actually, some of the problems/phenomena are easier to understand if a different coordinate system is used. Other popular alternatives are the Polar chart, Cylindrical chart, or Spherical coordinates system.

      It should be noted that Cartesian charts is not the only coordinate system used in mathematics or physics.

      Actually, some of the problems/phenomena are easier to understand if a different coordinate system is used.

      Other popular alternatives are the Polar chart, Cylindrical chart, or Spherical coordinates system.

      Get started with LightningChart .NET for scientific data visualization

      Kestutis Gurevicius, CTO, Scientific Software Analyst, Support, Team Lead (.NET)

      Kestutis Gurevicius

      CTO, Scientific Software Analyst, Support, Team Lead (.NET) LinkedIn icon
      divider-light

      Continue learning with LightningChart