Section author: jo, benjamin

6.4. Controller und Binding im Chart

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

6.4.2. 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);

6.4.3. Binding an Objekte des Controllers

Controller.lists

Controller.current

Controller.selected

Controller.first

Controller.last

6.4.4. Binden an Chart-Daten

Needs work

In einem LineChartWidget werden Rasterpositionen per Namen in den Eigenschaften VerticalRaster und HorizontalRaster 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>