Datenformate

In diesem Dokument wird erläutert, wie Sie Ihre Diagrammdaten an die Google Chart API senden.

Inhaltsverzeichnis

Überblick

Daten für fast alle Diagramme werden mit dem Parameter chd gesendet. Die Daten müssen in einem der folgenden Formate gesendet werden:

• Das Basistextformat besteht im Wesentlichen aus einfachen Gleitkommazahlen von 0 bis einschließlich 100. Dieses Format lässt sich leicht von Hand lesen und schreiben.
• Im Textformat mit Autoscaling wird das Diagramm automatisch an Ihre Daten angepasst.
• Das Textformat mit benutzerdefinierter Skalierung ähnelt dem einfachen Textformat, ermöglicht Ihnen aber, einen benutzerdefinierten Bereich mit einem zweiten URL-Parameter anzugeben.
• Mit dem einfachen Codierungsformat können Sie Ganzzahlwerte von 0 bis einschließlich 61 angeben, codiert durch ein einzelnes alphanumerisches Zeichen. Diese Codierung führt zur kürzesten Datenzeichenfolge aller Datenformate (falls Werte größer als 9 sind).
• Mit dem erweiterten Codierungsformat können Sie Ganzzahlwerte von 0 bis einschließlich 4095 angeben, codiert durch zwei alphanumerische Zeichen. Die erweiterte Codierung eignet sich am besten für ein Diagramm mit vielen Daten und einem großen Datenbereich.

Die Datenwerte werden an das verwendete Format angepasst. Wie die Daten an das Diagramm angepasst werden, wird unter Datenskalierung und Achsenskalierung erläutert.

Wir stellen ein JavaScript-Snippet zur Verfügung, um Daten in einfache Codierung oder erweiterte Codierungsformate zu codieren. Alternativ haben auch andere Google Chart-Gruppenmitglieder weitere Bibliotheken zur Verfügung gestellt, die bei der Formatierung helfen: Durchsuchen Sie die Archive, um sie zu finden.

Einfaches Textformat

Mit einfachen textformatierten Daten können Sie Gleitkommawerte von 0 bis einschließlich 100 als Zahlen angeben. Werte unter null werden als fehlend markiert; Werte über 100 werden auf 100 gekürzt. Der Vorteil des einfachen Textformats besteht darin, dass die Werte in der URL leicht zu lesen und zu verstehen sind und die Standard-Achsenlabels die Datenwerte genau darstellen. Die Textformatierung (ob einfach oder mit benutzerdefinierten Parametern) führt jedoch zum längsten Datenstring aller Formate.

Wenn die Daten Werte außerhalb des angegebenen Bereichs für die Textformatierung enthalten, können Sie die Daten skalieren, indem Sie sie in Prozentsätze des größten Werts in Ihren Daten umwandeln. Alternativ können Sie die Textformatierung mit benutzerdefinierter Skalierung verwenden, um die Skalierung für Sie zu übernehmen.

Syntax:

chd=t:val,val,val|val,val,val...

<data>

Jede Reihe besteht aus einem oder mehreren kommagetrennten Werten. Trennen Sie mehrere Reihen durch ein Pipe-Zeichen (|). Bei den Werten handelt es sich um Gleitkommazahlen von 0 bis einschließlich 100. Werte kleiner als null oder der Unterstrich ( _ ) werden als Nullwerte betrachtet. Werte über 100 werden auf 100 gekürzt.

 

Example:

Eine Tabelle mit fünf Werten. Der Unterstrich wird als Nullwert betrachtet, der Wert -30 unterschreitet den Mindestwert und wird daher verworfen. Der Wert 200 wird auf 100 gekürzt.

chd=t:_,30,-30,50,80,200

Nach oben

Textformat mit automatischer Skalierung

Einige Diagramme lassen sich so konfigurieren, dass sie automatisch an ihre Daten angepasst werden. Das Diagramm wird so skaliert, dass sich der größte Wert ganz oben im Diagramm und der kleinste Wert (oder null, wenn alle Werte größer als null sind) unten im Diagramm befindet.

Für alle Markierungswerte im Diagramm werden die tatsächlichen Werte angezeigt, nicht die skalierten.

Diese Funktion kann nur mit textformatierten Werten und nicht mit allen Diagrammtypen verwendet werden. Experimentieren Sie mit Ihrem Diagrammtyp, um herauszufinden, ob er unterstützt wird.

Syntax

