Skip to main content

SmoothieChart

Namespace: Wisej.Web.Ext.SmoothieChart

Assembly: Wisej.Web.Ext.SmoothieChart (4.1.0.0)

Represents a real-time streaming line chart based on the SmoothieChart JavaScript library http://smoothiecharts.org/.

public class SmoothieChart : Control

The chart polls the server every DataFrequency milliseconds and fires the DataNeeded event once for each line in TimeSeries. The handler provides the value of the new point, which is appended to the line and scrolled from right to left, delayed by UpdateDelay milliseconds to produce a smooth animation.

The BackColor is used for the chart background and the ForeColor for the labels.

Example:

Streaming the CPU usage and the memory usage in two lines:

var chart = new SmoothieChart
{
    Dock = DockStyle.Fill,
    MinValue = 0,
    MaxValue = 100,
    DataFrequency = 1000,
    UpdateDelay = 2000
};
chart.TimeSeries.Add(new TimeSeries { LineColor = Color.Lime, LineWidth = 2 });
chart.TimeSeries.Add(new TimeSeries { LineColor = Color.Orange, FillColor = Color.FromArgb(60, Color.Orange) });

chart.DataNeeded += (s, e) =>
{
    e.Value = e.LineIndex == 0 ? GetCpuUsage() : GetMemoryUsage();
};

this.Controls.Add(chart);

Constructors​

Instance member SmoothieChart()​

Initializes a new instance of the SmoothieChart control.

The new chart has a black background, white labels and white grid lines, and it's not focusable.

Properties​

Instance member BackColor​

Color: Returns or sets the background color of the chart. (Default: Color [Black])

The default is Black.

Instance member BorderStyle​

BorderStyle: Returns or sets the border style for the control. (Default: None)

Value: One of the BorderStyle values. The default is BorderStyle.None.

Instance member DataFrequency​

Int32: Returns or sets the interval in milliseconds between the data requests sent to the server. (Default: 500)

Each request fires the DataNeeded event once for every line in TimeSeries. A request is skipped if the previous one hasn't completed yet. Set to 0 to stop requesting data. The default is 500. See also UpdateDelay.

Instance member FontSize​

Int32: Returns or sets the font size in pixels used to display the labels. (Default: 10)

Instance member ForeColor​

Color: Returns or sets the color of the labels displayed in the chart. (Default: Color [White])

The default is White.

Instance member GidLineSize​

Int32: Returns or sets the width of the grid lines in pixels. (Default: 1)

Instance member GridLineColor​

Color: Returns or sets the color of the grid lines. (Default: Color [White])

Instance member Interpolation​

InterpolationType: Returns or sets the type of interpolation used to connect the points of all the time series. (Default: Bezier)

Instance member MaxValue​

Nullable<Int32>: Returns or sets the maximum value. Leave null to let the chart dynamically adjust the maximum value. (Default: null)

When null (default), the top of the chart follows the largest visible value. See MinValue.

Instance member MinValue​

Nullable<Int32>: Returns or sets the minimum value. Leave null to let the chart dynamically adjust the minimum value. (Default: null)

When null (default), the bottom of the chart follows the smallest visible value. Set both MinValue and MaxValue to use a fixed range.

Example:

Using a fixed 0-100 range for percentage values:

this.smoothieChart1.MinValue = 0;
this.smoothieChart1.MaxValue = 100;

Instance member ScrollSpeed​

Int32: Returns or sets the scroll speed expressed in milliseconds per pixel. (Default: 20)

Each horizontal pixel represents this many milliseconds: higher values scroll more slowly and show a longer time span in the same width. The default is 20 (a 500 pixels wide chart shows 10 seconds).

Instance member ShowMinMaxLabels​

Boolean: Returns or sets whether the control displays the minimum and maximum labels. (Default: True)

Instance member ShowTimeStamps​

Boolean: Returns or sets whether the control displays the time stamp labels. (Default: True)

Instance member TimeLineSpacing​

Int32: Returns or sets the distance between the vertical grid lines in milliseconds/line. (Default: 1000)

The vertical grid lines scroll with the data; with the default value of 1000 there is a line every second. The distance in pixels is this value divided by ScrollSpeed.

Instance member TimeSeries​

TimeSeriesCollection: Returns the collection of TimeSeries lines to display in the chart.

The DataNeeded event is fired once for each line, the index of the line in this collection is passed in LineIndex.

Changing the collection sends all the lines to the client again, where they are recreated: the data points already plotted are cleared.

Example:

Adding two lines to the chart:

this.smoothieChart1.TimeSeries.Add(new TimeSeries { LineColor = Color.Red, LineWidth = 2 });
this.smoothieChart1.TimeSeries.Add(new TimeSeries { LineColor = Color.DodgerBlue });

Instance member UpdateDelay​

Int32: Returns or sets the delay in milliseconds between the time of a data point and the moment it's displayed in the chart. (Default: 1000)

The chart draws the lines this many milliseconds in the past, so that the points received from the server are already available when they scroll into view. Use a value larger than DataFrequency plus the round-trip time to the server, otherwise the right end of the lines appears to jump. The default is 1000.

Example:

Requesting a new point every 2 seconds and keeping the animation smooth:

this.smoothieChart1.DataFrequency = 2000;
this.smoothieChart1.UpdateDelay = 3000;

Instance member VerticalSections​

Int32: Returns or sets the number of vertical sections marked out by horizontal grid lines. (Default: 2)

Methods​

Instance member GetData()​

Returns the data requested by the widget.

Returns: Object. An array with one element for each TimeSeries line, each with the time and value of the new point.

This method is called by the client widget every DataFrequency milliseconds; it fires the DataNeeded event once for each line and collects the returned values. Applications don't normally need to call it directly.

Example:

Collecting the next data points on the server, i.e. in a unit test:

var points = (object[])this.smoothieChart1.GetData();
System.Diagnostics.Debug.WriteLine($"{points.Length} points generated.");

Protected member OnDataNeeded(e)​

Fires the DataNeeded event.

ParameterTypeDescription
eDataNeededEventArgsProvides data for the DataNeeded event.

Protected member OnWebRender(config)​

Renders the client component.

ParameterTypeDescription
configObjectDynamic configuration object.

Instance member Start()​

Starts, or resumes, the scrolling animation of the chart.

The chart starts automatically when it's first displayed. This method doesn't affect the data requests, which are controlled by DataFrequency.

Example:

Resuming the chart:

private void buttonResume_Click(object sender, EventArgs e)
{
    this.smoothieChart1.Start();
}

Instance member Stop()​

Stops the scrolling animation of the chart, freezing the current view.

The chart keeps requesting data every DataFrequency milliseconds and firing DataNeeded; set DataFrequency to 0 to stop the requests as well.

Example:

Pausing the chart and the data requests:

private void buttonPause_Click(object sender, EventArgs e)
{
    this.smoothieChart1.Stop();
    this.smoothieChart1.DataFrequency = 0;
}

Events​

Instance member DataNeeded​

DataNeededEventHandler Fired when the chart needs a data point.

Implements​

NameDescription
IUserData
IBindableComponent
IDropTarget
IWisejComponent
IWisejControl
IWisejSerializable