Add WordPress user custom meta to chartjs vertically stacked chart in Divi theme

I have created a user dashboard using the Divi theme where I need to add a chart like the attached screenshot. The data are specific for every different user. I have tried many premium plugins but none of them fits my requirement.

This is how I added the user meta -

?php
function hfa_custom_user_fields( $user ) {
    $services_subscribed_options = array(
        'Airbnb' = 'Airbnb',
        'Vrbo' = 'Vrbo',
        'Trucking' = 'Trucking'
    );
    $services_subscribed = get_user_meta($user-ID, 'services_subscribed', true);
    $services_subscribed = (array)unserialize($services_subscribed);
    $total_invest = get_user_meta($user-ID, 'total_invest', true);
    $total_invest = empty($total_invest) ? '0' : $total_invest;
    $total_spent = get_user_meta($user-ID, 'total_spent', true);
    $total_spent = empty($total_spent) ? '0' : $total_spent;
    $total_made = get_user_meta($user-ID, 'total_made', true);
    $total_made = empty($total_made) ? '0' : $total_made;
    $airbnb_invest = get_user_meta($user-ID, 'airbnb_invest', true);
    $airbnb_invest = empty($airbnb_invest) ? '0' : $airbnb_invest;
    $airbnb_spent = get_user_meta($user-ID, 'airbnb_spent', true);
    $airbnb_spent = empty($airbnb_spent) ? '0' : $airbnb_spent;
    $airbnb_made = get_user_meta($user-ID, 'airbnb_made', true);
    $airbnb_made = empty($airbnb_made) ? '0' : $airbnb_made;
    $vrbo_invest = get_user_meta($user-ID, 'vrbo_invest', true);
    $vrbo_invest = empty($vrbo_invest) ? '0' : $vrbo_invest;
    $vrbo_spent = get_user_meta($user-ID, 'vrbo_spent', true);
    $vrbo_spent = empty($vrbo_spent) ? '0' : $vrbo_spent;
    $vrbo_made = get_user_meta($user-ID, 'vrbo_made', true);
    $vrbo_made = empty($vrbo_made) ? '0' : $vrbo_made;
    $trucking_invest = get_user_meta($user-ID, 'trucking_invest', true);
    $trucking_invest = empty($trucking_invest) ? '0' : $trucking_invest;
    $trucking_spent = get_user_meta($user-ID, 'trucking_spent', true);
    $trucking_spent = empty($trucking_spent) ? '0' : $trucking_spent;
    $trucking_made = get_user_meta($user-ID, 'trucking_made', true);
    $trucking_made = empty($trucking_made) ? '0' : $trucking_made;
    $output = '';
    $output .= 'table class=form-table';
        $output .= 'tr';
            $output .= 'th colspan=2';
                $output .= 'h1Hands-free Automation Services Subscription Information/h1';
            $output .= '/th';
        $output .= '/tr';
        $output .= 'tr';
            $output .= 'thlabel for=automation_services'.__('Services Subscribed','handsfreeautomation').'/label/th';
            $output .= 'td';
                foreach($services_subscribed_options as $key=$item){
                    $output .= 'labelinput'.(in_array($key,$services_subscribed) ? ' checked':'').' type=checkbox value='.$key.' name=services_subscribed[] /nbsp;'.$item.'/labelnbsp;nbsp;nbsp;nbsp;';
                }
            $output .= '/td';
        $output .= '/tr';
        $output .= 'tr';
            $output .= 'th colspan=2';
                $output .= 'h3Total Subscription Informations/h3';
            $output .= '/th';
        $output .= '/tr';
        $output .= 'tr';
            $output .= 'thlabel for=total_invest'.__('Money Invest','handsfreeautomation').'/label/th';
            $output .= 'td';
                $output .= 'input value='.$total_invest.'  type=number id=total_invest name=total_invest placeholder= /';
            $output .= '/td';
        $output .= '/tr';
        $output .= 'tr';
            $output .= 'thlabel for=total_spent'.__('Money Spent','handsfreeautomation').'/label/th';
            $output .= 'td';
                $output .= 'input value='.$total_spent.'  type=number id=total_spent name=total_spent placeholder= /';
            $output .= '/td';
        $output .= '/tr';
        $output .= 'tr';
            $output .= 'thlabel for=total_made'.__('Money Made','handsfreeautomation').'/label/th';
            $output .= 'td';
                $output .= 'input value='.$total_made.'  type=number id=total_made name=total_made placeholder= /';
            $output .= '/td';
        $output .= '/tr';
        $output .= 'tr';
            $output .= 'th colspan=2';
                $output .= 'h3Airbnb Informations/h3';
            $output .= '/th';
        $output .= '/tr';
        $output .= 'tr';
            $output .= 'thlabel for=airbnb_invest'.__('Money Invested','handsfreeautomation').'/label/th';
            $output .= 'td';
                $output .= 'input value='.$airbnb_invest.'  type=number id=airbnb_invest name=airbnb_invest placeholder= /';
            $output .= '/td';
        $output .= '/tr';
        $output .= 'tr';
            $output .= 'thlabel for=airbnb_spent'.__('Money Spent','handsfreeautomation').'/label/th';
            $output .= 'td';
                $output .= 'input value='.$airbnb_spent.'  type=number id=airbnb_spent name=airbnb_spent placeholder= /';
            $output .= '/td';
        $output .= '/tr';
        $output .= 'tr';
            $output .= 'thlabel for=airbnb_made'.__('Money Made','handsfreeautomation').'/label/th';
            $output .= 'td';
                $output .= 'input value='.$airbnb_made.'  type=number id=airbnb_made name=airbnb_made placeholder= /';
            $output .= '/td';
        $output .= '/tr';
        $output .= 'tr';
            $output .= 'th colspan=2';
                $output .= 'h3Vrbo Informations/h3';
            $output .= '/th';
        $output .= '/tr';
        $output .= 'tr';
            $output .= 'thlabel for=vrbo_invest'.__('Money Invest','handsfreeautomation').'/label/th';
            $output .= 'td';
                $output .= 'input value='.$vrbo_invest.'  type=number id=vrbo_invest name=vrbo_invest placeholder= /';
            $output .= '/td';
        $output .= '/tr';
        $output .= 'tr';
            $output .= 'thlabel for=vrbo_spent'.__('Money Spent','handsfreeautomation').'/label/th';
            $output .= 'td';
                $output .= 'input value='.$vrbo_spent.'  type=number id=vrbo_spent name=vrbo_spent placeholder= /';
            $output .= '/td';
        $output .= '/tr';
        $output .= 'tr';
            $output .= 'thlabel for=vrbo_made'.__('Money Made','handsfreeautomation').'/label/th';
            $output .= 'td';
                $output .= 'input value='.$vrbo_made.'  type=number id=vrbo_made name=vrbo_made placeholder= /';
            $output .= '/td';
        $output .= '/tr';
        $output .= 'tr';
            $output .= 'th colspan=2';
                $output .= 'h3Trucking Informations/h3';
            $output .= '/th';
        $output .= '/tr';
        $output .= 'tr';
            $output .= 'thlabel for=trucking_invest'.__('Money Invest','handsfreeautomation').'/label/th';
            $output .= 'td';
                $output .= 'input value='.$trucking_invest.'  type=number id=trucking_invest name=trucking_invest placeholder= /';
            $output .= '/td';
        $output .= '/tr';
        $output .= 'tr';
            $output .= 'thlabel for=trucking_spent'.__('Money Spent','handsfreeautomation').'/label/th';
            $output .= 'td';
                $output .= 'input value='.$trucking_spent.'  type=number id=trucking_spent name=trucking_spent placeholder= /';
            $output .= '/td';
        $output .= '/tr';
        $output .= 'tr';
            $output .= 'thlabel for=trucking_made'.__('Money Made','handsfreeautomation').'/label/th';
            $output .= 'td';
                $output .= 'input value='.$trucking_made.'  type=number id=trucking_made name=trucking_made placeholder= /';
            $output .= '/td';
        $output .= '/tr';
    $output .= '/table';
    echo $output;
}

