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 

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>
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.timeStringoptionalSpaltenname der Abfrage mit den x-Werten als Zeitstempel, alternativ zu "category"
chartData.groupByStringoptionalSpaltenname der Abfrage, nach denen die "category"-Daten gruppiert werden sollen, z.B. category=Standort, groupBy=Land
chartData.limitZahl0Begrenzung 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'nullAuf-/Absteigende Sortierung der Kategorien (category) anstelle der Standardsortierung nach absteigender Anzahl (ab Version 0.22)
chartData.orderByGroup'asc' | 'desc'nullAuf-/Absteigende Sortierung der Gruppierungen (groupBy) anstelle der Standardsortierung nach absteigender Anzahl (ab Version 0.22)
chartOptionsObjektoptionalZusätzliche Darstellungsoptionen
chartOptions.asDrilldowntrue | falsefalseDarstellung der Gruppierung als Drilldown
chartOptions.asTimeseriestrue | falsefalseDarstellung als Zeitreihe, siehe chartData.time
chartOptions.autoAxesTitlestrue | falsefalsetitle.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.additionalColumnsArrayoptionalSpaltennamen 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.

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