cht=t:val,val,val...
chds=a

Beispiele:

chd=t:5,30,50,80,200 chds=a Für Kreisdiagramme sollten Sie für Kreisdiagramme keine Werte < 0 verwenden.

chd=t:-5,30,-30,50,80,200 chds=a

Nach oben

Textformat mit benutzerdefinierter Skalierung

Mit dem Textformat mit benutzerdefinierter Skalierung können Sie beliebige positive oder negative Gleitkommazahlen in Kombination mit einem Skalierungsparameter angeben, mit dem Sie einen benutzerdefinierten Bereich für Ihr Diagramm festlegen können. Dieses Diagramm ist nützlich, wenn Sie Ihre Daten nicht auf einen bestimmten Bereich beschränken oder die Daten nicht manuell skalieren möchten, damit sie gut in ein Diagramm passen. Bei diesem Format wird die Nullzeile bei Bedarf angepasst. Das Format der Daten entspricht dem einfachen Textformat.

Geben Sie für Autoscaling chds=a an.

Eine Textformatierung (ob einfach oder mit benutzerdefinierten Parametern) führt zum längsten Datenstring aller Formate.

Syntax:

Für die Textformatierung mit benutzerdefinierter Skalierung sind zwei Parameter erforderlich:

chd=t:val,val,val|val,val,val
chds=<series_1_min>,<series_1_max>,...,<series_n_min>,<series_n_max>

chd=t:<data>

Entspricht dem einfachen Datenformat: ein oder mehrere durch Kommas getrennte Werte pro Reihe, mehrere Reihen, die durch ein Pipe-Zeichen (|) getrennt sind. Der Bereich der zulässigen Werte in jeder Reihe wird durch den Parameter chds angegeben.

CHDs

Ein oder mehrere zulässige Mindest- und Höchstwerte für jede Datenreihe, die durch Kommas getrennt sind. Sie müssen sowohl einen Maximalwert als auch einen Mindestwert angeben. Wenn Sie weniger Paare angeben, als Datenreihen vorhanden sind, wird das letzte Paar auf alle verbleibenden Datenreihen angewendet. Der Achsenbereich wird hierdurch nicht geändert. Wenn Sie den Achsenbereich ändern möchten, müssen Sie den Parameter chxr festlegen. Gültige Werte liegen im Bereich von (+/-)9.999e(+/-)199. Sie können Werte entweder in der Standard- oder in der E-Schreibweise angeben.

<series_1_min>

Der minimal zulässige Wert in der ersten Reihe. Niedrigere Werte werden als fehlend markiert.

<series_1_max>

Maximal zulässiger Wert in der ersten Reihe. Höhere Werte werden auf diesen Wert gekürzt.

 

Example:

Ein Balkendiagramm mit einer Min/Max-Skala von -80–140 Die Werte 30, -60, 50, 140 und 80 liegen innerhalb der Skala und werden daher nicht gekürzt. Beachten Sie, dass die Nulllinie für Sie angepasst wird, 80/(140 + 80) = 0,36 des Wegs entlang der Y-Achse. Beachten Sie außerdem, dass der Standardbereich auf der Y-Achse trotz des Parameters chds zwischen 0 und 100 liegt. Die Labelwerte spiegeln also nicht die tatsächlichen Datenwerte wider.

chd=t:30,-60,50,140,80,-90 chds=-80,140

Nach oben

Einfaches Codierungsformat

Mit dem einfachen Codierungsformat können Sie Ganzzahlwerte von 0 bis einschließlich 61 angeben, codiert durch ein einzelnes alphanumerisches Zeichen. Dies führt zur kürzesten Datenstring-URL aller Datenformate. Wenn Sie jedoch ein Linien- oder Balkendiagramm haben, das länger als 100 Pixel entlang der Datenachse ist, sollten Sie ein anderes Format verwenden. Das liegt daran, dass, wenn nur 62 Datenwerte unterstützt werden, der Detaillierungsgrad der Daten viel größer als der Detaillierungsgrad der Anzeige ist und die Werte nur geringfügig abweichen (nicht viel, aber in größeren Diagrammen sichtbar).

Wenn Sie den chds-Parameter mit einfacher Codierung verwenden, hat dies keinen Einfluss auf die Datenelementgröße im Diagramm. Dies gilt jedoch für alle Werte für Datenpunktmarkierungen.

Syntax:

chd=s:
  <series_1>
    ,...,
  <series_n>

<Serie_1>

