Skip to main content

DataSet

Namespace: Wisej.Web.Ext.ChartJS3

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

Represents the data used by the ChartJS3 control to plot the chart. See data-structures for additional information regarding the data structure of Chart.js.

public class DataSet

This is the base class for the chart-specific data sets: LineDataSet, BarDataSet, HorizontalBarDataSet, DoughnutDataSet, PieDataSet, PolarAreaDataSet and RadarDataSet.

Use Add on DataSets to create a data set that matches the current ChartType, then cast it to the specialized type to access the chart-specific properties. The public properties are sent to the client (in camel case) as the Chart.js dataset configuration.

The properties of a data set don't refresh the chart when they change. Call Update on the chart to redraw it, or UpdateData when only Data has changed.

Example:

this.chartJS31.ChartType = ChartType.Bar;
this.chartJS31.Labels = new[] { "Q1", "Q2", "Q3", "Q4" };

var sales = this.chartJS31.DataSets.Add("Sales");
sales.Data = new object[] { 120, 150, 90, 180 };

Constructors​

Instance member DataSet()​

Constructs a new instance of DataSet.

The new data set has the Label set to "Data Set" and both BackgroundColor and BorderColor set to a semi-transparent black (alpha 76). The Type of a base data set is null.

Example:

var dataSet = new DataSet
{
	Label = "Visitors",
	Data = new object[] { 10, 20, 15 }
};
this.chartJS31.DataSets.Add(dataSet);

Properties​

Instance member BackgroundColor​

Color: Returns or sets the fill color of the data set. What it fills is up to the chart type. (Default: Color [A=76, R=0, G=0, B=0])

Value: The fill Color. The default is a semi-transparent black (alpha 76).

Maps to the Chart.js dataset "backgroundColor" property. The bar, doughnut, pie and polar area data sets hide this property with an array version that allows a different color for each data point.

Example:

DataSet dataSet = this.chartJS31.DataSets.Add("Orders");
dataSet.BackgroundColor = Color.FromArgb(80, Color.SteelBlue);
dataSet.BorderColor = Color.SteelBlue;
this.chartJS31.Update();

Instance member BorderColor​

Color: Returns or sets the border color of the data set. What it colors is up to the chart type. (Default: Color [A=76, R=0, G=0, B=0])

Value: The border Color. The default is a semi-transparent black (alpha 76).

Maps to the Chart.js dataset "borderColor" property. Some specialized data sets hide this property with their own version, for example BorderColor or the array version in BorderColor.

Example:

var dataSet = new DataSet { Label = "Signups" };
dataSet.Data = new object[] { 5, 9, 14 };
dataSet.BorderColor = Color.DarkOrange;
dataSet.BorderWidth = 2;
this.chartJS31.DataSets.Add(dataSet);

Instance member BorderWidth​

Int32: Returns or sets the width of the border in pixels. (Default: 0)

Value: The border width in pixels. The default is 0; the specialized data sets change it in their constructors (3 for LineDataSet and RadarDataSet, 2 for the doughnut, pie and polar area data sets).

Maps to the Chart.js dataset "borderWidth" property.

Example:

var line = (LineDataSet)this.chartJS31.DataSets.Add("Trend");
line.Data = new object[] { 3, 7, 4, 9 };
line.BorderWidth = 1;
this.chartJS31.Update();

Instance member Data​

Object[]: Returns or sets the data to plot. (Default: null)

Value: An array of values, usually one for each entry in Labels. The default is null.

The array is serialized to the client as the Chart.js dataset "data" property. It usually contains numbers but may also contain objects, for example objects with x and y properties for scatter charts or x, y and r for bubble charts. Setting this property doesn't redraw the chart: call UpdateData to animate the chart to the new values (it sends only the data and the labels), or Update for a full refresh.

Example:

var temperatures = this.chartJS31.DataSets.Add("Temperature");
temperatures.Data = new object[] { 12.5, 14.1, 17.8, 21.3, 19.0 };

// later: replace the values and animate the transition.
temperatures.Data = new object[] { 13.0, 15.2, 18.4, 22.0, 20.1 };
this.chartJS31.UpdateData(500);

Instance member Formatted​

String[]: Returns or sets the formatted representation of the data to plot, displayed when Display is true.

Value: An array of strings matching the items in Data by position, or null.

When the array is set and not empty, the default data labels formatter on the client shows the string at the same index of the data point. When the array is null or empty, the data label shows the value rounded to the nearest integer. The formatted strings are used only by the data labels plugin, not by the tooltips.