add_action( 'show_user_profile', 'hfa_custom_user_fields' );
add_action( 'edit_user_profile', 'hfa_custom_user_fields' );

function hfa_custom_user_fields_save( $user_id ) {

    if ( !current_user_can( 'edit_user', $user_id ) ) {
        return false;
    }
    update_user_meta($user_id, 'services_subscribed', serialize($_POST['services_subscribed']));
    update_user_meta($user_id, 'total_invest', $_POST['total_invest']);
    update_user_meta($user_id, 'total_spent', $_POST['total_spent']);
    update_user_meta($user_id, 'total_made', $_POST['total_made']);
    update_user_meta($user_id, 'airbnb_invest', $_POST['airbnb_invest']);
    update_user_meta($user_id, 'airbnb_spent', $_POST['airbnb_spent']);
    update_user_meta($user_id, 'airbnb_made', $_POST['airbnb_made']);
    update_user_meta($user_id, 'vrbo_invest', $_POST['vrbo_invest']);
    update_user_meta($user_id, 'vrbo_spent', $_POST['vrbo_spent']);
    update_user_meta($user_id, 'vrbo_made', $_POST['vrbo_made']);
    update_user_meta($user_id, 'trucking_invest', $_POST['trucking_invest']);
    update_user_meta($user_id, 'trucking_spent', $_POST['trucking_spent']);
    update_user_meta($user_id, 'trucking_made', $_POST['trucking_made']);
}

add_action( 'personal_options_update', 'hfa_custom_user_fields_save' );
add_action( 'edit_user_profile_update', 'hfa_custom_user_fields_save' );

Topic user-meta custom-field Wordpress

Category Web

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.