# InsightsChartEditor

## appmixer.ui.InsightsChartEditor

![](https://4163739060-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LATDgYqVMe0hChW7efU%2F-Lvp-iAgMe_KMTZStqoN%2F-Lvp1JkjSLsmisR2Q4lq%2FScreenshot%202019-12-11%20at%2013.57.21.png?alt=media\&token=339e8772-5f7e-4d95-b384-825dec058851)

![](https://4163739060-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LATDgYqVMe0hChW7efU%2F-Lvp-iAgMe_KMTZStqoN%2F-Lvp1kr-GuGqwoxzL-mF%2FScreenshot%202019-12-11%20at%2013.59.20.png?alt=media\&token=b089ef76-2f3c-45a3-b4ed-ba9f8f100a50)

The appmixer.ui.InsightsChartEditor is a UI widget that allows the user to configure a new chart visualization of any data of their flows. Different types of charts are supported including bar, line, area, scatter, pie and more. Moreover, the user can select from a wide range of aggregations to create an aggregated visualization of their data such as Date Histogram, Sum, Min, Max, Average, Unique Count, Range and Filter.

| Method                                    | Description                                                                                                                                                                                                                                                                                                        |
| ----------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `appmixer.ui.InsightsChartEditor(config)` | Constructor function that accepts `config` object. The `config` object must contain at least the `el` property that points to a container DOM element where the InsightsChartEditor will be rendered.                                                                                                              |
| `open()`                                  | Render the InsightsChartEditor inside its container.                                                                                                                                                                                                                                                               |
| `close()`                                 | Close the InsightsChartEditor.                                                                                                                                                                                                                                                                                     |
| `on(event, handler)`                      | React on events of the InsightsChartEditor. See below for the list of events the InsightsChartEditor supports.                                                                                                                                                                                                     |
| `off([event], [handler])`                 | Remove event listeners. If no arguments are provided, remove all event listeners. If only the `event` is provided, remove all listeners for that event. If both `event` and `handler` are given, remove the listener for that specific handler only.                                                               |
| `set(property, value)`                    | Set a property. Currently only "chartId" is supported. Use it to set the chart the chart editor should open for (`set("chartId", "123abc456")`). You can also call this to change the currently opened chart dynamically.                                                                                          |
| `get(property)`                           | Get a property value.                                                                                                                                                                                                                                                                                              |
| `state(name, value)`                      | Change the state of the UI. Currently, only `"loader"` and `"error"` states are supported. For example, in order to show a loader in the InsightsChartEditor UI, just call `state("loader", true)`. If you want to display an error in the InsightsChartEditor UI, call `state("error", "Something went wrong.")`. |
| `reload()`                                | Refresh the content of the chart editor.                                                                                                                                                                                                                                                                           |

### InsightsChartEditor Events

| Event   | Callback     | Triggered when...                    |
| ------- | ------------ | ------------------------------------ |
| `close` | `function()` | the user clicks on the close button. |

### Example

```javascript
var insightsChartEditor = appmixer.ui.InsightsChartEditor({
    el: '#your-insights-chart-editor-div'
});
appmixer.api.getCharts().then(function(charts) {
    var myChart = charts[0];   // Assuming we have at least one chart.
    insightsChartEditor.set('chartId', myChart.chartId);
    insightsChartEditor.open();
});
```

##