Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Data Visualization with WooCommmerce, WordPress, JavaScript and Beyond - WooConf 2017

Zac Gordon
October 20, 2017

Data Visualization with WooCommmerce, WordPress, JavaScript and Beyond - WooConf 2017

My talk from WooConf 2017 on data visualization.

Zac Gordon

October 20, 2017
Tweet

More Decks by Zac Gordon

Other Decks in Technology

Transcript

  1. WooConf 2017 Data Visualization @zgordon – Where Dataviz Starts “How

    Can You See Your Data If You Can’t See It?”
  2. WooConf 2017 Data Visualization @zgordon – Where Dataviz Starts “How

    Can You Know Your Data If You Can’t See It?”
  3. WooConf 2017 Data Visualization @zgordon 1. Getting the Data You

    Need 2. Visualization Options with JavaScript 3. How to Integrate Data w Visualization Tangible Takeaways
  4. WooConf 2017 Data Visualization @zgordon Data Visualization WooConf 2017 @zgordon

    /orders/<id> /order/<id>/notes /orders/<id>/refunds /products/<id> /products/<id>/variations /products/attributes/<id> /products/attributes/<id>/terms /products/categories/<id> /products/shipping_classes/<id> /products/tags/<id> /reports/<id> /reports/sales /reports/top_sellers /taxes/<id> /taxes/classes /webhooks/<id> /settings /settings/group/<id> /payment_gateways /shipping/zones/<id> /shipping/zones/<id>/locations /shipping/zones/<id>/methods /shipping_methods/<id> /system_status/<id> /system_status/tools/<id>
  5. WooConf 2017 Data Visualization @zgordon Data Visualization WooConf 2017 @zgordon

    /orders/<id> /orders/<id>/refunds /reports/<id> /reports/sales /reports/top_sellers /webhooks/<id>
  6. WooConf 2017 Data Visualization @zgordon Data Visualization WooConf 2017 @zgordon

    {“id”:32417,"parent_id": 0,"number":"32417","order_key":"wc_order_59e534837411c","created_via":"checkout","version":"3.2.1","status":"completed","currency":"USD","date_created":"2017-10-16T22:36:51","date_created_gmt":"2017-10-16T22:36:51","date_modifie d":"2017-10-16T22:36:51","date_modified_gmt":"2017-10-16T22:36:51","discount_total":"397.00","discount_tax":"0.00","shipping_total":"0.00","shipping_tax":"0.00","cart_tax":"0.00","total":"0.00","total_tax":"0.00","prices_include_tax":false,"c ustomer_id":1038,"customer_ip_address":"24.128.171.54","customer_user_agent":"mozilla\/5.0(macintosh;intelmacosx10_12_6)applewebkit\/537.36(khtml,likegecko)chrome\/61.0.3163.100safari\/537.36","customer_note":"","billing": {"first_name":"Test","last_name":"Person","company":"","address_1":"","address_2":"","city":"Detroit","state":"MI","postcode":"","country":"US","email":"[email protected]","phone":""},"shipping": {"first_name":"","last_name":"","company":"","address_1":"","address_2":"","city":"","state":"","postcode":"","country":""},"payment_method":"","payment_method_title":"","transaction_id":"","date_paid":"2017-10-16T22:36:51","date_paid_g mt":"2017-10-16T22:36:51","date_completed":"2017-10-16T22:36:51","date_completed_gmt":"2017-10-16T22:36:51","cart_hash":"8022970d631d1c73a2aee9b0c2493964","meta_data":[{"id": 162137,"key":"_woocommerce_t4m_discount_type","value":""},{"id":162138,"key":"_woocommerce_t4m_discount_coeffs","value":"null"},{"id":162139,"key":"_fue_recorded","value":"1"},{"id": 162140,"key":"_download_permissions_granted","value":"yes"},{"id":162144,"key":"wpf_complete","value":"1"},{"id":162145,"key":"_wcpdf_invoice_date","value":"1508193411"},{"id": 162146,"key":"_wcpdf_invoice_date_formatted","value":"2017-10-1622:36:51"},{"id":162147,"key":"_wcpdf_invoice_number","value":"Invoice00067"},{"id":162148,"key":"_wcpdf_invoice_number_data","value":{"number": 67,"formatted_number":"Invoice00067","prefix":"Invoice","suffix":"","document_type":"invoice","order_id":32417,"padding":"5"}},{"id":162149,"key":"_order_status_emails_queued","value":"1"},{"id": 162150,"key":"_order_stock_reduced","value":"yes"}],"line_items":[{"id":2087,"name":"1YrCohortProgramUpgrade","product_id":32243,"variation_id":0,"quantity": 1,"tax_class":"","subtotal":"397.00","subtotal_tax":"0.00","total":"0.00","total_tax":"0.00","taxes":[],"meta_data":[],"sku":"COHORT-UPGRADE","price":0}],"tax_lines":[],"shipping_lines":[],"fee_lines":[],"coupon_lines":[{"id":2088,"code":"zac- testeroo","discount":"397","discount_tax":"0","meta_data":[{"id":15170,"key":"coupon_data","value":{"id":32265,"code":"zac-testeroo","amount":"100","date_created":{"date":"2017-10-1604:05:12.000000","timezone_type": 1,"timezone":"+00:00"},"date_modified":{"date":"2017-10-1622:04:57.000000","timezone_type" 1,"timezone":"+00:00"},"date_expires":null,"discount_type":"percent","description":"Youknowf o rbangingonthingswithhammersandthesuch","usage_count": 46,"individual_use":false,"product_ids":[],"excluded_product_ids":[],"usage_limit":0,"usage_limit_per_user": 0,"limit_usage_to_x_items":null,"free_shipping":false,"product_categories":[],"excluded_product_categories":[],"exclude_sale_items":false,"minimum_amount":"","maximum_amount":"","email_restrictions": ["[email protected]","[email protected]"],"used_by": ["1038","1038","1038","1038","1038","1038","1038","1038","1038","1038","1038","1038","4","1038","1038","1038","1038","1038","1038","1038","1038","1038","1038","1038","1038","1038","1038","1038","1038","1038","1038","1038","1038","1038" ,"1038","1038","1038","1038","1038","1038","1038","1038","1038","1038","1038","1038"],"virtual":false,"meta_data":[{"id":157976,"key":"tcb2_ready","value":"1"},{"id":157979,"key":"_publicize_pending","value":"1"},{"id": 158002,"key":"_learndash_plus","value":{"protect":false,"selectedlevels":[]}},{"id":158003,"key":"wpf-settings-woo","value":{"apply_tags":["COUPON-ZAC-TESTEROO"]}},{"id":161793,"key":"_wc_url_coupons_unique_url","value":"coupon\/zac- gets-shit-free"},{"id":161794,"key":"_wc_url_coupons_redirect_page","value":"5744"},{"id":161795,"key":"_wc_url_coupons_redirect_page_type","value":"page"},{"id":161796,"key":"_wc_url_coupons_product_ids","value": [32243,32148,787]}]}}]}],"refunds":[],"_links":{"self":[{"href":"https:\/\/javascriptforwp.com\/wp-json\/wc\/v2\/orders\/32417"}],"collection":[{"href":"https:\/\/javascriptforwp.com\/wp-json\/wc\/v2\/orders"}],"customer":[{"href":"https:\/\/ javascriptforwp.com\/wp-json\/wc\/v2\/customers\/1038"}]}} /wc/v2/orders/32417
  7. WooConf 2017 Data Visualization @zgordon Data Visualization WooConf 2017 @zgordon

    add_action( 'rest_api_init', function () { register_rest_route( 'jsforwp/v2', '/order/(?P<id>\d+)', [ 'methods' => 'GET', 'callback' => 'jsforwp_get_order', ] ); } );
  8. WooConf 2017 Data Visualization @zgordon Data Visualization WooConf 2017 @zgordon

    function jsforwp_get_order( $order_id ) { $order = wc_get_order( $order_id ); if ( empty( $order ) ) { return null; } $jsforwp_order['date'] = $order->date_created; $jsforwp_order['id'] = $order->id; $jsforwp_order['title'] = $order->post_title; $jsforwp_order['total'] = $order->order_total; return $jsforwp_order; }
  9. WooConf 2017 Data Visualization @zgordon Data Visualization WooConf 2017 @zgordon

    { "id": 32417, "date": “2017-10-16T22:36:51", "title": “Order from Test Zakar”, "total": "397.00" } /jsforwp/v1/orders/32417
  10. WooConf 2017 Data Visualization @zgordon Data Visualization WooConf 2017 @zgordon

    function devin_walker_get_total_sales() { global $wpdb; $order_totals = apply_filters( 'woocommerce_reports_sales_overview_order_totals', $wpdb->get_row( "SELECT SUM(meta.meta_value) AS total_sales, COUNT(posts.ID) AS total_orders FROM {$wpdb->posts} AS posts LEFT JOIN {$wpdb->postmeta} AS meta ON posts.ID = meta.post_id WHERE meta.meta_key = '_order_total' AND posts.post_type = 'shop_order' AND posts.post_status IN ( '" . implode( "','", array( 'wc-completed', 'wc-processing', 'wc-on-hold' ) ) . "' )" ) ); return absint( $order_totals->total_sales ); } https://imdev.in/woocommerce-how-to-get-total-sales-of-all-products-number/
  11. WooConf 2017 Data Visualization @zgordon 1. Getting the Data You

    Need 2. Visualization Options with JavaScript 3. How to Integrate Data w Visualization Tangible Takeaways
  12. WooConf 2017 Data Visualization @zgordon Visual Analysis 
 Best Practices

    White Paper from Tableau 2. Visualization Options
  13. WooConf 2017 Data Visualization @zgordon Use Line, Area, and Bar

    Charts For Trends Over Time. 2. Visualization Options
  14. WooConf 2017 Data Visualization @zgordon Not Just What Graph You

    Use, But How It Is Designed 2. Visualization Options
  15. WooConf 2017 Data Visualization @zgordon I Would Recommend Studying Data

    Visualization (Deeply?) 2. Visualization Options
  16. WooConf 2017 Data Visualization @zgordon Let’s Geek Out 
 Data

    Visualization Tools 2. Visualization Options
  17. WooConf 2017 Data Visualization @zgordon At Some Point It Doesn’t

    Make Sense to Roll Your Own 2. Visualization Options
  18. WooConf 2017 Data Visualization @zgordon 1. Getting the Data You

    Need 2. Visualization Options with JavaScript 3. How to Integrate Data w Visualization Tangible Takeaways
  19. WooConf 2017 Data Visualization @zgordon 1. Getting the Data You

    Need 2. Visualization Options with JavaScript 3. How to Integrate Data w Visualization Tangible Takeaways
  20. WooConf 2017 Data Visualization @zgordon Data Visualization WooConf 2017 @zgordon

    /orders/<id> /order/<id>/notes /orders/<id>/refunds /products/<id> /products/<id>/variations /products/attributes/<id> /products/attributes/<id>/terms /products/categories/<id> /products/shipping_classes/<id> /products/tags/<id> /reports/<id> /reports/sales /reports/top_sellers /taxes/<id> /taxes/classes /webhooks/<id> /settings /settings/group/<id> /payment_gateways /shipping/zones/<id> /shipping/zones/<id>/locations /shipping/zones/<id>/methods /shipping_methods/<id> /system_status/<id> /system_status/tools/<id>
  21. WooConf 2017 Data Visualization @zgordon Data Visualization WooConf 2017 @zgordon

    /orders/<id> /orders/<id>/refunds /reports/<id> /reports/sales /reports/top_sellers /webhooks/<id>
  22. WooConf 2017 Data Visualization @zgordon Data Visualization WooConf 2017 @zgordon

    {“id”:32417,"parent_id": 0,"number":"32417","order_key":"wc_order_59e534837411c","created_via":"checkout","version":"3.2.1","status":"completed","currency":"USD","date_created":"2017-10-16T22:36:51","date_created_gmt":"2017-10-16T22:36:51","date_modifie d":"2017-10-16T22:36:51","date_modified_gmt":"2017-10-16T22:36:51","discount_total":"397.00","discount_tax":"0.00","shipping_total":"0.00","shipping_tax":"0.00","cart_tax":"0.00","total":"0.00","total_tax":"0.00","prices_include_tax":false,"c ustomer_id":1038,"customer_ip_address":"24.128.171.54","customer_user_agent":"mozilla\/5.0(macintosh;intelmacosx10_12_6)applewebkit\/537.36(khtml,likegecko)chrome\/61.0.3163.100safari\/537.36","customer_note":"","billing": {"first_name":"Test","last_name":"Person","company":"","address_1":"","address_2":"","city":"Detroit","state":"MI","postcode":"","country":"US","email":"[email protected]","phone":""},"shipping": {"first_name":"","last_name":"","company":"","address_1":"","address_2":"","city":"","state":"","postcode":"","country":""},"payment_method":"","payment_method_title":"","transaction_id":"","date_paid":"2017-10-16T22:36:51","date_paid_g mt":"2017-10-16T22:36:51","date_completed":"2017-10-16T22:36:51","date_completed_gmt":"2017-10-16T22:36:51","cart_hash":"8022970d631d1c73a2aee9b0c2493964","meta_data":[{"id": 162137,"key":"_woocommerce_t4m_discount_type","value":""},{"id":162138,"key":"_woocommerce_t4m_discount_coeffs","value":"null"},{"id":162139,"key":"_fue_recorded","value":"1"},{"id": 162140,"key":"_download_permissions_granted","value":"yes"},{"id":162144,"key":"wpf_complete","value":"1"},{"id":162145,"key":"_wcpdf_invoice_date","value":"1508193411"},{"id": 162146,"key":"_wcpdf_invoice_date_formatted","value":"2017-10-1622:36:51"},{"id":162147,"key":"_wcpdf_invoice_number","value":"Invoice00067"},{"id":162148,"key":"_wcpdf_invoice_number_data","value":{"number": 67,"formatted_number":"Invoice00067","prefix":"Invoice","suffix":"","document_type":"invoice","order_id":32417,"padding":"5"}},{"id":162149,"key":"_order_status_emails_queued","value":"1"},{"id": 162150,"key":"_order_stock_reduced","value":"yes"}],"line_items":[{"id":2087,"name":"1YrCohortProgramUpgrade","product_id":32243,"variation_id":0,"quantity": 1,"tax_class":"","subtotal":"397.00","subtotal_tax":"0.00","total":"0.00","total_tax":"0.00","taxes":[],"meta_data":[],"sku":"COHORT-UPGRADE","price":0}],"tax_lines":[],"shipping_lines":[],"fee_lines":[],"coupon_lines":[{"id":2088,"code":"zac- testeroo","discount":"397","discount_tax":"0","meta_data":[{"id":15170,"key":"coupon_data","value":{"id":32265,"code":"zac-testeroo","amount":"100","date_created":{"date":"2017-10-1604:05:12.000000","timezone_type": 1,"timezone":"+00:00"},"date_modified":{"date":"2017-10-1622:04:57.000000","timezone_type" 1,"timezone":"+00:00"},"date_expires":null,"discount_type":"percent","description":"Youknowf o rbangingonthingswithhammersandthesuch","usage_count": 46,"individual_use":false,"product_ids":[],"excluded_product_ids":[],"usage_limit":0,"usage_limit_per_user": 0,"limit_usage_to_x_items":null,"free_shipping":false,"product_categories":[],"excluded_product_categories":[],"exclude_sale_items":false,"minimum_amount":"","maximum_amount":"","email_restrictions": ["[email protected]","[email protected]"],"used_by": ["1038","1038","1038","1038","1038","1038","1038","1038","1038","1038","1038","1038","4","1038","1038","1038","1038","1038","1038","1038","1038","1038","1038","1038","1038","1038","1038","1038","1038","1038","1038","1038","1038","1038" ,"1038","1038","1038","1038","1038","1038","1038","1038","1038","1038","1038","1038"],"virtual":false,"meta_data":[{"id":157976,"key":"tcb2_ready","value":"1"},{"id":157979,"key":"_publicize_pending","value":"1"},{"id": 158002,"key":"_learndash_plus","value":{"protect":false,"selectedlevels":[]}},{"id":158003,"key":"wpf-settings-woo","value":{"apply_tags":["COUPON-ZAC-TESTEROO"]}},{"id":161793,"key":"_wc_url_coupons_unique_url","value":"coupon\/zac- gets-shit-free"},{"id":161794,"key":"_wc_url_coupons_redirect_page","value":"5744"},{"id":161795,"key":"_wc_url_coupons_redirect_page_type","value":"page"},{"id":161796,"key":"_wc_url_coupons_product_ids","value": [32243,32148,787]}]}}]}],"refunds":[],"_links":{"self":[{"href":"https:\/\/javascriptforwp.com\/wp-json\/wc\/v2\/orders\/32417"}],"collection":[{"href":"https:\/\/javascriptforwp.com\/wp-json\/wc\/v2\/orders"}],"customer":[{"href":"https:\/\/ javascriptforwp.com\/wp-json\/wc\/v2\/customers\/1038"}]}} /wc/v2/orders/32417
  23. WooConf 2017 Data Visualization @zgordon Data Visualization WooConf 2017 @zgordon

    add_action( 'rest_api_init', function () { register_rest_route( 'jsforwp/v2', '/order/(?P<id>\d+)', [ 'methods' => 'GET', 'callback' => 'jsforwp_get_order', ] ); } );
  24. WooConf 2017 Data Visualization @zgordon Data Visualization WooConf 2017 @zgordon

    function jsforwp_get_order( $order_id ) { $order = wc_get_order( $order_id ); if ( empty( $order ) ) { return null; } $jsforwp_order['date'] = $order->date_created; $jsforwp_order['id'] = $order->id; $jsforwp_order['title'] = $order->post_title; $jsforwp_order['total'] = $order->order_total; return $jsforwp_order; }
  25. WooConf 2017 Data Visualization @zgordon Data Visualization WooConf 2017 @zgordon

    { "id": 32417, "date": “2017-10-16T22:36:51", "title": “Order from Test Zakar”, "total": "397.00" } /jsforwp/v1/orders/32417
  26. WooConf 2017 Data Visualization @zgordon Data Visualization WooConf 2017 @zgordon

    function devin_walker_get_total_sales() { global $wpdb; $order_totals = apply_filters( 'woocommerce_reports_sales_overview_order_totals', $wpdb->get_row( "SELECT SUM(meta.meta_value) AS total_sales, COUNT(posts.ID) AS total_orders FROM {$wpdb->posts} AS posts LEFT JOIN {$wpdb->postmeta} AS meta ON posts.ID = meta.post_id WHERE meta.meta_key = '_order_total' AND posts.post_type = 'shop_order' AND posts.post_status IN ( '" . implode( "','", array( 'wc-completed', 'wc-processing', 'wc-on-hold' ) ) . "' )" ) ); return absint( $order_totals->total_sales ); } https://imdev.in/woocommerce-how-to-get-total-sales-of-all-products-number/