WC_Report_Sales_By_Category::get_main_chart │ public │ WC 1.0

Get the main chart.

Method of the class: WC_Report_Sales_By_Category{}

No Hooks.

Returns

null. Nothing (null).

Usage

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

WC_Report_Sales_By_Category::get_main_chart() WC Report Sales By Category::get main chart code ^{WC 10.3.3}

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

	if ( empty( $this->show_categories ) ) {
		?>
		<div class="chart-container">
			<p class="chart-prompt"><?php esc_html_e( 'Choose a category to view stats', 'woocommerce' ); ?></p>
		</div>
		<?php
	} else {
		$chart_data = array();
		$index      = 0;

		foreach ( $this->show_categories as $category ) {

			$category            = get_term( $category, 'product_cat' );
			$product_ids         = $this->get_products_in_category( $category->term_id );
			$category_chart_data = array();

			for ( $i = 0; $i <= $this->chart_interval; $i ++ ) {

				$interval_total = 0;

				switch ( $this->chart_groupby ) {
					case 'day':
						$time = strtotime( gmdate( 'Ymd', strtotime( "+{$i} DAY", $this->start_date ) ) ) * 1000;
						break;
					case 'month':
					default:
						$time = strtotime( gmdate( 'Ym', strtotime( "+{$i} MONTH", $this->start_date ) ) . '01' ) * 1000;
						break;
				}

				foreach ( $product_ids as $id ) {

					if ( isset( $this->item_sales_and_times[ $time ][ $id ] ) ) {
						$interval_total += $this->item_sales_and_times[ $time ][ $id ];
					}
				}

				$category_chart_data[] = array( $time, (float) wc_format_decimal( $interval_total, wc_get_price_decimals() ) );
			}

			$chart_data[ $category->term_id ]['category'] = $category->name;
			$chart_data[ $category->term_id ]['data']     = $category_chart_data;

			$index++;
		}
		?>
		<div class="chart-container">
			<div class="chart-placeholder main"></div>
		</div>
		<?php // @codingStandardsIgnoreStart ?>
		<script type="text/javascript">
			var main_chart;

			jQuery(function(){
				var drawGraph = function( highlight ) {
					var series = [
						<?php
							$index = 0;
							foreach ( $chart_data as $data ) {
								$color  = isset( $this->chart_colours[ $index ] ) ? $this->chart_colours[ $index ] : $this->chart_colours[0];
								$width  = $this->barwidth / count( $chart_data );
								$offset = ( $width * $index );
								$series = $data['data'];

								foreach ( $series as $key => $series_data ) {
									$series[ $key ][0] = $series_data[0] + $offset;
								}

								$series = wp_json_encode( $series );

								echo '{
										label: "' . esc_js( $data['category'] ) . '",
										data: JSON.parse( decodeURIComponent( "' . rawurlencode( $series ) . '" ) ),
										color: "' . $color . '",
										bars: {
											fillColor: "' . $color . '",
											fill: true,
											show: true,
											lineWidth: 1,
											align: "center",
											barWidth: ' . $width * 0.75 . ',
											stack: false
										},
										' . $this->get_currency_tooltip() . ',
										enable_tooltip: true,
										prepend_label: true
									},';
								$index++;
							}
						?>
					];

					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',
								reserveSpace: true,
								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 $this->chart_groupby; ?>"],
								tickSize: [1, "<?php echo $this->chart_groupby; ?>"],
								font: {
									color: "#aaa"
								}
							} ],
							yaxes: [
								{
									min: 0,
									tickDecimals: 2,
									color: 'transparent',
									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 // @codingStandardsIgnoreEnd ?>
		<?php
	}
}