https://www.mutain.com/openinfoliveRessources/javascript/ckeditor/widget2chart.js

1
2/**
3 * @license Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
4 * For licensing, see LICENSE.md or http://ckeditor.com/license
5 */
6
7/**
8 * @fileOverview Replaces widgets with charts using Chart.js.
9 *
10 * This file should be included on websites as CKEditor returns just a div element with data attributes that needs to be replaced with a proper chart.
11 * The "Preview" plugin is using this file automatically.
12 */
13
14/* global chartjs_colors:false, chartjs_colors_json:false, chartjs_config:false, chartjs_config_json:false, console:false, Chart:false */
15
16// For IE8 and below the code will not be executed.
17if ( typeof document.addEventListener !== 'undefined' )
18	document.addEventListener( 'DOMContentLoaded', function() {
19	// Make sure Chart.js is enabled on a page.
20	if ( typeof Chart === 'undefined' ) {
21		if ( typeof console !== 'undefined' ) {
22			console.log( 'ERROR: You must include chart.min.js on this page in order to use Chart.js' );
23		}
24		return;
25	}
26
27	// Loop over all found elements.
28	[].forEach.call( document.querySelectorAll( 'div.chartjs' ), function( el ) {
29			var colors, config;
30
31			// Color sets defined on a website.
32			if ( typeof chartjs_colors !== 'undefined' ) {
33				colors = chartjs_colors;
34			}
35			// Color sets provided by contentPreview event handler.
36			else if ( typeof chartjs_colors_json !== 'undefined' ) {
37				colors = JSON.parse( chartjs_colors_json );
38			}
39			// Default hardcoded values used if file is included on a website that did not set "chartjs_colors" variable.
40			else {
41				colors = {
42					// Colors for Bar/Line chart: http://www.chartjs.org/docs/#bar-chart-data-structure
43					fillColor: 'rgba(151,187,205,0.5)',
44					strokeColor: 'rgba(151,187,205,0.8)',
45					highlightFill: 'rgba(151,187,205,0.75)',
46					highlightStroke: 'rgba(151,187,205,1)',
47					// Colors for Doughnut/Pie/PolarArea charts: http://www.chartjs.org/docs/#doughnut-pie-chart-data-structure
48					data: [ '#B33131', '#B66F2D', '#B6B330', '#71B232', '#33B22D', '#31B272', '#2DB5B5', '#3172B6', '#3232B6', '#6E31B2', '#B434AF', '#B53071' ]
49				};
50			}
51
52			// Chart.js config defined on a website.
53			if ( typeof chartjs_config !== 'undefined' ) {
54				config = chartjs_config;
55			}
56			// Chart.js config provided by contentPreview event handler.
57			else if ( typeof chartjs_config_json !== 'undefined' ) {
58				config = JSON.parse( chartjs_config_json );
59			}
60			else {
61				config = {
62					Bar: { animation: false },
63					Doughnut: { animateRotate: false },
64					Line: { animation: false },
65					Pie: { animateRotate: false },
66					PolarArea: { animateRotate: false }
67				};
68			}
69
70			// Get chart information from data attributes.
71			var chartType = el.getAttribute( 'data-chart' ),
72				values = JSON.parse( el.getAttribute( 'data-chart-value' ) );
73
74			// Malformed element, exit.
75			if ( !values || !values.length || !chartType )
76				return;
77
78			// <div> may contain some text like "chart" or &nbsp which is there just to prevent <div>s from being deleted.
79			el.innerHTML = '';
80
81			// Prepare some DOM elements for Chart.js.
82			var canvas = document.createElement( 'canvas' );
83			canvas.height = el.getAttribute( 'data-chart-height' );
84			el.appendChild( canvas );
85
86			var legend = document.createElement( 'div' );
87			legend.setAttribute( 'class', 'chartjs-legend' );
88			el.appendChild( legend );
89
90			// The code below is the same as in plugin.js.
91			// ########## RENDER CHART START ##########
92			// Prepare canvas and chart instance.
93			var i, ctx = canvas.getContext( '2d' ),
94				chart = new Chart( ctx );
95
96			// Set some extra required colors by Pie/Doughnut charts.
97			// Ugly charts will be drawn if colors are not provided for each data.
98			// http://www.chartjs.org/docs/#doughnut-pie-chart-data-structure
99			if ( chartType != 'bar' ) {
100				for ( i = 0; i < values.length; i++ ) {
101					values[i].color = colors.data[i];
102					values[i].highlight = colors.data[i];
103				}
104			}
105
106			// Prepare data for bar/line charts.
107			if ( chartType == 'bar' || chartType == 'line' ) {
108				var data = {
109					// Chart.js supports multiple datasets.
110					// http://www.chartjs.org/docs/#bar-chart-data-structure
111					// This plugin is simple, so it supports just one.
112					// Need more features? Create a Pull Request :-)
113					datasets: [
114						{
115							label: '',
116							fillColor: colors.fillColor,
117							strokeColor: colors.strokeColor,
118							highlightFill: colors.highlightFill,
119							highlightStroke: colors.highlightStroke,
120							data: []
121						} ],
122					labels: []
123				};
124				// Bar charts accept different data format than Pie/Doughnut.
125				// We need to pass values inside datasets[0].data.
126				for ( i = 0; i < values.length; i++ ) {
127					if ( values[i].value ) {
128						data.labels.push( values[i].label );
129						data.datasets[0].data.push( values[i].value );
130					}
131				}
132				// Legend makes sense only with more than one dataset.
133				legend.innerHTML = '';
134			}
135
136			// Render Bar chart.
137			if ( chartType == 'bar' ) {
138				chart.Bar( data, config.Bar );
139			}
140			// Render Line chart.
141			else if ( chartType == 'line' ) {
142				chart.Line( data, config.Line );
143			}
144			// Render Line chart.
145			else if ( chartType == 'polar' ) {
146				//chart.PolarArea( values );
147				legend.innerHTML = chart.PolarArea( values, config.PolarArea ).generateLegend();
148			}
149			// Render Pie chart and legend.
150			else if ( chartType == 'pie' ) {
151				legend.innerHTML = chart.Pie( values, config.Pie ).generateLegend();
152			}
153			// Render Doughnut chart and legend.
154			else {
155				legend.innerHTML = chart.Doughnut( values, config.Doughnut ).generateLegend();
156			}
157			// ########## RENDER CHART END ##########
158		}
159	);
160} );