Skip to main content

DataSet

Namespace: Wisej.Web.Ext.ChartJS

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

Represents the data used by the ChartJS control to plot the chart. See #line-chart-data-structure for additional information regarding the data structure of ChartJS.

public class DataSet

This is the base class for the chart-specific data sets: LineDataSet, BarDataSet, HorizontalBarDataSet, BubbleDataSet, 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 properties are sent to the client as the Chart.js dataset configuration.

Example:

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

var sales = this.chartJS1.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 the Type set to Line.

Example:

var dataSet = new DataSet
{
	Label = "Visitors",
	Data = new object[] { 10, 20, 15 }
};
this.chartJS1.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 [Empty])

Value: The fill Color. The default is Empty, which uses the Chart.js default.

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

Example:

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

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 [Empty])

Value: The border Color. The default is Empty, which uses the Chart.js default.

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 = this.chartJS1.DataSets.Add("Signups");
dataSet.BorderColor = Color.DarkOrange;
dataSet.BorderWidth = 2;

Instance member BorderWidth​

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

Value: The width of the border in pixels. The default is 0.

Maps to the Chart.js dataset "borderWidth" property. For line charts it is the width of the line.

Example:

var trend = (LineDataSet)this.chartJS1.DataSets.Add("Trend");
trend.BorderColor = Color.Green;
trend.BorderWidth = 3;

Instance member Data​

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

Value: An array of values, 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. Call UpdateData after changing the data to animate the chart to the new values.

Example:

var temperatures = this.chartJS1.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.chartJS1.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 set, the client uses the formatted string at the same index of the data point for the data labels and the tooltips. When the array is null or doesn't contain an entry for a data point, the raw value is shown.

Example:

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

this.chartJS1.Options.DataLabel.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.

Example:

private void checkBoxShowCosts_CheckedChanged(object sender, EventArgs e)
{
	var costs = this.chartJS1.DataSets["Costs"];
	if (costs != null)
	{
		costs.Hidden = !this.checkBoxShowCosts.Checked;
		this.chartJS1.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 DataSetCollection string indexer to find a data set.

Example:

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

// rename the data set, the legend shows the new label.
dataSet.Label = "Revenue (USD)";
this.chartJS1.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: An integer that defines the order of the data set. The default is 0.

Maps to the Chart.js dataset "order" property. Data sets with a lower value are drawn on top of data sets with a higher value.

Example:

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

// draw "Actual" above "Target".
actual.Order = 1;
target.Order = 2;

Instance member Type​

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

Value: One of the ChartType values. The value is set by the constructor of the specialized data set class and cannot be changed from outside the class.

Example:

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

Instance member xAxisID​

String: Binds the DataSet to the specified x axis. (Default: null)

Value: The Id of the x axis, or null to use the first x axis. The default is null.

Use this property with multi-axes charts: the value must match the Id of one of the axes in xAxes.

Example:

this.chartJS1.Options.Scales.xAxes[0].Id = "time-axis";

var events = this.chartJS1.DataSets.Add("Events");
events.xAxisID = "time-axis";

Instance member yAxisID​

String: Binds the DataSet to the specified y axis. (Default: null)

Value: The Id of the y axis, or null to use the first y axis. The default is null.

Use this property with multi-axes charts: the value must match the Id of one of the axes in yAxes.

Example:

var yAxes = this.chartJS1.Options.Scales.yAxes;
yAxes[0].Id = "left-axis";

var revenue = this.chartJS1.DataSets.Add("Revenue");
revenue.yAxisID = "left-axis";

Inherited By​

NameDescription
LineDataSetSpecialized data set for the Line chart.
BarDataSetSpecialized data set for the Bar chart.
HorizontalBarDataSetSpecialized data set for the HorizontalBar chart.
BubbleDataSetSpecialized data set for the Bubble 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.