← All changes | public/js/chart-builder-public-chartjs.js +453 -5 3.1.4 → 3.8.1 View file →

		@@ -1,7 +1,44 @@
1	1	(function($) {
2	2	'use strict';
3	3
	4	+ var hoverGlowPluginRegistered = false;
	5	+ function registerHoverGlowPlugin() {
	6	+ if (hoverGlowPluginRegistered || typeof Chart === 'undefined') {
	7	+ return;
	8	+ }
	9	+ Chart.register({
	10	+ id: 'hoverGlowPlugin',
	11	+ beforeDraw(chart) {
	12	+ if (chart.config.type !== 'pie') {
	13	+ return;
	14	+ }
	15	+ var ctx = chart.ctx;
	16	+ var activeElements = chart.getActiveElements();
	17	+
	18	+ if (activeElements.length === 0) {
	19	+ return;
	20	+ }
	21	+ var meta = chart.getDatasetMeta(activeElements[0].datasetIndex);
	22	+ var element = meta.data[activeElements[0].index];
	23	+
	24	+ if (!element) {
	25	+ return;
	26	+ }
	27	+ var sliceColor = element.options.backgroundColor || 'rgba(0, 0, 0, 1)';
	28	+ ctx.save();
	29	+ ctx.shadowColor = sliceColor;
	30	+ ctx.shadowBlur = 15;
	31	+ ctx.shadowOffsetX = 0;
	32	+ ctx.shadowOffsetY = 0;
	33	+
	34	+ element.draw(ctx);
	35	+ ctx.restore();
	36	+ }
	37	+ });
	38	+ hoverGlowPluginRegistered = true;
	39	+ }
	40	+
4	41	function ChartBuilderChartJs(element, options) {
5	42	this.el = element;
6	43	this.$el = $(element);
7	44	this.htmlClassPrefix = 'ays-chart-';
		@@ -23,8 +60,9 @@
23	60	'bar_chart' : 'Bar Chart',
24	61	'line_chart' : 'Line Chart',
25	62	}
26	63
	64	+ registerHoverGlowPlugin();
27	65	this.init();
28	66
29	67	return this;
30	68	}
		@@ -67,8 +105,11 @@
67	105	switch (_this.chartType) {
68	106	case 'pie_chart':
69	107	_this.pieChartView();
70	108	break;
	109	+ case 'donut_chart':
	110	+ _this.donutChartView();
	111	+ break;
71	112	case 'bar_chart':
72	113	_this.barChartView();
73	114	break;
74	115	case 'line_chart':
		@@ -79,9 +120,10 @@
79	120	break;
80	121	}
81	122	}
82	123	}
83		-
	124	+
	125	+
84	126	// Load chart by pie chart
85	127	ChartBuilderChartJs.prototype.pieChartView = function(){
86	128	var _this = this;
87	129	var getChartSource = _this.dbData.source;
		@@ -89,8 +131,9 @@
89	131	var dataTypes = _this.chartConvertData( getChartSource );
90	132
91	133	var settings = _this.dbData.options;
92	134	var nSettings = _this.configOptionsForCharts(settings);
	135	+ _this.applyPieDataGrouping(dataTypes, nSettings);
93	136
94	137	// var ctx = document.getElementById(_this.htmlClassPrefix + _this.uniqueId + '-canvas');
95	138	var parentId = _this.htmlClassPrefix + _this.chartType + '-' + _this.uniqueId;
96	139	var canvasId = parentId + '-canvas';
		@@ -104,9 +147,32 @@
104	147	parentElement.appendChild(canvasElement);
105	148	}
106	149
107	150	var ctx = canvasElement;
	151	+ ctx.width = nSettings.chartWidth;
	152	+ ctx.height = nSettings.chartHeight;
