Suche // Search:

Posts mit dem Label Line Chart werden angezeigt. Alle Posts anzeigen
Posts mit dem Label Line Chart werden angezeigt. Alle Posts anzeigen

22.12.2010

FormCalc Diagramme Teil 4-V2 - Liniendiagramm
//
FormCalc Chart Pt.4-V2 - Line Charts

Liniendiagramme sind alles andere als einfach in Designer herzustellen, aber dass es geht habe ich ja schon vor einiger Zeit gezeigt.
Die Version hatte allerdings einige Einschränkungen.
So mussten alle möglicherweise genutzten Liniem schon während der Design-Phase eingefügt werden, da es nur mit einem positionierten Layout möglich ist, Element übereinander zu legen.
Mittels eines Tricks ist das nun nicht mehr nötig.
Dafür genügen schon 4 Zeilen Code.
Kurz gesagt, sagen wir dem Formular erst, dass das Teilformular "Chart" fließend ist, was uns ermöglich von den eingeschlossenen Teilformulare "Line" und "Label" neue Instanzen anzulegen.
Dannach wird das Teilformular einfach wieder auf positioniert gesetzt, fertig.

Chart[j].layout = "tb"
Chart[j]._Line.setInstances(nRows)
Chart[j]._Label.setInstances(nRows)
Chart[j].layout = "position"

Des Weiteren ist das Diagramm auch nicht mehr auf einen kleine Darstellungsbereich beschränkt.
Mittels eines Faktors kann es Werte zwischen 0 und 10.000 dynamisch darstellen.


Line Charts aren't easy to realize in Designer, but a while ago I showed that it is still possible.
Well that version hat some restrictions.
One was, that all possibly used lines already had to added in the design phase, because only a positioned layout allows to lay element on top of each other.
With a small trick this isn't neccessary anymore.
Four lines of code are enough to do this.
In short, we tell the form that the subform "Chart" is flowing, which allows us to add more instances of the wrapped subforms "Line" und "Label".
After that, we reset the subform to positioned, done!

Chart[j].layout = "tb"
Chart[j]._Line.setInstances(nRows)
Chart[j]._Label.setInstances(nRows)
Chart[j].layout = "position"

Aditionally it is now possible to use the chart in a large value range.
With the use of a factor ist can display values between 0 and 10.000 dynamically.



Alte Hierarchie des Formulars - Jedes eventuell benötigte Objekt muss bereits vorhanden sein
//
Old hierarchy of the form - Every possibly needed object has to be already present

Neue Hierarchie des Formulars - Jedes Objekt ist erstmal nur einmalig vorhanden
//
New hierarchy of the form - Every object initially occurs only once


Neues FormCalc-Skript
//
New FormCalc script

var Check = RenderChart.value
if (Check eq "true") then
var Factor
var MaxInput = Max(Input.Table.ChartValues[*].Col[*].Amount)
var Fmin
var Fmax
for f = 0 upto 9950 step 50 do
Fmin = f
Fmax = Fmin + 50
if (Within(MaxInput, Fmin, Fmax) eq 1) then
Factor = 1 / (Fmax / 100)
endif
endfor

var nRows = Input.Table.ChartValues.instanceManager.count
var nColumns = Input.Table.ChartValues[nRows -1].Col.instanceManager.count
_Chart.setInstances(nColumns + 1)

var GraphValue
var GraphLabel
var PrevGraphValue
var GraphDiff
var LineStart
var ContainerHeight
var Offset

for r=0 upto nRows -1 step 1 do
for c=0 upto nColumns -1 step 1 do
Chart[c].layout = "tb"
Chart[c]._Line.setInstances(nRows)
Chart[c]._Label.setInstances(nRows)
Chart[c].layout = "position"
ContainerHeight = UnitValue(Chart[c].hLines.h, "in")
Chart[c].Line[r].y = ContainerHeight
GraphValue = Input.Table.ChartValues[r].Col[c].Amount
Chart[c].Line[r].presence = "visible"
Chart[c].Label[r].presence = "visible"
Chart[0].Line[r].presence = "invisible"

if(c eq 0) then
PrevGraphValue = 0
LineStart = ContainerHeight
else
PrevGraphValue = Input.Table.ChartValues[r].Col[c-1].Amount
LineStart = UnitValue(Chart[c-1].Line.LineGraph.y, "mm")
endif

for y = 10 downto 0 step 1 do
Output.yAxis.Mark[y].Mark.value.text.value = Round((10 - y) * 10 / Factor)
endfor

var nColor = Choose(r+1, ;Instance (+1) = position in this list
"238,0,0", ;Red
"255,99,71", ;Tomato
"255,127,80", ;Coral
"255,140,0", ;DarkOrange
"255,165,0", ;Orange
"255,215,0", ;Gold
"255,255,0", ;Yellow
"238,238,0", ;Yellow2
"154,205,50", ;YellowGreen
"69,139,0", ;Chartreuse
"0,139,0", ;Green
"0,139,69", ;SpringGreen
"69,139,116", ;Aquamarine
"82,139,139", ;DarkSlateGray
"0,139,139", ;Cyan
"0,134,139") ;Turquoise
Chart[c].Line[r].LineGraph.value.line.edge.color.value = nColor
Input.Table.ChartValues[r].Color.Color.value.rectangle.fill.color.value = nColor

GraphDiff = GraphValue - PrevGraphValue
Chart[c].Line[r].LineGraph.h = UnitValue(Abs(GraphDiff), "in") / 25.4 * Factor
Chart[c].Label[r].LineValue.value.text.value = GraphValue
GraphLabel = Input.Table.ChartValues[r].Label
Chart[c].Label[r].LineValue.assist.toolTip.value = GraphLabel

