vb.org Archive - Google Chart Integration

vb.org Archive (https://vborg.vbsupport.ru/index.php)

- vB4 Programming Discussions (https://vborg.vbsupport.ru/forumdisplay.php?f=252)

- - Google Chart Integration (https://vborg.vbsupport.ru/showthread.php?t=316061)

gfran5

12-16-2014 03:49 PM

Google Chart Integration

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

12-16-2014 06:11 PM

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	12-16-2014 07:06 PM

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

12-16-2014 11:29 PM

Quote:

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

12-17-2014 10:19 AM

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	12-17-2014 10:24 AM

Quote:

Originally Posted by gfran5 (Post 2527473)

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

12-17-2014 11:42 AM

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	12-17-2014 11:55 AM

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 (modified a little) which you can put in a template and it should display:

PHP Code:


		
			
    <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.getElementById('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

12-17-2014 12:38 PM

I have already created those variables for Height and Weight needed, but i'm currently stuck with making the My Bodyspace page.

I have followed this guide 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:

HTML Code:

<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	12-17-2014 12:47 PM

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:

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();

(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

12-17-2014 12:53 PM

i tried:

HTML Code:

<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	12-17-2014 12:55 PM

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

gfran5

12-17-2014 01:01 PM

my plugin is this:

PHP Code:


		
			
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 [DATE]1418830513[/DATE] at [TIME]1418830513[/TIME] ---------------

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

kh99	12-17-2014 03:30 PM

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:

Code:

$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

12-17-2014 10:09 PM

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	12-17-2014 11:13 PM

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

12-17-2014 11:24 PM

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

gfran5

12-18-2014 01:35 AM

1 Attachment(s)

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	12-18-2014 10:21 AM

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:

Code:

$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

12-18-2014 11:33 AM

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	12-18-2014 11:37 AM

Quote:

Originally Posted by gfran5 (Post 2527907)

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

12-18-2014 01:01 PM

Hi,

This is slightly unrelated but i'm having some CSS issues on the template: Link to the page

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

Here is my template code:

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	12-18-2014 01:08 PM

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

12-18-2014 01:21 PM

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	12-18-2014 01:24 PM

Does it still happen if you disable the new plugin?

gfran5

12-18-2014 01:27 PM

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	12-18-2014 01:29 PM

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

gfran5

12-19-2014 07:00 AM

Hi,

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

kh99	12-19-2014 07:56 AM

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

12-19-2014 11:44 AM

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:

Code:

{vb:math {vb:math {vb:raw userinfo.field7}/2.2} / {vb:math ({vb:raw userinfo.field8}/100)*2}}

kh99	12-19-2014 11:55 AM

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:

PHP Code:


		
			
$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:

PHP Code:


		
			
$templater->register('bmi', $bmi);

and {vb:raw bmi} in the template.

gfran5

12-19-2014 12:13 PM

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.

All times are GMT. The time now is 04:13 PM.

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01313 seconds Memory Usage 1,859KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (5)bbcode_code_printable (2)bbcode_html_printable (4)bbcode_php_printable (3)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)post_thanks_navbar_search (1)printthread (32)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: