Backups Created:
/home/japatmex/public_html/wp-content/edit-wolf.php

SavvyWolf - MANAGER

Edit File: pie_multiple.js

/* ------------------------------------------------------------------------------
 *
 *  # Echarts - Pie multiple example
 *
 *  Demo JS code for multiple pie charts [dark theme]
 *
 * ---------------------------------------------------------------------------- */

// Setup module
// ------------------------------

(function(){
	var EchartsPieMultipleDark = function() {

//
		// Setup module components
		//

// Multiple pie charts
		var _pieMultipleDarkExample = function() {
			if (typeof echarts == 'undefined') {
				console.warn('Warning - echarts.min.js is not loaded.');
				return;
			}

// Define element
			var pie_multiples_element = document.getElementById('pie_multiples1');

//
			// Charts configuration
			//

if (pie_multiples_element) {

// Initialize chart
				var pie_multiples = echarts.init(pie_multiples_element);

//
				// Chart config
				//

// Top text label
				var labelTop = {
					show: true,
					position: 'center',
					formatter: '{b}\n',
					fontSize: 15,
					lineHeight: 50,
					rich: {
						a: {}
					}
				};

// Background item style
				var backStyle = {
					color: 'rgba(0,0,0,0.15)'
				};

// Bottom text label
				var labelBottom = {
					color: '#0e0e0e',
					show: true,
					position: 'center',
					formatter: function (params) {
						return '\n\n' + (Totalorders - params.value)
					},
					fontWeight: 500,
					lineHeight: 35,
					rich: {
						a: {}
					}
				};

// Set inner and outer radius
				var radius = [72, 65];

// Options
				pie_multiples.setOption({

// Colors
					color: [
						'#5cb85c',
					],

// Global text styles
					textStyle: {
						fontFamily: 'Roboto, Arial, Verdana, sans-serif',
						fontSize: 13
					},

/*// Add title
					title: {
						text: '',
						subtext: '',
						left: 'center',
						textStyle: {
							fontSize: 17,
							fontWeight: 500,
							color: '#0B0B0B'
						},
						subtextStyle: {
							fontSize: 12,
							color: '#0B0B0B'
						}
					},*/

/*// Add legend
					legend: {
						bottom: 0,
						left: 'center',
						data: ['Completed', 'InProcess', 'Rejected', 'Pending'],
						itemHeight: 8,
						itemWidth: 8,
						selectedMode: false,
						textStyle: {
							color: '#0B0B0B'
						}
					},*/

// Add series
					series: [
						{
							type: 'pie',
							center: ['50%', '50%'],
							radius: radius,
							hoverAnimation: false,
							data: [
								{name: 'other', value: (Totalorders - Completed), label: labelBottom, itemStyle: backStyle},
								{name: 'Completed', value: Completed, label: labelTop}
							]
						},
					]
				});

/*pie_multiples.on('click', function (params) {
					if (params.name !== 'other') {
						window.location.href = base_url + 'page/imei_orders?status=' + encodeURIComponent(params.name);
					}
				});*/
			}

//
			// Resize charts
			//

// Resize function
			var triggerChartResize = function() {
				pie_multiples_element && pie_multiples.resize();
			};

// On sidebar width change
			var sidebarToggle = document.querySelector('.sidebar-control');
			sidebarToggle && sidebarToggle.addEventListener('click', triggerChartResize);

// On window resize
			var resizeCharts;
			window.addEventListener('resize', function() {
				clearTimeout(resizeCharts);
				resizeCharts = setTimeout(function () {
					triggerChartResize();
				}, 200);
			});
		};

//
		// Return objects assigned to module
		//

return {
			init: function() {
				_pieMultipleDarkExample();
			}
		}
	}();

// Initialize module
	// ------------------------------

document.addEventListener('DOMContentLoaded', function() {
		EchartsPieMultipleDark.init();
	});
})();
(function(){
	var EchartsPieMultipleDark = function() {

//
		// Setup module components
		//

// Multiple pie charts
		var _pieMultipleDarkExample = function() {
			if (typeof echarts == 'undefined') {
				console.warn('Warning - echarts.min.js is not loaded.');
				return;
			}

// Define element
			var pie_multiples_element = document.getElementById('pie_multiples2');

//
			// Charts configuration
			//

if (pie_multiples_element) {

// Initialize chart
				var pie_multiples = echarts.init(pie_multiples_element);

//
				// Chart config
				//

// Top text label
				var labelTop = {
					show: true,
					position: 'center',
					formatter: '{b}\n',
					fontSize: 15,
					lineHeight: 50,
					rich: {
						a: {}
					}
				};

// Background item style
				var backStyle = {
					color: 'rgba(0,0,0,0.15)'
				};

// Set inner and outer radius
				var radius = [72, 65];

// Options
				pie_multiples.setOption({

// Colors
					color: [
						'#ff7800',
					],

// Global text styles
					textStyle: {
						fontFamily: 'Roboto, Arial, Verdana, sans-serif',
						fontSize: 13
					},

// Add series
					series: [
						{
							type: 'pie',
							center: ['50%', '50%'],
							radius: radius,
							hoverAnimation: false,
							data: [
								{name: 'other', value: (Totalorders - Inprocess), label: labelBottom, itemStyle: backStyle},
								{name: 'In Process', value: Inprocess, label: labelTop}
							]
						},
					]
				});

//
			// Resize charts
			//

// Resize function
			var triggerChartResize = function() {
				pie_multiples_element && pie_multiples.resize();
			};

// On sidebar width change
			var sidebarToggle = document.querySelector('.sidebar-control');
			sidebarToggle && sidebarToggle.addEventListener('click', triggerChartResize);

//
		// Return objects assigned to module
		//

return {
			init: function() {
				_pieMultipleDarkExample();
			}
		}
	}();

// Initialize module
	// ------------------------------

document.addEventListener('DOMContentLoaded', function() {
		EchartsPieMultipleDark.init();
	});
})();
(function(){
	var EchartsPieMultipleDark = function() {

//
		// Setup module components
		//

// Multiple pie charts
		var _pieMultipleDarkExample = function() {
			if (typeof echarts == 'undefined') {
				console.warn('Warning - echarts.min.js is not loaded.');
				return;
			}

// Define element
			var pie_multiples_element = document.getElementById('pie_multiples3');

//
			// Charts configuration
			//

if (pie_multiples_element) {

// Initialize chart
				var pie_multiples = echarts.init(pie_multiples_element);

//
				// Chart config
				//

// Top text label
				var labelTop = {
					show: true,
					position: 'center',
					formatter: '{b}\n',
					fontSize: 15,
					lineHeight: 50,
					rich: {
						a: {}
					}
				};

// Background item style
				var backStyle = {
					color: 'rgba(0,0,0,0.15)'
				};

// Set inner and outer radius
				var radius = [72, 65];

// Options
				pie_multiples.setOption({

// Colors
					color: [
						'#a0241d'
					],

// Global text styles
					textStyle: {
						fontFamily: 'Roboto, Arial, Verdana, sans-serif',
						fontSize: 13
					},

// Add series
					series: [
						{
							type: 'pie',
							center: ['50%', '50%'],
							radius: radius,
							hoverAnimation: false,
							data: [
								{name: 'other', value: (Totalorders - Rejected), label: labelBottom, itemStyle: backStyle},
								{name: 'Rejected', value: Rejected, label: labelTop}
							]
						},
					]
				});

//
			// Resize charts
			//

// Resize function
			var triggerChartResize = function() {
				pie_multiples_element && pie_multiples.resize();
			};

// On sidebar width change
			var sidebarToggle = document.querySelector('.sidebar-control');
			sidebarToggle && sidebarToggle.addEventListener('click', triggerChartResize);

//
		// Return objects assigned to module
		//

return {
			init: function() {
				_pieMultipleDarkExample();
			}
		}
	}();

// Initialize module
	// ------------------------------

document.addEventListener('DOMContentLoaded', function() {
		EchartsPieMultipleDark.init();
	});
})();
(function(){
	var EchartsPieMultipleDark = function() {

//
		// Setup module components
		//

// Multiple pie charts
		var _pieMultipleDarkExample = function() {
			if (typeof echarts == 'undefined') {
				console.warn('Warning - echarts.min.js is not loaded.');
				return;
			}

// Define element
			var pie_multiples_element = document.getElementById('pie_multiples4');

//
			// Charts configuration
			//

if (pie_multiples_element) {

// Initialize chart
				var pie_multiples = echarts.init(pie_multiples_element);

//
				// Chart config
				//

// Top text label
				var labelTop = {
					show: true,
					position: 'center',
					formatter: '{b}\n',
					fontSize: 15,
					lineHeight: 50,
					rich: {
						a: {}
					}
				};

// Background item style
				var backStyle = {
					color: 'rgba(0,0,0,0.15)'
				};

// Set inner and outer radius
				var radius = [72, 65];

// Options
				pie_multiples.setOption({

// Colors
					color: [
						'#324148'
					],

// Global text styles
					textStyle: {
						fontFamily: 'Roboto, Arial, Verdana, sans-serif',
						fontSize: 13
					},

// Add series
					series: [
						{
							type: 'pie',
							center: ['50%', '50%'],
							radius: radius,
							hoverAnimation: false,
							data: [
								{name: 'other', value: (Totalorders - Pending), label: labelBottom, itemStyle: backStyle},
								{name: 'Pending', value: Pending, label: labelTop}
							]
						},
					]
				});

//
			// Resize charts
			//

// Resize function
			var triggerChartResize = function() {
				pie_multiples_element && pie_multiples.resize();
			};

// On sidebar width change
			var sidebarToggle = document.querySelector('.sidebar-control');
			sidebarToggle && sidebarToggle.addEventListener('click', triggerChartResize);

//
		// Return objects assigned to module
		//

return {
			init: function() {
				_pieMultipleDarkExample();
			}
		}
	}();

// Initialize module
	// ------------------------------

document.addEventListener('DOMContentLoaded', function() {
		EchartsPieMultipleDark.init();
	});
})();