Audio visualization

The audio data is extracted in realtime using Web Audio API's.

The Web Audio API has an .createAnalyser() method that can be used to create a new AnalyzerNode. The AnalyzerNode has methods to get time-domain data (waveform) and frequency data which is data from Fast Fourier transform on the audio signal.

The time-domain data is shown as is on the Time Domain chart. That same data is also pushed to the Waveform history chart. This chart displays the last 1 million samples of the audio input.

3D Charts

3D Box Series rounded edges

Example showcasing simple usage of BoxSeries3D and the rounded edges feature.

3D Scatter Chart

Example showcasing the use of 3D point series. Also known as scatter plot.

3D Line Series

Example showcasing the use of 3D Line Series.

3D 50k Points

Example showcasing the use of 3D point series with 50 000 points.

3D Simple Surface Grid

Example showcasing simple usage of 3D Surface Grid Series

Spectrogram Box Series 3D

Example showcasing the use of BoxSeries3D to render a scrolling 3D spectrogram.

Spectrogram Surface 3D

Example showcasing the use of SurfaceGridSeries3D to render a scrolling 3D spectrogram.

3D Simple Surface Mesh

Example showcasing simple usage of 3D Surface Mesh Series

3D Surfaces

3D Simple Surface Mesh

Example showcasing simple usage of 3D Surface Mesh Series

Spectrogram Surface 3D

Example showcasing the use of SurfaceGridSeries3D to render a scrolling 3D spectrogram.

3D Simple Surface Grid

Example showcasing simple usage of 3D Surface Grid Series

Spectrograms

Heatmap Spectrogram

Example showcasing simple use-case for Heatmap as Spectrogram.

Scrolling Heatmap

Example showcasing simple use-case for scrolling Heatmap.

Spectrogram Box Series 3D

Example showcasing the use of BoxSeries3D to render a scrolling 3D spectrogram.

Spectrogram Surface 3D

Example showcasing the use of SurfaceGridSeries3D to render a scrolling 3D spectrogram.

Dashboards

Dashboard Trading

This example shows the creation of a simple trading dashboard with multiple individual charts on a single pane.

Zoom Band Chart

This example shows the creation of a Zoom Band Chart.

Dashboard Business

This example shows the specific business case to visualize the costs of a imaginary company across all the departments combined in a single interactive dashboard.

Dashboard With Pie, XY, Spider and Donut Charts

This example shows different kinds of charts inside a dashboard.

Dashboard With LegendBox

Example showing a dashboard with multiple chart types and LegendBox Panel.

Dashboard Multi-Direction

This example shows series/axes progressing to all kinds of directions inside a dashboard.

Dashboard 2 Channels 1000 pps

This example shows different progressive data-patterns, scrolling strategies, custom axes and function generators inside a dashboard.

Dashboard 5 Channels 1000 pps

Example for a dashboard with multiple progressive channels of data. Using progressive Line Series.

Trading charts

OHLC Series Automatic Packing

This example shows real-time OHLC-packing using a variant of OHLC-series.

Candlestick Chart

This type of chart is used as a trading tool to visualize price movements. Also known as Japanese Candlestick Chart.

OHLC Chart

Basic implementation of OHLC chart. Also known as Price Chart, Bar Chart.

OHLC Series Automatic Packing Resolution

The examples purpose is to shed some light on the packing logic of OHLCSeriesWithAutomaticPacking. This is a variant of OHLCSeries.

Dashboard Trading

This example shows the creation of a simple trading dashboard with multiple individual charts on a single pane.

Statistics

Point Clusters

Example showing how to create clusters of differently colored points. Using Point Series.

Box And Violin Chart

This example shows usage of BoxSeries in extravagant manner.

Grouped Bars

Grouped bars for better categorizing than normal bar chart. Also known as Multi-set and Clustered Bar Chart.

Horizontal Bars

Horizontal variant of a Bar Chart. Also known as Bar Graph, Column Chart or Column Graph.

Vertical Bars

Bar Charts show discrete numerical comparisons across categories, where the value represents the height of a bar. Also known as Bar Graph, Column Chart or Column Graph.

Spider Static

This example shows the basic use of Spider Chart. Also known as Radar Chart, Web Chart, Polar Chart, Star Series.

Box and Whiskers Chart

Example creates a traditional Box and Whiskers Chart using ChartXY, BoxSeries and PointSeries for outliers.

Mosaic Chart

Mosaic Chart can be used to compare observation counts of groups across different categories. Also known as Marimekko Chart.

Stacked Mountains

Stacked Charts are a popular visual aid for comparing parts of a whole. Also known as Stacked Area Graph or Stacked Areas.

Donut Chart

Donut Chart is a variation of Pie chart - functionally it's the same, visually it's only missing the center.

Line Series

Example showcasing the use of Line Series. Also known as Line Graph and Line Chart.

1 Million Points Line Trace

Example plotting a million data points using progressive Line Series.

ECG

This example shows a simulated electrocardiogram(ECG)-signal by using a Line Series in a XY Chart.

Line Series Microseconds

Example on how to deal with high-resolution data - for example, measurements in microseconds precision.

Bands and Constant lines

This example shows usage of Bands and ConstantLines in XY Charts.

DateTime Axis

Example for creation of a DateTime Axis. DateTime axis can present time.

Markers

This example shows usage of different Markers of the ChartXY environment.

Dashboard Business

This example shows the specific business case to visualize the costs of a imaginary company across all the departments combined in a single interactive dashboard.

Area Series

Multiple Areas

Basic usage of a Monopolar Area series. Also known as a Area Graph or Area Chart.

Area Range

Example showcasing basic use of an Area Range Series. Also known as a Area Graph, Area Chart or Range Area Chart.

Area Bipolar

Basic usage of Bipolar Area Series. Also known as a Bubble Series, Bubble Chart and Bubble Graph.

Layered Areas

Layered Area Chart done by layering multiple Area Series on top of each other. Also known as a Layered Area Graph, Layered Area Chart or Multiple Area Charts.

Stacked Mountains

Stacked Charts are a popular visual aid for comparing parts of a whole. Also known as Stacked Area Graph or Stacked Areas.

Temperature Variations

The example shows the basic usage of Area Range series to display variation in temperature.

Dashboard Trading

This example shows the creation of a simple trading dashboard with multiple individual charts on a single pane.

Box And Violin Chart

This example shows usage of BoxSeries in extravagant manner.

Dashboard With Pie, XY, Spider and Donut Charts

This example shows different kinds of charts inside a dashboard.

Heatmaps

Heatmap Grid

Example showcasing simple use-case for grid-type Heatmap.

Heatmap Mesh

Example showcasing simple use-case for Mesh-type Heatmap

Heatmap Spectrogram

Example showcasing simple use-case for Heatmap as Spectrogram.

Scrolling Heatmap

Example showcasing simple use-case for scrolling Heatmap.

Bar Charts

Vertical Bars

Bar Charts show discrete numerical comparisons across categories, where the value represents the height of a bar. Also known as Bar Graph, Column Chart or Column Graph.

Horizontal Bars

Horizontal variant of a Bar Chart. Also known as Bar Graph, Column Chart or Column Graph.

Grouped Bars

Grouped bars for better categorizing than normal bar chart. Also known as Multi-set and Clustered Bar Chart.

Span Chart

Also known as a Range Bar, Column Graph, Floating Bar Graph, Difference Graph, High-Low Graph.

Mosaic Chart

Mosaic Chart can be used to compare observation counts of groups across different categories. Also known as Marimekko Chart.

Dashboard Business

This example shows the specific business case to visualize the costs of a imaginary company across all the departments combined in a single interactive dashboard.