108	153
	154	+ if (nSettings.chartWidthFormat === 'px') {
	155	+ ctx.width = parseInt(nSettings.chartWidth);
	156	+ } else if (nSettings.chartWidthFormat === '%') {
	157	+ ctx.style.width = nSettings.chartWidth + '%';
	158	+ }
	159	+
	160	+ if (nSettings.chartHeightFormat === 'px') {
	161	+ ctx.height = parseInt(nSettings.chartHeight);
	162	+ } else if (nSettings.chartHeightFormat === '%') {
	163	+ ctx.style.height = nSettings.chartHeight + '%';
	164	+ }
	165	+
	166	+ var sliceCount = dataTypes?.dataSets[0]?.data?.length || 0;
	167	+ dataTypes.dataSets[0].backgroundColor = [];
	168	+ dataTypes.dataSets[0].borderColor = [];
	169	+
	170	+ for (var i = 0; i < sliceCount; i++) {
	171	+ dataTypes.dataSets[0].backgroundColor[i] = i === dataTypes.dataSets[0].groupedSliceIndex ? nSettings.dataGroupingColor : (nSettings.sliceColor?.[i] || nSettings.sliceColorDefault?.[i % nSettings.sliceColorDefault.length]);
	172	+ dataTypes.dataSets[0].borderColor[i] = nSettings.slicesBorderColor?.[i] || 'transparent';
	173	+ }
	174	+ dataTypes.dataSets[0].borderWidth = nSettings.sliceBorderWidth;
