Google Chart Integration

[gfran5]

I would love to include a pie graph on my members profile, where users can enter two different values e.g. Height & Weight and it is automatically produced as a pie graph.

I noticed the Google Charts API and it seems like it would be possible to do, i'm not a coder so i'm not sure. Has anybody used Google Charts or knows how this would be possible?

https://developers.google.com/chart/

[HM666]

You would probably need to hire a PHP programmer for that. That would take some coding to have it work if its possible. Since you do not code it would probably be near to impossible for you to implement it yourself.

[Dave]

This is not something hard to do but not a task for the average hobbyist. (Store submitted data in the database, retrieve on user profile and call Google Charts API.)

[gfran5]

This is not something hard to do but not a task for the average hobbyist. (Store submitted data in the database, retrieve on user profile and call Google Charts API.)

So would you be able to help me out? I'm currently making my own profile tab.

[ozzy47]

Someone might be able to help you out, once you start coding it, and then when you run into issues, post your code and describe what issues you are having.

[kh99]

I would love to include a pie graph on my members profile, where users can enter two different values e.g. Height & Weight and it is automatically produced as a pie graph.

I don't think it's very difficult, there's an example as part of the docs that you linked to above. But I don't understand what you want to display. You say "height and weight", but are you going to display those two values on the same chart, or do you want to display all users' heights on one pie chart and weights on another?

[gfran5]

I want to have them both on the same pie chart, one figure as weight and the other as body fat % as seen here: http://www.theironden.com/forum/members/24086-gfran5

thoughts on where i should start, or if anybody would be willing to start me off and give me a rough guide of what to do.

[kh99]

OK, I guess you want a pie chart showing percentage of lean mass vs. total body weight, which you're going to caluclate using height and weight?

Anyway, here's the google example (https://developers.google.com/chart/interactive/docs/quick_start) (modified a little) which you can put in a template and it should display:

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">

// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart']});

// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);

// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {

// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', 3],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
]);

// Set chart options
var options = {'title':'How Much Pizza I Ate Last Night',
'width':400,
'height':300};

// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementB yId('chart_div'));
chart.draw(data, options);
}
</script>
<div id="chart_div"></div>

So you just have to change the parts you want to change. I guess you could create profile variables for height and weight (using the "User Profile Field Manager"), then you can access those values in the template. If you're creating a new template for this then you probably need a plugin to register variables to it and render it. To be honest I'm not sure of the details of adding a profile tab.

[gfran5]

I have already created those variables for Height and Weight needed, but i'm currently stuck with making the My Bodyspace page (http://musclephlex.com/members/1-TrainInsane).