Example:

var sales = this.chartJS31.DataSets.Add("Sales");
sales.Data = new object[] { 1200.5, 980.25, 1430 };
sales.Formatted = new[] { "$1,200.50", "$980.25", "$1,430.00" };

this.chartJS31.Options.Plugins.DataLabels.Display = true;

Instance member Hidden​

Boolean: Returns or sets whether the data set is hidden. (Default: False)

Value: True to hide the data set; otherwise false. The default is false.

Maps to the Chart.js dataset "hidden" property. A hidden data set is not plotted but its entry is still shown (crossed out) in the legend and the user can click it to show the data set again.

Example:

private void checkBoxShowCosts_CheckedChanged(object sender, EventArgs e)
{
	var costs = this.chartJS31.DataSets["Costs"];
	if (costs != null)
	{
		costs.Hidden = !this.checkBoxShowCosts.Checked;
		this.chartJS31.Update();
	}
}

Instance member Label​

String: Returns or sets the label for the data set which appears in the legend and tooltips. (Default: "")

Value: The text of the label. The constructor initializes it to "Data Set"; data sets created with Add use the specified name.

The label is also used by the string indexer of DataSetCollection to find a data set. Setting this property doesn't redraw the chart; call Update.

Example:

var dataSet = this.chartJS31.DataSets.Add("Revenue");

// rename the data set, the legend shows the new label.
dataSet.Label = "Revenue (USD)";
this.chartJS31.Update();

Instance member Order​

Int32: Returns or sets the drawing order of the data set. Also affects the order for stacking, tooltip, and legend. (Default: 0)

Value: The drawing order. The default is 0.

Maps to the Chart.js dataset "order" property. Data sets with a higher order are drawn first, so a data set with a lower order is drawn on top of the others.

Example:

var actual = this.chartJS31.DataSets.Add("Actual");
var target = this.chartJS31.DataSets.Add("Target");

// draw the target on top of the actual values.
actual.Order = 2;
target.Order = 1;
this.chartJS31.Update();

Instance member Type​

Nullable<ChartType>: Returns the type of chart that plots this type of DataSet.

Value: One of the ChartType values, or null for an instance of the base DataSet class. The value is set by the constructor of the specialized data set class and cannot be changed from outside the class.

Maps to the Chart.js dataset "type" property, which allows Chart.js to mix different chart types in the same chart.

Example:

foreach (var dataSet in this.chartJS31.DataSets)
{
	if (dataSet.Type == ChartType.Line)
		((LineDataSet)dataSet).Fill = true;
}
this.chartJS31.Update();

Instance member xAxisID​

String: Returns or sets the ID of the x axis the DataSet is bound to. (Default: null)

Value: The ID of the x axis, or null (the default) to use the first x axis.

Maps to the Chart.js dataset "xAxisID" property. The client registers the axes defined in xAxes as scales with the IDs "x0", "x1", etc., according to their position in the array, so this value must use the same naming.

Example:

var scales = this.chartJS31.Options.Scales;
scales.xAxes = new[] { new OptionScalesAxesX(), new OptionScalesAxesX() };

var forecast = this.chartJS31.DataSets.Add("Forecast");
forecast.Data = new object[] { 40, 42, 47 };
forecast.xAxisID = "x1";
this.chartJS31.Update();

Instance member yAxisID​

String: Returns or sets the ID of the y axis the DataSet is bound to. (Default: null)

Value: The ID of the y axis, or null (the default) to use the first y axis.

Maps to the Chart.js dataset "yAxisID" property. The client registers the axes defined in yAxes as scales with the IDs "y0", "y1", etc., according to their position in the array, so this value must use the same naming.

Example:

// add a second y axis and plot the "Rate" data set on it.
var scales = this.chartJS31.Options.Scales;
scales.yAxes = new[] { new OptionScalesAxesY(), new OptionScalesAxesY() };

var rate = this.chartJS31.DataSets.Add("Rate");
rate.Data = new object[] { 0.2, 0.35, 0.5 };
rate.yAxisID = "y1";
this.chartJS31.Update();

Inherited By​

NameDescription
LineDataSetSpecialized data set for the Line chart.
BarDataSetSpecialized data set for the Bar chart.
HorizontalBarDataSetSpecialized data set for the HorizontalBar chart.
DoughnutDataSetSpecialized data set for the Doughnut chart.
PieDataSetSpecialized data set for the Pie chart.
PolarAreaDataSetSpecialized data set for the PolarArea chart.
RadarDataSetSpecialized data set for the Radar chart.