109	175	_this.chartObject = new Chart(ctx, {
110	176	type: 'pie',
111	177	data: {
112	178	labels: dataTypes?.labels,
		@@ -115,9 +181,56 @@
115	181	options: {
116	182	radius: nSettings.outerRadius,
117	183	spacing: nSettings.sliceSpacing,
118	184	circumference: nSettings.circumference,
119		- rotation: nSettings.startAngle,
	185	+ rotation: nSettings.rotationDegree,
	186	+ borderColor: nSettings.sliceBorderColor,
	187	+ hover: nSettings.enableInteractivity ? {
	188	+ mode: 'nearest',
	189	+ intersect: true
	190	+ } : {
	191	+ mode: null,
	192	+ intersect: false
	193	+ },
	194	+ plugins: {
	195	+ tooltip:{
	196	+ enabled: nSettings.enableInteractivity,
	197	+ titleColor: nSettings.tooltipColor,
	198	+ bodyColor: nSettings.tooltipColor,
	199	+ footerColor: nSettings.tooltipColor,
	200	+ titleFont: {
	201	+ size: nSettings.tooltipFontSize || 12,
	202	+ style: nSettings.tooltipItalicText ? 'italic' : 'normal',
	203	+ weight: nSettings.tooltipBoldText === 'true' ? 'bold' : (nSettings.tooltipBoldText === 'false' ? 'normal' : undefined)
	204	+ },
	205	+ bodyFont: {
	206	+ size: nSettings.tooltipFontSize || 12,
	207	+ style: nSettings.tooltipItalicText ? 'italic' : 'normal',
	208	+ weight: nSettings.tooltipBoldText === 'true' ? 'bold' : (nSettings.tooltipBoldText === 'false' ? 'normal' : undefined)
	209	+ },
	210	+ footerFont: {
	211	+ size: nSettings.tooltipFontSize || 12,
	212	+ style: nSettings.tooltipItalicText ? 'italic' : 'normal',
	213	+ weight: nSettings.tooltipBoldText === 'true' ? 'bold' : (nSettings.tooltipBoldText === 'false' ? 'normal' : undefined)
	214	+ },
	215	+ position: 'nearest',
	216	+ events: ['click'],
	217	+ callbacks: _this.getTooltipCallbacks(nSettings.tooltipText, nSettings.showColorCode)
	218	+ },
	219	+ legend: {
	220	+ position: nSettings.legendPosition,
	221	+ align: nSettings.legendAlignment,
	222	+ reverse: nSettings.legendReverse,
	223	+ labels: {
	224	+ color: nSettings.legendColor,
	225	+ font: {
	226	+ size: nSettings.legendFontSize,
	227	+ weight: nSettings.legendBoldText ? 'bold' : 'normal',
	228	+ style: nSettings.legendItalicText ? 'italic' : 'normal'
	229	+ }
	230	+ }
	231	+ }
	232	+ }
120	233	}
121	234	});
122	235
123	236	_this.resizeChart();
		@@ -122,8 +235,121 @@
122	235
123	236	_this.resizeChart();
124	237	}
125	238
	239	+ // Load chart by pie chart
	240	+ ChartBuilderChartJs.prototype.donutChartView = function(){
	241	+ var _this = this;
	242	+ var getChartSource = _this.dbData.source;
	243	+
	244	+ var dataTypes = _this.chartConvertData( getChartSource );
	245	+
	246	+ var settings = _this.dbData.options;
	247	+ var nSettings = _this.configOptionsForCharts(settings);
	248	+ _this.applyPieDataGrouping(dataTypes, nSettings);
	249	+
	250	+ // var ctx = document.getElementById(_this.htmlClassPrefix + _this.uniqueId + '-canvas');
	251	+ var parentId = _this.htmlClassPrefix + _this.chartType + '-' + _this.uniqueId;
	252	+ var canvasId = parentId + '-canvas';
	253	+
	254	+ var parentElement = document.getElementById(parentId);
	255	+ var canvasElement = document.getElementById(canvasId);
	256	+
	257	+ if (!canvasElement) {
	258	+ canvasElement = document.createElement('canvas');
	259	+ canvasElement.id = canvasId;
	260	+ parentElement.appendChild(canvasElement);
	261	+ }
	262	+
	263	+ var ctx = canvasElement;
	264	+ ctx.width = nSettings.chartWidth;
	265	+ ctx.height = nSettings.chartHeight;
	266	+
	267	+ if (nSettings.chartWidthFormat === 'px') {
	268	+ ctx.width = parseInt(nSettings.chartWidth);
	269	+ } else if (nSettings.chartWidthFormat === '%') {
	270	+ ctx.style.width = nSettings.chartWidth + '%';
	271	+ }
	272	+
	273	+ if (nSettings.chartHeightFormat === 'px') {
	274	+ ctx.height = parseInt(nSettings.chartHeight);
	275	+ } else if (nSettings.chartHeightFormat === '%') {
	276	+ ctx.style.height = nSettings.chartHeight + '%';
	277	+ }
	278	+
	279	+ var sliceCount = dataTypes?.dataSets[0]?.data?.length || 0;
	280	+ dataTypes.dataSets[0].backgroundColor = [];
	281	+ dataTypes.dataSets[0].borderColor = [];
	282	+
	283	+ for (var i = 0; i < sliceCount; i++) {
	284	+ dataTypes.dataSets[0].backgroundColor[i] = nSettings.sliceColor?.[i] || nSettings.sliceColorDefault?.[i % nSettings.sliceColorDefault.length];
	285	+ dataTypes.dataSets[0].borderColor[i] = nSettings.slicesBorderColor?.[i] || 'transparent';
	286	+ }
	287	+ dataTypes.dataSets[0].borderWidth = nSettings.sliceBorderWidth;
	288	+ _this.chartObject = new Chart(ctx, {
	289	+ type: 'doughnut',
	290	+ data: {
	291	+ labels: dataTypes?.labels,
	292	+ datasets: dataTypes?.dataSets,
	293	+ },
	294	+ options: {
	295	+ radius: nSettings.outerRadius,
	296	+ spacing: nSettings.sliceSpacing,
	297	+ circumference: nSettings.circumference,
	298	+ rotation: nSettings.rotationDegree,
	299	+ borderColor: nSettings.sliceBorderColor,
	300	+ hover: nSettings.enableInteractivity ? {
	301	+ mode: 'nearest',
	302	+ intersect: true
	303	+ } : {
	304	+ mode: null,
	305	+ intersect: false
	306	+ },
	307	+ plugins: {
	308	+ tooltip:{
	309	+ enabled: nSettings.enableInteractivity,
	310	+ titleColor: nSettings.tooltipColor,
	311	+ bodyColor: nSettings.tooltipColor,
	312	+ footerColor: nSettings.tooltipColor,
	313	+ titleFont: {
	314	+ size: nSettings.tooltipFontSize || 12,
	315	+ style: nSettings.tooltipItalicText ? 'italic' : 'normal',
	316	+ weight: nSettings.tooltipBoldText === 'true' ? 'bold' : (nSettings.tooltipBoldText === 'false' ? 'normal' : undefined)
	317	+ },
	318	+ bodyFont: {
	319	+ size: nSettings.tooltipFontSize || 12,
	320	+ style: nSettings.tooltipItalicText ? 'italic' : 'normal',
	321	+ weight: nSettings.tooltipBoldText === 'true' ? 'bold' : (nSettings.tooltipBoldText === 'false' ? 'normal' : undefined)
	322	+ },
	323	+ footerFont: {
	324	+ size: nSettings.tooltipFontSize || 12,
	325	+ style: nSettings.tooltipItalicText ? 'italic' : 'normal',
	326	+ weight: nSettings.tooltipBoldText === 'true' ? 'bold' : (nSettings.tooltipBoldText === 'false' ? 'normal' : undefined)
	327	+ },
	328	+ position: 'nearest',
	329	+ events: ['click'],
	330	+ callbacks: _this.getTooltipCallbacks(nSettings.tooltipText, nSettings.showColorCode)
	331	+ },
	332	+ legend: {
	333	+ position: nSettings.legendPosition,
	334	+ align: nSettings.legendAlignment,
	335	+ reverse: nSettings.legendReverse,
	336	+ labels: {
	337	+ color: nSettings.legendColor,
	338	+ font: {
	339	+ size: nSettings.legendFontSize,
	340	+ weight: nSettings.legendBoldText ? 'bold' : 'normal',
	341	+ style: nSettings.legendItalicText ? 'italic' : 'normal'
	342	+ }
	343	+ }
	344	+ }
	345	+ }
	346	+ }
	347	+ });
	348	+
	349	+ _this.resizeChart();
	350	+ }
	351	+