I have followed this guide (https://vborg.vbsupport.ru/showthread.php?t=265971) on how to setup extra profile tabs, but i have no idea how to register my custom height and weight profile fields in the plugin so that they display on the template.

my template currently has:
<div class="body_measurements">
<vb:if condition="$post['field8']">
<h2 style="display: inline;">H: {vb:raw post.field8}cm |&nbsp</h2>
<vb:else />
<h2 style="display: inline;">H: -- |&nbsp</h2>
</vb:if>
<vb:if condition="$post['field7']">
<h2 style="display: inline;">W: {vb:raw post.field7} Lbs</h2>
<vb:else />
<h2 style="display: inline;">W: -- </h2>
</vb:if>
</div>

[kh99]

Hmm...yeah, it would be nice if that guide had a little more detail about using the member's data. But going by a comment that appears later in the thread, I think it's in $prepared. So you'd have to add 'register' lines to the code that renders your template. For example you might be able to just do this:
$templater = vB_Template::create('memberinfo_block_test');
$templater->register('selected_tab', $selected_tab);
$templater->register('test_tab_content', $test_tab_content);
$templater->register('userdata', $prepared);
$template_hook['profile_tabs'] .= $templater->render();


(line in red added), then use {userdata.field7} and {userdata.field8} in your template. I'm not sure if that will work or not, but it's the best guess I can make without trying it myself.

[gfran5]

i tried:
<div class="body_measurements">
<vb:if condition="$post['field8']">
<h2 style="display: inline;">H: {userdata.field8}cm |&nbsp</h2>
<vb:else />
<h2 style="display: inline;">H: -- |&nbsp</h2>
</vb:if>
<vb:if condition="$post['field7']">
<h2 style="display: inline;">W: {userdata.field7} Lbs</h2>
<vb:else />
<h2 style="display: inline;">W: -- </h2>
</vb:if>
</div>

but the numbers still didn't show up on the page, anything else i could try?

[kh99]

Did you create a plugin like that guide showed? What code do you have in your plugin?

[gfran5]

my plugin is this:
if (isset($vbulletin->GPC['tab']))
{
$selected_tab = $vbulletin->GPC['tab'];
}
$blockinfo['title'] = "My Bodyspace";
$blockid = "my_bodyspace";
$taburl = $memberurl = fetch_seo_url('member', $prepared) . "&amp;tab=my_bodyspace#my_bodyspace";

$templater = vB_Template::create('memberinfo_tab');
$templater->register('selected_tab', $selected_tab);
$templater->register('relpath', $relpath);
$templater->register('blockinfo', $blockinfo);
$templater->register('blockid', $blockid);
$templater->register('taburl', $taburl);
$template_hook['profile_tabs_last'] .= $templater->render();

// ### Your code to fill the tab ###
// Don't forget you need to register any variables for use in templates

$test_tab_content = "Congratulations, you can see me, I'm your PHP Code!";

$templater = vB_Template::create('memberinfo_block_test');
$templater->register('selected_tab', $selected_tab);
$templater->register('test_tab_content', $test_tab_content);
$templater->register('userdata', $prepared);
$template_hook['profile_tabs'] .= $templater->render();

--------------- Added 1418830513 at 1418830513 ---------------

Any other ideas for how i can get my custom field data into my bodyspace profile page Kevin?

[kh99]

Sorry, I lost my internet connection for a couple hours. Anyway, I copied your plugin code to create a new plugin using hook member_complete, and I created a template called memberinfo_block_test using the code from the guide page you linked to, but I get a blank tab. I haven't had a chance to figure out why yet.

Are you seeing anything from your template? I think I might have been wrong about using $prepared, I think you might want to use $userdata instead. So maybe change the added line to:
$templater->register('userinfo', $userinfo);


then use {userinfo.field8}, etc. But if you're having the same issue I am with the tab being entirely blank then you probably still won't see the profile fields.

[gfran5]

I tried that but that didn't work either, i am able to see "Congratulations, you can see me, I'm your PHP Code!" on the profile tab page, therefore it should work if it is right.

Not sure why this is so hard to do.

[kh99]

Yeah, I can't even get that message to show up and it's frustrating me. I don't think I can deal with it any more tonight.

I noticed that the template uses $userinfo in a condition, but for some reason it's not registered in the example plugin. Maybe it's preRegistered somewhere else or something. But that does mean that {userinfo.fieldX} would work if the profile fields are actually there (and since this is the profile page you'd think they would be).

Did you create those fields as private? Even if you did they should appear when you're looking at your own profile. You have data entered for those fields, right? I just can't think of any other reason right now.

Anyway, I'll look at it again in the morning if you haven't figured it out by then. If I can get the template to appear then I can figure out the field value problem.

[ozzy47]

Yeah Kevin, sometimes it is best to step back for the night, and come at it fresh in the morning.

[gfran5]

Yeah, i have entered data and i am even displaying this information on my postbit_legacy template with all the numbers showing up, but for some reason when i try the same thing on a member profile tab, nothing shows up.

I'm still trying to look for a way.. i know you can go into custom "profile field categories" and set it to display on it's own tab...i think it uses the template "memberinfo_block_profilefield" but even using that template the numbers don't show up in the code i used for postbit_legacy.

Thanks for helping me out on this! do you have any ideas Chris?

[kh99]

OK, I have no idea what my problem was yesterday, but I went back to using the plugin code and template code from the guide and got it to appear. Then I added a register line for userinfo, like:
$templater->register('userinfo', $userinfo);

(that goes near the bottom, registering to the memberinfo_block_test template).

Now here's where I might have steered you wrong, just because I was spacing out - you should add {vb:raw userinfo.field7} in the template (I don't know why I was forgetting the vb:raw part). Anyway, if that was the only problem you were having, I'm really sorry about that.

So if you can get those values displaying then you probably would want to add code to the plugin to calculate whatever values you need for the chart and register them to the template, then you just have to copy that chart html to your template and insert the parameters.

[gfran5]

You were pretty close, just forgot to mention to change (if $post) to (if $userinfo)... but thanks for your help. I will try get this chart working, if i have any questions i will post back.

[kh99]

You were pretty close, just forgot to mention to change (if $post) to (if $userinfo)... but thanks for your help. I will try get this chart working, if i have any questions i will post back.

Oh...oops, yeah, I wasn't using your template, I was using the one from the how-to page. I guess that turned out to be your problem? Oh well, the rest should be easy.

[gfran5]

Hi,

This is slightly unrelated but i'm having some CSS issues on the template: Link to the page (http://musclephlex.com/members/1-TrainInsane&tab=test#test)

For some reason my footer is half may up the page, rather than normal position on bottom.

Here is my template code:
<div id="view-test" class="<vb:if condition="$selected_tab == 'test'">selected_view_section<vb:else />view_section</vb:if><vb:if condition="$userinfo['userid'] != $bbuserinfo['userid']"> vm_other_prof</vb:if>">
<div class="blocksubhead subsectionhead userprof_headers userprof_headers_border">
<h4 class="subsectionhead-understate">Body Measurements</h4>
</div>
<div class="body_measurements">
<div class="current_bm">
<vb:if condition="$userinfo['field8']">
<span class="label">Height:</span>
<div><b id="body_data">{vb:raw userinfo.field8}</b><span class="lbs_font">cm</span></div>
<vb:else />
<span class="label">Height:</span>
<div><b id="body_data">--</b><span class="lbs_font">cm</span></div>
</vb:if>
</div>

<div class="current_bm">
<vb:if condition="$userinfo['field7']">
<span class="label">Weight:</span>
<div><b id="body_data">{vb:raw userinfo.field7}</b><span class="lbs_font"> Lbs</span></div>
<vb:else />
<span class="label">Weight:</span>
<div><b id="body_data">--</b><span class="lbs_font"> Lbs</span></div>
</vb:if>
</div>

<div class="current_bm">
<vb:if condition="$userinfo['field15']">
<span class="label">Body Fat %:</span>
<div><b id="body_data">{vb:raw userinfo.field15}</b><span class="lbs_font"> %</span></div>
<vb:else />
<span class="label">Body Fat %:</span>
<div><b id="body_data">--</b><span class="lbs_font"> %</span></div>
</vb:if>
</div>
</div>

[kh99]

I'm not really an html/css person, but I looked at the page and your new tab doesn't look like it's any different than the other tabs, so I don't think the problem is in the template for the new tab. I see that the .footerBanner css has absolute positioning for that 'free gift' image, so that's why that's in the middle of eveyrthing. There's also that red line, but I don't know exactly why that's happening.

[gfran5]

That red line goes with the footer-main section, making the advertisement absolute doesn't fix the issue, this is getting me confused, because the only pages effected are the ones on the member profile... could it be anything in the PHP code?

[kh99]

Does it still happen if you disable the new plugin?

[gfran5]

Sorry don't worry i've figured it out, was missing just one </div> element.. lol hate when it's that simple right in front of your face.

[kh99]

Glad you figured it out. I should just not reply at all when people ask html questions.

[gfran5]

Hi,

Was wondering if you know how to do math equations in html template just simple things like times, divide, etc ?

[kh99]

There is a {vb:math expression} tag that lets you do some simple math, but I don't think it's used much, and if I remember correctly there's some limitation so that it's not very useful. It may be that you can't use variables in the expressions or something like that.

In general I think you'll probably have to do you calculations in the plugin.

[gfran5]

So i was able to use vb:math to do what i wanted but i can't control the number of decimals displayed. So how would i do the maths in the plugin? and then call the equation in the template? I was trying to measure BMI based off height and weight but need to do

this is in my template and is right answer, with heaps of decimals:
{vb:math {vb:math {vb:raw userinfo.field7}/2.2} / {vb:math ({vb:raw userinfo.field8}/100)*2}}

[kh99]

You could try using the vb:number tag. It takes two arguments, a number and the number of decimal you want to display.

Or in the plugin you'd do something like:
$bmi = vb_number_format((($userinfo['field7']/2.2) / ($userinfo['field8']/100)*2), 2);

(if I converted your template code correctly - I'm not sure I got the parens in the right places).


and then in the template code:
$templater->register('bmi', $bmi);

and {vb:raw bmi} in the template.

[gfran5]

thanks worked!! Also i was able to get that google pie chart to work, having some small sizing issues but hopefully figure that out soon.