InsightsChartEditor

appmixer.ui.InsightsChartEditor

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

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();
});