.. sectionauthor:: jo, benjamin
.. _ref-charts-binding:


###############################################################################
Controller und Binding im Chart
###############################################################################

Properties
-------------------------------------------------------------------------------

Das Chart hat eine automatisch initialisierte Property ``Controller``.

**Controller**

	*Magie...*
	Bei Initialisierung des BarCharts wird der ``Controller``-Property automatisch ein (leeres) ChartController-Objekt zugewiesen. 
	Diesem kann in einer Action eine Datentabelle zugewiesen werden::
	
	  <action trigger="data" arguments="data">
	    this.Controller.Table = data.Table;
	  </action>
	
	Sodann stehen die Spalten der Datentabelle für Binding zur Verfügung::
	
	  <bind property="Values" to="Controller" key="lists[2]" />
	
	oder, wenn die ColumnNames gesetzt wurden::
	
	  <bind property="Values" to="Controller.Columns" key="percent" />

**ColumnNames**

	*Eigentlich eine Controller-Eigenschaft. Sollte auch dorthin. Dann nur über Skript setzbar.*
	
	Erlaubt es, die Spalten einer Data-Tabelle zu benennen, was die Zuweisung von Binding-Keys erleichtert.
	
	Beispiel::

		<property name="ColumnNames" value="companyName,companyColor,percent"/>
		<!-- ... -->
		<bind property="Values" to="Controller.Columns" key="percent" />
		<!-- ... -->
		<template name="BarTemplate">
			<bind property="BackgroundColor" to="ControllerProxy" key="companyColor" />
		</template>


Methoden
-------------------------------------------------------------------------------

**setTable(Data.Table)** 
  Übergabewert ist ein Data.Table.

**setColumnNames(List)**
  Übergabewert ist eine Liste von Strings, die die Spalten der tabellarischen Daten benennt.
  
**setContent(???)**
  Übergabewert ist ein JavaScript-Objekt, dessen Keys als ColumnNames genutzt werden.
  ::

    var temp = new Object();
    temp.companyName  = ['Hans', 'Dieter', 'Peter', 'Willi'];
    temp.companyColor = ['red', 'green', 'blue', 'yellow'];
    temp.percent      = [1 , 2, 3, 4];
    this.controller.setContent (temp);


Binding an Objekte des Controllers
-------------------------------------------------------------------------------

**Controller.lists**

**Controller.current**

**Controller.selected**

**Controller.first**

**Controller.last**


Binden an Chart-Daten
-------------------------------------------------------------------------------

*Needs work*

In einem LineChartWidget werden Rasterpositionen per Namen in den Eigenschaften :ref:`VerticalRaster <ref-vertical_raster>` 
und :ref:`HorizontalRaster <ref-horizontal_raster>` definiert.
  
  
  

**currentX**
	Diese Eigenschaft ermöglicht das Setzen von Widgets an die horizontalen Datenpositionen.  
	
**current.first.x, current.first.y**
  current ist die aktuell gezeichnete Linie. First ist der erste Datenpunkt. x ist die horizontale Position.
  
**current.last.x, *current.last.y**
  current ist die aktuell gezeichnete Linie. Last ist der letzte Datenpunkt. x ist die horizontale Position.
  
  
  
Beispiele um Widgets gegen Rasterpositionen zu binden ::

	<widget name="TheLineChart" type="LineChart" x="0" y="50" shape="R 400 300">
		<property name="HorizontalRaster" value="a: 50; chart: max; d:20"/>
		<property name="VerticalRaster" value="v: 25; chart: max; z: 40"/>
	</widget>
	<template name="zzzXAxisLabels" shape="R 1000,1000" >
		<property name="BackgroundColor" value="transparent"/>
		<widget type="Alignment">
			<property name="BackgroundColor" value="yellow"/>
			<property name="AlignmentXAxis" value="center"/>
			<bind property="AlignedY" to="TheLineChart" key="current.last.y"/>
			<bind property="AlignedX" to="TheLineChart" key="HorizontalRaster.d.x"/> -->
			<widget type="Text" shape="R 40 20">
				<property name="BackgroundColor" value="blue"/>
				<bind property="Text" to="TheLineChart" key="currentX"/>
			</widget>
		</widget>			
	</template>