Skip to content
This repository has been archived by the owner on Apr 21, 2022. It is now read-only.

Commit

Permalink
Merge pull request #4 from kenvlooker/patch-1
Browse files Browse the repository at this point in the history
Fixed a few typos and very minor grammar stuff
  • Loading branch information
JimRottinger authored Apr 25, 2018
2 parents c0592f3 + 8d4eabd commit ab6ff0e
Showing 1 changed file with 10 additions and 10 deletions.
20 changes: 10 additions & 10 deletions docs/getting_started.md
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@

The Looker Visualization API is a pure-JavaScript API that runs in a [sandboxed iframe](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-sandbox) and will be hosted within the Looker application.

The same visualization code can provide a visualization anywhere in Looker: explore, Looks, Dashboards, embed or in PDF or rendered images.
The same visualization code can provide a visualization anywhere in Looker: Explore, Looks, dashboards, embed or in PDF or rendered images.

Each visualization represents a view of a single Looker query. Looker will handle running the query, and will pass it to your visualization code. You'll also get passed a DOM element that your visualization code can draw into.

### Requirements

- Some knowledge of JavaScript and web development
- Looker Admin access is required to create and update manfiests, but otherwise is not required.
- Looker Admin access is required to create and update manifests, but otherwise is not required.

## Hello World

Expand Down Expand Up @@ -37,11 +37,11 @@ Now let's actually create `hello_world.js`

If you want to just jump to the final source code for this example, [that's available here](../src/examples/hello_world/hello_world.js).

In the folder you are hosting via `pyhttps` open a new blank JavaScript file on our computer and call it `hello_world.js`.
In the folder you are hosting via `pyhttps` open a new blank JavaScript file on your computer and call it `hello_world.js`.

You register a new custom visualization with Looker by calling the `looker.plugins.visualizations.add` function and passing it a visualization object. This object contains the entire definition of your visualization and it's configuration UI.
You register a new custom visualization with Looker by calling the `looker.plugins.visualizations.add` function and passing it a visualization object. This object contains the entire definition of your visualization and its configuration UI.

Here's the skeleton of our visualization with all the required properties filled out: just a `create` and `updateAsync` function where we'll write our visualization code:
Here's the skeleton of our visualization with all the required properties filled out - just a `create` and `updateAsync` function where we'll write our visualization code:

```js
looker.plugins.visualizations.add({
Expand Down Expand Up @@ -112,11 +112,11 @@ That's all we need to do in our `create` function – it's just a convenient pla

### Rendering

It's time to visualize! We'll flesh out our `updateAsync` method now. This method gets called any time the data the chart is supposed to visualize changes, or when any other event happens that might affect how your chart is rendered. (For example, the chart may have been resized or a configuration option changed.)
It's time to visualize! We'll flesh out our `updateAsync` method now. This method gets called any time the chart is supposed to visualize changes, or when any other event happens that might affect how your chart is rendered. (For example, the chart may have been resized or a configuration option changed.)

In our case, we just need to find the first dimension in the first cell. We can do so using `data`, which is an array of every row of the dataset, and `queryResponse`, which contains metadata about the query, like it's field names and types.
In our case, we just need to find the first dimension in the first cell. We can do so using `data`, which is an array of every row of the dataset, and `queryResponse`, which contains metadata about the query, such as field names and types.

We can also use a helper method called `LookerCharts.Utils.htmlForCell` to give us the proper HTML representation of the data point in that cell, which automatically handles things like drill links, formatting, and data actions.
We can also use a helper method called `LookerCharts.Utils.htmlForCell` to give us the proper HTML representation of the data point in that cell, which automatically handles things like drill links, formatting, and data actions:

```js
updateAsync: function(data, element, config, queryResponse, done) {
Expand Down Expand Up @@ -174,7 +174,7 @@ The final step is to allow the users to customize aspects of their visualization
That's really easy – in addition to the other properties of your visualization object, there's a special property called `options`.
We can use that to specify what kind of options the chart needs.
We can use that to specify what kind of options the chart needs:
```js
looker.plugins.visualizations.add({
Expand All @@ -201,7 +201,7 @@ Specifying the `options:` property is all you need to add the option to the visu
So how do we use it?
Recall that in the `updateAsync` method there's a `config` parameter that gets passed in. This will contain the currently selected options.
Recall that in the `updateAsync` method there's a `config` parameter that gets passed in. This will contain the currently selected options:
```js
updateAsync: function(data, element, config, queryResponse, done) {
Expand Down

0 comments on commit ab6ff0e

Please sign in to comment.