Dokumentacja interfejsu GoogleVisual API

Ta strona zawiera listę obiektów udostępnianych przez interfejs GoogleVisual API oraz standardowe metody udostępniane przez wszystkie wizualizacje.

Uwaga: przestrzeń nazw interfejsu GoogleVisual API to google.visualization.*

Klasa DataTable

Reprezentuje dwuwymiarową, zmienną tabelę wartości. Aby utworzyć kopię obiektu DataTable tylko do odczytu (opcjonalnie przefiltrowanej tak, aby pokazywał określone wartości, wiersze lub kolumny), utwórz obiekt DataView.

Do każdej kolumny przypisany jest typ danych i kilka opcjonalnych właściwości, w tym identyfikator, etykieta i ciąg wzorca.

Dodatkowo możesz przypisywać właściwości niestandardowe (pary nazw i wartości) do dowolnej komórki, wiersza, kolumny lub całej tabeli. Niektóre wizualizacje obsługują określone właściwości niestandardowe, np. Wizualizacja tabeli obsługuje właściwość komórki o nazwie „style”, która umożliwia przypisanie wbudowanego ciągu stylu CSS do renderowanej komórki tabeli. Wizualizacja powinna opisywać w swojej dokumentacji wszystkie obsługiwane przez nią właściwości niestandardowe.

Zobacz też: QueryResponse.getDataTable

Konstruktor

Składnia

DataTable(opt_data, opt_version)

opt_data

[Opcjonalnie] Dane używane do zainicjowania tabeli. Może to być obiekt JSON zwrócony przez wywołanie metody DataTable.toJSON() w wypełnionej tabeli lub obiekt JavaScript zawierający dane użyte do zainicjowania tabeli. Strukturę obiektu literału JavaScript opisano tutaj. Jeśli ten parametr nie zostanie podany, zostanie zwrócona nowa, pusta tabela danych.

opt_version

[Opcjonalnie] Wartość liczbowa określająca wersję używanego protokołu przewodu. Jest ona używana tylko przez implementatory źródeł danych w narzędziach Chart. Aktualna wersja to 0.6.

Szczegóły

Obiekt DataTable służy do przechowywania danych przekazywanych do wizualizacji. DataTable to podstawowa tabela dwuwymiarowa. Wszystkie dane w każdej kolumnie muszą mieć ten sam typ danych. Każda kolumna ma deskryptor zawierający typ danych, etykietę tej kolumny (którą może być wizualizacja) oraz identyfikator, którego można użyć do odwoływania się do konkretnej kolumny (zamiast korzystania z indeksów kolumn). Obiekt DataTable obsługuje również mapę dowolnych właściwości przypisanych do określonej wartości, wiersza, kolumny lub całego obiektu DataTable. W wizualizacjach można ich używać do obsługi dodatkowych funkcji, np. Wizualizacja tabeli korzysta z właściwości niestandardowych, aby umożliwić przypisywanie dowolnych nazw klas lub stylów do poszczególnych komórek.

Każda komórka tabeli zawiera wartość. Komórki mogą mieć wartość null lub wartość typu określonego w kolumnie. Komórki mogą opcjonalnie przyjąć „sformatowaną” wersję danych. Jest to ciąg znaków danych sformatowany do wyświetlania przez wizualizację. Wizualizacja może (ale nie jest) wymagana do wyświetlania w wersji sformatowanej, ale zawsze będzie używać samych danych do wszelkich przeprowadzanych sortowania lub obliczeń (np. określania, w którym miejscu na wykresie należy umieścić punkt). Przykładem może być przypisanie wartości „niska”, „średnia” i „wysoka” w postaci sformatowanej do wartości liczbowych w komórkach 1, 2 i 3.

Aby dodać wiersze danych po wywołaniu konstruktora, możesz wywołać addRow() w przypadku pojedynczego wiersza lub addRows() w przypadku wielu wierszy. Możesz także dodawać kolumny, wywołując metody addColumn(). Istnieją również metody usuwania wierszy i kolumn. Zamiast usuwać wiersze i kolumny, rozważ utworzenie elementu DataView, który będzie selektywnym widokiem elementu DataTable.

Jeśli zmienisz wartości w obiekcie DataTable po przekazaniu go do metody draw() wizualizacji, zmiany nie wpłyną od razu na wykres. Aby uwzględnić zmiany, musisz ponownie wywołać metodę draw().

Uwaga: Wykresy Google nie przeprowadzają żadnej weryfikacji tabel danych. (Gdyby tak było, renderowanie wykresów byłoby wolniejsze). Jeśli podasz liczbę w miejscu, w którym kolumna oczekuje ciągu znaków, lub na odwrót, Wykresy Google postarają się zinterpretować wartość w sensowny sposób, ale nie wskażą błędów.

Poniższy przykład pokazuje utworzenie wystąpienia i wypełnianie DataTable ciągiem literału z tymi samymi danymi co w przykładzie powyżej w JavaScripcie:

var dt = new google.visualization.DataTable({
    cols: [{id: 'task', label: 'Task', type: 'string'},
           {id: 'hours', label: 'Hours per Day', type: 'number'}],
    rows: [{c:[{v: 'Work'}, {v: 11}]},
           {c:[{v: 'Eat'}, {v: 2}]},
           {c:[{v: 'Commute'}, {v: 2}]},
           {c:[{v: 'Watch TV'}, {v:2}]},
           {c:[{v: 'Sleep'}, {v:7, f:'7.000'}]}]
    }, 0.6);

W tym przykładzie tworzy się nowy, pusty element DataTable, a następnie zapełnia go ręcznie tymi samymi danymi co powyżej:

var data = new google.visualization.DataTable();
data.addColumn('string', 'Task');
data.addColumn('number', 'Hours per Day');
data.addRows([
  ['Work', 11],
  ['Eat', 2],
  ['Commute', 2],
  ['Watch TV', 2],
  ['Sleep', {v:7, f:'7.000'}]
]);

Metody

data.addRow();  // Add an empty row
data.addRow(['Hermione', new Date(1999,0,1)]); // Add a row with a string and a date value.

// Add a row with two cells, the second with a formatted value.
data.addRow(['Hermione', {v: new Date(1999,0,1),
                          f: 'January First, Nineteen ninety-nine'}
]);

data.addRow(['Col1Val', null, 'Col3Val']); // Second column is undefined.
data.addRow(['Col1Val', , 'Col3Val']);     // Same as previous.

data.addRows([
  ['Ivan', new Date(1977,2,28)],
  ['Igor', new Date(1962,7,5)],
  ['Felix', new Date(1983,11,17)],
  ['Bob', null] // No date set for Bob.
]);

var rowInds = data.getSortedRows([{column: 2}]);
for (var i = 0; i < rowInds.length; i++) {
  var v = data.getValue(rowInds[i], 2);
}

{"cols":[{"id":"Col1","label":"","type":"date"}],
 "rows":[
   {"c":[{"v":"a"},{"v":"Date(2010,10,6)"}]},
   {"c":[{"v":"b"},{"v":"Date(2010,10,7)"}]}
 ]
}

Format parametru danych literału JavaScript konstruktora

DataTable możesz zainicjować, przekazując obiekt literału ciągu JavaScript do parametru data. Nadamy ten obiekt obiektem data. Możesz zaprogramować ten obiekt ręcznie zgodnie z poniższym opisem lub użyć pomocniczej biblioteki Pythona, jeśli wiesz, jak używać Pythona, i Twoja witryna może z niego korzystać. Jeśli jednak chcesz utworzyć obiekt ręcznie, w tej sekcji znajdziesz opis składni.

Najpierw pokażmy przykład prostego obiektu JavaScript opisującego tabelę z 3 wierszami i 3 kolumnami (typy typu String, Number i Date):

{
  cols: [{id: 'A', label: 'NEW A', type: 'string'},
         {id: 'B', label: 'B-label', type: 'number'},
         {id: 'C', label: 'C-label', type: 'date'}
  ],
  rows: [{c:[{v: 'a'},
             {v: 1.0, f: 'One'},
             {v: new Date(2008, 1, 28, 0, 31, 26), f: '2/28/08 12:31 AM'}
        ]},
         {c:[{v: 'b'},
             {v: 2.0, f: 'Two'},
             {v: new Date(2008, 2, 30, 0, 31, 26), f: '3/30/08 12:31 AM'}
        ]},
         {c:[{v: 'c'},
             {v: 3.0, f: 'Three'},
             {v: new Date(2008, 3, 30, 0, 31, 26), f: '4/30/08 12:31 AM'}
        ]}
  ],
  p: {foo: 'hello', bar: 'world!'}
}

Teraz opiszmy składnię:

Obiekt data składa się z 2 wymaganych właściwości najwyższego poziomu (cols i rows) oraz opcjonalnej właściwości p, która jest mapą dowolnych wartości.

Uwaga: we wszystkich wyświetlanych nazwach właściwości i stałych ciągach znaków wielkość liter ma znaczenie. Poza tym właściwości opisane jako przyjmowanie wartości ciągu powinny być ujęte w cudzysłowy. Jeśli na przykład chcesz określić właściwość type jako liczbę, zapisz ją w ten sposób: type: 'number', ale sama wartość, w postaci liczbowej, będzie miała taką postać: v: 42

Usługa cols

cols to tablica obiektów opisujących identyfikator i typ każdej kolumny. Każda właściwość jest obiektem o tych właściwościach (wielkość liter ma znaczenie):

• type [wymagany] – typ danych w kolumnie. Obsługuje te wartości ciągów znaków (przykłady obejmują właściwość v:, która została opisana poniżej):
  • „boolean” – wartość logiczna języka JavaScript („prawda” lub „fałsz”). Przykładowa wartość: v:'true'
  • „number” – wartość numeru JavaScript. Przykładowe wartości: v:7 , v:3.14, v:-55
  • „ciąg” – wartość ciągu znaków w JavaScripcie. Przykładowa wartość: v:'hello'
  • „date” – obiekt JavaScript Date (miesiąc liczony od zera) z skróconym czasem. Przykładowa wartość: v:new Date(2008, 0, 15)
  • „datetime” – obiekt JavaScript Date z godziną. Przykładowa wartość: v:new Date(2008, 0, 15, 14, 30, 45)
  • „pora dnia” – tablica trzech liczb z opcjonalną czwartą reprezentującą godzinę (0 oznacza północ), minutę, sekundę i opcjonalnie milisekundę. Przykładowe wartości: v:[8, 15, 0], v: [6, 12, 1, 144]
• id [opcjonalny] identyfikator ciągu kolumny. Musi być unikalna w tabeli. Używaj podstawowych znaków alfanumerycznych, aby strona hostująca nie wymagała dodatkowych znaków ucieczki, aby uzyskać dostęp do kolumny w JavaScripcie. Pamiętaj, aby nie wybrać słowa kluczowego JavaScript. Przykład: id:'col_1'
• label [Opcjonalnie] wartość ciągu tekstowego wyświetlana w niektórych wizualizacjach w tej kolumnie. Przykład: label:'Height'.
• pattern [opcjonalny] Wzorzec ciągu znaków, który był używany przez źródło danych do formatowania wartości liczbowych, daty lub czasu w kolumnach. Ta wartość służy tylko celom archiwalnym. Prawdopodobnie nie będzie trzeba odczytywać wzorca i nie musi on istnieć. Klient Google wizualizacji nie używa tej wartości (odczytuje sformatowaną wartość komórki). Jeśli obiekt DataTable pochodzi ze źródła danych w odpowiedzi na zapytanie z klauzulą format, w tej klauzuli prawdopodobnie zostanie zwrócony wzorzec określony w tej klauzuli. Zalecane standardy wzorców to ICU DeimalFormat i SimpleDateFormat .
• p [Opcjonalny] Obiekt będący mapą niestandardowych wartości zastosowanych do komórki. Wartości te mogą być dowolnego typu JavaScriptu. Jeśli wizualizacja obsługuje jakiekolwiek właściwości na poziomie komórki, zostaną one opisane. W przeciwnym razie właściwość będzie ignorowana. Przykład: p:{style: 'border: 1px solid green;'}.

cols Przykład

cols: [{id: 'A', label: 'NEW A', type: 'string'},
       {id: 'B', label: 'B-label', type: 'number'},
       {id: 'C', label: 'C-label', type: 'date'}]

rows Usługa

Właściwość rows zawiera tablicę obiektów wierszy.

Każdy obiekt wiersza ma 1 wymaganą właściwość o nazwie c, która jest tablicą komórek w tym wierszu. Zawiera też opcjonalną właściwość p, która definiuje mapę dowolnych wartości niestandardowych, które można przypisać do całego wiersza. Jeśli wizualizacja obsługuje jakiekolwiek właściwości na poziomie wiersza, zostaną one opisane. W przeciwnym razie ta właściwość będzie ignorowana.

Obiekty komórek

Każda komórka w tabeli jest opisana przez obiekt o następujących właściwościach:

