Many of our customers use Highcharts within some kind of content management platform, such as a blog, intranet or any other publishing environment. Often this involves building an end-user interface for creating and embedding charts.
Collectively, this is a lot of duplicated effort.
To make developers’ lives easier, we’re today releasing a beta of our ”Universal” editor for Highcharts 5. It’s implemented as a simple and clean wizard-style UI which walks non-programmers through chart creation from start to finish. It is easily embedded into your web-applications.
Custom integrations to pull data from your existing system or a 3rd party system, saving charts on your server, or offering different kinds of export pipes can all easily be added through the plugin system. The editor ships with sample integrations for WordPress, TinyMCE, and CKEditor, which can be used as a cheat sheet when developing your own integrations, or as out-of-the-box solutions.
In the case of HTML output, the charts are fully interactive and falls back to static SVG charts in cases where JavaScript is disabled or otherwise unavailable.
This editor is free (released under the liberal MIT Open Source license), and we encourage you to build and share your app integrations with the community as well. For commercial applications, a license to the Highcharts charting library is required.
Head over to Github and download the code, or try it out here. Also, check out the video and further details below.
PLUGINS
The editor can be extended with custom functionality on three different levels:
- Import
- Export
- General chart changes
Each of these areas have their own plugin interface. Plugins are installed globally, and are enabled on an editor instance basis.
Check out the sample plugins for examples on how to extend the vanilla functionality to meet your requirements.
FULLY CUSTOMIZABLE
Written and designed from scratch with flexibility in mind, customizing the editor to suit your needs is straight-forward and hassle-free. Custom import and export functions can easily be added through the plugin system, and general features can be disabled as desired.
Custom layouts can also be created, by combining the various UI-parts into a custom editor object.
STAND-ALONE OPTION
In cases where dedicated chart creation is required, an Electron option is provided. This can either be fetched as a prebuilt default package. Alternatively, custom builds can be baked using gulp if custom plugins or other custom configuration properties are required.
INTEGRATE EVERYWHERE
Including the editor in a 3rd party web application is as simple as calling a single function in JavaScript:
highed.ModalEditor('modal-btn', {}, function (html, csv, json, chart) { //Called when done editing }
FEATURE SUMMARY
100% client-side: no infrastructure required
Self-contained: no dependencies beyond Highcharts and FontAwesome
Lightweight: library weighs in at less than 150kb
Extensible: plugin system for adding custom import/export functionality
Live preview: see changes immediately in the chart preview
Built-in import support for CSV, and JSON
Built-in export support for JSON, HTML, and SVG
Beautiful templates: the editor comes with a rich set of templates to kick start your charts
Modular: wizard steps can be disabled as needed, and the available property set can easily be changed
Optional advanced editor: an advanced editor exposing the full property set of Highcharts can easily be enabled if needed
- Optional Electron app: distribute the editor as a native application within your company
Comments
There are no comments on this post
Want to leave a comment?
Comments are moderated. They will publish only if they add to the discussion in a constructive way. Please be polite.