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

<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>

JSON

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

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.

Beispiel für die Nutzung von Highcharts-Optionen

Basis-Widgetdefinition:

<xml>
  <widget name ="bch_MeasurementChart">
    <position>
        <y>0</y>
        <x>0</x>
    </position>
    <size>
      <x>8</x>
      <y>5</y>
    </size>
    <widgettype>basechart</widgettype>
    <caption>
      <show>false</show>
    </caption>
    <chartData>
      <dataID>qy_Measurement</dataID>
      <value>Count</value>
      <category>
        JobName
      </category>
      <groupBy></groupBy>
      <limit>0</limit>
      <aggregate>sum</aggregate>
    </chartData>
    <chartOptions>
      <asTimeseries>false</asTimeseries>
      <asDrilldown>false</asDrilldown>
    </chartOptions>
  </widget>
</xml>

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:

XML

<xml>
   ...
   <widget name="my_basechart">
      ...
      <chartSettings>
         <!-- General chart options -->
         <chart>
            ...
            <!-- Transformable dimensions by dragging the mouse -->
            <zoomType>xy</zoomType>
         </chart>
         ...
      </chartSettings>
      ...
   </widget>
</xml>

Page tree

Diagramme (basechart)