Ein String, wobei jedes Zeichen ein einzelner Datenpunkt ist und die Reihen durch ein Komma getrennt sind. Einzelne Werte innerhalb einer Reihe werden nicht getrennt. Im Folgenden sind die unterstützten Datenzeichen und die zugehörigen Werte aufgeführt:

• A—Z, wobei A = 0, B = 1 usw. bis Z = 25
• a—z, wobei a = 26, b = 27 usw., bis z = 51
• 0(zero)—9, wobei 0 = 52 und 9 = 61
• Der Unterstrich (_) weist auf einen fehlenden Wert hin

Du kannst das folgende Tool verwenden, um einen einzelnen Wert zu codieren, oder den JavaScript-Code, um einen gesamten URL-String zu skalieren und zu codieren.

Example:

Entspricht dem textcodierten String chd=t:1,19,27,53,61,-1|12,39,57,45,51,27

<title="chs=320x200&cht=bvs,,chd=s:btb19_,mn5tzb&chco=ffcc33,ffe9a4&chxr=0,0,61,5&chxt=y" alt="Gestapeltes Balkendiagramm mit zwei Reihen und jeweils sechs Werten, einfache Codierung." src="/static_chart=chs3&hls_chart=chs1&s_chart=chs1&s_chart=de&s chd=s:BTb19_,Mn5tzb

Nach oben

Erweitertes Codierungsformat

Mit dem erweiterten Codierungsformat können Sie Ganzzahlwerte von 0 bis einschließlich 4.095 angeben, die durch zwei alphanumerische Zeichen codiert sind. Sie verwendet eine etwas andere Syntax als einfache Codierung.

Wenn Sie den Parameter chds mit einfacher Codierung verwenden, wirkt sich dies nicht auf die Größe des Datenelements im Diagramm aus. Dies gilt jedoch für alle Werte der Datenpunktmarkierung.

Syntax:

chd=e:
  <series_1>
    ,...,
  <series_n>

<Serie_1>

Ein String, bei dem jeweils zwei Zeichen ein einzelner Datenpunkt sind und die Reihen durch ein Komma getrennt sind. Einzelne Werte in einer Reihe werden nicht voneinander getrennt. Folgende Codierungszeichen werden unterstützt:

• A—Z
• a—z
• 0—9
• Punkt (.)
• Bindestrich (-)
• Fehlende Werte werden mit einem doppelten Unterstrich (__) gekennzeichnet.

Hier ist eine gekürzte Beschreibung codierter Werte:

• AA = 0, AB = 1 und so weiter bis AZ = 25
• Aa = 26, Ab = 27 und so weiter bis Az = 51
• A0 = 52, A1 = 53 und so weiter bis A9 = 61
• A- = 62, A. = 63
• BA = 64, BB = 65 und so weiter bis BZ = 89
• Ba = 90, Bb = 91 und so weiter bis Bz = 115
• B0 = 116, B1 = 117 und so weiter bis B9 = 125
• B- = 126, B. = 127
• 9A = 3.904, 9B = 3.905 und so weiter bis 9Z = 3.929
• 9a = 3.930, 9b = 3.931 und so weiter bis 9z = 3.955
• 90 = 3.956, 91 = 3.957 und so weiter bis 99 = 3.965
• 9- = 3.966, 9. = 3.967
• -A = 3.968, -B = 3.969 und so weiter bis -Z = 3.993
• -a = 3.994, -b = 3.995 und so weiter bis -z = 4.019
• -0 = 4.020, -1 = 4.021 und so weiter bis -9 = 4.029
• -- = 4.030, -. = 4.031
• .A = 4.032, .B = 4.033 und so weiter bis .Z = 4.057
• .a = 4.058, .b = 4.059 und so weiter bis .z = 4.083
• .0 = 4.084, .1 = 4.085 und so weiter bis .9 = 4.093
• .- = 4.094, .. = 4.095

Du kannst das folgende Tool verwenden, um einen einzelnen Wert zu codieren, oder den JavaScript-Code, um einen gesamten URL-String zu skalieren und zu codieren.

Example:

Entspricht dem textcodierten String chd=t:90,1000,2700,3500|3968,-1,1100,250

chd=e:BaPoqM2s,-A__RMD6

Nach oben

Datenskalierung und Achsenskalierung

