Chart Editor
The editor provides an advanced design time environment for exploring and configuring chart settings to get the exact results for your specific needs and to further tune chart settings and visuals. It is also a great tool for learning JSCharting by exploring and interacting with the various settings and immediately seeing the result of your updates. The editor is broken into different windows, or panes, with specific functionality.
Toolbar
The toolbar enables you to navigate through the samples using the dropdown or arrow buttons to page through samples sequentially. A number of on/off controls are included to control if the chart should automatically update after each code or UI change, if the UI or control based chart view on the left should be displayed or collapsed to provide more space for the chart and code views, and if the documentation and warnings pane should be displayed or collapsed. The current sample is also displayed in the toolbar to identify which sample is current.
UI View
The left pane, or UI view, shows a visual representation of the chart JS configuration with easy to use fields and controls. You can modify information through the UI, and it will automatically sync to the code and chart views. When clicking on a given UI section, you will also see documentation automatically sync and load in real-time in the documentation tab, so if you are wondering what a specific setting does, simply click on the control and see the documentation. For more extensive documentation, see the stand-alone help. The UI is typically displayed with a Full UI tab. In some cases with links from documentation we may highlight specific settings in the editor. In this case, a second "Highlights" tab will display. This enables you to focus on the specific setting we are discussing in docs or tutorials or an inbound link provided to you by support. You can then play with only the highlighted settings through that UI filter and at any time click back to Full UI to see all the settings. In UI view, when interacting with a given control, the name of that control can be clicked. This can be used to highlight and jump to the associated line of code in the code window. To hide this window, simply click the arrow button on the splitter or use the toolbar to turn UI to off.
Chart Window
The top pane, or chart window, shows the active chart you are modifying. In the case of multiple charts per page, each chart will have its own tab you can select to view all charts in one view or each chart individually by selecting the appropriate tab. Should auto update be turned off, you will also have a refresh button to refresh the chart view. As you make changes to the UI or code, the chart will update in real-time with auto update on, or when you refresh with auto update off. This allows for quick iteration, customization and configuration to explore the various settings with JSCharting.
Code Window
The bottom pane, or code window, shows the JS configuration code that makes up the chart you are currently seeing in the chart window. You are free to edit the code directly and the UI will synchronize automatically. In addition, you can add new lines to the code view and UI will automatically be created for it. You can then modify the settings from the newly created UI. To jump to a given UI from a line of code, simply click on that line number in the code view and the UI will display and briefly highlight to draw your attention to it.
Documentation Window
The final pane on the bottom right is the documentation window, which also includes a warnings tab. When there are errors with the chart settings, warnings can display the line number and details for resolution. When clicking on any line number in the code view, the associated documentation will load the same as clicking on any UI control in the UI pane. To hide this window, simply click the arrow button on the splitter or use the toolbar to turn docs to off.
Splitters
Splitters are provided between the different panes, so you can size them to meet your specific needs. As you hover over any splitter you will see a double arrowed icon appear and can click and drag to adjust the splitters. Using the arrows on the splitters will snap back and forth from open at your desired size, to closed.
Sharing
By clicking on the share button in the code window, a link is generated and can be used to open the sample with any changes that were made.
User Account Features
When users are logged in, the editor provides features such as saving edited samples. By clicking the sample name in the toolbar, the sample can be renamed and saved under that new name. By clicking save button in the code window and a new edited version of the current sample is added to the sample list dropdown.