126	352	// Load chart by bar chart
127	353	ChartBuilderChartJs.prototype.barChartView = function(){
128	354	var _this = this;
129	355	var getChartSource = _this.dbData.source;
		@@ -147,8 +373,22 @@
147	373	}
148	374
149	375	var ctx = canvasElement;
150	376
	377	+ ctx.width = nSettings.chartWidth;
	378	+ ctx.height = nSettings.chartHeight;
	379	+
	380	+ if (nSettings.chartWidthFormat === 'px') {
	381	+ ctx.width = parseInt(nSettings.chartWidth);
	382	+ } else if (nSettings.chartWidthFormat === '%') {
	383	+ ctx.style.width = nSettings.chartWidth + '%';
	384	+ }
	385	+
	386	+ if (nSettings.chartHeightFormat === 'px') {
	387	+ ctx.height = parseInt(nSettings.chartHeight);
	388	+ } else if (nSettings.chartHeightFormat === '%') {
	389	+ ctx.style.height = nSettings.chartHeight + '%';
	390	+ }
151	391	_this.chartObject = new Chart(ctx, {
152	392	type: 'bar',
153	393	data: {
154	394	labels: dataTypes?.labels,
		@@ -153,9 +393,52 @@
153	393	data: {
154	394	labels: dataTypes?.labels,
155	395	datasets: dataTypes?.dataSets,
156	396	},
157		- options: {}
	397	+ options: {
	398	+ hover: nSettings.enableInteractivity ? {
	399	+ mode: 'nearest',
	400	+ intersect: true
	401	+ } : {
	402	+ mode: null,
	403	+ intersect: false
	404	+ },
	405	+ plugins: {
	406	+ tooltip:{
	407	+ enabled: nSettings.enableInteractivity,
	408	+ titleColor: nSettings.tooltipColor,
	409	+ bodyColor: nSettings.tooltipColor,
	410	+ footerColor: nSettings.tooltipColor,
	411	+ titleFont: {
	412	+ size: nSettings.tooltipFontSize || 12,
	413	+ style: nSettings.tooltipItalicText ? 'italic' : 'normal',
	414	+ weight: nSettings.tooltipBoldText === 'true' ? 'bold' : (nSettings.tooltipBoldText === 'false' ? 'normal' : undefined)
	415	+ },
	416	+ bodyFont: {
	417	+ size: nSettings.tooltipFontSize || 12,
	418	+ style: nSettings.tooltipItalicText ? 'italic' : 'normal',
	419	+ weight: nSettings.tooltipBoldText === 'true' ? 'bold' : (nSettings.tooltipBoldText === 'false' ? 'normal' : undefined)
	420	+ },
	421	+ footerFont: {
	422	+ size: nSettings.tooltipFontSize || 12,
	423	+ style: nSettings.tooltipItalicText ? 'italic' : 'normal',
	424	+ weight: nSettings.tooltipBoldText === 'true' ? 'bold' : (nSettings.tooltipBoldText === 'false' ? 'normal' : undefined)
	425	+ },
	426	+ },
	427	+ legend: {
	428	+ position: nSettings.legendPosition,
	429	+ align: nSettings.legendAlignment,
	430	+ labels: {
	431	+ color: nSettings.legendColor,
	432	+ font: {
	433	+ size: nSettings.legendFontSize,
	434	+ weight: nSettings.legendBoldText ? 'bold' : 'normal',
	435	+ style: nSettings.legendItalicText ? 'italic' : 'normal'
	436	+ }
	437	+ }
	438	+ }
	439	+ }
	440	+ }
158	441	});
159	442
160	443	_this.resizeChart();
161	444	}
		@@ -184,8 +467,23 @@
