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">
| Parameter | Beschreibung | Pflichtfeld |
|---|---|---|
| id | Hier kann eine ID angegeben werden. | nein |
| class | Die Klasse wird wie immer für die Selektion des Widgets benötigt. | ja |
| alt | Das gibt den Titel des Graphen. | nein |
| data-type | Der Typ ist die Darstellung der Grafik. Der Default Graph ist ein Bar Graph. | nein |
| data-interface | Hier werden die Daten per Item geliefert. Ein Beispiel ist unten zu finden. | ja |
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>
| Tag | Beschreibung | Beispiel |
|---|---|---|
| menu → description | Hier stehen die Achsenbeschriftungen (Y-Achse | x-Achse). | Anzahl::Monate |
| menu → category | Die 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 → id | Die ID muss eindeutig sein, wird aber nicht benötigt. | |
| item → color | Hier kann man die Farbe der Kurve oder Fläche angeben. Es muss immer Hex angegeben werden. | #3366cc |
| item → name | Der Name der Kurve, welcher auch für die Legende verwendet wird. | Anzahl |
| item → value | Der Wert oder auch die Werte werden hier als Zahl angegeben. Wie immer werden sie mit :: getrennt. | 0::1::2::10 |
| item → date_start | Für die Gantt-Charts braucht es ein Start- und Enddatum. | 2020-12-06 |
| item → date_end | Enddatum für Gantt | 2020-12-12 |
Die Beispiele zeigen schnell, wie das mit dem Typ des Graphs gemeint ist.
