Examples of Data Visualization from our .Net Winforms Wpf C++ MFC VCL Charting Component Demos

For the below chart, see example '030' in our example projects and demos.

This example teaches the developer how to create an Open High Low Close, CandleStick, BoxPlot chart with multiple y axes and dis-continuous date calendar along x axis. The date time x axis has several options in formatting dates, this example shows 3 character months and days. When downloading and running this example, it also shows how to use Table Annotation Hot Spots to change data and demonstrates real-time table annotation updating.

When programmatically controlled, or the end-user controls which subsets (series) are shown, the multiple axes will automatically show-hide-reconfigure as needed. Most scientific charting often needs similar multiple and or overlapping y axes.

Below shows the above chart zoomed in to a smaller date range. Note the higher density date labels along bottom x axis and top of charting area. Zooming is performed by either rotating the mouse-wheel and or left-click-dragging a zoom-box.

Below is a chart from a customer showing nice use of Graph Annotations to implement a proprietary financial study.

Below shows 3d charting of wellbore data. A wellbore is a hole that is drilled to aid in the exploration and recovery of natural resources, including oil, gas, or water. A wellbore is the actual hole that forms the well.

See example '403' in our example projects and demos.

The green tubes are 'GraphAnnotations' of type line and are implmented via a simple MoveTo-LineTo mechanism. These line annotations can be rendered as true lines or tubes. Interally within our charting component, the tube is constructed via a geometry shader on the GPU so only 4 vertices are needed per point; 2 vertices controlling the span of the tube segment and 2 adjoining vertices to control how the ends of the tube join. The geometry shader then injects 128 vertices to form the tube body segment. We wrote a ton of complex trigonometry and matrix math code so you won't have to.

3D graph annotation text, always faces the viewer in 2D and 2D dodges other annotations, subsets, and axis labels. Super slick, as it should be, in a truly best of class charting component.

Also shown is our tool-tip feature that prompts the end-user with wellbore coordinates. This is a standard windows tooltip and we provide properties to adjust all the features the standard Windows tool-tip offers.

Running this demo first-hand, pressing the number keys 0 to 9, invokes an animation of the drill moving down the well. If you first double-click this chart to start the Auto-Rotation feature, and then press 0 to 9, it will animate the view moving down the well while rotating the camera 360 degrees around the well. Very slick and a must see. This represents complex trigonometry and matrix mathematical transforms that you would not need to worry about.

The following chart shows another style of coloring and a 2D color contour on bottom instead of 2D contour lines on bottom. There is a simple property to show / hide annotation labels that is optionally also available to the end-user of your software.

Search properties 'ShowContour' and 'ShowAnnotationText' within our charting documentation.

This following example is not in our demo, but a customer sent this 2D heatmap / 2D contour / Spectrogram implementation. A spectrogram is a visual representation of the spectrum of frequencies of a signal as it varies with time.

See similar charts in examples '139, 120, 121, and 122' in our example projects and demos.

Same chart above, but zoomed to show more detail. ProEssentials charting offers two methods of zooming.

• Right-click and drag a selection region.
• Rotate Mouse-Wheel to zoom in / out.

Search properties 'AllowZooming' and 'MouseWheelFunction' within our charting documentation.

Below shows a 3D Scatter with all axes in Log scale rather than normal linear scaling.

Note the X, Y, and Z grid line labels are in optional scientific notation.

This chart optionally shows chart in Isometric perspective. In this perspective, note that a back bottom grid square is the same size as a front bottom grid square. Note depth does not distort data location and size, the symbol sizes appear similar though deeper within the image.

See example '404' within our example code and demos.

Log scale is controlled via properties 'PeGrid.Configure.XAxisScaleControl', 'YAxisScaleControl', and 'ZAxisScaleControl'.

The following chart is the same 3D scatter above but zoomed in via the mouse-wheel.

Note the red solid dot between the yellow dots along with textual prompting of data coordinates for this red dot. This screen capture does not show the mouse arrow, but the mouse is located on-top this red dot. The chart is providing hit-testing and data-prompting of data-values under the mouse.

The following chart is similar to example 404 in our demo, but demonstrates a few more ProEssentials 3D Graph Annotation capabilities. GraphAnnotationPolyData (where the developer can supply low-level actual locations of vertices to produce polygons) and higher level GraphAnnotation types to produce cylinders, cones, 3d ellipsoids, cubes, 2D ellipses, 2D rects, etc in simpler canned annotation features via ProEssentials property 'GraphAnnotationType'.

The following chart is the same 3D scatter above but zoomed in via the mouse-wheel.

