class anychart.editor.Editor Improve this Doc
Editor class.
Methods Overview
Specific settings | |
step() | Step settings. |
Class settings | |
addClassName() | Adds the given class name to the list of classes to be applied to the chart editor component root element. |
removeClassName() | Removes the given class name from the list of classes to be applied to the chart editor component root element. |
Data | |
data() | Adds data to editor. |
Events | |
listen() | Adds an event listener. |
listenOnce() | Adds a single time event listener. |
removeAllListeners() | Removes all listeners. |
unlisten() | Removes the listener. |
unlistenByKey() | Removes the listener by the key. |
Interactivity | |
hide() | Hides chart editor component in DOM by setting 'display: none' style to it's root element. |
show() | Shows chart editor component in DOM by removing 'display: none' style. |
Reference | |
version() | Returns the current chart editor version. |
Render options | |
decorate() | Decorates the element for the UI component. |
dialogRender() | Renders the Chart Editor as a modal dialog. |
dialogVisible() | Visibility state of the dialog box |
render() | Renders the component. |
Result code | |
getJavascript() | Returns javascript code string that creates a configured chart. |
getJson() | Returns the configured chart in the JSON representation. |
getXml() | Returns configured chart in XML representation. |
Miscellaneous | |
dispose() | Disposes a chart editor. Removes it and its children from defs, clears the clip for managed elements. |
localization() | Sets anychart locale settings. |
Methods Description
addClassName
Adds the given class name to the list of classes to be applied to the chart editor component root element.
To work with the Chart Editor you need to reference the extension file from AnyChart CDN (example for the versioned file: https://cdn.anychart.com/releases/8.13.0/js/anychart-editor.min.js)
To work with the Chart Editor you need to reference the extension file from AnyChart CDN (example for the versioned file: https://cdn.anychart.com/releases/8.13.0/js/anychart-editor.min.js)
Params:
Name | Type | Description |
---|---|---|
className | string | Class name. |
Sample for the addClassName() method
var editor = anychart.editor(); // Add class name. editor.addClassName('custom-class'); editor.render(document.getElementById('container'));See sample at https://www.anychart.com/features/chart_editor/demo.html
data
Adds data to editor.
To work with the Chart Editor you need to reference the extension file from AnyChart CDN (example for the versioned file: https://cdn.anychart.com/releases/8.13.0/js/anychart-editor.min.js)
To work with the Chart Editor you need to reference the extension file from AnyChart CDN (example for the versioned file: https://cdn.anychart.com/releases/8.13.0/js/anychart-editor.min.js)
Params:
Name | Type | Description |
---|---|---|
data | Array.<Object> | Object | Array of the objects or object with data settings. |
Sample 1. Data as an array of objects
var editor = anychart.editor(); // Set chart editor raw data as an array of objects. editor.data([ {x: 'Point 1', value: 511.53}, {x: 'Point 2', value: 900}, {x: 'Point 3', value: 700}, {x: 'Point 4', value: 380}, {x: 'Point 5', value: 830} ]) editor.render(document.getElementById('container'));See sample at https://www.anychart.com/features/chart_editor/demo.html
Sample 2. Data as an object.
var editor = anychart.editor(); // Set chart editor data as an data settings object. editor.data({ data: [ {x: 'Point 1', value: 511.53}, {x: 'Point 2', value: 900}, {x: 'Point 3', value: 700}, {x: 'Point 4', value: 380}, {x: 'Point 5', value: 830} ], chartType: 'pie', fieldNames: { x: 'Name', value: 'Revenue' }, defaults: [ {key: [['chart'], ['settings'], title().enabled()], value: true}, {key: [['chart'], ['settings'], title().text()], value: 'ACME corp. Revenue'} ] }); editor.render(document.getElementById('container'));See sample at https://www.anychart.com/features/chart_editor/demo.html
decorate
Decorates the element for the UI component.
To work with the Chart Editor you need to reference the extension file from AnyChart CDN (example for the versioned file: https://cdn.anychart.com/releases/8.13.0/js/anychart-editor.min.js)
To work with the Chart Editor you need to reference the extension file from AnyChart CDN (example for the versioned file: https://cdn.anychart.com/releases/8.13.0/js/anychart-editor.min.js)
Params:
Name | Type | Description |
---|---|---|
element | Element | Element to decorate. |
Sample for the decorate() method
var editor = anychart.editor(); // Decorate editor to the container. editor.decorate(document.getElementById('container'));See sample at https://www.anychart.com/features/chart_editor/demo.html
dialogRender
Renders the Chart Editor as a modal dialog.
To set dialog visible or hidden use dialogVisible(boolean) method.
To work with the Chart Editor you need to reference the extension file from AnyChart CDN (example for the versioned file: https://cdn.anychart.com/releases/8.13.0/js/anychart-editor.min.js)
To set dialog visible or hidden use dialogVisible(boolean) method.
To work with the Chart Editor you need to reference the extension file from AnyChart CDN (example for the versioned file: https://cdn.anychart.com/releases/8.13.0/js/anychart-editor.min.js)
Sample for the dialogRender() method
var editor = anychart.editor(); // Renders the Chart Editor as a modal dialog. editor.dialogRender(); editor.dialogVisible(true);See sample at https://www.anychart.com/features/chart_editor/demo.html
Renders the Chart Editor as a modal dialog using class name.
To set dialog visible or hidden use dialogVisible(boolean) method.
To work with the Chart Editor you need to reference the extension file from AnyChart CDN (example for the versioned file: https://cdn.anychart.com/releases/8.13.0/js/anychart-editor.min.js)
To set dialog visible or hidden use dialogVisible(boolean) method.
To work with the Chart Editor you need to reference the extension file from AnyChart CDN (example for the versioned file: https://cdn.anychart.com/releases/8.13.0/js/anychart-editor.min.js)
Params:
Name | Type | Description |
---|---|---|
className | string | CSS class name for the dialog element, also used as a class name prefix for related elements; defaults to 'anychart-ce-dialog'. This should be a single, valid CSS class name. |
Sample for the dialogRender() method
var editor = anychart.editor(); // Set the class name for the dialog element. editor.dialogRender('custom-editor-dialog'); editor.dialogVisible(true);See sample at https://www.anychart.com/features/chart_editor/demo.html
dialogVisible
Getter for the visibility of the dialog box.
To work with the Chart Editor you need to reference the extension file from AnyChart CDN (example for the versioned file: https://cdn.anychart.com/releases/8.13.0/js/anychart-editor.min.js)
To work with the Chart Editor you need to reference the extension file from AnyChart CDN (example for the versioned file: https://cdn.anychart.com/releases/8.13.0/js/anychart-editor.min.js)
Returns:
boolean - Visibility state. Sample for the dialogVisible() method as getter
var editor = anychart.editor(); editor.dialogRender(); // Get the visibility state of editor dialog. var dialogVisible = editor.dialogVisible(); editor.render(document.getElementById('container'));See sample at https://www.anychart.com/features/chart_editor/demo.html
Setter for the visibility of the dialog box.
To work with the Chart Editor you need to reference the extension file from AnyChart CDN (example for the versioned file: https://cdn.anychart.com/releases/8.13.0/js/anychart-editor.min.js)
To work with the Chart Editor you need to reference the extension file from AnyChart CDN (example for the versioned file: https://cdn.anychart.com/releases/8.13.0/js/anychart-editor.min.js)
Params:
Name | Type | Description |
---|---|---|
enabled | boolean | Whether the dialog should be visible. |
Returns:
anychart.editor.Editor - Self instance for method chaining. Sample for the dialogVisible() method as setter
var editor = anychart.editor(); editor.dialogRender(); // Show editor dialog. editor.dialogVisible(true); editor.render(document.getElementById('container'));See sample at https://www.anychart.com/features/chart_editor/demo.html
dispose
Disposes a chart editor. Removes it and its children from defs, clears the clip for managed elements.
To work with the Chart Editor you need to reference the extension file from AnyChart CDN (example for the versioned file: https://cdn.anychart.com/releases/8.13.0/js/anychart-editor.min.js)
To work with the Chart Editor you need to reference the extension file from AnyChart CDN (example for the versioned file: https://cdn.anychart.com/releases/8.13.0/js/anychart-editor.min.js)
Sample for the dispose() method
var editor = anychart.editor(); editor.render(document.getElementById('container')); // Dispose chart editor. editor.dispose();See sample at https://www.anychart.com/features/chart_editor/demo.html
getJavascript
Returns javascript code string that creates a configured chart.
To work with the Chart Editor you need to reference the extension file from AnyChart CDN (example for the versioned file: https://cdn.anychart.com/releases/8.13.0/js/anychart-editor.min.js)
To work with the Chart Editor you need to reference the extension file from AnyChart CDN (example for the versioned file: https://cdn.anychart.com/releases/8.13.0/js/anychart-editor.min.js)
Returns:
string - Javascript string. Sample for the getJavascript() method
var editor = anychart.editor(); editor.render(document.getElementById('container')); editor.listen('editorComplete', function() { // Get javascript code string. console.log(editor.getJavascript()); });See sample at https://www.anychart.com/features/chart_editor/demo.html
Returns javascript code string using an object.
To work with the Chart Editor you need to reference the extension file from AnyChart CDN (example for the versioned file: https://cdn.anychart.com/releases/8.13.0/js/anychart-editor.min.js)
To work with the Chart Editor you need to reference the extension file from AnyChart CDN (example for the versioned file: https://cdn.anychart.com/releases/8.13.0/js/anychart-editor.min.js)
Params:
Name | Type | Description |
---|---|---|
outputOptions | anychart.editor.JavascriptOptions | An object with configuration options. |
Returns:
string - Javascript string. Sample for the getJavascript() method
var editor = anychart.editor(); editor.render(document.getElementById('container')); editor.listen('editorComplete', function() { // Get javascript code string. console.log(editor.getJavascript({minify: true, container: 'container', addData: true})); });See sample at https://www.anychart.com/features/chart_editor/demo.html
getJson
Returns the configured chart in the JSON representation.
To work with the Chart Editor you need to reference the extension file from AnyChart CDN (example for the versioned file: https://cdn.anychart.com/releases/8.13.0/js/anychart-editor.min.js)
To work with the Chart Editor you need to reference the extension file from AnyChart CDN (example for the versioned file: https://cdn.anychart.com/releases/8.13.0/js/anychart-editor.min.js)
Returns:
string - JSON string. Sample for the getJson() method
var editor = anychart.editor(); editor.render(document.getElementById('container')); editor.listen('editorComplete', function() { // Get JSON code string. console.log(editor.getJson()); });See sample at https://www.anychart.com/features/chart_editor/demo.html
getXml
Returns configured chart in XML representation.
To work with the Chart Editor you need to reference the extension file from AnyChart CDN (example for the versioned file: https://cdn.anychart.com/releases/8.13.0/js/anychart-editor.min.js)
To work with the Chart Editor you need to reference the extension file from AnyChart CDN (example for the versioned file: https://cdn.anychart.com/releases/8.13.0/js/anychart-editor.min.js)
Returns:
string - XML string. Sample for the getXml() method
var editor = anychart.editor(); editor.render(document.getElementById('container')); editor.listen('editorComplete', function() { // Get XML code string. console.log(editor.getXml()); });See sample at https://www.anychart.com/features/chart_editor/demo.html
hide
Hides chart editor component in DOM by setting 'display: none' style to it's root element.
To work with the Chart Editor you need to reference the extension file from AnyChart CDN (example for the versioned file: https://cdn.anychart.com/releases/8.13.0/js/anychart-editor.min.js)
To work with the Chart Editor you need to reference the extension file from AnyChart CDN (example for the versioned file: https://cdn.anychart.com/releases/8.13.0/js/anychart-editor.min.js)
Params:
Name | Type | Default | Description |
---|---|---|---|
hide | boolean | true | Enabled state. |
Sample for the hide() method
var editor = anychart.editor(); editor.render(document.getElementById('container')); // Hide chart editor. editor.hide(true);See sample at https://www.anychart.com/features/chart_editor/demo.html
listen
Adds an event listener to an implementing object.
To work with the Chart Editor you need to reference the extension file from AnyChart CDN (example for the versioned file: https://cdn.anychart.com/releases/8.13.0/js/anychart-editor.min.js)
To work with the Chart Editor you need to reference the extension file from AnyChart CDN (example for the versioned file: https://cdn.anychart.com/releases/8.13.0/js/anychart-editor.min.js)
Detailed description
The listener can be added to an object once, and if it is added one more time, its key will be returned.
Note Notice that if the existing listener is one-off (added using listenOnce), it will cease to be such after calling the listen() method.
Note Notice that if the existing listener is one-off (added using listenOnce), it will cease to be such after calling the listen() method.
Params:
Name | Type | Default | Description |
---|---|---|---|
type | string | The event type id. | |
listener | function(e:Object) | Callback method. Function that looks like: function(event){ // event.actualTarget - actual event target // event.currentTarget - current event target // event.iterator - event iterator // event.originalEvent - original event // event.point - event point // event.pointIndex - event point index } | |
useCapture | boolean | false | Whether to fire in capture phase. Learn more about capturing https://javascript.info/bubbling-and-capturing |
listenerScope | Object | Object in whose scope to call the listener. |
Returns:
Object - Unique key for the listener.listenOnce
Adds an event listener to an implementing object.
To work with the Chart Editor you need to reference the extension file from AnyChart CDN (example for the versioned file: https://cdn.anychart.com/releases/8.13.0/js/anychart-editor.min.js)
To work with the Chart Editor you need to reference the extension file from AnyChart CDN (example for the versioned file: https://cdn.anychart.com/releases/8.13.0/js/anychart-editor.min.js)
Detailed description
After the event is called, its handler will be deleted.
If the event handler being added already exists, listenOnce will do nothing.
Note In particular, if the handler is already registered using listen(), listenOnce() will not make it one-off. Similarly, if a one-off listener already exists, listenOnce will not change it (it wil remain one-off).
If the event handler being added already exists, listenOnce will do nothing.
Note In particular, if the handler is already registered using listen(), listenOnce() will not make it one-off. Similarly, if a one-off listener already exists, listenOnce will not change it (it wil remain one-off).
Params:
Name | Type | Default | Description |
---|---|---|---|
type | string | The event type id. | |
listener | function(e:Object) | Callback method. | |
useCapture | boolean | false | Whether to fire in capture phase. Learn more about capturing https://javascript.info/bubbling-and-capturing |
listenerScope | Object | Object in whose scope to call the listener. |
Returns:
Object - Unique key for the listener.localization
Sets anychart locale settings.
To work with the Chart Editor you need to reference the extension file from AnyChart CDN (example for the versioned file: https://cdn.anychart.com/releases/8.13.0/js/anychart-editor.min.js)
To work with the Chart Editor you need to reference the extension file from AnyChart CDN (example for the versioned file: https://cdn.anychart.com/releases/8.13.0/js/anychart-editor.min.js)
Params:
Name | Type | Description |
---|---|---|
settings | Object | Object with locale settings. For example: editor.localization({ inputLocale: 'es-py', outputLocale: 'bn-in', outputDateTimeFormat: 'dd MMMM yyyy' }); Also available settings: |
Returns:
anychart.editor.Editor - Self instance for method chaining. Sample for the version() method
var editor = anychart.editor(); // Set localization for the chart editor. editor.localization({ inputLocale: 'es-py', outputLocale: 'bn-in', outputDateTimeFormat: 'dd MMMM yyyy' }); editor.render(document.getElementById('container'));See sample at https://www.anychart.com/features/chart_editor/demo.html
removeAllListeners
Removes all listeners from an object. You can also optionally remove listeners of some particular type.
To work with the Chart Editor you need to reference the extension file from AnyChart CDN (example for the versioned file: https://cdn.anychart.com/releases/8.13.0/js/anychart-editor.min.js)
To work with the Chart Editor you need to reference the extension file from AnyChart CDN (example for the versioned file: https://cdn.anychart.com/releases/8.13.0/js/anychart-editor.min.js)
Params:
Name | Type | Description |
---|---|---|
type | string | Type of event to remove, default is to remove all types. |
Returns:
number - Number of listeners removed.removeClassName
Removes the given class name from the list of classes to be applied to the chart editor component root element.
To work with the Chart Editor you need to reference the extension file from AnyChart CDN (example for the versioned file: https://cdn.anychart.com/releases/8.13.0/js/anychart-editor.min.js)
To work with the Chart Editor you need to reference the extension file from AnyChart CDN (example for the versioned file: https://cdn.anychart.com/releases/8.13.0/js/anychart-editor.min.js)
Params:
Name | Type | Description |
---|---|---|
className | string | Class name to be removed from the chart editor component root element. |
Sample for the removeClassName() method
var editor = anychart.editor(); editor.addClassName('custom-class'); // Remove class name. editor.removeClassName('custom-class'); editor.render(document.getElementById('container'));See sample at https://www.anychart.com/features/chart_editor/demo.html
render
Renders the component.
If a parent element is supplied, the component's element will be appended to it.
If there is no optional parent element and the element doesn't have a parent node then it will be appended to the document body. Returns an error if the component is already displayed.
To work with the Chart Editor you need to reference the extension file from AnyChart CDN (example for the versioned file: https://cdn.anychart.com/releases/8.13.0/js/anychart-editor.min.js)
If a parent element is supplied, the component's element will be appended to it.
If there is no optional parent element and the element doesn't have a parent node then it will be appended to the document body. Returns an error if the component is already displayed.
To work with the Chart Editor you need to reference the extension file from AnyChart CDN (example for the versioned file: https://cdn.anychart.com/releases/8.13.0/js/anychart-editor.min.js)
Params:
Name | Type | Description |
---|---|---|
parentElement | Element | The parent element to render the component into. |
Sample for the render() method
var editor = anychart.editor(); // Render editor to the container. editor.render(document.getElementById('container'));See sample at https://www.anychart.com/features/chart_editor/demo.html
show
Shows chart editor component in DOM by removing 'display: none' style.
To work with the Chart Editor you need to reference the extension file from AnyChart CDN (example for the versioned file: https://cdn.anychart.com/releases/8.13.0/js/anychart-editor.min.js)
To work with the Chart Editor you need to reference the extension file from AnyChart CDN (example for the versioned file: https://cdn.anychart.com/releases/8.13.0/js/anychart-editor.min.js)
Params:
Name | Type | Default | Description |
---|---|---|---|
show | boolean | true | Enabled state. |
Sample for the show() method
var editor = anychart.editor(); editor.render(document.getElementById('container')); // Show chart editor. editor.show(true);See sample at https://www.anychart.com/features/chart_editor/demo.html
step
Getter for the step by its name.
To work with the Chart Editor you need to reference the extension file from AnyChart CDN (example for the versioned file: https://cdn.anychart.com/releases/8.13.0/js/anychart-editor.min.js)
To work with the Chart Editor you need to reference the extension file from AnyChart CDN (example for the versioned file: https://cdn.anychart.com/releases/8.13.0/js/anychart-editor.min.js)
Params:
Name | Type | Description |
---|---|---|
stepName | anychart.enums.EditorSteps | string | Step name. |
Returns:
anychart.editor.Step | null - Step by its name. Sample for the step() method as getter
var editor = anychart.editor(); // Get a step by the 'export' name. var step = editor.step('export'); step.enabled(false); editor.render(document.getElementById('container')); });See sample at https://www.anychart.com/features/chart_editor/demo.html
Setter for the step settings.
Call this method only before render chart editor.
Step is a screen of the chart editor.
To work with the Chart Editor you need to reference the extension file from AnyChart CDN (example for the versioned file: https://cdn.anychart.com/releases/8.13.0/js/anychart-editor.min.js)
Call this method only before render chart editor.
Step is a screen of the chart editor.
To work with the Chart Editor you need to reference the extension file from AnyChart CDN (example for the versioned file: https://cdn.anychart.com/releases/8.13.0/js/anychart-editor.min.js)
Params:
Name | Type | Description |
---|---|---|
stepName | anychart.enums.EditorSteps | string | Step name. |
value | boolean | Object.<{enabled: boolean}> | Boolean value to enable/disable step or object with enabled states. |
Sample for the step() method as setter
var editor = anychart.editor(); // Disable the step with the 'export' name. editor.step('export', false); editor.render(document.getElementById('container')); });See sample at https://www.anychart.com/features/chart_editor/demo.html
unlisten
Removes a listener added using listen() or listenOnce() methods.
To work with the Chart Editor you need to reference the extension file from AnyChart CDN (example for the versioned file: https://cdn.anychart.com/releases/8.13.0/js/anychart-editor.min.js)
To work with the Chart Editor you need to reference the extension file from AnyChart CDN (example for the versioned file: https://cdn.anychart.com/releases/8.13.0/js/anychart-editor.min.js)
Params:
Name | Type | Default | Description |
---|---|---|---|
type | string | The event type id. | |
listener | function(e:Object):boolean|undefined | Callback method. | |
useCapture | boolean | false | Whether to fire in capture phase. Learn more about capturing https://javascript.info/bubbling-and-capturing |
listenerScope | Object | Object in whose scope to call the listener. |
Returns:
boolean - Whether any listener was removed.unlistenByKey
Removes an event listener which was added with listen() by the key returned by listen() or listenOnce().
To work with the Chart Editor you need to reference the extension file from AnyChart CDN (example for the versioned file: https://cdn.anychart.com/releases/8.13.0/js/anychart-editor.min.js)
To work with the Chart Editor you need to reference the extension file from AnyChart CDN (example for the versioned file: https://cdn.anychart.com/releases/8.13.0/js/anychart-editor.min.js)
Params:
Name | Type | Description |
---|---|---|
key | Object | The key returned by listen() or listenOnce(). |
Returns:
boolean - Whether any listener was removed.version
Returns the current chart editor version.
To work with the Chart Editor you need to reference the extension file from AnyChart CDN (example for the versioned file: https://cdn.anychart.com/releases/8.13.0/js/anychart-editor.min.js)
To work with the Chart Editor you need to reference the extension file from AnyChart CDN (example for the versioned file: https://cdn.anychart.com/releases/8.13.0/js/anychart-editor.min.js)
Returns:
string - Editor version. Sample for the version() method
var editor = anychart.editor(); // Get chart editor version. console.log(editor.version()); editor.render(document.getElementById('container'));See sample at https://www.anychart.com/features/chart_editor/demo.html