https://github.com/anychart/chart-editor
AnyChart Editor is an Extension of AnyChart that allows to configure charts via UI
https://github.com/anychart/chart-editor
anychart chart-component chart-library charting charting-library charts
Last synced: 7 months ago
JSON representation
AnyChart Editor is an Extension of AnyChart that allows to configure charts via UI
- Host: GitHub
- URL: https://github.com/anychart/chart-editor
- Owner: AnyChart
- License: apache-2.0
- Created: 2018-03-01T02:58:51.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2022-12-08T04:01:19.000Z (about 3 years ago)
- Last Synced: 2025-04-06T03:33:55.536Z (9 months ago)
- Topics: anychart, chart-component, chart-library, charting, charting-library, charts
- Language: JavaScript
- Homepage: https://docs.anychart.com/Chart_Editor/Overview
- Size: 1.81 MB
- Stars: 11
- Watchers: 18
- Forks: 2
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[
](https://www.anychart.com)
AnyChart Chart Editor
=========
Intuitive and easy to use web application that allows you to create and work with [AnyChart JavaScript Charts](https://www.anychart.com).
## Table of Contents
* [Download and Install](#download-and-install)
* [Getting started](#getting-started)
* [Using](#using)
* [Building](#building)
* [Contacts](#contacts)
* [Links](#links)
* [License](#license)
## Download and install
You can download all project binaries from [dist](https://github.com/AnyChart/chart-editor/tree/master/dist) folder.
## Getting started
To use AnyChart Chart Editor on a web page you should include AnyChart library first:
```html
```
If you want to have any theming options on the Theming tab of Visual appearance step of Chart Editor you should include desired themes:
```html
```
And at last include Chart Editor's binaries that you can find in a project's [dist](https://github.com/AnyChart/chart-editor/tree/master/dist) folder.
```html
```
Now you can create Chart Editor instance and render it to dom container.
```javascript
anychart.onDocumentReady(function() {
// Create chart editor instance
var editor = anychart.editor();
// Render to div#container
editor.render(document.getElementById("container"));
// Listen 'complete' event to get result code
editor.listen('editorComplete', function() {
console.log(editor.getJavascript());
});
});
```
The full working example you can find in index.html and index.js from [dist](https://github.com/AnyChart/chart-editor/tree/master/dist) folder.
## Using
#### Render options
Method | Description
--- | ---
*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 parentNode then it will be appended to the document body.
*decorate()* | Decorates the element for the UI component.
*dialogRender()* | Renders the Chart Editor as modal dialog. To set dialog visible or hidden use *dialogVisible(Boolean)* method.
#### Data
You can pass your data to Chart Editor using user interface of the Prepare Data step. Or you can pass data using data() method:
```javascript
// Pass only data
editor.data([
{name: 'Jan', val1: 10, price: 20.5, amount: 100},
{name: 'Feb', val1: 20, price: 30, amount: 200},
{name: 'Mar', val1: 5, price: 115, amount: 10}
]);
// Pass data and some settings
editor.data({
data: [
{name: 'Jan', val1: 10, price: 20.5, amount: 100},
{name: 'Feb', val1: 20, price: 30, amount: 200},
{name: 'Mar', val1: 5, price: 115, amount: 10}
],
chartType: 'column',
fieldNames: {
name: 'Month',
val1: 'Value 1'
},
title: 'Awesome Chart'
});
// You also may want to disable one or more of the four steps
editor.step('data', false);
// Or disable some tabs on Appearance or Export steps
editor.step('appearance').tab('contextMenu', false);
```
#### Result code
After all you can get the result code of a chart that you have configured. You can get code by these methods:
Method | Description | Arguments
--- | --- | ---
*getJavascript()* | Returns JS code string that creates a configured chart. | opt_outputOptions - object with configuration options.
*getJson()* | Returns configured chart in JSON representation. | -
*getXml()* | Returns configured chart in XML representation. | -
## Building
If you want to build your own binaries from project's source code first you should install remaining dependencies using following command
```
npm install
```
To compile chart editor from source run following command
```
./bin/build_release.sh
```
In this case you can find builded binaries in a *dist* folder.
Or you can build by build.sh script. In this case you can find builded binaries in a *out* folder.
Build everything
```bash
./bin/build.sh
#! or using npm
npm run build
```
Build only javascript binary
```bash
./bin/build.sh compile
#! or using npm
npm run compile
```
Build only css
```bash
./bin/build.sh css
#! or using npm
npm run css
```
Build only dependencies
```bash
./bin/build.sh deps
#! or using npm
npm run deps
```
## Contacts
* Web: [www.anychart.com](https://www.anychart.com)
* Email: [contact@anychart.com](mailto:contact@anychart.com)
* Twitter: [anychart](https://twitter.com/anychart)
* Facebook: [AnyCharts](https://www.facebook.com/AnyCharts)
* LinkedIn: [anychart](https://www.linkedin.com/company/anychart)
## Links
* [Report Issues](https://github.com/AnyChart/AnyChart-React/issues)
* [AnyChart Website](https://www.anychart.com)
* [Download AnyChart](https://www.anychart.com/download/)
* [AnyChart Licensing](https://www.anychart.com/buy/)
* [AnyChart Support](https://www.anychart.com/support/)
* [AnyChart Playground](https://playground.anychart.com)
* [AnyChart Documentation](https://docs.anychart.com)
* [AnyChart API Reference](https://api.anychart.com)
* [AnyChart Sample Solutions](https://www.anychart.com/solutions/)
* [AnyChart Integrations](https://www.anychart.com/integrations/)
## License
[© AnyChart.com - JavaScript charts](https://www.anychart.com). All rights reserved.