Note the view (camera location) is from within the inside of the grey sphere looking outward. And again, note the Red Cube which shows data-coordinates being data-prompted via Mouse-Arrow location.

The below chart is from example '123' in our example code and demos.

Note the top-left green text 'Play'. When downloading and viewing our example projects or demo first-hand, click this text. A song will begin to play and a vertical line annotation will follow the play-location in realtime. Then use the mouse-wheel to zoomin to show a more detailed view of the current play-location. It's quite slick to mouse-wheel zoom-in to 500-1000 points and the real-time chart mimics an oscilloscope where one no longer perceives the data moving right-to-left, but rather the realtime chart shows fully different data with each frame.

This chart also shows a feature of event-based custom x axis formatting. As the x axis is rendered, the grid line label text is sent to a developer event to allow the developer to inject a custom representation of the label text. With only a few lines of code, one can create your own custom x axis formatting.

The below chart is from example '130' in our example code and demos.

This chart demonstrates extra x and y axes. A simple feature when 2 scales can represent the same data, for example, Celsius and Fahrenheit.

The below chart is from example '129' in our example code and demos.

This chart demonstrates vertical oriented y axis grid numbers, and embedded subset legends into the grid label area.

The goal of these combined features is to conserve window area real-estate when implementing many overlapped multiple y axes. Especially if the chart itself is very small because you might have 20 of these charts inside one window.

The below chart is from example '132' in our example code and demos.

This chart demonstrates using an event to custom format the y axis. For example, if you see the y axis where [400] would exist, it shows [High Value] in it's place.

The below charts are from examples '409' and '401' in our example code and demos.

These charts demonstrate 3D color contours and GIS capabilities combined with 3D graph annotations.

The below chart is from example '301' in our example code and demos.

This chart demonstrates Pie Chart capabilities. When running the example projects and demos, right-clicking the chart and selecting [Data Shadows] and [Gradient Styles] will provide the various alternate charts below.

Note that ProEssentials has a built-in feature to automatically group zero slices (or slices below any given threshold) into an *other slice and handling zero, null data, or tiny slivers, in a clean professional fashion.

Optional legend feature that separates the legend from the pie chart.

The below chart is from example '200' in our example code and demos.

This chart demonstrates ProEssentials Polar Chart capabilities. When running the example projects and demos, zooming our polar charts will demonstrate the best charting polar chart in the industry. The polar grid will intelligently change in structure depending on level of zoom.

Below is same chart as above, but zoomed.

Below chart shows an optionally high density polar chart grid.

The below chart is from example '203' in our example code and demos.

This chart demonstrates ProEssentials Smith Chart capabilities. When running the example projects and demos, zooming our smith charts will demonstrate the best charting smith chart in the industry. The smith chart grid will intelligently change in structure depending on level of zoom.

There is also similar support for Admittance Charts.

Below is same chart as above, but zoomed.

The below chart is from example '407' in our example code and demos.

This chart demonstrates ProEssentials 3D Waterfall Chart capabilities. When running the example projects and demos, right-clicking chart, using 'Plotting Method' menu to select Point, will result in this view.

The below chart is from example '402' in our example code and demos.

This chart demonstrates ProEssentials 3D Surface Contours with random non-linear relation between color to y magnitude value.

Note the larger yellow contour color portion within the contour legend.

The below chart is similar to example '406' in our example code and demos.

This chart demonstrates ProEssentials 3D polygon data interface.

This image expands the chart by providing a 4th dimensional data set, WData, that allows for a 4D - 3D rendering contour Plotting Method.

The below chart is similar to example '403' in our example code and demos.

This chart shows the 3D WireFrame plotting method combined with property 'PointColors' to custom color the chart in any 4th dimensional way desired.

The below chart is example '139' in our example code and demos.

This chart shows a 2D Heatmap, 2D Contour, Spectrogram, with Log Linear scaling, implemented via Direct3D and DirectX hardware acceleration.

The below chart is the above chart zoomed to show more detail.

The below chart is example '121' in our example code and demos.

This chart shows a 2D Contour plotted as 2D contour lines with labeling of isolines.

The below charts are example '122' in our example code and demos.

This chart shows a 2D Contour plot with optional shadowing to help visualize depth.

The below chart is the same chart as above without the shadowing.

When running the example projects and demos, right-clicking chart, using 'Plotting Method' menu to select 'Contour Colors', will result in this view.

The 2D contour shadow feature dramatically adds depth to the data, but the non-shadow view is also useful when other data or annotations should receive more attention.

