DOCSP-7953: [Charts] As a developer, I can programmatically refresh the chart embedded in my web page (#304)

Author: steveren

source/embedding-charts-sdk.txt

@@ -76,6 +76,36 @@ The example app is configured with a chart ID and base URL which are
 particular to the app. Be sure to configure your own apps with the correct
 chart ID and base URL.
 
+The example app uses two SDK methods:
+
+.. list-table::
+   :header-rows: 1
+   :widths: 15 55 15 15
+
+   * - Method
+     - Description
+     - Args
+     - Returns
+
+   * - ``refresh()``
+     - Reloads the chart with the latest data from its
+       :ref:`data source <data-sources>`.
+     - none
+     - Promise<void>
+
+   * - ``setFilter()``
+     - Filters your embedded chart based on a specified MQL
+       :ref:`filter document <query-bar>`.
+
+       .. note::
+
+          Any fields included in the filter must be specified in the Embed
+          Chart modal. See :ref:`Filter Embedded Charts with the SDK
+          <filter-embedded-sdk>`.
+
+     - :ref:`filter <query-bar>` object
+     - Promise<void>
+
 Quick Start with HTML
 ~~~~~~~~~~~~~~~~~~~~~
 
@@ -124,6 +154,8 @@ page by including it as part of a header script tag.
      </body>
    </html>
 
+.. _filter-embedded-sdk:
+
 Filter Embedded Charts with the SDK
 -----------------------------------
 
@@ -132,9 +164,24 @@ with the ``filter`` option. Filtering allows the chart author to only display
 data in the embedded chart which matches a specified :abbr:`MQL (MongoDB
 Query Language)` filter.
 
-Any fields included in the filter must be specified in the Embed Chart modal
-window. The Embed Chart modal window contains a dropdown menu of fields on
-which to allow filtering. 
+Any fields included in the filter must be specified in the Embed Chart modal.
+The Embed Chart modal contains a dropdown menu of fields on
+which to allow filtering.
+
+The following uses the ``filter`` option to represent only documents in
+which the ``total`` field is greater than ``100``:
+
+.. code-block:: javascript
+
+   createChart({
+     baseUrl: '<your-base-url>',
+     chartId: '<your-chart-id>',
+     width: 500,
+     height: 500,
+     filter: { "total": { "$gt": 100 } }
+   })
+
+   
 
 Option Reference
 ----------------
@@ -179,7 +226,7 @@ method:
    * - ``refreshInterval``
      - number
      - How often to refresh the chart, in seconds. The minimum refresh
-       interval is 10 seconds. ``autorefresh`` is off By default.
+       interval is 10 seconds. ``autorefresh`` is off by default.
      - no
 
    * - ``theme``