diff --git a/docs/getting_started.md b/docs/getting_started.md index 767253c3..bfb4112a 100644 --- a/docs/getting_started.md +++ b/docs/getting_started.md @@ -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 @@ -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({ @@ -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) { @@ -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({ @@ -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) {