kanone

Widget Graph

Mit dem Widget Graph können allerlei Graphen angezeigt werden. Die Daten, die per Item-Schnittstelle geliefert werden, stellt das Widget in den unterschiedlichsten Graphen dar.

Es existiert bereits jetzt eine grosse Menge an Darstellungen. Wie alle Widgets wird auch das Widget Graph als IMG-Tag eingebaut.

<img id="bar" class="dropapp-graph" alt="Monatliche Übersicht" data-type="bar" data-interface="/swissco/buchstaben/year.xml" src="/dropnetimages/dropbox/standard/status-wait.gif" width="16" height="16">

ParameterBeschreibungPflichtfeld
idHier kann eine ID angegeben werden.nein
classDie Klasse wird wie immer für die Selektion des Widgets benötigt.ja
altDas gibt den Titel des Graphen.nein
data-typeDer Typ ist die Darstellung der Grafik. Der Default Graph ist ein Bar Graph.nein
data-interfaceHier werden die Daten per Item geliefert. Ein Beispiel ist unten zu finden.ja

Items

Je nach Diagramm werden unterschiedliche Daten benötigt. Der Aufbau ist wie überall extrem einfach und trortzdem flexibel. Im Tag Menu stehen die allgemeinen Daten und pro Item alle Daten für einen Chart. Beim Kuchendiagramm (pie) stellt jedes Item ein Stück dar.

<menu name="Bar Chart" description="Anzahl::Monate" category=”Jan.::Feb.::März::April::Mai::Juni::Juli::Aug.::Sept.::Okt.::Nov.::Dez.">
    <item id="bar-01" color="#008800" name="Anzahl" value=”10::20::15::28::30::5::11::15::30::7::8::4" />
    <item id="bar-02" color="#ee0000" name="Vorfälle" value=”0::1::2::10::16::11::6::0::8::3::7::0" />
</menu>

TagBeschreibungBeispiel
menu → descriptionHier stehen die Achsenbeschriftungen (Y-Achse | x-Achse).Anzahl::Monate
menu → categoryDie Kategorie enthält die Liste mit den Bezeichnungen für die X-Achse oder im Fall des Gantt-Charts die Art der Darstellung (Zoom, Quarter Day, Half Day, Day, Week, Month).Jan.::Feb.::März
item → idDie ID muss eindeutig sein, wird aber nicht benötigt. 
item → colorHier kann man die Farbe der Kurve oder Fläche angeben. Es muss immer Hex angegeben werden.#3366cc
item → nameDer Name der Kurve, welcher auch für die Legende verwendet wird.Anzahl
item → valueDer Wert oder auch die Werte werden hier als Zahl angegeben. Wie immer werden sie mit :: getrennt.0::1::2::10
item → date_startFür die Gantt-Charts braucht es ein Start- und Enddatum.2020-12-06
item → date_endEnddatum für Gantt2020-12-12

Beispiele

Die Beispiele zeigen schnell, wie das mit dem Typ des Graphs gemeint ist.

bar-stacked

line

spline

step

area

area-spline

area-step

scatter

pie

donut

gauge

gantt