Working with Charts
This section explains about how to use the chart feature in the Open Data Editor. The
Chart Editor makes it easy to create charts without any code. The editor generates vegalite specification from the user input, which is passed to vegalite library to generate charts.
Creating a Chart
To create a chart, simply click on the
create button and a dialog box opens. Navigate to
Chart tab, you can either modify the name of the file or keep the default name
After setting file name, click
Create button, a chart file will be generated with the name you selected
Initially, chart specification is empty so you will not see any chart. You can make changes to the chart file by using Chart Editor.
Once you update the chart specifications, the chart will be rendered in the
Chart Viewer window.
Editing a Chart
You can edit the chart specifications to customize it exactly how you want it to be rendered using
Chart Editor. To hide the editor simply click the
The editor allows us to make changes easily using GUI without requiring any understanding of the low level details of vegalite specification. It has three sections: a menu explorer, an input form and a help window.
It supports adding channels, transforms and layers feature.
Encoding or Channel
The channels allows us to add multiple
Encodings to map data fields to visual properties of a chart. To go to encoding/channel list, navigate to
Chart > Channels. The term
Encoding will be use alternatively here.
For example, to generate a bar chart with sales on
X axis and states on
Y axis as follows:
The table fields
State needs to be mapped with
Here is how the encodings look like:
To add a new encoding/channel, click
Add Channel. Likewise, to remove an encoding just click
Remove button on the encoding.
To make changes to the encoding,
double click on the encoding button.
Inside the encoding input form, you can set values as per your requirement. To get back to the encoding/channel list, click
BACK TO LIST button.
You can find the detailed explanation of vegalite encoding here.
You can apply transformations such as sum, agregation calculate etc to the data using transform feature. To add a new transform, navigate to
Chart > Transforms and click
Add Transform menu in the
Transforms list page.
To make changes to the specific transform,
double click on the transform button.
Once the transform input form is open, you can make the required changes. Click
BACK TO LIST to go back to the transform list view page.
To remove any transform click
To learn more about vegalite transform you can find the detailed document here.
Using layers feature, you can create complex visualization by overlaying multiple charts layers on top of each other. To add a new layer, navigate to
Chart > Layers and click
Add Layer menu in the
Layers list view page.
To remove any layer click
After adding layer, you can add
Transform by clicking the newly created layer menu.
To add encodings and transforms navigate to the respective submenus and click
Add channel/transform button.
To change the content of a channel or transform,
dblclick on the corresponding button. Similarly to delete a channel or transform simply click
To learn more about vegalite layers you can find the detailed document here.
To view the chart file in its raw form, click on
source menu. To hide, click on the menu again.
Saving / Reverting
You can modify the chart content by using
Source View or using
Chat AI. When changes are made, the
Revert button gets activated at the bottom of the editor. You can save your changes by clicking
If needed, you can revert the changes clicking the
Revert button. You can save it as a new file as well.
Using AI with Charts
To generate chart using AI, click
Create button. A
Create File dialog box will appear. Navigate to the
Chart tab, input
filename and write a data generation command in the
prompt input box. We use OpenAI’s
ChatGPT large language model API.
Similarly, you can edit a chart content by issuing command to AI. To access this window, select
Chat AI option from the toolbar menu.
Enter your instruction to AI in the prompt input box and apply the command by clicking the
EDIT button. The resulting output is as follows:
CHAT AI feature, you have to set the
OpenAI API Key. To set the api key, click
To open the publishing window, click the
Publish button located at the bottom of the chart editor page. After you’ve chart ready, click the
Publish button to initiate the publishing process
Similarly, you can also publish it to