184	467	}
185	468
186	469	var ctx = canvasElement;
187	470
	471	+ ctx.width = nSettings.chartWidth;
	472	+ ctx.height = nSettings.chartHeight;
	473	+
	474	+ if (nSettings.chartWidthFormat === 'px') {
	475	+ ctx.width = parseInt(nSettings.chartWidth);
	476	+ } else if (nSettings.chartWidthFormat === '%') {
	477	+ ctx.style.width = nSettings.chartWidth + '%';
	478	+ }
	479	+
	480	+ if (nSettings.chartHeightFormat === 'px') {
	481	+ ctx.height = parseInt(nSettings.chartHeight);
	482	+ } else if (nSettings.chartHeightFormat === '%') {
	483	+ ctx.style.height = nSettings.chartHeight + '%';
	484	+ }
	485	+
188	486	_this.chartObject = new Chart(ctx, {
189	487	type: 'line',
190	488	data: {
191	489	labels: dataTypes?.labels,
		@@ -190,9 +488,53 @@
190	488	data: {
191	489	labels: dataTypes?.labels,
192	490	datasets: dataTypes?.dataSets,
193	491	},
194		- options: {}
	492	+ options: {
	493	+ maintainAspectRatio: false,
	494	+ hover: nSettings.enableInteractivity ? {
	495	+ mode: 'nearest',
	496	+ intersect: true
	497	+ } : {
	498	+ mode: null,
	499	+ intersect: false
	500	+ },
	501	+ plugins: {
	502	+ tooltip:{
	503	+ enabled: nSettings.enableInteractivity,
	504	+ titleColor: nSettings.tooltipColor,
	505	+ bodyColor: nSettings.tooltipColor,
	506	+ footerColor: nSettings.tooltipColor,
	507	+ titleFont: {
	508	+ size: nSettings.tooltipFontSize || 12,
	509	+ style: nSettings.tooltipItalicText ? 'italic' : 'normal',
	510	+ weight: nSettings.tooltipBoldText === 'true' ? 'bold' : (nSettings.tooltipBoldText === 'false' ? 'normal' : undefined)
	511	+ },
	512	+ bodyFont: {
	513	+ size: nSettings.tooltipFontSize || 12,
	514	+ style: nSettings.tooltipItalicText ? 'italic' : 'normal',
	515	+ weight: nSettings.tooltipBoldText === 'true' ? 'bold' : (nSettings.tooltipBoldText === 'false' ? 'normal' : undefined)
	516	+ },
	517	+ footerFont: {
	518	+ size: nSettings.tooltipFontSize || 12,
	519	+ style: nSettings.tooltipItalicText ? 'italic' : 'normal',
	520	+ weight: nSettings.tooltipBoldText === 'true' ? 'bold' : (nSettings.tooltipBoldText === 'false' ? 'normal' : undefined)
	521	+ },
	522	+ },
	523	+ legend: {
	524	+ position: nSettings.legendPosition,
	525	+ align: nSettings.legendAlignment,
	526	+ labels: {
	527	+ color: nSettings.legendColor,
	528	+ font: {
	529	+ size: nSettings.legendFontSize,
	530	+ weight: nSettings.legendBoldText ? 'bold' : 'normal',
	531	+ style: nSettings.legendItalicText ? 'italic' : 'normal'
	532	+ }
	533	+ }
	534	+ }
	535	+ }
	536	+ }
195	537	});
196	538
197	539	_this.resizeChart();
198	540	}
		@@ -203,14 +545,74 @@
