Welcome Guest, you are in: Login

ScrewTurn Wiki

RSSRSS

Navigation




Search the wiki


PoweredBy
Element Icon Chart Element
Info
Category: Data Collection AddIn: Psychophysical Methods
Creator: OkazoLab Team Scope: Global
Owns Snippets: no Usage: Status Screen,Snippets



Element actions aligned with different epochs of the parent event

EpochActions
InitializedThe element's datasets are cleaned up, except for these containing axis labels. The initial empty chart is generated and rendered.
Rendered
Activating
Activated
RunningThe element's chart is automatically updated, when data is added, removed or modified in the element's datasets
Deactivated
Deinitialized

Notes

  • The generated chart is always automatically scaled to fit all data.
  • Data collected by the element is preserved until the next experiment run. If can be reviewed and copied out via the chart designer, after the experiment is completed.
  • The generated chart can be exported into a image file, either in the chart designer at design-time or via the "Save Chart Now" runtime action at runtime.

Properties

Generic Properties

NameDescriptionConstraintsValue TypeUpon Change
Settings
Chart DesignerOpens a designer dialog, in which you can manage chart's datasets and choose visualization settings.
Rendering SizeDefines the size of the produced chart in pixels. The chart is automatically stretched on rendering, but a larger rendering size improves the chart quality with some cost in performance. The rendering size is also used as the resulting image resolution, when the chart is saved into a file.clSize
Runtime Status
Data SetsReturns a fixed array containing references to the chart's datasets. Each dataset is a .Net List that stores data points as elements. Using this property you can access datasets and add, change and remove the data points at runtime.IList[]Updates the element's chart
Online ChartReturns a live XAML control that can be used for direct binding to the Content property of the XAML ContentControl element, e.g. ContentControl with a chart can be added to the status screen or to the GUI Layout element.UIElement
Save Chart NowUse this runtime command whenever you want to save a screenshot of the generated chart. To run the command, assign a string with a full file path and name to this property in a code snippet. The screenshot will be saved into the target file after the end of the snippet call. The format of the image file is defined by the extension of the file name, e.g. .bmp, .png or .jpgUIElementWhen a file name is assigned to the property at runtime, the element's chart is exported into an image file. The operation can be time-consuming.
Dataset Statistics
CountReturns an int array containing the numbers of the Y values within each dataset.Int32[]
MeanReturns a double array containing the means of the Y values within each dataset.Double[]
MedianReturns a double array containing the medians of the Y values within each dataset.Double[]
MinimumReturns a double array containing the minimums of the Y values within each dataset.Double[]
MaximumReturns a double array containing the maximums of the Y values within each dataset.Double[]
Standard DeviationReturns a double array containing the standard deviations of the Y values within each dataset.Double[]
Standard ErrorReturns an int array containing the standard error of the Y values within each dataset.Double[]
Confidence IntervalReturns a double array containing half-length of the 95% confidence intervals (approx.!) for the means taken over the Y values within each dataset.Int32[]

+=== Properties inherited from clElement === Inherited properties of clElement
NameDescriptionConstraintsValue TypeUpon Change
Control
Is EnabledIf set to false the element is completely omitted when the experiment is run.Boolean
TitleTitle of the element.String



The chart element plots any arbitrary data using different chart types and estimates the common descriptive statistics, e.g. mean, median, SD and SE.


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

Bar chart showing
distribution of RTs

Box-and-Whisker Plot showing  difference between 2 conditions

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

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

/LinesBarsScatterMountainHistogram
DescriptionVisualizes data as a set of points connected by a lineVisualizes data as a set of bars Visualizes data as a set of pointsVisualizes data as a set of connected points with a filled area below a lineVisualizes the frequency distribution of the Y values (not values themselves!), which are automatically allocated into 9 adjacent categories along the X-Axis
Data pointsX-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
ExampleImageImageImageImageImage

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.SDMean.SE.CIMean.SEMean.CIMedian.SE.SDMedian.SE.CI
DescriptionVisualizes 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 pointsX-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
ExampleImage



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
- 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

ScrewTurn Wiki version 5.2.0.8. Some of the icons created by FamFamFam.