Allgemeines
Das Basechart-Widget ermöglicht über eine einheitliche Datenschnittstelle die Darstellung verschiedener Highcharts-Charttypen.
Verfügbare Diagrammtypen
Derzeit verfügbare Highcharts-Charttypen und deren Funktionen finden sich unter http://www.highcharts.com/demo.
Grundsätzlich verfügbar sind statische und dynamische Grundformen und Varianten von
- Linien-Diagrammen
- Flächen-Diagrammen
- Stab- & Balken-Diagrammen
- Kreis- / Torten-Diagrammen
- Punkt- & Blasen-Diagrammen
- Kombinationen aus den obigen Typen
- Dynamic Charts
- 3D-Diagramme
- Heatmaps
- Boxplots
- Netz-Diagramme
Beispiele für Diagramme
Anlegen eines Diagramms
Chart-typische Angaben
| Code Block | ||
|---|---|---|
| ||
<xml>
<!-- The Basechart enables you to generate different Chart-Types with the same Data-Interface -->
<widget name="template_widget_Basechart">
<!-- Position from left top -->
<position>
<x>0</x>
<y>0</y>
</position>
<!-- Size of the Widget -->
<size>
<x>8</x>
<y>6</y>
</size>
<!-- Caption: title over the widget and additional features (Contextmenue..) -->
<caption>
<!-- Display caption -->
<show>true</show>
<!-- Title of the Widget -->
<label>Basechart-Template</label>
</caption>
<!-- Name of the WidgetType -->
<widgettype>basechart</widgettype>
<!-- URL-Paramters to listen on for triggering the widget -->
<triggerParams>
<mandatory>
<list>equi</list>
</mandatory>
</triggerParams>
<!-- Chart settings (also see: http://api.highcharts.com/highcharts) -->
<chartSettings>
<!-- Chart-type -->
<chart>
<type>line</type>
</chart>
<!-- Chart-title -->
<title>
<text>Überschrift</text>
<style>
<color>red</color>
</style>
</title>
<!-- Tooltip appears when hovering a series -->
<tooltip>
<pointFormat>
<![CDATA[{point.ShortText}<br/>{point.name}: <b>{point.y}</b><br/>]]>
</pointFormat>
</tooltip>
</chartSettings>
<!-- Data origin -->
<chartData>
<!-- Query to execute -->
<dataID>qy_NameOfDataID</dataID>
<!-- Column for the Y-value -->
<value>OperatingHoursLaserOn</value>
<!-- Column for the X-value -->
<category>Generation</category>
</chartData>
</widget>
</xml> |
| Code Block | ||||
|---|---|---|---|---|
| ||||
widgetname: "basechart",
triggerParams: ["equi"], // optional
// Analog den Highcharts-Definitionen für das highcharts-Objekt, zum Beispiel:
chartSettings: {
chart: {
type: "line"
},
title: {
text: "Überschrift",
style: {
color: "red"
},
tooltip: {
pointFormat: "{point.ShortText}<br/>{point.name}: <b>{point.y}</b><br/>"
}
},
// Datenherkunft für den Chart
chartData: {
dataID: 'qy_Msghitlist_IdGroup_4SingleLaser', // Datenherkunft, evtl. mit triggerParams
value: 'count', // Spalte mit y-Werten
category: 'CompCodeGroup', // Ausprägungen zur Darstellung auf der x-Achse
groupBy: '', // optional, Gruppierung zur Darstellung mehrerer Serien
limit: 0, // optional, Begrenzung auf die ersten n Werte
aggregate: 'sum' //'count' // optional, Addition der y-Werte oder Anzahl des Vorkommens, analog SQL
},
// Weitere Steuerparameter für Chart, tbd
chartOptions: {
asDrilldown: false,
asTimeseries: false,
additionalColumns: ['ShortText']
} |
Definierbare Parameter
| Anchor | ||||
|---|---|---|---|---|
|
Parameter | Werte | default | Beschreibung |
|---|---|---|---|
widgetname | 'basechart' | Beschreibt den Widgettypen | |
triggerParams | Array | Muss (derzeit) angegeben werden, ggf. als [] | |
chartSettings | Objekt | Charteigenschaften (außer Chartdaten "series"), wie sie in Highcharts definiert werden, siehe https://api.highcharts.com/highcharts/6.0.2 | |
chartData | Objekt | Datenherkunft und -darstellung im Chart | |
chartData.dataID | String | Datenherkunft als Abfrage | |
chartData.value | String | Spaltenname der Abfrage mit den y-Werten | |
chartData.category | String | Spaltenname der Abfrage mit den x-Werten als Kategorie | |
| chartData.time | String | optional | Spaltenname der Abfrage mit den x-Werten als Zeitstempel, alternativ zu "category" |
| chartData.groupBy | String | optional | Spaltenname der Abfrage, nach denen die "category"-Daten gruppiert werden sollen, z.B. category=Standort, groupBy=Land |
| chartData.limit | Zahl | 0 | Begrenzung der anzuzeigenden Daten auf die ersten n Werte (absteigend nach Werten sortiert). Der Wert 0, heißt dass es kein limit definiert ist. |
| chartData.aggregate | 'sum' | 'count' | 'sum' | Addition der y-Werte oder Anzahl des Vorkommens für Gruppierungen |
| chartData.orderByCategory | 'asc' | 'desc' | null | Auf-/Absteigende Sortierung der Kategorien (category) anstelle der Standardsortierung nach absteigender Anzahl (ab Version 0.22) |
| chartData.orderByGroup | 'asc' | 'desc' | null | Auf-/Absteigende Sortierung der Gruppierungen (groupBy) anstelle der Standardsortierung nach absteigender Anzahl (ab Version 0.22) |
| chartOptions | Objekt | optional | Zusätzliche Darstellungsoptionen |
| chartOptions.asDrilldown | true | false | false | Darstellung der Gruppierung als Drilldown |
| chartOptions.asTimeseries | true | false | false | Darstellung als Zeitreihe, siehe chartData.time |
| chartOptions.autoAxesTitles | true | false | false | title.text für xAxis und yAxis aus den chartSettings bleibt erhalten, wenn nicht bei den chartOptions autoAxesTitles auf true gesetzt ist. Andere Title-Eigenschaften wie style bleiben grundsätzlich erhalten. |
| chartOptions.additionalColumns | Array | optional | Spaltennamen aus der Abfrage, die bei nicht gruppierten Daten zusätzlich als Punkteigenschaft hinzugefügt werden, um sie beispielsweise über die chartSettings im Tooltip mit 'pointFormat' anzeigen zu können. |
| UI Expand | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||
Basis-Widgetdefinition:
Zoom: Um innerhalb eines Charts das Zoomen auf den Achsen zu ermöglichen, muss in den chartSettings ein zoomType mitgegeben werden, der die möglichen transformierbaren Dimensionen beschreibt (x, y oder xy). Wenn dieser Parameter gesetzt ist, kann durch eine mit dem Cursor selektierte Fläche der neue Mittelpunkt angegeben und damit die Transformation der jeweils angegebenen Dimensionen angewendet werden. (siehe Demo) Ein Beispiel für eine XY-Transformation:
(Die Darstellung der Achsen wurde in dieser Abbildung zum besseren Verständnis an manchen Stellen hervorgehoben) Der nötige Parameter zur Festlegung des Zoomverhaltens in der Chartdefinition:
|
