Chart Element

Modified on 2018/08/03 00:37 by Administrator Categorized as Data Collection, Elements, Psychophysical Methods
<div style="margin-right: 10px; margin-left: 16px; margin-bottom:10px; float: right; width: 500px; overflow: hidden; height: auto; padding: 0px; background: #fafafa; background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fafafa));background: -moz-linear-gradient(top, #fbfbfb, #fafafa);border: 1px dashed #ddd;box-shadow: 0 0 0 3px #fff, 0 0 0 5px #ddd, 0 0 0 10px #fff, 0 0 2px 10px #eee;">
== Summary ==
{s:Element Info Panel
| title=Chart
| category=Data Collection
| icon=[image|Element Icon|{UP(Chart-Element)}Chart-Element-Icon.png]
| author= OkazoLab
| addin= Psychophysics
| scope= Experiment
| usage= Snippets
| ownsnippets= None
}
== Properties ==
{|
|-
! Name
! Description                              
! Constraints
! Type
! On<br/>runtime<br/>change
|-
| colspan="5" bgcolor="#AADDDDD" | Settings
|-
| Open Chart Designer        
| Opens a designer dialog, in which you can manage chart's datasets and choose visualization settings.        
| {s:atDesign}        
| Boolean        
|  
|-
| Rendering Size        
| Defines 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.        
| {s:atDesign}        
| clSize        
|  
|-
| colspan="5" bgcolor="#AADDDDD" | Runtime Status
|-
| Data Sets        
| Returns a fixed array containing references to the chart's dataset. Each dataset, in turn, is a .Net List structure that stores chart data points. Using this property you can add, change and  remove the data points at runtime.        
| {s:atNormal}        
| clData..        
|  
|-
| XAML Chart        
| Returns a live XAML chart control that can be visualized by direct binding to the Content property of the XAML ContentControl element, e.g. <ContentControl Content='{Binding OnlineChart}'/> ContentControl with a chart can be added to the status screen or to the XAML Layout element.        
| {s:atNormal}        
| UIElem..        
|  
|-
| Save Chart Now        
| Use 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 .jpg        
| {s:atRuntimeAction}        
| String        
|  
|-
| colspan="5" bgcolor="#AADDDDD" | Dataset Statistics
|-
| Count        
| Returns an int array containing the numbers of the Y values within each dataset.        
| {s:atNormal}        
| Int32[]        
|  
|-
| Mean        
| Returns a double array containing the means of the Y values within each dataset.        
| {s:atNormal}        
| Double..        
|  
|-
| Median        
| Returns a double array containing the medians of the Y values within each dataset.        
| {s:atNormal}        
| Double..        
|  
|-
| Minimum        
| Returns a double array containing the minimum of the Y values within each dataset.        
| {s:atNormal}        
| Double..        
|  
|-
| Maximum        
| Returns a double array containing the maximum of the Y values within each dataset.        
| {s:atNormal}        
| Double..        
|  
|-
| Standard Deviation        
| Returns a double array containing the standard deviations of the Y values within each dataset.        
| {s:atNormal}        
| Double..        
|  
|-
| Standard Error        
| Returns a double array containing the standard errors of the Y values within each dataset.        
| {s:atNormal}        
| Double..        
|  
|-
| Confidence Interval        
| Returns a double array containing half-length of the 95% confidence intervals (approx!) for the mean taken over the Y values within each dataset.        
| {s:atNormal}        
| Double..        
|  
|-
| colspan="5" bgcolor="#AADDDDD" | Control
|-
| Is Enabled        
| If set to false the element is completely omitted when the experiment is run        
| {s:atDesign}        
| Boolean        
|  
|-
| Title        
| Title of the element        
| {s:atDesign}        
| String        
|  
|-            
|}
== ==
</div>
<!--*****************************************************************************************************************************************************************************-->
<!--*****************************************************************************************************************************************************************************-->
<!--*****************************************************************************************************************************************************************************-->
<!--*****************************************************************************************************************************************************************************-->
<!--*****************************************************************************************************************************************************************************-->
<!--*****************************************************************************************************************************************************************************-->
<!--*****************************************************************************************************************************************************************************-->
<!--*****************************************************************************************************************************************************************************-->
<!--*****************************************************************************************************************************************************************************-->
<!--*****************************************************************************************************************************************************************************-->
<!--*****************************************************************************************************************************************************************************-->
<!--*****************************************************************************************************************************************************************************-->
<!--*****************************************************************************************************************************************************************************-->
<!--*****************************************************************************************************************************************************************************-->
'''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.<br><br>
{TOC}

== 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 ==
{|
| [imageleft|Bar chart showing <br/> distribution of RTs |{UP(chart-element)}chart1_sm.png|{UP(chart-element)}chart1.png]
|| [imageleft|Box-and-Whisker Plot showing <br/> difference between 2 conditions |{UP(chart-element)}chart2_sm.png|{UP(chart-element)}chart2.png]
|}

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

{|
| [imageleft| 3 datasest with test data points (left) and the generated chart (right).<br/> The datasets include: 1) indexed Y values (histogram plot), b) X-Y pairs (scatter plot),<br/>c) X-Text values (labels for the X axis)<br/>Click on the screenshot to enlarge |{UP(chart-element)}chartdatasets_sm.png|{UP(chart-element)}chartdatasets.png]
|}

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 ===
{|
|-
! /
! 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,<br/> Indexed Y values
| X-Y values,<br/> Indexed Y values
| X-Y values,<br/> Indexed Y values
| X-Y values,<br/> Indexed Y values
| Indexed Y values
|-
! Example
| [image||{UP(chart-element)}exLines.png]
| [image||{UP(chart-element)}exColumns.png]
| [image||{UP(chart-element)}smScatter.png]
| [image||{UP(chart-element)}smMountain.png]
| [image||{UP(chart-element)}smHistogram.png]
|-

|}

=== Statistical Box-and-Whisker Plots ===

{|
|-
! /
! 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,<br/> Indexed Y values
| X-Y values,<br/> Indexed Y values
| X-Y values,<br/> Indexed Y values
| X-Y values,<br/> Indexed Y values
| X-Y values,<br/> Indexed Y values
| X-Y values,<br/> Indexed Y values
|-
! Example
! [image||{UP(chart-element)}exBoxWhiskers.png]
|-

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

|}



== Practical Use ==
=== Creating a simple chart on the status screen ===

# Add the Chart element to any event in your experiment
# Select the element and open the chart designer
# Create as many datasets as needed and select plot styles and visualization settings. You can enter some test data to check the chart appearance
# Close the chart designer and select Online Chart property of the element
# Create a [proxy variables|proxy variable] linked to Online Chart property
# Open the status screen editor and add an empty XAML content control, e.g.:
@@ xml <ContentControl Width="640" Height="480" Content='{Binding OnlineChart}'/> @@
Note that the Content property has to be bound to the OnlineChart proxy variable
# Close the status screen editor and select Data Sets property of the element
# Create a proxy variable linked to Data Sets property.
# Write your code that modifies the Data Sets at runtime using the DataSets proxy variable, e.g:
@@ csharp
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 ===

@@ csharp
// 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 [http://www.dotnetperls.com/list|.NET list operations here].
Meta Keywords:
Meta Description:
Change Comment:
EventIDE Wiki

Navigation¶

Chart Element