• v [opcjonalnie] wartość komórki. Typ danych powinien pasować do typu danych kolumny. Jeśli komórka ma wartość null, właściwość v powinna być pusta, ale może nadal mieć właściwości f i p.
• f [opcjonalny]: wersja ciągu znaków wartości v sformatowana do wyświetlania. Zazwyczaj wartości są takie same, ale nie jest to konieczne, więc jeśli podasz Date(2008, 0, 1) dla v, podaj w tej właściwości „1 stycznia 2008 r.” lub podobny ciąg znaków. Ta wartość nie jest sprawdzana względem wartości v. Wizualizacja nie będzie używać tej wartości do obliczeń, a jedynie jako etykieta wyświetlania. Jeśli go pominiesz, wersja w postaci ciągu znaków v zostanie automatycznie wygenerowana za pomocą domyślnego narzędzia do formatowania. Wartości f można modyfikować za pomocą własnego narzędzia do formatowania, ustawiać za pomocą setFormattedValue() lub setCell() albo pobierać za pomocą getFormattedValue().
• p [Opcjonalny] Obiekt będący mapą niestandardowych wartości zastosowanych do komórki. Wartości te mogą być dowolnego typu JavaScriptu. Jeśli wizualizacja obsługuje jakiekolwiek właściwości na poziomie komórki, zostaną one opisane. Właściwości te można pobrać za pomocą metod getProperty() i getProperties(). Przykład: p:{style: 'border: 1px solid green;'}.

Komórki w tablicy wierszy powinny mieć taką samą kolejność jak ich opisy w kolumnach cols. Aby wskazać komórkę o wartości null, możesz wpisać null, pozostawić puste pole w przypadku komórki w tablicy lub pominąć elementy końcowe tablicy. Aby więc wskazać wiersz z wartością null w pierwszych 2 komórkach, możesz określić [ , , {cell_val}] lub [null, null, {cell_val}].

Oto przykładowy obiekt tabeli z 3 kolumnami wypełnionymi 3 wierszami danych:

{
  cols: [{id: 'A', label: 'NEW A', type: 'string'},
         {id: 'B', label: 'B-label', type: 'number'},
         {id: 'C', label: 'C-label', type: 'date'}
  ],
  rows: [{c:[{v: 'a'},
             {v: 1.0, f: 'One'},
             {v: new Date(2008, 1, 28, 0, 31, 26), f: '2/28/08 12:31 AM'}
        ]},
         {c:[{v: 'b'},
             {v: 2.0, f: 'Two'},
             {v: new Date(2008, 2, 30, 0, 31, 26), f: '3/30/08 12:31 AM'}
        ]},
         {c:[{v: 'c'},
             {v: 3.0, f: 'Three'},
             {v: new Date(2008, 3, 30, 0, 31, 26), f: '4/30/08 12:31 AM'}
        ]}
  ]
}

Usługa p

Właściwość p na poziomie tabeli to mapa wartości niestandardowych zastosowanych do całego zbioru danych DataTable. Wartości te mogą być dowolnego typu JavaScriptu. Jeśli wizualizacja obsługuje jakiekolwiek właściwości na poziomie tabeli danych, zostaną one opisane. W przeciwnym razie ta właściwość będzie dostępna do użycia w aplikacji. Przykład: p:{className: 'myDataTable'}.

Klasa DataView

Widok tylko do odczytu bazowej tabeli DataTable. DataView umożliwia wybór tylko podzbioru kolumn lub wierszy. Pozwala też na zmianę kolejności kolumn i wierszy oraz ich duplikowanie.

Wyświetlenie to bieżący okres w źródle danych DataTable, a nie statyczny zrzut danych. Mimo to musisz zachować ostrożność podczas zmieniania struktury samej tabeli w sposób opisany tutaj:

• Dodanie lub usunięcie kolumn z tabeli bazowej nie zostanie odzwierciedlone w widoku i może spowodować nieoczekiwane zachowanie w widoku. Aby te zmiany zostały uwzględnione, musisz utworzyć nowy obiekt DataView z tabeli DataTable.
• Dodawanie lub usuwanie wierszy z tabeli bazowej jest bezpieczne, a zmiany zostaną natychmiast zastosowane do widoku danych (ale po tej zmianie musisz wywołać draw() we wszystkich wizualizacjach, aby nowy zestaw wierszy został wyrenderowany). Pamiętaj, że jeśli w widoku zostaną odfiltrowane wiersze przez wywołanie jednej z metod setRows() or hideRows(), a Ty dodasz lub usuniesz wiersze w tabeli bazowej, zachowanie jest nieoczekiwane. Musisz utworzyć nowy obiekt DataView, który będzie odzwierciedlał nową tabelę.
• Zmiana wartości komórek w istniejących komórkach jest bezpieczna, a zmiany są natychmiast przekazywane do DataView (ale po wprowadzeniu tej zmiany musisz wywołać draw() we wszystkich wizualizacjach, by nowe wartości komórek zostały wyrenderowane).

Możesz też utworzyć DataView na podstawie innego elementu DataView. Pamiętaj, że każde wspomnienie o tabeli lub widoku leżącego u podstaw odnosi się do poziomu znajdującego się bezpośrednio poniżej tego poziomu. Inaczej mówiąc, odnosi się do obiektu danych używanego do utworzenia tego zasobu DataView.

DataView obsługuje też obliczone kolumny. Są to kolumny, których wartość jest obliczana na bieżąco przy użyciu podanej przez Ciebie funkcji. Możesz na przykład uwzględnić kolumnę będącą sumą 2 poprzednich kolumn lub kolumnę, która oblicza i pokazuje kwartał kalendarzowy daty z innej kolumny. Więcej informacji znajdziesz tutaj: setColumns().

Jeśli zmodyfikujesz element DataView, ukrywając lub wyświetlając wiersze lub kolumny, wizualizacja nie będzie miała wpływu na wizualizację, dopóki nie wywołasz jej ponownie draw().

Możesz połączyć DataView.getFilteredRows() z DataView.setRows(), aby utworzyć DataView z interesującym podzbiorem danych, jak w tym przykładzie:

var data = new google.visualization.DataTable();
data.addColumn('string', 'Employee Name');
data.addColumn('date', 'Start Date');
data.addRows(6);
data.setCell(0, 0, 'Mike');
data.setCell(0, 1, new Date(2008, 1, 28));
data.setCell(1, 0, 'Bob');
data.setCell(1, 1, new Date(2007, 5, 1));
data.setCell(2, 0, 'Alice');
data.setCell(2, 1, new Date(2006, 7, 16));
data.setCell(3, 0, 'Frank');
data.setCell(3, 1, new Date(2007, 11, 28));
data.setCell(4, 0, 'Floyd');
data.setCell(4, 1, new Date(2005, 3, 13));
data.setCell(5, 0, 'Fritz');
data.setCell(5, 1, new Date(2007, 9, 2));

// Create a view that shows everyone hired since 2007.
var view = new google.visualization.DataView(data);
view.setRows(view.getFilteredRows([{column: 1, minValue: new Date(2007, 0, 1)}]));
var table = new google.visualization.Table(document.getElementById('test_dataview'));
table.draw(view, {sortColumn: 1});

Zespoły

Nową instancję DataView możesz utworzyć na 2 sposoby:

Konstruktor 1

var myView = new google.visualization.DataView(data)

data

DataTable lub DataView używany do zainicjowania widoku. Domyślnie widok zawiera wszystkie kolumny i wiersze w tabeli lub widoku danych w pierwotnej kolejności. Aby ukryć lub wyświetlić wiersze lub kolumny w tym widoku, wywołaj odpowiednie metody set...() lub hide...().

Zobacz też:

setColumns(), hideColumns(), setRows(), hideRows().

Konstruktor 2

Ten konstruktor tworzy nowy obiekt DataView przez przypisanie zserializowanego DataView do DataTable. Pomaga odtworzyć zasób DataView zserializowany za pomocą DataView.toJSON().

var myView = google.visualization.DataView.fromJSON(data, viewAsJson)

dane

Obiekt DataTable użyty do utworzenia obiektu DataView, który został wywołany przez DataView.toJSON(). Jeśli ta tabela różni się od pierwotnej tabeli, otrzymasz nieprzewidywalne wyniki.

viewAsJson

Ciąg znaków JSON zwrócony przez funkcję DataView.toJSON(). Ten opis opisuje, które wiersze mają być wyświetlane, a które ukryte w tabeli data.

Metody

// Show some columns directly from the underlying data.
// Shows column 3 twice.
view.setColumns([3, 4, 3, 2]);

// Underlying table has a column specifying a value in centimeters.
// The view imports this directly, and creates a calculated column
// that converts the value into inches.
view.setColumns([1,{calc:cmToInches, type:'number', label:'Height in Inches'}]);
function cmToInches(dataTable, rowNum){
  return Math.floor(dataTable.getValue(rowNum, 1) / 2.54);
}

Klasa ChartWrapper

Klasa ChartWrapper służy do pakowania wykresu oraz do obsługi wczytywania, rysowania i wysyłania zapytań dotyczących źródła danych. Klasa udostępnia wygodne metody ustawiania wartości na wykresie i rysowania go. Ta klasa upraszcza odczyt ze źródła danych, ponieważ nie trzeba tworzyć modułu obsługi wywołania zwrotnego zapytania. Przy użyciu tego narzędzia możesz też zapisać wykres i ponownie go używać.

Inną zaletą korzystania z ChartWrapper jest to, że dzięki ładowaniu dynamicznemu możesz zmniejszyć liczbę wczytań biblioteki. Poza tym nie musisz jawnie ładować pakietów, ponieważ ChartWrapper będzie za Ciebie wyszukiwać i wczytywać pakiety wykresów. Szczegółowe informacje znajdziesz w przykładach poniżej.

Jednak funkcja ChartWrapper obecnie rozpowszechnia tylko podzbiór zdarzeń wywoływanych przez wykresy: select, ready (Gotowe) i error (błąd). Inne zdarzenia nie są przesyłane przez instancję ChartWrapper. Aby otrzymywać inne zdarzenia, musisz wywołać funkcję getChart() i zasubskrybować zdarzenia bezpośrednio za pomocą uchwytu wykresu, jak w tym przykładzie:

var wrapper;
function drawVisualization() {

  // Draw a column chart
  wrapper = new google.visualization.ChartWrapper({
    chartType: 'ColumnChart',
    dataTable: [['Germany', 'USA', 'Brazil', 'Canada', 'France', 'RU'],
                [700, 300, 400, 500, 600, 800]],
    options: {'title': 'Countries'},
    containerId: 'visualization'
  });

  // Never called.
  google.visualization.events.addListener(wrapper, 'onmouseover', uselessHandler);

  // Must wait for the ready event in order to
  // request the chart and subscribe to 'onmouseover'.
  google.visualization.events.addListener(wrapper, 'ready', onReady);

  wrapper.draw();

  // Never called
  function uselessHandler() {
    alert("I am never called!");
  }

  function onReady() {
    google.visualization.events.addListener(wrapper.getChart(), 'onmouseover', usefulHandler);
  }

  // Called
  function usefulHandler() {
    alert("Mouseover event!");
  }
}

Zespół

ChartWrapper(opt_spec)

opt_spec

[Opcjonalnie] – obiekt JSON definiujący wykres lub zserializowany ciąg znaków tego obiektu. Format tego obiektu znajdziesz w dokumentacjidrawChart(). Jeśli ich nie określisz, musisz ustawić wszystkie odpowiednie właściwości za pomocą metod set... dostępnych przez ten obiekt.

Metody

ChartWrapper udostępnia te dodatkowe metody:

Wydarzenia

Obiekt ChartWrapper generuje poniższe zdarzenia. Pamiętaj, że musisz wywołać funkcję ChartWrapper.draw() przed zgłoszeniem zdarzeń.

Przykład

Te dwa fragmenty kodu tworzą równoważny wykres liniowy. W pierwszym przykładzie do zdefiniowania wykresu użyto zapisu literału JSON, a drugi używa metod ChartWrapper do ustawiania tych wartości.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Visualization API Sample</title>
<!--
  One script tag loads all the required libraries!
-->
<script type="text/javascript"
      src='https://www.gstatic.com/charts/loader.js'></script>