Die Daten werden entweder explizit (bei Verwendung des Textformats mit benutzerdefinierter Skalierung) oder implizit (alle anderen Typen) entsprechend Ihrem Diagramm skaliert. Das bedeutet, dass jedes Diagramm so skaliert wird, dass es in den verfügbaren Bereich des Formats passt, nicht an den tatsächlichen Bereich der von Ihnen bereitgestellten Daten.

Sie können Ihre Daten so skalieren, dass sie den gesamten für Ihr Format zulässigen Wertebereich abdecken, um Unterschiede deutlicher zu machen. Sie können die Daten entweder so skalieren, dass sie in das von Ihnen verwendete Format passen, oder den Datenbereich explizit angeben (d. h. Textformat mit benutzerdefinierter Skalierung verwenden).

Beachten Sie, dass die Werte der Achsenbeschriftungen auf einer völlig unabhängigen Skala berechnet werden und nichts mit den Datenwerten zu tun haben. Sie verwenden jedoch den Standardbereich von 0–100. Sie können diesen Bereich jedoch ändern.

In diesem Abschnitt werden diese beiden Probleme beschrieben.

Die Daten werden so skaliert, dass sie in den Formatbereich passen [alle Diagramme außer Kreisdiagramm und Venn]

Unterschiedliche Formate unterstützen unterschiedliche Wertebereiche. Die Daten werden entsprechend Ihrem Formatbereich skaliert, sodass der von Ihrem Format unterstützte Höchstwert oben auf dieser Achse und der Mindestwert für Ihr Format unten dargestellt wird. Die folgenden Beispiele zeigen denselben Wert (100) mit einfachem Textformat (Bereich 0–100), Text mit benutzerdefinierter Skalierung (benutzerdefinierter Bereich 0–200) und erweitertem Codierungsformat (Bereich 0–4095).

Einfaches Textformat	Textformat mit benutzerdefinierter Skalierung	Erweitertes Codierungsformat
Wert: 100 (chd=t:100) Formatbereich: 0–100 „100“ wird als 100:100 in der Skala gerendert.	Wert 100 (chd=t:100, chds=0,200) Formatbereich: 0–200 „100“ wird im Verhältnis 100:200 gerendert.	Wert: 100 (chd=e:Bk) Formatbereich: 0–4.095 Die Zahl 100 wird als 100/4095 dargestellt.

Eine einfache Möglichkeit, die Daten an Ihr Diagramm anzupassen, ist die Verwendung des Textformats mit Skalierung. Eine komplexere Methode besteht darin, die Daten manuell so zu skalieren, dass sie in den von Ihrem Format unterstützten Bereich passen.

Kreisdiagramme und Mengendiagramme: Bei Kreis- und Mengendiagrammen sind alle Werte relativ zueinander und nicht zur Gesamtskala des Diagramms.

chd=e:BkDIEs	chd=t:100,200,300 chds=0,300

Der Bereich für Achsenlabels wird unabhängig berechnet [Balken, Linie, Radar, Streudiagramm und Kerzendiagramm]

Mit dem Parameter chxt können Sie Achsenwerte anzeigen lassen. Wichtig: Achsenbeschriftungen werden nicht so berechnet, dass sie die Diagrammdaten widerspiegeln. Sie werden entweder unabhängig von der API berechnet oder explizit von Ihnen festgelegt.

Der Standardachsenbereich liegt zwischen 0 und 100, unabhängig von Datenwerten oder Datenskalierung. Wenn Sie also beispielsweise die Y-Achse mit Standard-Achsenbeschriftungen in einem Diagramm mit erweiterter Codierung (Bereich 0–4095) darstellen lassen, sehen die Labels der Y-Achse weiterhin 0–100, sofern Sie dies nicht ausdrücklich ändern, wie unten erläutert. Das folgende Beispiel zeigt die Standardlabels der Y-Achse in einem erweiterten Codierungsbalkendiagramm mit einem Datenwert von 100:

chd=e:Bk (entspricht chd=t:100)

Sie können den Achsenbereich jedoch mit dem Parameter chxr angeben. Wenn die Achsenwerte die tatsächlichen Datenwerte widerspiegeln sollen, müssen Sie entsprechende Mindest- und Höchstwerte für die Achsen angeben, die Ihrem Formatbereich entsprechen. Beachten Sie, dass das einfache Textformat bereits eine Skala von 0–100 hat. Wenn Sie also eine einfache Textformatierung (ohne benutzerdefinierte Skalierung) verwenden, entsprechen die Achsenwerte standardmäßig den Datenwerten. Lassen Sie uns dies anhand einiger Beispiele veranschaulichen. Hier sind drei Diagramme mit denselben Daten (15,26,51,61), aber unterschiedlichen Formaten und unterschiedlichen Achsen:

