diff --git a/README.md b/README.md index 26590f7..d3450b5 100644 --- a/README.md +++ b/README.md @@ -12,13 +12,14 @@ View [live demo](http://wwalc.github.io/chart/). ## Installation 1. Put the plugin into the CKEditor "plugins" folder. -2. Enable the plugin with `config.extraPlugins` +2. Enable the plugin with `config.extraPlugins`. 3. Add the `Chart` button to the toolbar if it will not appear automatically. - - CKEDITOR.replace( 'editor1', { - extraPlugins: 'chart' - } +
+CKEDITOR.replace( 'editor1', {
+    extraPlugins: 'chart'
+}
+
In case of any problems with installation, there is [an online sample](http://wwalc.github.io/chart/sample.html) available that should help you get started. @@ -28,6 +29,68 @@ Chart created in CKEditor is represented as a simple `
` element with data a To convert `
` elements into charts, include `chart.min.js` and `widget2chart.js` on your website. See the [online sample](http://wwalc.github.io/chart/sample.html). +## Configuration Options + +### config.chart_height + +The default chart height (in pixels) in the Edit Chart dialog window. + + config.chart_height = 400; + +### config.chart_maxItems + +The number of rows (items to enter) in the Edit Chart dialog window. + + config.chart_maxItems = 12; + +### config.chart_colors + +Colors used to draw charts. See Bar chart data structure and +Pie chart data structure. + +
+config.chart_colors =
+{
+	// Colors for Bar/Line chart.
+	fillColor: 'rgba(151,187,205,0.5)',
+	strokeColor: 'rgba(151,187,205,0.8)',
+	highlightFill: 'rgba(151,187,205,0.75)',
+	highlightStroke: 'rgba(151,187,205,1)',
+	// Colors for Doughnut/Pie/PolarArea charts.
+	data: [ '#B33131', '#B66F2D', '#B6B330', '#71B232', '#33B22D', '#31B272', '#2DB5B5', '#3172B6', '#3232B6', '#6E31B2', '#B434AF', '#B53071' ]
+}
+
+ +### config.chart_configBar + +Chart.js configuration to use for Bar charts. + + config.chart_configBar = { animation: false }; + +### config.chart_configDoughnut + +Chart.js configuration to use for Doughnut charts. + + config.chart_configDoughnut = { animateRotate: false }; + +### config.chart_configLine + +Chart.js configuration to use for Line charts. + + config.chart_configLine = { animation: false }; + +### config.chart_configPie + +Chart.js configuration to use for Pie charts. + + config.chart_configPie = { animateRotate: false }; + +### config.chart_configPolarArea + +Chart.js configuration to use for PolarArea charts. + + config.chart_configPolarArea = { animateRotate: false }; + ## Screenshot ![Charts in CKEditor](http://s10.postimg.org/efvmb3fmh/chartjs.png)