A visual editor for the world's best web charting tool: [Highcharts] (http://www.highcharts.com/)
Easychart is a graphical user interface, built on top of the stunning Highcharts-javascript library.
It was born (somewhere in 2013) out of the need to make it possible for website-editors to embed and configure Highcharts in our websites in a more intuitive way than writing javascript code in the backend. So it has evolved from a sneaky textarea to a simple yet customizable user-interface where one can create a "Highcharts Options Object" (and thus a Highchart-chart) by pasting csv-data and clicking around.
Easychart is written as a vannila js application, very easy to integrate in your specific project or content management system. In fact, the Easychart-plugin isn't really made for standalone-use, it is made to shine in the backend of content management systems.
We've already built an [Easychart-module for Drupal] (https://www.drupal.org/project/easychart) which blends seamlessly with our Easychart-plugin. This module makes it possible to manage your charts in a convenient Drupal-manner. Even more, a chart only needs to be made once and can be reused in other nodes, views, panels... Not enough? It even has WYSIWYG-integration so it's possible to add charts through your texteditor.
The Easychart-plugin and -Drupal-module are free.
Attention [Highcharts] (http://www.highcharts.com/) is free for personal, school or non-profit projects under the Creative Commons Attribution - Non Commercial 3.0 License. For commercial and governmental websites and projects, you need to buy a license. (But they're absolutely worth every penny.) See [License and Pricing] (http://shop.highsoft.com/highcharts.html).
With Easychart we hope to make the beauty of Highcharts accessible to almost everyone. The people at [Highsoft] (http://www.highcharts.com/about) are (y)our true heroes, credit where credit is due.
If Handsontables is loaded before easycharts, it will use it automatically as data editor. Otherwise is it will fallback to a simple editable table.
You can pass on a options object to the easychart intialiser. The initialiser is best wrapped in a DOMContentLoaded wrapper.
document.addEventListener("DOMContentLoaded", function () {
var options = {};
new ec(options);
})var containerNode = document.getElementById('container');
new ec({
element: containerNode
});Toggle on and off the templates tab [default:true]
new ec({
templateTab: true
});Toggle on and off the data tab [default:true]
new ec({
dataTab: true
});Toggle on and off the customise tab [default:true]
new ec({
customiseTab: true
});Toggle on and off the debugger tab [default:false]
new ec({
debuggerTab: true
});Pass an array with data.
var data = [
[0,1,3],
[1,5,7]
]
new ec({
data: data
});Pass a csv string with data.
var csvString = '1,2,3'
new ec({
dataCSV: csvString
});Pass an url to a csv file with data
new ec({
dataUrl:'//dummyurl.com/dummy.csv'
});Pass an options object with the customisable attributes for the customise page
var opts:[
{
"id": "chart",
"panelTitle": "Chart settings",
"panes": [
{
"title": "Chart type and interaction",
"options": [
{
"name": "chart--type",
"fullname": "chart.type",
"title": "type",
"parent": "chart",
"isParent": false,
"returnType": "String",
"defaults": "line",
"values": "[\"line\", \"spline\", \"column\", \"bar\", \"area\", \"areaspline\", \"pie\", \"arearange\", \"areasplinerange\", \"boxplot\", \"bubble\", \"columnrange\", \"errorbar\", \"funnel\", \"gauge\", \"heatmap\", \"polygon\", \"pyramid\", \"scatter\", \"solidgauge\", \"treemap\", \"waterfall\"]",
"since": "2.1.0",
"description": "The default series type for the chart. Can be any of the chart types listed under <a href=\"#plotOptions\">plotOptions</a>.",
"demo": "<a href=\"http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/chart/type-bar/\" target=\"_blank\">Bar</a>",
"deprecated": false
}
]
}
]
}
];
new ec({
options: opts
});example options disclaimer this file is generated -> link
Pass an url to a options json file
new ec({
optionsUrl: 'examplepathto/options.json'
});Pass a array with preconfigured templates for the template page.
var templatesArray = [
{
"id": "line",
"type": "Line charts",
"icon": "line",
"templates": [
{
"id": "basic",
"icon": "line_basic",
"title": "Line chart",
"desc": "Requires one column for X values or categories, subsequently one column for each series' Y values.",
"definition": {
"chart": {
"type": "line"
},
"xAxis": [{
"type": "category"
}]
}
}
]
}
];
new ec({
templates:templatesObject
});example templates
Load a existing config object
new ec({
data:[['move', 'excersise', 'stand'], [80,65,50]],
config:{
"chart": {
"type": "column",
"inverted": true,
"animation": false
},
"xAxis": [
{
"type": "category"
}
],
"plotOptions": {
"series": {
"dataLabels": {
"enabled": true
}
}
}
}
});Load presets options, a preset has the same structure as options but cannot be overwritten by the user or other config. Is a tool for setting site wide config. e.g. colors
new ec({
presets:{
"colors": [
"#ECFF7C",
"#000000",
"#FF0000"
]
}
});Set the current data object.
var instance = new ec();
var data = [
[0,1,3],
[1,5,7]
]
instance.setData(data);Get the current data object.
var instance = new ec();
instance.getData();Set a data url to a csv file
var instance = new ec();
instance.setDataUrl('pathtocsvfile/file.csv')Get current data url
var instance = new ec();
instance.getDataUrl();Set a csv string with data.
var csvString = '1,2,3'
var instance = new ec();
instance.setDataCSV(csvString);Set the options with the customisable attributes for the customise page
var opts = [
{
"id": "chart",
"panelTitle": "Chart settings",
"panes": [
{
"title": "Chart type and interaction",
"options": [
{
"name": "chart--type",
"fullname": "chart.type",
"title": "type",
"parent": "chart",
"isParent": false,
"returnType": "String",
"defaults": "line",
"values": "[\"line\", \"spline\", \"column\", \"bar\", \"area\", \"areaspline\", \"pie\", \"arearange\", \"areasplinerange\", \"boxplot\", \"bubble\", \"columnrange\", \"errorbar\", \"funnel\", \"gauge\", \"heatmap\", \"polygon\", \"pyramid\", \"scatter\", \"solidgauge\", \"treemap\", \"waterfall\"]",
"since": "2.1.0",
"description": "The default series type for the chart. Can be any of the chart types listed under <a href=\"#plotOptions\">plotOptions</a>.",
"demo": "<a href=\"http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/chart/type-bar/\" target=\"_blank\">Bar</a>",
"deprecated": false
}
]
}
]
}
];
var instance = new ec();
instance.setOptions(opts)Get the current options config.
var instance = new ec();
instance.getOptions()Set an array with preconfigured templates for the template page.
var templatesArray = [
{
"id": "line",
"type": "Line charts",
"icon": "line",
"templates": [
{
"id": "basic",
"icon": "line_basic",
"title": "Line chart",
"desc": "Requires one column for X values or categories, subsequently one column for each series' Y values.",
"definition": {
"chart": {
"type": "line"
},
"xAxis": [{
"type": "category"
}]
}
}
]
}
];
var instance = new ec();
instance.setTemplates(templatesArray);Get the current template list.
var instance = new ec();
instance.getTemplates();Set the current config from code
var instance = new ec();
var config =
{
"chart": {
"type": "column",
"inverted": true,
"animation": false
},
"xAxis": [
{
"type": "category"
}
],
"plotOptions": {
"series": {
"dataLabels": {
"enabled": true
}
}
}
};
instance.setConfig(config);Get the current config.
var instance = new ec();
instance.getConfig()var instance = new ec();
instance.setOptionsUrl('urltojsonfile.json')Get the current options url.
var instance = new ec();
instance.getOptionsUrl()set the presets for the instance
var presets = {
"colors": [
"#ECFF7C",
"#000000",
"#FF0000"
]
}
var instance = new ec();
instance.setPreset(preset)Get the current presets.
var instance = new ec();
instance.getPresets()// install dependencies
npm install
// watch and build app
gulp watchify:app
// watch and build render app
gulp watchify:render
// production build the app
gulp buildThe project also contains a small nodejs script that merges the customise with the definitions from the highcharts attributes dump file.
To run the generator:
// install dependencies
npm install
// run generator
npm run genOptionsApp build is used when configuring a chart and is best used in a backend/logged in usecase, since it quite large and has loos dependencies like highlightjs and handsontables.
Render build is used for converting raw data and configuration to an highcharts graph, this build is best used for displaying graphs build by easychart. The render build only has a limited set op options and api calls.
options:
- data
- dataUrl
- config
- presets
- element
api:
- setData
- setDataUrl
- setConfig
- setPresets
Available under the MIT license.
This plugin is sponsored by The Government of Flanders: http://overheid.vlaanderen.be