203	545	*/
204	546	ChartBuilderChartJs.prototype.configOptionsForCharts = function (settings) {
205	547	var newSettings = {};
206	548
	549	+ newSettings.chartWidth = parseInt(settings['chart_width']);
	550	+ newSettings.chartWidthFormat = settings['chart_width_format'];
	551	+ newSettings.chartHeight = settings['chart_height'];
	552	+ newSettings.chartHeightFormat = settings['chart_height_format'];
207	553	newSettings.outerRadius = settings['outer_radius'];
208	554	newSettings.sliceSpacing = settings['slice_spacing'];
209	555	newSettings.circumference = settings['circumference'];
210	556	newSettings.startAngle = settings['start_angle'];
	557	+ newSettings.rotationDegree = settings['rotation_degree'];
	558	+ newSettings.sliceColor = settings['slice_color'];
	559	+ newSettings.slicesBorderColor = settings['slices_border_color'];
	560	+ newSettings.sliceColorDefault = settings['slice_colors_default'];
	561	+ newSettings.sliceBorderWidth = settings['slice_border_width'];
	562	+ newSettings.sliceBorderColor = settings['slice_border_color'];
	563	+ newSettings.dataGroupingLimit = parseFloat(settings['data_grouping_limit']) / 100;
	564	+ newSettings.dataGroupingLabel = settings['data_grouping_label'];
	565	+ newSettings.dataGroupingColor = settings['data_grouping_color'];
	566	+ newSettings.legendPosition = settings['legend_position'];
	567	+ newSettings.legendAlignment = settings['legend_alignment'];
	568	+ newSettings.legendColor = settings['legend_color'];
	569	+ newSettings.legendFontSize = settings['legend_font_size'];
	570	+ newSettings.legendReverse = settings['legend_reverse'];
	571	+ newSettings.legendItalicText = (settings['legend_italic'] == 'on') ? true : false;
	572	+ newSettings.legendBoldText = (settings['legend_bold'] == 'on') ? true : false;
	573	+ newSettings.tooltipColor = settings['tooltip_text_color'];
	574	+ newSettings.tooltipItalicText = (settings['tooltip_italic'] == 'italic') ? true : false;
	575	+ newSettings.tooltipFontSize = settings['tooltip_font_size'];
	576	+ newSettings.tooltipBoldText = settings['tooltip_bold'];
	577	+ newSettings.showColorCode = (settings['show_color_code'] == 'checked') ? true : false;
	578	+ newSettings.tooltipText = settings['tooltip_text'];
	579	+ newSettings.enableInteractivity = (settings['enable_interactivity'] == 'off') ? false : true;
	580	+ return newSettings;
	581	+ }