Einfache Codierung, keine Achsenskalierung	Einfache Codierung, skalierte Achse	Einfacher Text, keine Achsenskalierung
chd=s:Paz9   Einfacher Codierungswertbereich: 0–61 Standardachsenbereich (0–100) Der Codierungsbereich ist kleiner als der Labelachsenbereich, sodass die Balken nicht dem tatsächlichen Wert auf dem Achsenlabel entsprechen. Die Balken sind jedoch richtig proportional zueinander.	chd=s:Paz9     chxr=0,0,61,10 Einfacher Codierungswertbereich: 0–61 Achsenbereich explizit auf 0–61 festgelegt Codierungsbereich und Achsenbereich sind gleich, sodass die Balken dem richtigen Wert auf der Achse entsprechen.	chd=t:15,26,51,61   Wertebereich für einfaches Textformat: 0–100 Standardachsenbereich (0–100) Codierungsbereich und Achsenbereich sind wieder identisch, sodass die genauen Datenwerte standardmäßig auf der Achse angezeigt werden. Da der Textformatbereich größer ist als der Bereich des einfachen Codierungsformats (100 Einheiten gegenüber 61 Einheiten), sind die Balken hier kleiner als in den anderen Diagrammen, aber alle Diagramme bleiben im Verhältnis zueinander.

Nach oben

JavaScript-Codierungsskript

In der Praxis ist es wahrscheinlich einfacher, Daten programmatisch als manuell zu codieren.

Das folgende JavaScript-Snippet codiert eine einzelne Reihe in einfacher oder extended Codierung und skaliert die Datenwerte so, dass sie in den gesamten Bereich dieser Codierung passen. Die Daten müssen als Array mit positiven Zahlen angegeben werden. Jeder angegebene Wert, der keine positive Zahl ist, wird mit dem Unterstrich (_) als fehlender Wert codiert.

var simpleEncoding =
  'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';

// This function scales the submitted values so that
// maxVal becomes the highest value.
function simpleEncode(valueArray,maxValue) {
  var chartData = ['s:'];
  for (var i = 0; i < valueArray.length; i++) {
    var currentValue = valueArray[i];
    if (!isNaN(currentValue) && currentValue >= 0) {
    chartData.push(simpleEncoding.charAt(Math.round((simpleEncoding.length-1) *
      currentValue / maxValue)));
    }
      else {
      chartData.push('_');
      }
  }
  return chartData.join('');
}

// Same as simple encoding, but for extended encoding.
var EXTENDED_MAP=
  'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-.';
var EXTENDED_MAP_LENGTH = EXTENDED_MAP.length;
function extendedEncode(arrVals, maxVal) {
  var chartData = 'e:';

  for(i = 0, len = arrVals.length; i < len; i++) {
    // In case the array vals were translated to strings.
    var numericVal = new Number(arrVals[i]);
    // Scale the value to maxVal.
    var scaledVal = Math.floor(EXTENDED_MAP_LENGTH *
        EXTENDED_MAP_LENGTH * numericVal / maxVal);

    if(scaledVal > (EXTENDED_MAP_LENGTH * EXTENDED_MAP_LENGTH) - 1) {
      chartData += "..";
    } else if (scaledVal < 0) {
      chartData += '__';
    } else {
      // Calculate first and second digits and add them to the output.
      var quotient = Math.floor(scaledVal / EXTENDED_MAP_LENGTH);
      var remainder = scaledVal - EXTENDED_MAP_LENGTH * quotient;
      chartData += EXTENDED_MAP.charAt(quotient) + EXTENDED_MAP.charAt(remainder);
    }
  }

  return chartData;
}

Rufen Sie zum Codieren von Daten die Funktion simpleEncode oder extendedEncode auf und übergeben Sie das Array, das Ihre Daten (valueArray) enthält, und den Maximalwert Ihrer Daten (maxValue). Um einen Abstand zwischen dem höchsten Wert und dem oberen Wert des Diagramms zu schaffen, legen Sie maxValue so fest, dass er größer als die größte Zahl im Datenarray ist:

var valueArray = new Array(0,1,4,4,6,11,14,17,23,28,33,36,43,59,65);
var maxValue = 70;
simpleEncode(valueArray, maxValue);

Nach oben