WC_Report_Customers::get_main_chart() │ public │ WC 1.0

Output the main chart.

Method of the class: WC_Report_Customers{}

No Hooks.

Return

null. Nothing (null).

Usage

$WC_Report_Customers = new WC_Report_Customers();
$WC_Report_Customers->get_main_chart();

WC_Report_Customers::get_main_chart() WC Report Customers::get main chart code ^{WC 9.7.1}

<?php
public function get_main_chart() {
	global $wp_locale;

	$customer_orders = $this->get_order_report_data(
		array(
			'data'         => array(
				'ID'        => array(
					'type'     => 'post_data',
					'function' => 'COUNT',
					'name'     => 'total_orders',
				),
				'post_date' => array(
					'type'     => 'post_data',
					'function' => '',
					'name'     => 'post_date',
				),
			),
			'where_meta'   => array(
				array(
					'meta_key'   => '_customer_user',
					'meta_value' => '0',
					'operator'   => '>',
				),
			),
			'group_by'     => $this->group_by_query,
			'order_by'     => 'post_date ASC',
			'query_type'   => 'get_results',
			'filter_range' => true,
		)
	);

	$guest_orders = $this->get_order_report_data(
		array(
			'data'         => array(
				'ID'        => array(
					'type'     => 'post_data',
					'function' => 'COUNT',
					'name'     => 'total_orders',
				),
				'post_date' => array(
					'type'     => 'post_data',
					'function' => '',
					'name'     => 'post_date',
				),
			),
			'where_meta'   => array(
				array(
					'meta_key'   => '_customer_user',
					'meta_value' => '0',
					'operator'   => '=',
				),
			),
			'group_by'     => $this->group_by_query,
			'order_by'     => 'post_date ASC',
			'query_type'   => 'get_results',
			'filter_range' => true,
		)
	);

	$signups         = $this->prepare_chart_data( $this->customers, 'user_registered', '', $this->chart_interval, $this->start_date, $this->chart_groupby );
	$customer_orders = $this->prepare_chart_data( $customer_orders, 'post_date', 'total_orders', $this->chart_interval, $this->start_date, $this->chart_groupby );
	$guest_orders    = $this->prepare_chart_data( $guest_orders, 'post_date', 'total_orders', $this->chart_interval, $this->start_date, $this->chart_groupby );

	$chart_data = wp_json_encode(
		array(
			'signups'         => array_values( $signups ),
			'customer_orders' => array_values( $customer_orders ),
			'guest_orders'    => array_values( $guest_orders ),
		)
	);
	?>
	<div class="chart-container">
		<div class="chart-placeholder main"></div>
	</div>
	<script type="text/javascript">
		var main_chart;

		jQuery(function(){
			var chart_data = JSON.parse( decodeURIComponent( '<?php echo rawurlencode( $chart_data ); ?>' ) );

			var drawGraph = function( highlight ) {
				var series = [
						{
							label: "<?php echo esc_js( __( 'Customer orders', 'woocommerce' ) ); ?>",
							data: chart_data.customer_orders,
							color: '<?php echo esc_html( $this->chart_colours['customers'] ); ?>',
							bars: { fillColor: '<?php echo esc_html( $this->chart_colours['customers'] ); ?>', fill: true, show: true, lineWidth: 0, barWidth: <?php echo esc_html( $this->barwidth ); ?> * 0.5, align: 'center' },
							shadowSize: 0,
							enable_tooltip: true,
							append_tooltip: "<?php echo esc_html( ' ' . __( 'customer orders', 'woocommerce' ) ); ?>",
							stack: true,
						},
						{
							label: "<?php echo esc_js( __( 'Guest orders', 'woocommerce' ) ); ?>",
							data: chart_data.guest_orders,
							color: '<?php echo esc_html( $this->chart_colours['guests'] ); ?>',
							bars: { fillColor: '<?php echo esc_html( $this->chart_colours['guests'] ); ?>', fill: true, show: true, lineWidth: 0, barWidth: <?php echo esc_html( $this->barwidth ); ?> * 0.5, align: 'center' },
							shadowSize: 0,
							enable_tooltip: true,
							append_tooltip: "<?php echo esc_html( ' ' . __( 'guest orders', 'woocommerce' ) ); ?>",
							stack: true,
						},
						{
							label: "<?php echo esc_js( __( 'Signups', 'woocommerce' ) ); ?>",
							data: chart_data.signups,
							color: '<?php echo esc_html( $this->chart_colours['signups'] ); ?>',
							points: { show: true, radius: 5, lineWidth: 3, fillColor: '#fff', fill: true },
							lines: { show: true, lineWidth: 4, fill: false },
							shadowSize: 0,
							enable_tooltip: true,
							append_tooltip: "<?php echo esc_html( ' ' . __( 'new users', 'woocommerce' ) ); ?>",
							stack: false
						},
					];

				if ( highlight !== 'undefined' && series[ highlight ] ) {
					highlight_series = series[ highlight ];

					highlight_series.color = '#9c5d90';

					if ( highlight_series.bars )
						highlight_series.bars.fillColor = '#9c5d90';

					if ( highlight_series.lines ) {
						highlight_series.lines.lineWidth = 5;
					}
				}

				main_chart = jQuery.plot(
					jQuery('.chart-placeholder.main'),
					series,
					{
						legend: {
							show: false
						},
						grid: {
							color: '#aaa',
							borderColor: 'transparent',
							borderWidth: 0,
							hoverable: true
						},
						xaxes: [ {
							color: '#aaa',
							position: "bottom",
							tickColor: 'transparent',
							mode: "time",
							timeformat: "<?php echo ( 'day' === $this->chart_groupby ) ? '%d %b' : '%b'; ?>",
							monthNames: JSON.parse( decodeURIComponent( '<?php echo rawurlencode( wp_json_encode( array_values( $wp_locale->month_abbrev ) ) ); ?>' ) ),
							tickLength: 1,
							minTickSize: [1, "<?php echo esc_html( $this->chart_groupby ); ?>"],
							tickSize: [1, "<?php echo esc_html( $this->chart_groupby ); ?>"],
							font: {
								color: "#aaa"
							}
						} ],
						yaxes: [
							{
								min: 0,
								minTickSize: 1,
								tickDecimals: 0,
								color: '#ecf0f1',
								font: { color: "#aaa" }
							}
						],
					}
				);
				jQuery('.chart-placeholder').trigger( 'resize' );
			}

			drawGraph();

			jQuery('.highlight_series').on( 'mouseenter',
				function() {
					drawGraph( jQuery(this).data('series') );
				} ).on( 'mouseleave',
				function() {
					drawGraph();
				}
			);
		});
	</script>
	<?php
}