if(GraphDiff >= 0) then
Chart[c].Line[r].LineGraph.value.#line.slope = "/"
else
Chart[c].Line[r].LineGraph.value.#line.slope = "\"
endif

if(c eq 0) then
Offset = ContainerHeight - UnitValue(Abs(GraphDiff), "in") / 25.4 * Factor
Chart[c].Line[r].y = Offset
Chart[c].Label[r].y = Offset
else
if(GraphDiff >= 0) then
Offset = ContainerHeight - GraphValue / 25.4 * Factor
Chart[c].Line[r].y = Offset
Chart[c].Label[r].y = Offset
else
Offset = ContainerHeight - (GraphValue + Abs(GraphDiff)) / 25.4 * Factor
Chart[c].Line[r].y = Offset
Chart[c].Label[r].y = ContainerHeight - (GraphValue / 25.4) * Factor
endif
endif
endfor
endfor
endif
RenderChart.value = "false"




Liniendiagramm - mit automatischer Größenanpassung
//
Line chart - with auto-resizing


Beispiel // Example
https://files.acrobat.com/a/preview/a3e6c8e5-5311-4219-a6f7-d7a2f2259d50

11.05.2010

FormCalc Diagramme Teil 4 - Liniendiagramm
//
FormCalc Charts Pt.4 - Line Chart

Ein Liniendiagramm ist ja der Klassiker schlechthin unter den Diagrammen.
Aber, um dieses Diagramm mit dem LiveCycle Designer herzustellen, ist etwas Aufwand nötig, da sich die Instanzen (sprich Graphen) ja überlagern können müssen.
Mit der Möglichkeit Teilformulare dynamisch hinzuzufügen und zu löschen kommt man hier also nicht weit, da sich die Instanzen in XFA-Formularen nur von links nach rechts oder oben nach unten anordnen.

Also muss hier alles, was evtl. angezeigt werden wird, schon im Formularlayout vorhanden sein.
Den Rest kann dann wieder ein einzelnes FormCalc-Script übernehmen.


The line chart is a real classic.
But, to realize it with LiveCycle Designer you need to expend effort.
That's because all instances (graphs) should be able to overlap each other.
Working with repeating subforms in XFA-forms won't work here, because these are only arraged next to each other from top to buttom or left to right and not on top of each other.

So, everything that could be shown later in the chart has to be in the form layout from the beginning.
The rest than could be done by a single FormCalc script.

FormCalc Script (sorry, sript looks a bit unpretty, because this blog editor has it's own life!):


var nRows = Input.Table.ChartValues.instanceManager.count 
var nColumns = Input.Table.ChartValues[nRows -1].Col.instanceManager.count 
_Chart.setInstances(nColumns)
var GraphValue
var GraphLabel
var PrevGraphValue
var GraphDiff
var GraphMod
var LineStart
var ContainerHeight = UnitValue(Chart.h, "in")
var Offset 

for i=0 upto nRows -1 step 1 do
for j=0 upto nColumns -1 step 1 do
if(j == 0) then
GraphValue = Input.Table.ChartValues[i].Col[j].Amount
PrevGraphValue = 0
LineStart = UnitValue(Chart[j].h, "in")
else
GraphValue = Input.Table.ChartValues[i].Col[j].Amount
PrevGraphValue = Input.Table.ChartValues[i].Col[j-1].Amount
LineStart = UnitValue(Chart[j-1].Line.LineGraph.y, "mm")
endif
Chart[j].Line[i].presence = "visible"
Chart[j].Label[i].presence = "visible"

;Select a color for the lines
var nColor = Choose(i+1,
"238,0,0",
"255,99,71",
"255,127,80",
"255,140,0",
"255,165,0",
"255,215,0",
"255,255,0",
"238,238,0",
"154,205,50",
"69,139,0",
"0,139,0",
"0,139,69",
"69,139,116",
"82,139,139",
"0,139,139",
"0,134,139")

Chart[j].Line[i].LineGraph.value.line.edge.color.value = nColor
Input.Table.ChartValues[i].Color.Color.value.rectangle.fill.color.value = nColor

GraphDiff = GraphValue - PrevGraphValue
Chart[j].Line[i].LineGraph.h = UnitValue(Abs(GraphDiff), "in") / 25.4
Chart[j].Label[i].LineValue.value.text.value = GraphValue
GraphLabel = Input.Table.ChartValues[i].Label
Chart[j].Label[i].LineValue.assist.toolTip.value = GraphLabel

if(GraphDiff >= 0) then
Chart[j].Line[i].LineGraph.value.#line.slope = "/"
else
Chart[j].Line[i].LineGraph.value.#line.slope = "\"
endif

if(j == 0) then
Offset = ContainerHeight - UnitValue(Abs(GraphDiff), "in") / 25.4
Chart[j].Line[i].y =  Offset
Chart[j].Label[i].y = Offset 
else
if(GraphDiff >= 0) then
Offset = ContainerHeight - GraphValue / 25.4
Chart[j].Line[i].y = Offset
Chart[j].Label[i].y = Offset
else
Offset = ContainerHeight - (GraphValue + Abs(GraphDiff)) / 25.4 
Chart[j].Line[i].y = Offset 
Chart[j].Label[i].y = ContainerHeight - (GraphValue / 25.4) 
endif
endif
endfor
endfor


Liniendiagramm // Line Chart:


Bespiel // Example:
https://files.acrobat.com/a/preview/34a5dfb2-392b-41e3-959d-11536d9a9b22