<script>
  google.charts.load('current);
  google.charts.setOnLoadCallback(drawVisualization);

  function drawVisualization() {
    var wrap = new google.visualization.ChartWrapper({
       'chartType':'LineChart',
       'dataSourceUrl':'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1',
       'containerId':'visualization',
       'query':'SELECT A,D WHERE D > 100 ORDER BY D',
       'options': {'title':'Population Density (people/km^2)', 'legend':'none'}
       });
     wrap.draw();
  }
</script>
</head>
<body>
  <div id="visualization" style="height: 400px; width: 400px;"></div>
</body>
</html>

Ten sam wykres, teraz z użyciem metod wyznaczających:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='content-type' content='text/html; charset=utf-8'/>
<title>Google Visualization API Sample</title>
<!-- One script tag loads all the required libraries!
-->
<script type="text/javascript"
    src='https://www.gstatic.com/charts/loader.js'></script>
<script type="text/javascript">
  google.charts.load('current');
  google.charts.setOnLoadCallback(drawVisualization);
  function drawVisualization() {
    // Define the chart using setters:
    var wrap = new google.visualization.ChartWrapper();
    wrap.setChartType('LineChart');
    wrap.setDataSourceUrl('http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1');
    wrap.setContainerId('visualization');
    wrap.setQuery('SELECT A,D WHERE D > 100 ORDER BY D');
    wrap.setOptions({'title':'Population Density (people/km^2)', 'legend':'none'});
    wrap.draw();
  }
</script>
</head>
<body>
  <div id='visualization' style='height: 400px; width: 400px;'></div>
</body>
</html>

Klasa ChartEditor

Klasa ChartEditor służy do otwierania okna na stronie, które umożliwia użytkownikowi dostosowanie wizualizacji na bieżąco.

Aby użyć narzędzia ChartEditor:

1. Wczytaj pakiet charteditor. W google.charts.load() wczytaj pakiet „charteditor”. Nie musisz wczytywać pakietów dla typu wykresu, który renderujesz w edytorze. Edytor wykresów wczyta wtedy dowolny pakiet.
2. Utwórz obiekt ChartWrapper definiujący wykres, który użytkownik może dostosować. Ten wykres zostanie wyświetlony w oknie. Użytkownik może skorzystać z edytora, aby przeprojektować wykres, zmienić jego typ, a nawet zmienić dane źródłowe.
3. Utwórz nową instancję ChartEditor i zarejestruj się, aby nasłuchiwać zdarzenia „ok”. To zdarzenie jest wywoływane, gdy użytkownik kliknie przycisk „OK” w oknie. Gdy otrzymasz wykres, wywołaj ChartEditor.getChartWrapper(), aby pobrać wykres zmodyfikowany przez użytkownika.
4. Zadzwoń do: ChartEditor.openDialog(), podając ChartWrapper. Otworzy się okno. Przyciski okien umożliwiają użytkownikowi zamknięcie edytora. Instancja ChartEditor jest dostępna, dopóki znajduje się w zakresie. Nie jest automatycznie zniszczona po zamknięciu okna przez użytkownika.
5. Aby zaktualizować wykres w kodzie, wywołaj setChartWrapper().

Metody

Opcje

Edytor wykresów obsługuje te opcje:

Wydarzenia

Edytor wykresów generuje te zdarzenia:

Przykład

Ten przykładowy kod otwiera okno edytora wykresów z wypełnionym wykresem liniowym. Jeśli użytkownik kliknie „OK”, edytowany wykres zostanie zapisany na stronie w lokalizacji <div>.

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  <title>
    Google Visualization API Sample
  </title>
  <script type="text/javascript"
    src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load('current', {packages: ['charteditor']});
  </script>
  <script type="text/javascript">
    google.charts.setOnLoadCallback(loadEditor);
    var chartEditor = null;

    function loadEditor() {
      // Create the chart to edit.
      var wrapper = new google.visualization.ChartWrapper({
         'chartType':'LineChart',
         'dataSourceUrl':'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1',
         'query':'SELECT A,D WHERE D > 100 ORDER BY D',
         'options': {'title':'Population Density (people/km^2)', 'legend':'none'}
      });

      chartEditor = new google.visualization.ChartEditor();
      google.visualization.events.addListener(chartEditor, 'ok', redrawChart);
      chartEditor.openDialog(wrapper, {});
    }

    // On "OK" save the chart to a <div> on the page.
    function redrawChart(){
      chartEditor.getChartWrapper().draw(document.getElementById('vis_div'));
    }

  </script>
</head>
<body>
  <div id="vis_div" style="height: 400px; width: 600px;"></div>
</body>
</html>

Metody manipulowania danymi

Przestrzeń nazw google.visualization.data zawiera metody statyczne służące do wykonywania na obiektach DataTable operacji podobnych do SQL, takich jak łączenie ich lub grupowanie według wartości kolumny.

Przestrzeń nazw google.visualization.data udostępnia te metody:

group()

Pobiera wypełniony obiekt DataTable i wykonuje podobną do SQL operację GROUP BY, która zwraca tabelę z wierszami pogrupowanymi według określonych wartości kolumny. Pamiętaj, że nie spowoduje to zmiany danych wejściowych DataTable.

Zwrócona tabela zawiera po 1 wierszu na każdą kombinację wartości w określonych kolumnach kluczowych. Każdy wiersz zawiera kolumny kluczowe oraz 1 kolumnę ze zbiorczą wartością kolumny we wszystkich wierszach pasujących do kombinacji kluczy (na przykład sumę lub liczbę wszystkich wartości w określonej kolumnie).

Przestrzeń nazw google.visualization.data zawiera kilka przydatnych wartości agregacji (np. sum i count), ale możesz zdefiniować własne (na przykład StandardDeviation lub secondHighest). Instrukcje, jak zdefiniować własny agregator, znajdziesz po opisie metody.

Składnia

google.visualization.data.group(data_table, keys, columns)

data_table

Wartość wejściowa DataTable. Nie zmieni się to po wywołaniu numeru group().

klucze

Tablica liczb lub obiektów określająca kolumny, według których należy grupować. Tabela wynikowa obejmuje wszystkie kolumny w tej tablicy oraz wszystkie kolumny w kolumnach. Jeśli jest to liczba, jest to indeks kolumny wejściowej DataTable, według której ma być grupowany. Obiekt będzie zawierał funkcję, która może modyfikować określoną kolumnę (np. dodaj 1 do wartości w tej kolumnie). Obiekt musi mieć te właściwości:

• kolumna – liczba będąca indeksem kolumny z zakresu dt, do którego ma zostać zastosowane przekształcenie.
• modyfikator – funkcja, która akceptuje jedną wartość (wartość komórki w tej kolumnie dla każdego wiersza) i zwraca zmodyfikowaną wartość. Ta funkcja służy do modyfikowania wartości kolumny, aby ułatwić grupowanie: na przykład przez wywołanie funkcji whoQuarter, która oblicza kwartał na podstawie kolumny daty, aby interfejs API mógł grupować wiersze według kwartału. Obliczona wartość jest wyświetlana w kolumnach kluczy w zwróconej tabeli. Funkcja ta może być zadeklarowana w treści tego obiektu lub może być definiowana w innym miejscu w kodzie (musi znajdować się w zakresie wywołania). Interfejs API udostępnia prostą funkcję modyfikatora. Tutaj znajdziesz instrukcje tworzenia własnych, bardziej przydatnych funkcji. Musisz znać typ danych, który może przyjmować ta funkcja, i wywoływać go tylko w kolumnach tego typu. Musisz też znać typ zwrotu tej funkcji i zadeklarować go we właściwości type opisanej poniżej.
• typ – typ zwrócony przez modyfikator funkcji. Powinna to być nazwa typu ciągu JavaScript, np. „liczba” lub „wartość logiczna”.
• etykieta – [opcjonalny] etykieta ciągu znaków, która ma zostać przypisana do tej kolumny w zwróconym obiekcie DataTable.
• id – [opcjonalny] identyfikator ciągu znaków do przypisania tej kolumny w zwróconej wartości DataTable.

Przykłady: [0], [0,2], [0,{column:1, modifier:myPlusOneFunc, type:'number'},2]

kolumny

[Opcjonalnie] Umożliwia określenie, które kolumny oprócz kolumn kluczowych mają zostać uwzględnione w tabeli wyjściowej. Ponieważ wszystkie wiersze w grupie wierszy są skompresowane w jeden wiersz wyjściowy, musisz określić, jaka wartość ma być wyświetlana w przypadku danej grupy wierszy. Możesz na przykład wybrać, czy wyświetlać wartość kolumny z pierwszego wiersza zestawu czy jako średnią wszystkich wierszy w tej grupie. columns to tablica obiektów o tych właściwościach:

• kolumna – liczba określająca indeks kolumny do wyświetlenia.
• agregacja – funkcja, która akceptuje tablicę wszystkich wartości tej kolumny w tej grupie wierszy i zwraca pojedynczą wartość do wyświetlenia w wierszu wyniku. Zwracana wartość musi być typu określonego we właściwości type obiektu. Poniżej znajdziesz informacje o tym, jak utworzyć własną funkcję agregacji. Musisz wiedzieć, jakie typy danych akceptuje ta metoda, i wywoływać ją tylko w kolumnach odpowiedniego typu. Interfejs API udostępnia kilka przydatnych funkcji agregacji. Listę znajdziesz w sekcji Udostępnione funkcje agregacji poniżej. Informacje o tym, jak napisać własną funkcję agregacji, znajdziesz w sekcji Tworzenie funkcji agregacji.
• typ – zwracany typ funkcji agregacji. Powinna to być nazwa typu ciągu JavaScript, np. „liczba” lub „wartość logiczna”.
• label – [opcjonalny] etykieta ciągu znaków stosowana do tej kolumny w zwróconej tabeli.
• id – [opcjonalny] identyfikator ciągu znaków, który ma zostać zastosowany do tej kolumny w zwróconej tabeli.

Zwracana wartość

DataTable z 1 kolumną na każdą kolumnę wymienioną w kluczach i po 1 kolumnie na każdą kolumnę wymienioną w kolumnach. Tabela jest posortowana według kluczowych wierszy, od lewej do prawej.

Przykład

// This call will group the table by column 0 values.
// It will also show column 3, which will be a sum of
// values in that column for that row group.
var result = google.visualization.data.group(
  dt,
  [0],
  [{'column': 3, 'aggregation': google.visualization.data.sum, 'type': 'number'}]
);

*Input table*
1  'john'  'doe'            10
1  'jane'  'doe'           100
3  'jill'  'jones'          50
3  'jack'  'jones'          75
5  'al'    'weisenheimer'  500

*Output table*
1  110
3  125
5  500

Udostępnione funkcje modyfikujące

Interfejs API udostępnia poniższe funkcje modyfikujące, które można przekazać do kluczy. modifier, aby dostosować działanie grupowania.

Udostępnione funkcje agregujące

Interfejs API udostępnia poniższe funkcje agregacji, które można przekazać do kolumn. aggregation.

Tworzenie funkcji modyfikatora

Możesz utworzyć funkcję modyfikatora, aby przeprowadzić proste przekształcenie wartości kluczowych, zanim funkcja group() zgrupuje wiersze. Ta funkcja pobiera wartość z jednej komórki, wykonuje na niej działanie (np. dodaje 1 do wartości) i ją zwraca. Typy danych wejściowych i zwrotnych nie muszą być tego samego typu, ale element wywołujący musi znać typy danych wejściowych i wyjściowych. Oto przykład funkcji, która akceptuje datę i zwraca kwartał:

// Input type: Date
// Return type: number (1-4)
function getQuarter(someDate) {
  return Math.floor(someDate.getMonth()/3) + 1;
}

Tworzenie funkcji agregacji

Możesz utworzyć funkcję agregacji, która akceptuje zbiór wartości z kolumn w grupie wierszy i zwraca pojedynczą liczbę, np. zwracającą liczbę lub średnią wartości. Oto implementacja podanej funkcji agregującej liczby, która zwraca liczbę wierszy należących do grupy:

// Input type: Array of any type
// Return type: number
function count(values) {
  return values.length;
}

Join()

Ta metoda łączy 2 tabele danych (obiekty DataTable lub DataView) w pojedynczą tabelę wyników, podobnie jak instrukcja SQL JOIN. Możesz określić co najmniej jedną parę kolumn (kolumnę klucza) między 2 tabelami, a tabela wyjściowa będzie zawierać wiersze zgodnie z wybraną metodą łączenia: tylko wiersze pasujące do obu kluczy, wszystkie wiersze z jednej tabeli lub wszystkie wiersze z obu tabel niezależnie od tego, czy klucze się zgadzają. Tabela wyników zawiera tylko kolumny kluczowe oraz wszelkie określone przez Ciebie dodatkowe kolumny. Pamiętaj, że klucz dt2 nie może mieć zduplikowanych kluczy, ale dt1 może. Termin „klucz” oznacza kombinację wszystkich wartości w kolumnie kluczowych, a nie konkretną wartość kolumny. Jeśli więc wiersz zawiera wartości w komórkach A | B | C, a kolumny 0 i 1 są kolumnami kluczowymi, klucz dla tego wiersza to AB.

Składnia

google.visualization.data.join(dt1, dt2, joinMethod,
                                 keys, dt1Columns, dt2Columns);

dt1

W polu DataTable zostanie wypełnione pole dt2.

dt2

Wypełniony DataTable, aby połączyć z dt1. Ta tabela nie może mieć wielu identycznych kluczy (gdzie klucz jest kombinacją wartości z kolumny kluczy).

joinMethod

Ciąg określający typ złączenia. Jeśli dt1 ma wiele wierszy zgodnych z wierszem dt2, tabela wyjściowa będzie zawierać wszystkie pasujące wiersze dt1. Wybierz jedną z tych wartości:

• „full” – tabela wyjściowa obejmuje wszystkie wiersze z obu tabel niezależnie od tego, czy klucze są zgodne. Niedopasowane wiersze będą miały wpisy o wartości null, a dopasowane wiersze zostaną połączone.
• „wewnętrzne” – pełne złączenie zostało przefiltrowane w celu uwzględnienia tylko wierszy, w których pasują klucze.
• „left” – tabela wyjściowa obejmuje wszystkie wiersze z parametru dt1, niezależnie od tego, czy istnieją jakieś pasujące wiersze z parametru dt2.
• „right” – tabela wyjściowa zawiera wszystkie wiersze z argumentu dt2 niezależnie od tego, czy istnieją jakieś pasujące wiersze z parametru dt1.

klucze

Tablica kluczowych kolumn do porównania z obu tabel. Każda para jest tablicą z dwoma elementami, pierwsza to klucz w dt1, a druga to klucz w dt2. Ta tablica może określać kolumny według indeksu, identyfikatora lub etykiety (patrz getColumnIndex).
Kolumny muszą być tego samego typu w obu tabelach. Aby uwzględnić wiersz z tabeli, wszystkie określone klucze muszą być zgodne zgodnie z regułą określoną przez joinMethod. Kolumny kluczy są zawsze uwzględniane w tabeli wyjściowej. Tylko dt1 (tabela po lewej stronie) może zawierać zduplikowane klucze. Klucze w dt2 muszą być unikalne. Termin „klucz” oznacza tu unikalny zestaw kolumn kluczy, a nie wartości poszczególnych kolumn. Jeśli na przykład kolumny kluczowe to A i B, ta tabela będzie miała tylko unikalne wartości klucza (i może zostać użyta jako dt2):

A	B
Jona	Czerwony
Jona	Niebieski
Fred	Czerwony

Przykład: [[0,0], [2,1]] porównuje wartości z pierwszej kolumny w obu tabelach oraz trzeciej kolumny z dt1 z drugą kolumną z dt1.

dt1Columns

Tablica kolumn z dt1 do uwzględnienia w tabeli wyjściowej oprócz kolumn kluczy dt1. Ta tablica może określać kolumny według indeksu, identyfikatora lub etykiety (patrz getColumnIndex).

dt2Columns

Tablica kolumn z dt2 do uwzględnienia w tabeli wyjściowej oprócz kolumn kluczy dt2. Ta tablica może określać kolumny według indeksu, identyfikatora lub etykiety (patrz getColumnIndex).

Zwracana wartość

Element DataTable z kluczowymi kolumnami, dt1Columns i dt1Columns. Ta tabela jest posortowana według kolumn kluczowych od lewej do prawej. Gdy joinMethod ma wartość „inner”, wszystkie komórki kluczowe powinny być wypełnione. Jeśli w przypadku innych metod łączenia nie znaleziono żadnego klucza pasującego, wszystkie niedopasowane komórki klucza będą miały wartość null w tabeli.

Przykłady

*Tables*
dt1                        dt2
bob  | 111 | red           bob   | 111 | point
bob  | 111 | green         ellyn | 222 | square
bob  | 333 | orange        jane  | 555 | circle
fred | 555 | blue          jane  | 777 | triangle
jane | 777 | yellow        fred  | 666 | dodecahedron
* Note that right table has duplicate Jane entries, but the key we will use is
* columns 0 and 1. The left table has duplicate key values, but that is
* allowed.

*Inner join* google.visualization.data.join(dt1, dt2, 'inner', [[0,0],[1,1]], [2], [2]);
bob  | 111 | red    | point
bob  | 111 | green  | point
jane | 777 | yellow | triangle
* Note that both rows from dt1 are included and matched to
* the equivalent dt2 row.


*Full join* google.visualization.data.join(dt1, dt2, 'full', [[0,0],[1,1]], [2], [2]);
bob   | 111 | red    | point
bob   | 111 | green  | point
bob   | 333 | orange | null
ellyn | 222 | null | square
fred  | 555 | blue   | null
fred  | 666 | null | dodecahedron
jane  | 555 | null | circle
jane  | 777 | yellow | triangle


*Left join*  google.visualization.data.join(dt1, dt2, 'left', [[0,0],[1,1]], [2], [2]);
bob  | 111 | red | point
bob  | 111 | green | point
bob  | 333 | orange | null
fred | 555 | blue | null
jane | 777 | yellow | triangle


*Right join*  google.visualization.data.join(dt1, dt2, 'right', [[0,0],[1,1]], [2], [2]);
bob   | 111 | red | point
bob   | 111 | green | point
ellyn | 222 | null | square
fred  | 666 | null | dodecahedron
jane  | 555 | null | circle
jane  | 777 | yellow | triangle

Formatowanie

Interfejs Google Vision API udostępnia narzędzia do formatowania, których można używać do zmiany formatu danych w wizualizacji. Te elementy formatujące zmieniają sformatowaną wartość określonej kolumny we wszystkich wierszach. Uwaga:

• Elementy formatujące zmieniają tylko wartości sformatowane, a nie wartości bazowe. Wyświetlana wartość to na przykład „1000, 00 PLN”, ale wartość bazowa to „1000”.
• Elementy formatujące wpływają tylko na 1 kolumnę naraz. Aby zmienić format wielu kolumn, zastosuj narzędzie formatujące do każdej kolumny, którą chcesz zmienić.
• Jeśli korzystasz też ze zdefiniowanych przez użytkownika narzędzi do formatowania, niektóre z nich zastąpią wszystkie formaty zdefiniowane przez użytkownika.

Faktyczne formatowanie danych jest określane na podstawie języka, w którym załadowano interfejs API. Więcej informacji znajdziesz w artykule o wczytywaniu wykresów w określonym języku .

Ważne: elementów formatujących można używać tylko z DataTable. Nie można ich używać z DataView (obiekty DataView są tylko do odczytu).

Oto ogólne instrukcje korzystania z narzędzia do formatowania:

1. Pobierz wypełniony obiekt DataTable.
2. W przypadku każdej kolumny, której format chcesz zmienić:
   1. Utwórz obiekt określający wszystkie opcje narzędzia do formatowania. To jest podstawowy obiekt JavaScript ze zbiorem właściwości i wartości. Zapoznaj się z dokumentacją narzędzia do formatowania, aby sprawdzić, które właściwości są obsługiwane. (Opcjonalnie możesz przekazać obiekt notacji literału obiektu, określając opcje).
   2. Utwórz narzędzie do formatowania, przekazując obiekt options.
   3. Wywołaj formatter.format(table, colIndex), przekazując do nowego formatu DataTable i numer kolumny danych (liczonych od zera). Pamiętaj, że do każdej kolumny możesz zastosować tylko jeden moduł formatowania. Zastosowanie drugiego spowoduje po prostu zastąpienie efektów pierwszej.
      Ważne: wiele narzędzi do formatowania wymaga tagów HTML do wyświetlania specjalnego formatowania. Jeśli wizualizacja obsługuje opcję allowHtml, należy ustawić wartość „true” (prawda).

Oto przykład zmiany sformatowanych wartości daty w kolumnie daty, aby użyć długiego formatu daty („1 stycznia 2009 r.”):

var data = new google.visualization.DataTable();
data.addColumn('string', 'Employee Name');
data.addColumn('date', 'Start Date');
data.addRows(3);
data.setCell(0, 0, 'Mike');
data.setCell(0, 1, new Date(2008, 1, 28));
data.setCell(1, 0, 'Bob');
data.setCell(1, 1, new Date(2007, 5, 1));
data.setCell(2, 0, 'Alice');
data.setCell(2, 1, new Date(2006, 7, 16));

// Create a formatter.
// This example uses object literal notation to define the options.
var formatter = new google.visualization.DateFormat({formatType: 'long'});

// Reformat our data.
formatter.format(data, 1);

// Draw our data
var table = new google.visualization.Table(document.getElementById('dateformat_div'));
table.draw(data, {showRowNumber: true});

Większość narzędzi do formatowania udostępnia 2 metody:

Metoda	Opis
google.visualization.formatter_name(options)	Konstruktor, gdzie formatter_name to konkretna nazwa klasy formatterclass. options – ogólny obiekt JavaScript, który określa opcje dla danego narzędzia do formatowania. Ten obiekt jest ogólnym obiektem z parami właściwość-wartość i właściwościami specyficznymi dla danego narzędzia do formatowania. Zapoznaj się z dokumentacją konkretnego narzędzia do formatowania, aby dowiedzieć się, które opcje są obsługiwane. Oto 2 przykładowe sposoby wywołania konstruktora obiektu DateFormat, przekazując 2 właściwości: // Object literal technique var formatter = new google.visualization.DateFormat({formatType: 'long', timeZone: -5}); // Equivalent property setting technique var options = new Object(); options['formatType'] = 'long'; options['timeZone'] = -5; var formatter = new google.visualization.DateFormat(options);
format(data, colIndex)	Ponownie formatuje dane w określonej kolumnie. dane – obiekt DataTable zawierający dane do zmiany formatu. Nie możesz użyć tu obiektu DataView. colIndex – liczony od zera indeks kolumny do sformatowania. Aby sformatować wiele kolumn, musisz wielokrotnie wywołać tę metodę z różnymi wartościami colIndex.

 

Interfejs GoogleVisual API udostępnia następujące narzędzia do formatowania:

Nazwa narzędzia do formatowania	Opis
ArrowFormat	Dodaje strzałkę w górę lub w dół wskazującą, czy wartość komórki jest powyżej czy poniżej określonej wartości.
BarFormat	Dodaje kolorowy pasek, którego kierunek i kolor wskazują, czy wartość komórki znajduje się powyżej czy poniżej określonej wartości.
ColorFormat	Koloruje komórkę zgodnie z tym, czy wartości mieszczą się w określonym zakresie.
DateFormat	Formatuje wartość daty lub daty i godziny na kilka różnych sposobów, w tym „1 stycznia 2009”, „01/01/09” i „1 sty 2009”.
NumberFormat	Formatuje różne aspekty wartości liczbowych.
PatternFormat	Łączy wartości komórek z tego samego wiersza w określoną komórkę razem z dowolnym tekstem.

ArrowFormat

Dodaje strzałkę w górę lub w dół do komórki liczbowej w zależności od tego, czy wartość jest powyżej czy poniżej określonej wartości podstawowej. Jeśli równa się wartości podstawowej, strzałka się nie wyświetli.

Opcje

ArrowFormat obsługuje następujące opcje przekazywane do konstruktora:

Option	Opis
base	Liczba określająca wartość bazową służącą do porównywania z wartością komórki. Jeśli wartość komórki jest większa, komórka będzie zawierać zieloną strzałkę w górę. Jeśli wartość komórki jest mniejsza, pojawi się czerwona strzałka w dół. Jeśli ta sama strzałka jest taka sama, nie będzie żadnej.

Przykładowy kod

var data = new google.visualization.DataTable();
data.addColumn('string', 'Department');
data.addColumn('number', 'Revenues Change');
data.addRows([
  ['Shoes', {v:12, f:'12.0%'}],
  ['Sports', {v:-7.3, f:'-7.3%'}],
  ['Toys', {v:0, f:'0%'}],
  ['Electronics', {v:-2.1, f:'-2.1%'}],
  ['Food', {v:22, f:'22.0%'}]
]);

var table = new google.visualization.Table(document.getElementById('arrowformat_div'));

var formatter = new google.visualization.ArrowFormat();
formatter.format(data, 1); // Apply formatter to second column

table.draw(data, {allowHtml: true, showRowNumber: true});

BarFormat

Dodaje do komórki liczbowej kolorowy pasek wskazujący, czy wartość komórki jest powyżej czy poniżej określonej wartości podstawowej.

Opcje

BarFormat obsługuje następujące opcje przekazywane do konstruktora:

Option	Przykład Opis
base	Liczba, która stanowi wartość podstawową do porównania wartości komórki. Jeśli wartość komórki jest większa, będzie ona narysowana z prawej strony podstawy, a jeśli mniejsza, będzie przeciągnięta w lewo. Wartość domyślna to 0.
colorNegative	Ciąg wskazujący sekcję słupków z wartością ujemną. Możliwe wartości to „czerwony”, „zielony” i „niebieski”, a wartość domyślna to „czerwony”.
colorPositive	Ciąg wskazujący kolor sekcji słupków z wartością dodatnią. Możliwe wartości to „czerwony”, „zielony” i „niebieski”. Domyślnym ustawieniem jest „niebieski”.
drawZeroLine	Wartość logiczna wskazująca, czy należy narysować ciemną linię bazową o szerokości 1 piksela, gdy występują wartości ujemne. Ciemna linia poprawia wygląd słupków. Wartość domyślna to „false”.
max	Maksymalna wartość liczbowa w zakresie słupka. Wartość domyślna to najwyższa wartość w tabeli.
min	Minimalna wartość liczbowa w zakresie słupka. Wartość domyślna to najniższa wartość w tabeli.
showValue	Jeśli ma wartość true (prawda), pokazuje wartości i słupki. Jeśli ma wartość Fałsz, pokazuje tylko słupki. Wartość domyślna to true (prawda).
width	Grubość każdego słupka (w pikselach). Wartość domyślna to 100.

Przykładowy kod

var data = new google.visualization.DataTable();
data.addColumn('string', 'Department');
data.addColumn('number', 'Revenues');
data.addRows([
  ['Shoes', 10700],
  ['Sports', -15400],
  ['Toys', 12500],
  ['Electronics', -2100],
  ['Food', 22600],
  ['Art', 1100]
]);

var table = new google.visualization.Table(document.getElementById('barformat_div'));

var formatter = new google.visualization.BarFormat({width: 120});
formatter.format(data, 1); // Apply formatter to second column

table.draw(data, {allowHtml: true, showRowNumber: true, width: '100%', height: '100%'});

ColorFormat

Przypisuje kolory do pierwszego planu lub tła komórki liczbowej w zależności od wartości komórki. Jest to nietypowy format, ponieważ nie uwzględnia swoich opcji w konstruktorze. Zamiast tego wywołaj addRange() lub addGradientRange() tyle razy, ile chcesz, aby dodać zakresy kolorów, zanim wywołasz format(). Kolory można określić w dowolnym dopuszczalnym formacie HTML, na przykład „czarny”, „#000000” lub „#000”.

Metody

ColorFormat obsługuje te metody:

Metoda	Opis
google.visualization.ColorFormat()	Konstruktor. Nie przyjmuje żadnych argumentów.
addRange(from, to, color, bgcolor)	Określa kolor pierwszego planu lub kolor tła komórki w zależności od wartości komórki. Do każdej komórki z wartością w podanym zakresie from–to zostaną przypisane wartości color i bgcolor. Warto pamiętać, że zakres nie obejmuje zakresu, ponieważ utworzenie zakresu od 1 do 1000 oraz sekundy od 1000 do 2000 nie obejmie wartości 1000. from – [String, Number, Date, DateTime, or TimeOfDay] dolna granica zakresu (włącznie) lub wartość null. Jeśli wartość to null, będzie ona równa -∞. Granice ciągu znaków są porównywane alfabetycznie z wartościami w postaci ciągów znaków. to – [String, Number, Date, DateTime, or TimeOfDay] górna granica zakresu (nie włącznie) lub wartość null. Jeśli wartość to null, będzie ona równa +∞. Granice ciągu znaków są porównywane alfabetycznie z wartościami w postaci ciągów znaków. kolor – kolor, który zostanie zastosowany do tekstu w pasujących komórkach. Wartościami mogą być wartości „#RRGGBB” lub zdefiniowane stałe kolorów (np. „#FF0000” lub „czerwony”). bgcolor – kolor, który zostanie zastosowany do tła pasujących komórek. Wartościami mogą być wartości „#RRGGBB” lub zdefiniowane stałe kolorów (np. „#FF0000” lub „czerwony”).
addGradientRange(from, to, color, fromBgColor, toBgColor)	Przypisuje kolor tła z zakresu zgodnie z wartością komórki. Kolor jest skalowany tak, by pasował do wartości komórki w zakresie od koloru dolnej do górnej granicy. Pamiętaj, że ta metoda nie może porównywać wartości w postaci ciągów znaków, ponieważ addRange() może to zrobić. Wskazówka: zakresy kolorów są często trudne do dokładnego zmierzenia przez widzów.Najprostszym i najłatwiejszym do odczytania jest zakres od w pełni nasyconego do białego (np. #FF0000–FFFFFF). from – [liczba, data, data, godzina lub godzina] dolna granica (włącznie) zakresu lub wartość null. Jeśli wartość to null, zostanie ona dopasowana do wartości -∞. to – [liczba, data, data, godzina lub godzina] górna granica (niewłącznie) zakresu lub wartość null. Jeśli wartość to null, będzie ona równa +∞. kolor – kolor, który zostanie zastosowany do tekstu w pasujących komórkach. Ten kolor jest taki sam dla wszystkich komórek, niezależnie od ich wartości. fromBgColor – kolor tła komórek zawierających wartości na dole gradientu. Wartościami mogą być wartości „#RRGGBB” lub zdefiniowane stałe kolorów (np. „#FF0000” lub „czerwony”). toBgColor – kolor tła komórek zawierających wartości na górnym końcu gradientu. Wartościami mogą być wartości „#RRGGBB” lub zdefiniowane stałe kolorów (np. „#FF0000” lub „czerwony”).
format(dataTable, columnIndex)	Standardowa metoda format() stosowana do formatowania określonej kolumny.

Przykładowy kod

var data = new google.visualization.DataTable();
data.addColumn('string', 'Department');
data.addColumn('number', 'Revenues');
data.addRows([
  ['Shoes', 10700],
  ['Sports', -15400],
  ['Toys', 12500],
  ['Electronics', -2100],
  ['Food', 22600],
  ['Art', 1100]
]);

var table = new google.visualization.Table(document.getElementById('colorformat_div'));

var formatter = new google.visualization.ColorFormat();
formatter.addRange(-20000, 0, 'white', 'orange');
formatter.addRange(20000, null, 'red', '#33ff33');
formatter.format(data, 1); // Apply formatter to second column

table.draw(data, {allowHtml: true, showRowNumber: true, width: '100%', height: '100%'});

DateFormat

Formatuje wartość Date JavaScript na różne sposoby, np. „1 stycznia 2016 r.”, „01.01.2016” i „1 stycznia 2016 r.”.

Opcje

DateFormat obsługuje następujące opcje przekazywane do konstruktora:

Option	Opis
formatType	Opcja szybkiego formatowania daty. Obsługiwane są te wartości ciągów znaków, zmieniając format daty 28 lutego 2016 roku w następujący sposób: „short” – krótki format: np. „28.02.2016” „medium” – średni format: np. „28 lutego 2016 r.” „long” – długi format: np. „28 lutego 2016 r.” Nie możesz podać jednocześnie elementu formatType i pattern.
pattern	Niestandardowy wzorzec formatu stosowany do wartości, podobny do formatu daty i godziny IU. Przykład: var formatter3 = new google.visualization.DateFormat({pattern: "EEE, MMM d, ''yy"}); Nie możesz podać jednocześnie elementu formatType i pattern. Więcej informacji o wzorcach znajdziesz w następnej sekcji.
timeZone	Strefa czasowa, w której ma być wyświetlana wartość daty. Jest to wartość liczbowa wskazująca czas GMT + wybrana liczba stref czasowych (może być ujemna). Obiekt daty jest domyślnie tworzony z przyjętą strefą czasową komputera, na którym jest tworzony. Ta opcja służy do wyświetlania tej wartości w innej strefie czasowej. Jeśli na przykład utworzysz obiekt Date o 17:00 w południe na komputerze znajdującym się w Greenwich w Anglii, a strefa czasowa jest określona na wartość -5 (options['timeZone'] = -5, czyli wschodni czas pacyficzny w Stanach Zjednoczonych), wyświetlaną wartością będzie 12:00.

Metody

DateFormat obsługuje te metody:

Metoda	Opis
google.visualization.DateFormat(options)	Konstruktor. Więcej informacji znajdziesz w sekcji dotyczącej opcji powyżej.
format(dataTable, columnIndex)	Standardowa metoda format() stosowana do formatowania określonej kolumny.
formatValue(value)	Zwraca sformatowaną wartość podanej wartości. Ta metoda nie wymaga DataTable.

Przykładowy kod

function drawDateFormatTable() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Employee Name');
  data.addColumn('date', 'Start Date (Long)');
  data.addColumn('date', 'Start Date (Medium)');
  data.addColumn('date', 'Start Date (Short)');
  data.addRows([
    ['Mike', new Date(2008, 1, 28, 0, 31, 26),
             new Date(2008, 1, 28, 0, 31, 26),
             new Date(2008, 1, 28, 0, 31, 26)],
    ['Bob', new Date(2007, 5, 1, 0),
            new Date(2007, 5, 1, 0),
            new Date(2007, 5, 1, 0)],
    ['Alice', new Date(2006, 7, 16),
              new Date(2006, 7, 16),
              new Date(2006, 7, 16)]
  ]);

  // Create three formatters in three styles.
  var formatter_long = new google.visualization.DateFormat({formatType: 'long'});
  var formatter_medium = new google.visualization.DateFormat({formatType: 'medium'});
  var formatter_short = new google.visualization.DateFormat({formatType: 'short'});

  // Reformat our data.
  formatter_long.format(data, 1);
  formatter_medium.format(data,2);
  formatter_short.format(data, 3);

  // Draw our data
  var table = new google.visualization.Table(document.getElementById('dateformat_div'));
  table.draw(data, {showRowNumber: true, width: '100%', height: '100%'});
}

Więcej informacji o wzorcach dat

Poniżej znajdziesz więcej informacji o obsługiwanych wzorcach:

Te wzorce są podobne do formatu daty i godziny IU, ale te wzorce nie są jeszcze obsługiwane: A e D F g Y u w W. Aby uniknąć kolizji ze wzorcami, cały tekst dosłowny, który ma pojawić się w danych wyjściowych, powinien być otoczony pojedynczymi cudzysłowami poza cudzysłowem pojedynczym, który należy podwoić: np. "K 'o''clock.'".

Wzór	Opis	Przykładowe dane wyjściowe
G	Znacznik ery.	„REKLAMA”
yy lub rrrr	roku.	1996
P	Miesiąc w roku. Styczeń: M daje 1 MM tworzy 01 MMM tworzy stycznia MMMM produkuje w styczniu	„lipiec” „07”
d.	Dzień w miesiącu. Dodatkowe wartości „d” dodają początkowe zera.	10
godz.	Godzina w skali 12-godzinnej. Dodatkowe wartości „h” dodają początkowe zera.	12
H	Godzina w skali 24-godzinnej. Wartości „Dodatkowe Hk” dodają zera na początku.	0
m	Minuta w ciągu godziny. Dodatkowe wartości „M” dodają początkowe zera.	30
s	Sekunda za minutę. Dodatkowe wartości „s” dodają początkowe zera.	55
S	Ułamkowa sekunda. Dodatkowe wartości „S” zostaną dopełnione zerami po prawej stronie.	978
E	Dzień tygodnia. Oto wyniki dla „Wtorek”: E tworzy T Produkcja produkcyjna w EE lub EEE we wt. EEEE dostarcza we wtorek	„Wtorki” "Wtorek"
aa	AM/PM	"PM"
k	Godzina w ciągu dnia (1~24). Dodatkowe wartości „k” dodają początkowe zera.	24
K	Godzina w formacie AM/PM (0~11). Dodatkowe wartości „k” dodają początkowe zera.	0
z	Strefa czasowa. W przypadku strefy czasowej 5 daje ona „UTC+5”	„UTC+5”
Z	Strefa czasowa w formacie RFC 822. W przypadku strefy czasowej -5: Z, ZZ, ZZZ produkuj -0500 ZZZZ i inne produkują „GMT -05:00”	„-0800” „GMT -05:00”
v	Strefa czasowa (ogólnie).	„Itd./GMT-5”
'	Escape dla tekstu	'Data=”
''	pojedynczy cudzysłów	„yy”

NumberFormat

Opisuje sposób formatowania kolumn liczbowych. Opcje formatowania obejmują określenie symbolu prefiksu (np. znaku dolara) lub znaku interpunkcyjnego, który ma być używany jako znacznik tysięcy.

Opcje

NumberFormat obsługuje następujące opcje przekazywane do konstruktora:

Option	Opis
decimalSymbol	Znak, który ma być używany jako znacznik dziesiętny. Wartością domyślną jest kropka (.).
fractionDigits	Liczba określająca liczbę cyfr do wyświetlenia po przecinku. Wartość domyślna to 2. Jeśli podasz więcej cyfr niż zawiera liczba, przy mniejszych wartościach będą wyświetlane zera. Skrócone wartości zostaną zaokrąglone (5 w górę).
groupingSymbol	Znak używany do grupowania cyfr po lewej stronie liczby dziesiętnej na zestawy trzech. Domyślnie jest to przecinek (,).
negativeColor	Kolor tekstu wartości ujemnych. Brak wartości domyślnej. Wartościami mogą być dowolne dozwolone wartości koloru HTML, np. „czerwony” lub „#FF0000”.
negativeParens	Wartość logiczna, gdzie „true” (prawda) oznacza, że wartości ujemne powinny być umieszczone w nawiasach. Wartość domyślna to true (prawda).
pattern	Ciąg tekstowy formatu. Jeśli podasz wartość, wszystkie pozostałe opcje z wyjątkiem negativeColor będą ignorowane. Ciąg formatu jest podzbiorem zestawu wzorców OIOM . Na przykład {pattern:'#,###%'} zwróci wartości wyjściowe „1000%”, „750%” i „50%” dla wartości 10, 7,5 i 0,5.
prefix	Prefiks ciągu znaków wartości, np. „$”.
suffix	Sufiks w postaci ciągu znaków dla wartości, np. „%”.

Metody

NumberFormat obsługuje te metody:

Metoda	Opis
google.visualization.NumberFormat(options)	Konstruktor. Więcej informacji znajdziesz w sekcji dotyczącej opcji powyżej.
format(dataTable, columnIndex)	Standardowa metoda format() stosowana do formatowania określonej kolumny.
formatValue(value)	Zwraca sformatowaną wartość podanej wartości. Ta metoda nie wymaga DataTable.

Przykładowy kod

var data = new google.visualization.DataTable();
data.addColumn('string', 'Department');
data.addColumn('number', 'Revenues');
data.addRows([
  ['Shoes', 10700],
  ['Sports', -15400],
  ['Toys', 12500],
  ['Electronics', -2100],
  ['Food', 22600],
  ['Art', 1100]
]);

var table = new google.visualization.Table(document.getElementById('numberformat_div'));

var formatter = new google.visualization.NumberFormat(
    {prefix: '$', negativeColor: 'red', negativeParens: true});
formatter.format(data, 1); // Apply formatter to second column

table.draw(data, {allowHtml: true, showRowNumber: true, width: '100%', height: '100%'});

PatternFormat

Umożliwia scalenie wartości z wyznaczonych kolumn w jedną kolumnę razem z dowolnym tekstem. Jeśli np. masz kolumnę imienia i kolumny z nazwiskiem, w trzeciej kolumnie możesz umieścić takie dane: {last name}, {first name}. Ten kreator formatowania jest niezgodny z konwencjami konstruktora i metody format(). Instrukcje znajdziesz w sekcji Metody poniżej.

Metody

PatternFormat obsługuje te metody:

Metoda	Opis
google.visualization.PatternFormat(pattern)	Konstruktor. Nie przyjmuje obiektu opcji. Zamiast tego korzysta z parametru typu pattern w postaci ciągu znaków. Jest to ciąg znaków określający, które wartości kolumny umieścić w kolumnie docelowej wraz z dowolnym tekstem. Umieść w ciągu znaków obiekty zastępcze, aby wskazać wartość z innej kolumny do umieszczenia. Obiekty zastępcze mają postać {#}, gdzie # to indeks kolumny źródłowej, której chcesz użyć. Indeks jest indeksem w tablicy srcColumnIndices z poniższej metody format(). Aby uwzględnić literał { lub }, użyj znaku zmiany znaczenia, np. \{ lub \}. Aby uwzględnić literał \, zmień jego znaczenie jako \\. Przykładowy kod Ten przykład przedstawia konstruktor wzorca tworzącego element zakotwiczony, którego pierwszy i drugi element są pobierane z metody format(): var formatter = new google.visualization.PatternFormat( '<a href="mailto:{1}">{0}</a>');
format(dataTable, srcColumnIndices, opt_dstColumnIndex)	Standardowe wywołanie formatowania z kilkoma dodatkowymi parametrami: dataTable – tabela danych, na której ma działać tabela. srcColumnIndices – tablica z co najmniej 1 indeksem kolumny (liczonym od zera), który ma być pobierany jako źródła z bazowej tabeli DataTable. Będzie ona używana jako źródło danych dla parametru pattern w konstruktorze. Numery kolumn nie muszą być posortowane. opt_dstColumnIndex – [opcjonalnie] kolumna docelowa, w której mają być umieszczane dane wyjściowe wyników manipulacji pattern. Jeśli nie podasz tu nazwy, jako miejsce docelowe zostanie użyty pierwszy element srcColumIndices. Pod tabelą znajdziesz przykłady formatowania.

Oto kilka przykładowych danych wejściowych i wyjściowych dla tabeli czterokolumnowej.

Row before formatting (4 columns, last is blank):
John  |  Paul  |  Jones  |  [empty]

var formatter = new google.visualization.PatternFormat("{0} {1} {2}");
formatter.format(data, [0,1,2], 3);
Output:
  John  |  Paul  |  Jones  |  John Paul Jones

var formatter = new google.visualization.PatternFormat("{1}, {0}");
formatter.format(data, [0,2], 3);
Output:
  John  |  Paul  |  Jones  |  Jones, John

Przykładowy kod

Poniższy przykład pokazuje, jak połączyć dane z 2 kolumn w celu utworzenia adresu e-mail. Za pomocą obiektu DataView ukrywa on pierwotne kolumny źródłowe:

var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('string', 'Email');
data.addRows([
  ['John Lennon', 'john@beatles.co.uk'],
  ['Paul McCartney', 'paul@beatles.co.uk'],
  ['George Harrison', 'george@beatles.co.uk'],
  ['Ringo Starr', 'ringo@beatles.co.uk']
]);

var table = new google.visualization.Table(document.getElementById('patternformat_div'));

var formatter = new google.visualization.PatternFormat(
    '<a href="mailto:{1}">{0}</a>');
// Apply formatter and set the formatted value of the first column.
formatter.format(data, [0, 1]);

var view = new google.visualization.DataView(data);
view.setColumns([0]); // Create a view with the first column only.

table.draw(view, {allowHtml: true, showRowNumber: true, width: '100%', height: '100%'});

GadgetHelper

Klasa pomocnicza ułatwiająca pisanie gadżetów korzystających z interfejsu GoogleVisual API.

Zespół

google.visualization.GadgetHelper()

Metody

Metoda	Zwracana wartość	Opis
createQueryFromPrefs(prefs)	google.visualization.Query	Statyczny. Utwórz nową instancję google.visualization.Query i ustaw jej właściwości zgodnie z wartościami określonymi w ustawieniach gadżetu. Typ parametru prefs to _IG_Prefs Preferencje _table_query_url są używane do ustawiania adresu URL źródła danych zapytania. Preferencje _table_query_refresh_interval są używane do ustawiania interwału odświeżania zapytania (w sekundach).
validateResponse(response)	Wartość logiczna	Statyczny. Parametr response jest typu google.visualization.QueryResponse. Zwraca wartość true, jeśli odpowiedź zawiera dane. Zwraca wartość false, jeśli wykonanie zapytania się nie udało, a odpowiedź nie zawiera danych. Jeśli wystąpił błąd, ta metoda spowoduje wyświetlenie komunikatu o błędzie.

Klasy zapytań

Obiekty wymienione poniżej są dostępne do wysyłania zapytań o dane do zewnętrznego źródła danych, np. do arkuszy kalkulacyjnych Google.

• Zapytanie – zawija wychodzące żądanie danych.
• QueryResponse – przetwarza odpowiedź ze źródła danych.

Zapytanie

Reprezentuje zapytanie wysłane do źródła danych.

Zespół

google.visualization.Query(dataSourceUrl, opt_options)

Parametry

dataSourceUrl

[Wymagany, Ciąg] URL, na który ma zostać wysłane zapytanie. Zapoznaj się z dokumentacją wykresów i arkuszy kalkulacyjnych dotyczących Arkuszy kalkulacyjnych Google.

opt_options

[opcjonalny, obiekt] Mapa opcji związanych z żądaniem. Uwaga: nie używaj tego parametru, jeśli masz dostęp do ograniczonego źródła danych . Obsługiwane właściwości:

• sendMethod – [opcjonalny, ciąg znaków] określa metodę, która ma zostać użyta do wysłania zapytania. Wybierz jedną z tych wartości ciągu znaków:
  • 'xhr' – wyślij zapytanie za pomocą XmlHttpRequest.
  • 'scriptInjection' – wysyłanie zapytania za pomocą funkcji wstrzykiwania skryptu.
  • 'makeRequest' – [dostępne tylko w przypadku gadżetów, które zostały wycofane] Wyślij zapytanie za pomocą metody makeRequest() Widget API. Jeśli określisz parametr, musisz też podać właściwość makeRequestParams.
  • 'auto' – użyj metody określonej w parametrze adresu URL tqrt w adresie URL źródła danych. tqrt może mieć te wartości: „xhr”, „scriptInjection” lub „makeRequest”. Jeśli brakuje parametru tqrt lub ma on nieprawidłową wartość, domyślna wartość to „xhr” w przypadku żądań dotyczących tej samej domeny i „scriptInjection” w przypadku żądań między domenami.
• makeRequestParams – [Object] mapa parametrów zapytania makeRequest(). Używana i wymagana tylko wtedy, gdy sendMethod to „makeRequest”.

Metody

Metoda	Zwracana wartość	Opis
abort()	Brak	Zatrzymuje automatyczne wysyłanie zapytania, które zostało rozpoczęte za pomocą funkcji setRefreshInterval().
setRefreshInterval(seconds)	Brak	Ustawia zapytanie tak, aby automatycznie wywoływało metodę send co określony czas trwania (liczbę sekund), począwszy od pierwszego jawnego wywołania do send. seconds jest liczbą większą niż lub równą 0. Jeśli używasz tej metody, wywołaj ją przed wywołaniem metody send. Anuluj tę metodę, wywołując ją ponownie z zero (domyślnie) lub wywołując abort().
setTimeout(seconds)	Brak	Określa liczbę sekund oczekiwania na odpowiedź źródła danych, zanim spowoduje to zwiększenie błędu limitu czasu. seconds jest liczbą większą niż 0. Domyślny limit czasu to 30 sekund. Ta metoda (jeśli jest używana) powinna zostać wywołana przed wywołaniem metody send.
setQuery(string)	Brak	Ustawia ciąg zapytania. Wartość parametru string powinna być prawidłowym zapytaniem. Ta metoda (jeśli jest używana) powinna zostać wywołana przed wywołaniem metody send. Więcej informacji o języku zapytań
send(callback)	Brak	Wysyła zapytanie do źródła danych. callback powinna być funkcją, która zostanie wywołana po uzyskaniu odpowiedzi źródła danych. Funkcja wywołania zwrotnego otrzyma pojedynczy parametr typu google.visualization.QueryResponse.

QueryResponse

Reprezentuje odpowiedź na wykonanie zapytania otrzymaną ze źródła danych. Instancja tej klasy jest przekazywana jako argument funkcji wywołania zwrotnego ustawionej przy wywołaniu Query.send.

Metody

Metoda	Zwracana wartość	Opis
getDataTable()	DataTable	Zwraca tabelę danych w postaci zwróconej przez źródło danych. Zwraca wartość null, jeśli wykonanie zapytania nie powiodło się i nie zostały zwrócone żadne dane.
getDetailedMessage()	Ciąg znaków	Zwraca szczegółowy komunikat o błędzie w przypadku zapytań, które zakończyły się niepowodzeniem. Jeśli wykonanie zapytania się udało, ta metoda zwraca pusty ciąg znaków. Zwrócona wiadomość jest przeznaczona dla programistów i może zawierać informacje techniczne, na przykład „Kolumna {salary} nie istnieje”.
getMessage()	Ciąg znaków	Zwraca krótki komunikat o błędzie w przypadku nieudanych zapytań. Jeśli wykonanie zapytania się uda, ta metoda zwróci pusty ciąg znaków. Zwracana wiadomość to krótki komunikat przeznaczony dla użytkowników, na przykład „Nieprawidłowe zapytanie” lub „Odmowa dostępu”.
getReasons()	Tablica ciągów	Zwraca tablicę z zerową liczbą kolejnych wpisów. Każdy wpis to krótki ciąg z kodem błędu lub ostrzeżenia, który został zgłoszony podczas wykonywania zapytania. Możliwe kody: access_denied Użytkownik nie ma uprawnień dostępu do źródła danych. invalid_query W podanym zapytaniu występuje błąd składni. data_truncated Co najmniej 1 wiersz danych, który pasuje do wyboru zapytania, nie został zwrócony z powodu limitów rozmiaru danych wyjściowych. (ostrzeżenie). timeout Zapytanie nie odpowiedziało w oczekiwanym czasie.
hasWarning()	Wartość logiczna	Zwraca wartość true, jeśli wykonanie zapytania zawiera ostrzeżenia.
isError()	Wartość logiczna	Zwraca wartość true, jeśli wykonanie zapytania się nie udało, a odpowiedź nie zawiera żadnej tabeli danych. Zwraca wartość <false>, jeśli wykonanie zapytania zostało wykonane, a odpowiedź zawiera tabelę danych.

Wyświetlanie błędów

Interfejs API udostępnia kilka funkcji, które ułatwiają wyświetlanie użytkownikom niestandardowych komunikatów o błędach. Aby korzystać z tych funkcji, udostępnij element kontenera na stronie (zwykle jest to <div>), do którego interfejs API wygeneruje sformatowany komunikat o błędzie. Ten kontener może być kontenerem wizualizacji lub kontenerem przeznaczonym wyłącznie do błędów. Jeśli określisz element zawierający wizualizację, komunikat o błędzie będzie wyświetlany nad wizualizacją. Następnie wywołaj odpowiednią funkcję poniżej, aby wyświetlić lub usunąć komunikat o błędzie.

Wszystkie funkcje są funkcjami statycznymi w przestrzeni nazw google.visualization.errors.

Wiele wizualizacji może generować zdarzenie błędu. Zapoznaj się z poniższym zdarzeniem błędu, aby dowiedzieć się więcej na ten temat.

Przykładowy błąd niestandardowy znajdziesz w Przykładowym kodzie towarzyszącym zapytania.

Funkcja	Zwracana wartość	Opis
addError(container, message, opt_detailedMessage, opt_options)	Wartość identyfikatora ciągu znaków, która identyfikuje utworzony obiekt błędu. Jest to unikalna wartość na stronie, która może służyć do usunięcia błędu lub odnalezienia elementu, który go zawiera.	Dodaje do określonego elementu strony blok wyświetlania błędów z określonym tekstem i formatowaniem. container – element DOM, do którego ma zostać wstawiony komunikat o błędzie. Jeśli nie będzie można znaleźć kontenera, funkcja zwróci błąd JavaScriptu. message – ciąg tekstowy do wyświetlenia. opt_detailedMessage – opcjonalny szczegółowy ciąg tekstowy komunikatu. Domyślnie jest to tekst wyświetlany po najechaniu kursorem myszy, ale możesz to zmienić we właściwości opt_options.showInToolTip opisanej poniżej. opt_options – opcjonalny obiekt z właściwościami, które ustawiają różne opcje wyświetlania wiadomości. Obsługiwane są te opcje: showInTooltip – wartość logiczna, gdzie „true” wyświetla szczegółowy komunikat tylko jako tekst etykietki, a wartość false – w treści kontenera po krótkim komunikacie. Wartość domyślna to true (prawda). type – ciąg tekstowy opisujący typ błędu określający, które style CSS mają zostać zastosowane do tej wiadomości. Obsługiwane wartości to „error” i „ostrzeżenie”. Wartość domyślna to „error”. style – ciąg stylu komunikatu o błędzie. Ten styl zastąpi wszystkie style zastosowane do typu ostrzeżenia (opt_options.type). Przykład: 'background-color: #33ff99; padding: 2px;' Wartością domyślną jest pusty ciąg znaków. reovable – wartość logiczna, gdzie wartość true oznacza, że wiadomość można zamknąć kliknięciem myszy. Wartość domyślna to false.
addErrorFromQueryResponse(container, response)	Wartość identyfikatora ciągu znaków, która identyfikuje utworzony obiekt błędu, lub wartość null, jeśli odpowiedź nie wskazuje błędu. Jest to unikalna wartość na stronie, która może służyć do usunięcia błędu lub odnalezienia elementu, który go zawiera.	Przekaż odpowiedź na zapytanie i kontener komunikatu o błędzie do tej metody. Jeśli odpowiedź na zapytanie wskazuje na błąd zapytania, w podanym elemencie strony wyświetli się komunikat o błędzie. Jeśli odpowiedź na zapytanie ma wartość null, metoda zwróci błąd JavaScriptu. Aby wyświetlić błąd, przekaż do tej wiadomości otrzymaną odpowiedź QueryResponse w module obsługi zapytania. Dopasuje też styl wyświetlania do danego typu (błąd lub ostrzeżenie, podobnie jak w polu addError(opt_options.type)). container – element DOM, do którego ma zostać wstawiony komunikat o błędzie. Jeśli nie będzie można znaleźć kontenera, funkcja zwróci błąd JavaScriptu. response – obiekt QueryResponse odebrany przez moduł obsługi zapytania w odpowiedzi na zapytanie. Jeśli ma wartość null, metoda zwróci błąd JavaScriptu.
removeError(id)	Wartość logiczna: true, jeśli błąd został usunięty. W przeciwnym razie ma wartość false (fałsz).	Usuwa ze strony błąd określony za pomocą identyfikatora. id – identyfikator ciągu znaków związany z błędem utworzonym za pomocą właściwości addError() lub addErrorFromQueryResponse().
removeAll(container)	Brak	Usuwa wszystkie bloki błędów z określonego kontenera. Jeśli podany kontener nie istnieje, spowoduje to zgłoszenie błędu. container – element DOM zawierający ciągi błędów do usunięcia. Jeśli nie będzie można znaleźć kontenera, funkcja zwróci błąd JavaScriptu.
getContainer(errorId)	Uchwyt do elementu DOM zawierającego określony błąd lub wartość null, jeśli nie można go znaleźć.	Pobiera uchwyt do elementu kontenera zawierającego błąd określony przez errorID. errorId – identyfikator ciągu znaków błędu utworzonego za pomocą metody addError() lub addErrorFromQueryResponse().

Zdarzenia

Większość wizualizacji uruchamia zdarzenia, by zasygnalizować, że coś wystąpiło. Jako użytkownik wykresu często chcesz nasłuchiwać tych zdarzeń. Jeśli kodujesz własną wizualizację, możesz też samodzielnie aktywować takie zdarzenia.

Poniższe metody umożliwiają programistom nasłuchiwanie zdarzeń, usuwanie istniejących modułów obsługi zdarzeń i aktywowanie zdarzeń z poziomu wizualizacji.

• google.visualization.events.addListener() i google.visualization.events.addOneTimeListener() nasłuchują zdarzeń.
• Polecenie google.visualization.events.removeListener() usuwa istniejący detektor
• google.visualization.events.removeAllListeners() usuwa wszystkie detektory określonego wykresu.
• google.visualization.events.trigger() uruchamia zdarzenie.

addListener()

Wywołaj tę metodę, aby się zarejestrować, aby otrzymywać zdarzenia wywoływane przez wizualizację hostowaną na Twojej stronie. Musisz udokumentować, które argumenty zdarzenia (jeśli w ogóle) będą przekazywane do funkcji obsługi.

google.visualization.events.addListener(source_visualization,
  event_name, handling_function)

source_visualization

Uchwyt do instancji wizualizacji źródłowej.

event_name

Nazwa ciągu znaków zdarzenia, które ma być nasłuchiwane. Wizualizacja powinna dokumentować generowane zdarzenia.

handling_function

Nazwa lokalnej funkcji JavaScriptu, która ma być wywoływana, gdy source_visualization wywoła zdarzenie event_name. Funkcja obsługi przekazuje wszystkie argumenty zdarzenia jako parametry.

Zwroty

Moduł obsługi nowego detektora. W razie potrzeby można go później użyć do usunięcia tego odbiornika przez wywołanie google.visualization.events.removeListener().

Przykład

Oto przykład rejestracji, aby otrzymać wydarzenie wyboru

var table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(data, options);

google.visualization.events.addListener(table, 'select', selectHandler);

function selectHandler() {
  alert('A table row was selected');
}

addOneTimeListener()

Ta funkcja jest identyczna jak addListener(), ale dotyczy zdarzeń, które powinny być odsłuchiwane tylko raz. Kolejne zdarzenia zdarzenia nie będą wywoływać funkcji obsługi.

Przykład zastosowania: każde losowanie powoduje wywołanie zdarzenia ready. Jeśli chcesz, by kod ready uruchamiał Twój kod tylko za pierwszym razem, wybierz addOneTimeListener zamiast addListener.

removeListener()

Wywołaj tę metodę, aby wyrejestrować istniejący detektor zdarzeń.

google.visualization.events.removeListener(listener_handler)

listener_handler

Moduł obsługi detektora do usunięcia, zwracany przez google.visualization.events.addListener().

removeAllListeners()

Wywołaj tę metodę, aby wyrejestrować wszystkie detektory zdarzeń konkretnej instancji wizualizacji.

google.visualization.events.removeAllListeners(source_visualization)

source_visualization

Uchwyt do instancji wizualizacji źródłowej, z której należy usunąć wszystkie detektory zdarzeń.

trigger()

Wywoływane przez implementatory wizualizacji. Wywołaj tę metodę z wizualizacji, aby uruchomić zdarzenie z dowolną nazwą i zbiorem wartości.

google.visualization.events.trigger(source_visualization, event_name,
  event_args)

source_visualization

Uchwyt instancji wizualizacji źródłowej. Jeśli wywołujesz tę funkcję z poziomu metody zdefiniowanej przez wysyłającą wizualizację, możesz po prostu przekazać słowo kluczowe this.

event_name

Nazwa ciągu tekstowego wywołującego zdarzenie. Możesz wybrać dowolną wartość ciągu znaków.

event_args

[opcjonalnie] Mapa par nazwa-wartość, które są przekazywane do metody odbierania. Na przykład: {message: "Cześć!", wynik: 10, name: "Marek"}. Możesz przekazać wartość null, jeśli nie są potrzebne żadne zdarzenia. Odbiorca powinien być gotowy na zaakceptowanie wartości null w przypadku tego parametru.

Przykład

Oto przykład wizualizacji, która po wywołaniu jej metody „select” wywołuje metodę „select”. Nie zwraca on żadnych wartości.

MyVisualization.prototype.onclick = function(rowIndex) {
  this.highlightRow(this.selectedRow, false); // Clear previous selection
  this.highlightRow(rowIndex, true); // Highlight new selection

  // Save the selected row index in case getSelection is called.
  this.selectedRow = rowIndex;

  // Trigger a select event.
  google.visualization.events.trigger(this, 'select', null);
}

Standardowe metody i właściwości wizualizacji

Każda wizualizacja powinna udostępniać ten zestaw wymaganych i opcjonalnych metod i właściwości. Pamiętaj jednak, że nie ma możliwości sprawdzenia typu, aby egzekwować te standardy, dlatego musisz zapoznać się z dokumentacją każdej wizualizacji.

• Konstruktor
• draw()
• getAction() [opcjonalnie]
• getSelection() [opcjonalnie]
• removeAction() [opcjonalnie]
• setAction() [opcjonalnie]
• setSelection() [opcjonalnie]

Uwaga: te metody znajdują się w przestrzeni nazw wizualizacji, a nie w przestrzeni nazw google.visualization.

Konstruktor

Konstruktor powinien mieć nazwę klasy wizualizacji i zwrócić instancję tej klasy.

visualization_class_name(dom_element)

dom_element

Wskaźnik do elementu DOM, w którym powinna zostać umieszczona wizualizacja.

Przykład

var org = new google.visualization.OrgChart(document.getElementById('org_div')); 

draw()

Rysuje wizualizację na stronie. Może to być na przykład pobranie grafiki z serwera lub utworzenie grafiki na stronie przy użyciu powiązanego kodu wizualizacji. Należy ją wywoływać za każdym razem, gdy dane lub opcje zmienią się. Obiekt powinien zostać narysowany wewnątrz elementu DOM przekazywanego do konstruktora.

draw(data[, options])

dane

DataTable lub DataView przechowujący dane używane do rysowania wykresu. Nie ma standardowej metody wyodrębniania pola DataTable z wykresu.

opcje

[Opcjonalnie] Mapa par nazwa/wartość opcji niestandardowych. Mogą to być na przykład wysokość i szerokość, kolory tła i podpisy. Dokumentacja wizualizacji powinna zawierać listę dostępnych opcji i obsługiwać opcje domyślne, jeśli nie określisz tego parametru. Za pomocą składni literału obiektu JavaScript możesz przekazać mapę opcji: np. {x:100, y:200, title:'An Example'}

Przykład

chart.draw(myData, {width: 400, height: 240, is3D: true, title: 'My Daily Activities'});

getAction()

Jest on opcjonalnie widoczny w wizualizacjach z etykietkami i zezwalającymi na działania etykietek.

Zwraca obiekt działania etykietki z żądanym obiektem actionID.

Przykład:

// Returns the action object with the ID 'alertAction'.
chart.getAction('alertAction');

getSelection()

Są one opcjonalnie widoczne dla wizualizacji, które umożliwiają dostęp do wybranych aktualnie danych na ilustracji.

selection_array getSelection()

Zwroty

selection_array – tablica wybranych obiektów, z których każdy opisuje element danych w tabeli bazowej użytej do utworzenia wizualizacji (DataView lub DataTable). Każdy obiekt ma właściwości row lub column, z indeksem wiersza lub kolumny wybranego elementu w bazowym elemencie DataTable. Jeśli właściwość row ma wartość null, wybrana jest kolumna. Jeśli właściwość column ma wartość null, wybór jest wierszem. Jeśli obie wartości mają wartość null, jest to konkretny element danych. Możesz wywołać metodę DataTable.getValue(), aby uzyskać wartość wybranego elementu. Pobraną tablicę można przekazać do klasy setSelection().

Przykład

function myClickHandler(){
  var selection = myVis.getSelection();
  var message = '';

  for (var i = 0; i < selection.length; i++) {
    var item = selection[i];
    if (item.row != null && item.column != null) {
      message += '{row:' + item.row + ',column:' + item.column + '}';
    } else if (item.row != null) {
      message += '{row:' + item.row + '}';
    } else if (item.column != null) {
      message += '{column:' + item.column + '}';
    }
  }
  if (message == '') {
    message = 'nothing';
  }
  alert('You selected ' + message);
}

removeAction()

Jest on opcjonalnie widoczny w wizualizacjach z etykietkami i zezwalającymi na działania etykietek.

Usuwa z wykresu obiekt działania etykietki z żądanym obiektem actionID.

Przykład:

// Removes an action from chart with the ID of 'alertAction'.
chart.removeAction('alertAction');

setAction()

Jest on opcjonalnie widoczny w wizualizacjach z etykietkami i zezwalającymi na działania etykietek. Działa on tylko w przypadku wykresów podstawowych (słupkowe, kolumnowe, liniowe, warstwowe, punktowe, kombi, bąbelkowe, kołowe, pierścieniowe, świecowe, histogram, warstwowe).

Ustawia działanie etykietki, które ma być wykonywane po kliknięciu tekstu działania przez użytkownika.

setAction(action object)

Metoda setAction przyjmuje obiekt jako parametr działania. Ten obiekt powinien określać 3 właściwości: id – identyfikator ustawianego działania, text – tekst, który powinien być widoczny w etykietce działania, oraz action – funkcję, która powinna zostać uruchomiona po kliknięciu tekstu działania przez użytkownika.

Przed wywołaniem metody draw() wykresu należy ustawić wszystkie działania związane z etykietką.

Przykład:

// Sets a tooltip action which will pop an alert box on the screen when triggered.
chart.setAction({
  id: 'alertAction',
  text: 'Trigger Alert',
  action: function() {
    alert('You have triggered an alert');
  }
});

Metoda setAction może też określać 2 dodatkowe właściwości: visible i enabled. Powinny one być funkcjami, które zwracają wartości boolean wskazujące, czy działanie etykietki będzie widoczne lub włączone.

Przykład:

// The visible/enabled functions can contain any logic to determine their state
// as long as they return boolean values.
chart.setAction({
  id: 'alertAction',
  text: 'Trigger Alert',
  action: function() {
    alert('You have triggered an alert');
  },
  visible: function() {
    return true;
  },
  enabled: function() {
    return true;
  }
});

setSelection()

Opcjonalnie wybiera wpis danych na wizualizacji, np. punkt na wykresie warstwowym lub słupek na wykresie słupkowym. Po wywołaniu tej metody wizualizacja powinna wizualnie pokazywać, na czym polega nowy wybór. Implementacja funkcji setSelection() nie powinna wywoływać zdarzenia „select”. Wizualizacje mogą zignorować część zaznaczenia. Na przykład tabela, która może zawierać tylko wybrane wiersze, może zignorować elementy komórki lub kolumny w implementacji setSelection() albo może wybrać cały wiersz.

Przy każdym wywołaniu tej metody wszystkie zaznaczone elementy zostają odznaczone i należy zastosować nową przekazaną listę wyboru. Nie można wprost odznaczać poszczególnych elementów. Aby odznaczyć poszczególne elementy, wywołaj funkcję setSelection() z elementami, które pozostaną zaznaczone. Aby usunąć zaznaczenie wszystkich elementów, wywołaj setSelection(), setSelection(null) lub setSelection([]).

setSelection(selection_array)

selection_array

Tablica obiektów, każdy z liczbową właściwością wiersza lub kolumny. row i column to liczony od zera numer wiersza lub kolumny elementu w tabeli danych, który chcesz wybrać. Aby zaznaczyć całą kolumnę, ustaw row na wartość null. Aby zaznaczyć cały wiersz, ustaw column na wartość null. Przykład: setSelection([{row:0,column:1},{row:1, column:null}]) zaznacza komórkę w miejscu (0,1) i cały wiersz 1.

Różne metody statyczne

Ta sekcja zawiera różne przydatne metody dostępne w przestrzeni nazw google.visualization.

arrayToDataTable()

Ta metoda przyjmuje dwuwymiarową tablicę i przekształca ją w DataTable.

Typy danych w kolumnach są określane automatycznie na podstawie dostarczonych danych. Typy danych kolumn można też określić za pomocą notacji literału obiektu w pierwszym wierszu (wiersza nagłówka kolumny) tablicy (np. {label: 'Start Date', type: 'date'}). Możesz też używać opcjonalnych ról danych, ale muszą one być jawnie zdefiniowane za pomocą notacji literału obiektu. W przypadku dowolnej komórki możesz też użyć notacji literału obiektu, co pozwala na definiowanie obiektów komórek.

Składnia

google.visualization.arrayToDataTable(twoDArray, opt_firstRowIsData)

twoDArray

Dwuwymiarowa tablica, w której każdy wiersz odpowiada wierszowi w tabeli danych. Jeśli parametr opt_firstRowIsData ma wartość false (fałsz), pierwszy wiersz jest interpretowany jako etykiety nagłówków. Typy danych w każdej kolumnie są automatycznie interpretowane na podstawie podanych informacji. Jeśli komórka nie ma wartości, podaj wartość null lub pustą wartość.

opt_firstRowIsData

Określ, czy pierwszy wiersz definiuje wiersz nagłówka. Jeśli ma wartość prawda, przyjmuje się, że wszystkie wiersze zawierają dane. Jeśli wartość to fałsz, przyjmuje się, że pierwszy wiersz jest wierszem nagłówka, a wartości są przypisane jako etykiety kolumn. Wartość domyślna to false (fałsz).

Zwroty

Nowy DataTable.

Przykłady

Poniższy kod ilustruje 3 sposoby tworzenia tego samego obiektu DataTable:

// Version 1: arrayToDataTable method
var data2 = google.visualization.arrayToDataTable([
  [{label: 'Country', type: 'string'},
   {label: 'Population', type: 'number'},
   {label: 'Area', type: 'number'},
   {type: 'string', role: 'annotation'}],
  ['CN', 1324, 9640821, 'Annotated'],
  ['IN', 1133, 3287263, 'Annotated'],
  ['US', 304, 9629091, 'Annotated'],
  ['ID', 232, 1904569, 'Annotated'],
  ['BR', 187, 8514877, 'Annotated']
]);

// Version 2: DataTable.addRows
var data3 = new google.visualization.DataTable();
data3.addColumn('string','Country');
data3.addColumn('number','Population');
data3.addColumn('number','Area');
data3.addRows([
  ['CN', 1324, 9640821],
  ['IN', 1133, 3287263],
  ['US', 304, 9629091],
  ['ID', 232, 1904569],
  ['BR', 187, 8514877]
]);

// Version 3: DataTable.setValue
var data = new google.visualization.DataTable();
data.addColumn('string','Country');
data.addColumn('number', 'Population');
data.addColumn('number', 'Area');
data.addRows(5);
data.setValue(0, 0, 'CN');
data.setValue(0, 1, 1324);
data.setValue(0, 2, 9640821);
data.setValue(1, 0, 'IN');
data.setValue(1, 1, 1133);
data.setValue(1, 2, 3287263);
data.setValue(2, 0, 'US');
data.setValue(2, 1, 304);
data.setValue(2, 2, 9629091);
data.setValue(3, 0, 'ID');
data.setValue(3, 1, 232);
data.setValue(3, 2, 1904569);
data.setValue(4, 0, 'BR');
data.setValue(4, 1, 187);
data.setValue(4, 2, 8514877);

drawChart()

Ta metoda powoduje utworzenie wykresu w pojedynczym wywołaniu. Zaletą tej metody jest to, że wymaga ona trochę mniej kodu. Można też zserializować i zapisywać wizualizacje jako ciągi tekstowe do ponownego wykorzystania. Ta metoda nie zwraca uchwytu do utworzonego wykresu, dlatego nie możesz przypisać detektorów metody do zdarzeń na wykresie przechwytywania.

Składnia

google.visualization.drawChart(chart_JSON_or_object)

chart_JSON_or_object

Ciąg literału JSON lub obiekt JavaScript z tymi właściwościami (z uwzględnieniem wielkości liter):

Właściwość	Typ	Wymagane	Domyślne	Opis
chartType	Ciąg znaków	Wymagane	brak	Nazwa klasy wizualizacji. Na wykresach Google można pominąć nazwę pakietu google.visualization. Jeśli odpowiednia biblioteka wizualizacji nie została jeszcze wczytana, ta metoda wczyta ją za Ciebie, jeśli jest to wizualizacja Google. Jeśli jest to wizualizacja Google, musisz wczytać wizualizacje zewnętrzne bezpośrednio. Przykłady: Table, PieChart, example.com.CrazyChart.
containerId	Ciąg znaków	Wymagane	brak	Identyfikator elementu DOM na stronie, w którym będzie przechowywana wizualizacja.
Opcje	Obiekt	Opcjonalnie	brak	Obiekt opisujący opcje wizualizacji. Możesz użyć notacji literału JavaScript lub podać uchwyt obiektu. Przykład: "options": {"width": 400, "height": 240, "is3D": true, "title": "Company Performance"}
dataTable	Obiekt	Opcjonalnie	Brak	Pole DataTable używane do wypełniania wizualizacji. Może to być literałowa reprezentacja tabeli DataTable w postaci ciągu JSON, jak opisano powyżej, uchwyt wypełnionego obiektu google.visualization.DataTable lub dwuwymiarowa tablica, np. akceptowanej przez arrayToDataTable(opt_firstRowIsData=false) . Musisz określić tę właściwość lub właściwość dataSourceUrl.
dataSourceUrl	Ciąg znaków	Opcjonalnie	Brak	Zapytanie do źródła danych służące do wypełniania danych na wykresie (np. arkusz kalkulacyjny Google). Musisz wybrać tę właściwość lub właściwość dataTable.
zapytanie	Ciąg znaków	Opcjonalnie	Brak	Jeśli określisz właściwość dataSourceUrl, możesz opcjonalnie określić ciąg zapytania podobny do SQL za pomocą języka zapytań wizualizacji do filtrowania danych lub manipulowania nimi.
refreshInterval	Liczby	Opcjonalnie	Brak	Częstotliwość (w sekundach) wizualizacja powinna odświeżać źródło zapytania. Używaj go tylko podczas określania właściwości dataSourceUrl.
widok	Obiekt LUB tablica	Opcjonalnie	Brak	Ustawia obiekt inicjatora DataView, który działa jak filtr danych bazowych, zdefiniowany za pomocą parametru dataTable lub dataSourceUrl. Możesz przekazać ciąg lub obiekt inicjujący DataView, np. zwracany przez funkcję dataview.toJSON(). Przykład: "view": {"columns": [1, 2]} możesz też przekazać tablicę obiektów inicjujących DataView. W takim przypadku pierwszy element DataView z tablicy zostanie zastosowany do danych bazowych w celu utworzenia nowej tabeli danych, drugi DataView zostanie zastosowany do tabeli danych wynikającej z zastosowania pierwszego obiektu DataView i tak dalej.

Przykłady

Tworzy wykres tabelaryczny na podstawie źródła danych arkusza kalkulacyjnego i zawiera zapytanie SELECT A,D WHERE D > 100 ORDER BY D

<script type="text/javascript">
  google.charts.load('current');  // Note: No need to specify chart packages.
  function drawVisualization() {
    google.visualization.drawChart({
      "containerId": "visualization_div",
      "dataSourceUrl": "https://spreadsheets.google.com/a/google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1",
      "query":"SELECT A,D WHERE D > 100 ORDER BY D",
      "refreshInterval": 5,
      "chartType": "Table",
      "options": {
        "alternatingRowStyle": true,
        "showRowNumber" : true
      }
   });
 }
google.charts.setOnLoadCallback(drawVisualization);
</script>

Następny przykład tworzy tę samą tabelę, ale lokalnie tworzy DataTable:

<script type='text/javascript'>
  google.charts.load('current');
  function drawVisualization() {
    var dataTable = [
      ["Country", "Population Density"],
      ["Indonesia", 117],
      ["China", 137],
      ["Nigeria", 142],
      ["Pakistan", 198],
      ["India", 336],
      ["Japan", 339],
      ["Bangladesh", 1045]
    ];
    google.visualization.drawChart({
      "containerId": "visualization_div",
      "dataTable": dataTable,
      "refreshInterval": 5,
      "chartType": "Table",
      "options": {
        "alternatingRowStyle": true,
        "showRowNumber" : true,
      }
    });
  }
  google.charts.setOnLoadCallback(drawVisualization);
</script>

W tym przykładzie jest to ciąg znaków JSON reprezentujący wykres, który mógł zostać wczytany z pliku:

<script type="text/javascript">
  google.charts.load('current');
  var myStoredString = '{"containerId": "visualization_div",' +
    '"dataSourceUrl": "https://spreadsheets.google.com/a/google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1",' +
    '"query":"SELECT A,D WHERE D > 100 ORDER BY D",' +
    '"refreshInterval": 5,' +
    '"chartType": "Table",' +
    '"options": {' +
    '   "alternatingRowStyle": true,' +
    '   "showRowNumber" : true' +
    '}' +
  '}';
  function drawVisualization() {
    google.visualization.drawChart(myStoredString);
  }
  google.charts.setOnLoadCallback(drawVisualization);
</script>

drawToolbar()

Jest to konstruktor elementu paska narzędzi, który można dołączyć do wielu wizualizacji. Umożliwia on użytkownikom eksportowanie danych wizualizacji do różnych formatów lub udostępnianie ich wersji z możliwością osadzenia i używania ich w różnych miejscach. Więcej informacji i przykładowy kod znajdziesz na stronie paska narzędzi.