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]

Originally Posted by 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 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 (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]

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:

<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.