211	582
212		- return newSettings;
	583	+ ChartBuilderChartJs.prototype.applyPieDataGrouping = function (dataTypes, settings) {
	584	+ var groupingLimit = parseFloat(settings.dataGroupingLimit);
	585	+ var dataSet = dataTypes && dataTypes.dataSets && dataTypes.dataSets[0];
	586	+
	587	+ if (!(groupingLimit > 0) || !dataSet || !Array.isArray(dataSet.data)) {
	588	+ return;
	589	+ }
	590	+
	591	+ var total = dataSet.data.reduce(function (sum, value) {
	592	+ return sum + (Number(value) || 0);
	593	+ }, 0);
	594	+ var groupedValue = 0;
	595	+ var groupedSlices = 0;
	596	+ var labels = [];
	597	+ var values = [];
	598	+
	599	+ dataSet.data.forEach(function (value, index) {
	600	+ var numericValue = Number(value) || 0;
	601	+ if (total > 0 && numericValue / total < groupingLimit) {
	602	+ groupedValue += numericValue;
	603	+ groupedSlices++;
	604	+ } else {
	605	+ labels.push(dataTypes.labels[index]);
	606	+ values.push(numericValue);
	607	+ }
	608	+ });
	609	+
	610	+ if (groupedSlices > 0) {
	611	+ dataTypes.labels = labels.concat([settings.dataGroupingLabel]);
	612	+ dataSet.data = values.concat([groupedValue]);
	613	+ dataSet.groupedSliceIndex = values.length;
	614	+ }
213	615	}
214	616
215	617	// Detect window resize moment to draw charts responsively
216	618	ChartBuilderChartJs.prototype.resizeChart = function(){
		@@ -253,8 +655,54 @@
253	655	data: item.slice(1).map(Number),
254	656	}));
255	657
256	658	return {labels, dataSets};
	659	+ }
	660	+
	661	+ ChartBuilderChartJs.prototype.getTooltipCallbacks = function(tooltipText, showColorCode) {
	662	+ var _this = this;
	663	+ if (showColorCode === true) {
	664	+ return {
	665	+ label: function(context) {
	666	+ var label = context.label || '';
	667	+ var value = context.parsed || 0;
	668	+ var color = context.dataset.backgroundColor[context.dataIndex];
	669	+ return ' ' + label + ': ' + value + ' (Color: ' + color + ')';
	670	+ }
	671	+ };
	672	+ } else {
	673	+ switch(tooltipText) {
	674	+ case 'percentage':
	675	+ return {
	676	+ label: function(context) {
	677	+ var label = context.label || '';
	678	+ var value = context.parsed || 0;
	679	+ var total = context.chart._metasets[context.datasetIndex].total;
	680	+ var percentage = ((value / total) * 100).toFixed(1) + '%';
	681	+ return ' ' + label + ': ' + percentage;
	682	+ }
	683	+ };
	684	+ case 'both':
	685	+ return {
	686	+ label: function(context) {
	687	+ var label = context.label || '';
	688	+ var value = context.parsed || 0;
	689	+ var total = context.chart._metasets[context.datasetIndex].total;
	690	+ var percentage = ((value / total) * 100).toFixed(1) + '%';
	691	+ return ' ' + label + ': ' + value + ' (' + percentage + ')';
	692	+ }
	693	+ };
	694	+ case 'value':
	695	+ default:
	696	+ return {
	697	+ label: function(context) {
	698	+ var label = context.label || '';
	699	+ var value = context.parsed || 0;
	700	+ return ' ' + label + ': ' + value;
	701	+ }
	702	+ };
	703	+ }
	704	+ }
257	705	}
258	706
259	707	// Update chart data and display immediately
260	708	ChartBuilderChartJs.prototype.updateChartData = function( newData ){