Navigation¶

• Main Page
• Random Page
• Create a new Page
• All Pages
• Categories
• Navigation Paths
  

• Administration
• File Management
  

• Create Account
  

Search the wiki

Chart Element

Chart Element is capable of plotting an arbitrary collected data in an experiment using different chart types. The generated chart is auto-updated and can be shown either on the presentation or the status screen. In addition, the chart element estimates common statistics of the collected data.

Table of Contents [Hide/Show] Summary Properties Description Snapshots Data representation Chart designer Plot Styles     Basic Plots     Statistical Box-and-Whisker Plots     Label Datasets Practical Use     Creating a simple chart on the status screen     Operating chart's datasets in code

Description ¶

The chart element is capable of plotting arbitrary data using different chart types and data groups. The element auto-updates its chart, when data is modified or added. The generated chart can be shown either on the presentation or status screen. The element can be broadly used, when you want to monitor experimental effects or their development over a course of an experiment. In addition, the chart element returns the descriptive statistics of the collected data, e.g. mean, median, SD and SE values.

Snapshots ¶

Bar chart showing distribution of RTs

Box-and-Whisker Plot showing difference between 2 conditions

Data representation ¶

Before you start using the Chart element, it's important to understand how it handles data. The Chart operates with one or more datasets, and you have to define in advance how many datasets will be used and plotted together on the chart. Each dataset contains a number of data XY points, which can be defined in different formats:

• A numerical pair of X-Y values (a dataset may contain any number of the X-Y pairs that may overlap)
• Indexed Y values (For each Y value in a dataset, its X counterpart is defined by an Y value's index in the dataset. Correspondingly, there is can only one Y value for every integer index from 0 to N)
• Text values, or pairs of X-Text values (the text data points are used to store labels for chart's axis)
  

The format of a data point is automatically defined by the way you add it into a dataset. If you add a single Y value, it becomes the "indexed Y" data point. If you enter a numerical pair, it becomes "X,Y pair" data point. Finally, if you add a text value or a pair of number-text, it becomes the text data point. Check the following screenshot of the chart designer, in which 3 datasets with different data points are previewed:

3 datasest with test data points (left) and the generated chart (right). The datasets include: 1) indexed Y values (histogram plot), b) X-Y pairs (scatter plot), c) X-Text values (labels for the X axis) Click on the screenshot to enlarge

You should use the same data point type in each dataset. If you need to combine different types of data points, use several datasets.

Chart designer ¶

The chart element has a visual designer that allows to manage datasets and visualization settings. Once you decide what data you want to visualize in an experiment, you can open the designer via the Chart designer property of the element, create datasets, enter data and choose visualization settings.

Plot Styles ¶

The chart element can visualize data using different plot styles that can be combined on the same chart. You have to select the plot style for each dataset on the chart element. Available plot styles are listed below.

Basic Plots ¶

img src="GetFile.aspx?Page=chart-element&File=exLines.png" alt="Image" />

/	Lines	Bars	Scatter	Mountain	Histogram
Description	Visualizes data as a set of points connected by a line	Visualizes data as a set of bars	Visualizes data as a set of points	Visualizes data as a set of connected points with a filled area below a line	Visualizes the frequency distribution of the Y values (not values themselves!), which are automatically allocated into 9 adjacent categories along the X-Axis
Data points	X-Y values, Indexed Y values	X-Y values, Indexed Y values	X-Y values, Indexed Y values	X-Y values, Indexed Y values	Indexed Y values
Example	<

Statistical Box-and-Whisker Plots ¶

Label Datasets ¶ if the 'Labels X' or 'Label Y' styles are selected, the dataset is not plotted on the chart. Instead, the data points are used to mark the corresponding axis.>

/	Mean.SE.SD	Mean.SE.CI	Mean.SE	Mean.CI	Median.SE.SD	Median.SE.CI
Description	Visualizes data in a set of box-and-whiskers, in which the data mean is shown as middle line, standard error as bar and standard deviation as whiskers.	Visualizes data in a set of box-and-whiskers, in which the data mean is shown as middle line, standard error as bar and confidence interval as whiskers.	Visualizes data in a set of box-and-whiskers, in which the data mean is shown as middle line and standard error as whiskers.	Visualizes data in a set of box-and-whiskers, in which the data mean is shown as middle line and confidence interval as whiskers.	Visualizes data in a set of box-and-whiskers, in which the data median is shown as middle line, standard error as bar and standard deviation as whiskers.	Visualizes data in a set of box-and-whiskers, in which the data median is shown as middle line, standard error as bar and confidence interval as whiskers.
Data points	X-Y values, Indexed Y values	X-Y values, Indexed Y values	X-Y values, Indexed Y values	X-Y values, Indexed Y values	X-Y values, Indexed Y values	X-Y values, Indexed Y values
Example

Practical Use ¶

Creating a simple chart on the status screen ¶

1. Add the Chart element to any event in your experiment
2. Select the element and open the chart designer
3. Create as many datasets as needed and select plot styles and visualization settings. You can enter some test data to check the chart appearance
4. Close the chart designer and select Online Chart property of the element
5. Create a proxy variable linked to Online Chart property
6. Open the status screen editor and add an empty XAML content control, e.g.:
   

    <ContentControl Width="640" Height="480" Content='{Binding OnlineChart}'/> 

   
   Note that the Content property has to be bound to the OnlineChart proxy variable
7. Close the status screen editor and select Data Sets property of the element
8. Create a proxy variable linked to Data Sets property.
9. Write your code that modifies the Data Sets at runtime using the DataSets proxy variable, e.g:
   

   
   
   if (TrialCondition==1)
   
   DataSets[0].Add(RT); // saving the trial RT to the dataset for the condition 1
   
   if (TrialCondition==2)
   
   DataSets[1].Add(RT); // saving the trial RT to the dataset for the condition 2
   
   

   
   

Operating chart's datasets in code ¶

// adding new data
DataSets[0].Add(0.5); // adds a new indexed Y value to the dataset
DataSets[1].Add(10.0,24.2); // adds a new X-Y pair to the dataset
DataSets[2].Add(10,"Ten"); // adds a new mark for X=10 in the label's dataset

// removing data
DataSets[0].Clear(); // cleans up the dataset
DataSets[1].RemoveAt(n); // removes the n-th element in the dataset
DataSets[2].RemoveAt(DataSets[2].Count-1,"Ten"); // removes the last mark in the label's dataset

// modifying datasets
DataSets[0][0]=0.25; // replaces the first Y value in the dataset
DataSets[1][0]=DataSets[1][0]+1; // increments the first Y value in the dataset by 1

// modifying a selected datapoint by its fields
DataSets[2][0].X=3; // changes the X value
DataSets[2][0].Y=7.4; // changes the Y value
DataSets[2][0].Label="X=3"; // changes the Label value (it affects only the label's datasets)

// Note that you always have to access a particular dataset with an index in the first bracket group, like DataSet[0] This gives a reference to .NET list.

Read more about the .NET list operations here.

 

	Name	Size
	Chart-Element-Icon.png	3.25 KB
	chart1.png	30.04 KB
	chart1_sm.png	22.77 KB
	chart2.png	29.34 KB
	chart2_sm.png	23.69 KB
	chartdatasets.png	85.61 KB
	chartdatasets_sm.png	69.83 KB
	charticon.png	5.00 KB
	exBoxWhiskers.png	5.43 KB
	exColumns.png	9.00 KB
	exLines.png	15.85 KB
	smHistogram.png	6.71 KB
	smMountain.png	11.78 KB
	smScatter.png	8.82 KB