Suche // Search:


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 
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")
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")
Chart[j].Line[i].presence = "visible"
Chart[j].Label[i].presence = "visible"

;Select a color for the lines
var nColor = Choose(i+1,

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 = "/"
Chart[j].Line[i].LineGraph.value.#line.slope = "\"

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

Liniendiagramm // Line Chart:

Bespiel // Example:


  1. The urls provided are not valid.
    Please can you provide a valid one to see your example?


  2. Hi,
    is it possible to download the example-forms otherwise? Somehow all the provided links do not work anymore. That would really be a great help!
    Does this even work with LCD ES3?
    We're looking for a possibility to draw diagrams with LCD ES3.

    Thanks a lot

  3. The sample files are still downloadable from the link above, and yes this solution works in all versions of Designer.