The below chart is the same chart as above but zoomed to show more detail.

The below chart is example '400' in our example code and demos.

This chart shows a 3D WireFrame plot with real-time 2D polygon annotation to annotate a slice of data under the mouse.

When running the example projects and demos, moving the mouse over the surface chart will show the real-time 2D slice logic that can be found within the MouseMove event example code. Also, pressing key 0 to 9 will auto rotate the chart targeting the camera view on annotation 0 to 9. Rotating the mouse-wheel will then zoom in/out in the direction of the annotation being targeted. Note the annotation labels will dodge each other as the chart is rotated.

For most customers, this code is found in Form1, and one can more quickly find related example code by searching for '400', the example ID number. Substitute any number to find related code for any example within our example projects.

The below chart is similar to example '405' in our example code and demos.

This chart shows a 3D Bar Chart with data prompting under mouse (note white bar and data value 1696). This chart also shows cube graph annotations placed ontop of data.

The below chart is similar to example '105' in our example code and demos.

This chart shows a 2D Line Chart with data plotted with respect to Y, Right Y, X, and Top X Axes.

The purpose of this example is to demonstrate the feature 'CursorMode' and dynamic tooltip data coordinate prompting.

The below chart is similar to example '110' in our example code and demos.

This chart shows a Log Log 2D Scatter Chart.

The purpose of this example is to demonstrate log scales and how well they behave when the end-user zooms our log scales.

Another purpose of this example is to demonstrate how to implement the quick draw graph annotation end-user tooling feature. This feature is implemented by placing code in the mouse-down, mouse-move, and mouse-up events to draw temporarily graphics while the mouse is being dragged. When running the example projects and demos, left-clicking, holding-mouse-down while dragging-mouse will draw a temporary round rect with text annotating data unit widths in x and y directions.

The below chart is the same chart above but zoomed to show alternate log scale construction.

The below chart is similar to example '136' in our example code and demos.

This chart shows a High-Low Area Chart with a comparison Line Chart.

The color of filled areas are inversed when the series magnitudes swap which series is higher in magnitude.

The below chart is similar to example '016' in our example code and demos.

This example's purpose is to demostrate how to handle date-time data, and how well the x axis behaves as the end-user zooms the chart to varying ranges. Sizing the chart, using the popup menus to change x axis label orientation, along with zooming, will provide massive exposure to our bits and demonstrate our overall rendering superiority.

The below chart is similar to example '015' in our example code and demos.

This example's purpose is to demostrate how to draw basic graph annotations within a 2D chart. When studying the code for this example, note that this example has a right y axis, and also shows how to plot annotations with respect to the right y axis.

Example 015 along with example 007, 014, 000, 012, 100, 103 will be the most useful in starting your study of ProEssentials.

The below chart is similar to example '126' in our example code and demos.

This example's purpose is to demostrate how to draw bubble charts. You will pass 'PeData.Z' along with 'PeData.X' and 'PeData.Y' when creating bubble charts.

The below chart is similar to example '124' in our example code and demos.

This example's purpose is to demostrate how to show a chart with a programmatically set zoom, (horizontal range, min, and max) selected as the initial default view. With a horizontal scrollbar available to pan through the remaining range of data.

The below chart is similar to example '034' in our example code and demos.

This example's purpose is to demostrate how to...

• Create a horizontal stacked bar chart.
• Create a table annotation and then use this table annotation to allow the end-user to select series visibility.
• Create a table annotation to show a paragraph of text.

The below chart is similar to example '003' in our example code and demos.

This example is a very basic example showing how to plot series against both a left and right y axis and in different plotting styles.

This example simply sets the property 'RYAxisComparisonSubsets = 2' which will form 2 groups of subsets and =2 defines the size of last grouping.

Property 'PlottingMethod' will control the plotting style for the first group.

Property 'PlottingMethodII' will control the plotting style for the second group.

With this optional approach to showing 2 plotting styles, the end-user will clearly understand that the chart's series are grouped into logical groups if they happen to modify plotting styles via the built-in customization dialog.

There are several methods of showing multiple plotting styles. The property 'PlottingMethods' will allow per series control of the plotting style. See demo example '022' for an example of using PlottingMethods.

The below chart is similar to example '025' in our example code and demos.

This example shows how to create a floating stacked bar chart. 'PeData.Z' will control the offsets of the stacked bars.

The below chart is example '410' in our example code and demos.

This example shows how to create a Real-Time updated 3D Surface Chart. See the example code timer event (searching for 410) for specifics on how this is implemented.

The below chart is example '408' in our example code and demos.