1. REGISTRATION REQUIREMENTS:

    Register with your xenforo.com Username then start a conversation at xenforo.com w/Bob and provide the following:
    1. Your XenForo License Validation Token
    2. The Domain Name associated with the License
    NOTE: Your account will be validated once ALL requirements are verified/met. Thank you for your patience.

Custom Field Extraction into FLOT/Google Charts

Discussion in 'Showcase Support' started by petrolskin, Jan 2, 2015.

  1. petrolskin

    petrolskin Member AMS Premium Showcase

    Can any of you lovely people help me to get going with this one or point me to a really good tutorial?

    I am wanting to extract some custom field values and graph them using line and pie charts, nothing too complicated.

    • What is the best graphing tool (FLOT or Google Charts) for XF
    • What is the best way of doing this
    • What steps are involved
    • How do I display the graph? Ultimately I just want to have something in the first post of a thread (or SC item) that updates dynamically with the values stored in the xf_nflj_showcase_custom_field_value table

    Any help would be appreciated.
     
    alfa1 likes this.
  2. Bob

    Bob Developer Staff Member

    XenForo itself uses FLOT and an example is in the Admin CP Tools >> Daily Statistics

    FLOT can be used on the Frontend as well. I use it for a couple of my Custom Sports Addons.
    Selection_567.png

    The Data for the chart needs to be exposed and passed into a Script Template which they generates the chart. Its definitely an advanced level customization as you need to know the ins and outs of FLOT as well as XenForo template syntax and JavaScript.

    Here is an example of how I create the above Chart..

    This is a snippet from the main template to show you that I have a DIV that the Script places the chart in once created, syntax that includes the FLOT javascript and a template include (which is a custom flot script template)
    Code:
                <xen:if is="{$games}">
    
                    <div align="center" class="prsChartMain">
                        <div id="Placeholder" class="prsChartContainer"></div>
                    </div>   
    
                    <xen:require js="js/flot/jquery.flot.min.js" />
                    <!--[if lte IE 8]><script src="js/flot/excanvas.min.js"></script><![endif]-->
                    <xen:include template="son_prs_player_flot_script" />   
                </xen:if>
    This is the custom flot script template that actually creates the chart. There are 100's of different ways to do this... this was written to do exactly what I needed it to do based on several factors.
    Code:
    <script>
    
    jQuery(function()
    {
        var data =
        [
            {
                label: "{$player.name_first} {$player.name_last}",
                contentType: "Player",
                data: [
                    <xen:foreach loop="$games" value="$game" i="$i">
                        [{$i}, {$game.roster_rating}],
                    </xen:foreach>
                    ]
            },
    
            {}
        ],   
        options =
        {
            series:
            {
                points: { show: true },
                lines: { show: true }
            },
            grid:
            {
                show: true,
                hoverable: true,
                borderWidth: 1,
                color: '@primaryMedium',
                backgroundColor: '@primaryLightest'
            },
            colors: [ '@primaryMedium', '@secondaryMedium', '@primaryLight', '@secondaryLight' ],
            yaxis: { max: 10, tickSize: 1 },
            xaxis: { max: {$games_count}, tickSize: 1 }       
        },
        $placeholder = $('#Placeholder');
       
        $.plot($placeholder, data, options);
       
        function showTooltip(x, y, contents, z) {
            $('<div id="flot-tooltip">' + contents + '</div>').css({
                top: y - 30,
                left: x + 20,
                'border-color': z,
            }).appendTo("body").fadeIn(200);
        }   
       
        var previousPoint = null;
       
        $placeholder.bind('plothover', function(e, pos, item)
        {
            if (item) {
                if ((previousPoint != item.dataIndex) || (previousLabel != item.series.label)) {
                    previousPoint = item.dataIndex;
                    previousLabel = item.series.label;
                    $("#flot-tooltip").remove();
                    var x = item.datapoint[0],
                    y = item.datapoint[1];
                    z = item.series.color;
                   
                    //var num = 10;
                    var x = x.toFixed(2); // result will equal 10.00
                    var y = y.toFixed(2); // result will equal 10.00
                   
                    showTooltip(item.pageX, item.pageY,
                        "<b>" + item.series.label + "</b><br />Roster Rating: " + y ,
                        z);
                }
            } else {
                $("#flot-tooltip").remove();
                previousPoint = null;
            }
        });
    });
    
    </script>
     
    alfa1 likes this.
  3. petrolskin

    petrolskin Member AMS Premium Showcase

    That looks awesome Bob.

    I need to start off with some basic tutorials (with easy steps to get my head around the process :) ) on how to expose the data from the tables and then display them frontend. Im guessing you recommend sticking wit FLOT then rather than Google Charts because its native to XF?

    Can the div elements be included within SC (either tabs or comments) posts and dynamically update on each page refresh using the latest db field values?
     
  4. Bob

    Bob Developer Staff Member

    I went with FLOT because its already included with Core XF. Google Charts tho (IMO) looks nicer and I will be looking into it at some point.

    There is no reason why you can add a chart to Showcase. If I wasn't so damn swamped, I'd post an example. I've just got way to much going on right now.
     
  5. alfa1

    alfa1 Active Member AMS Premium CAS Premium RMS Premium SC Premium UBS Premium

    Market1234 likes this.
  6. petrolskin

    petrolskin Member AMS Premium Showcase

    I was actually going to suggest that as part of AMS / SC improvements. Easier chart integration with custom fields.
     
  7. Bob

    Bob Developer Staff Member

    There isn't an EASY way to do it and there can't be anything built in as each scenario requires its own specific custom DATA and a Custom Script for the output made for that specific data type. This is one of those things that needs to be built for a very specific use case.
     
  8. alfa1

    alfa1 Active Member AMS Premium CAS Premium RMS Premium SC Premium UBS Premium

    What about outputting the data as json so that it can be read by Google charts and flot? Then have the admin use examples like this to fetch the data and apply it into charts. Would something along those lines work?
     
  9. petrolskin

    petrolskin Member AMS Premium Showcase

    How would you display the data in the frontend mate? I just want to create a set of charts in the OP of a thread that pulls and refreshed dynamically from the db?
     
  10. alfa1

    alfa1 Active Member AMS Premium CAS Premium RMS Premium SC Premium UBS Premium

    I should have posted that in a suggestion thread and not in your support thread. It was a suggestion / question to Bob to explore the possibilities for new functionality.

    With 'thread' you mean a showcase entry right?
     
  11. petrolskin

    petrolskin Member AMS Premium Showcase

    Yes ideally.
     
  12. tajhay

    tajhay Active Member AMS Premium SC Premium Sportsbook Pickem Power Rankings Survivor

    Bob if you would be able to show as a simple example of how we can do charts/graphs based off showcase custom fields, when you do get the free time to do so, it would be greatly appreciated.
     
  13. petrolskin

    petrolskin Member AMS Premium Showcase

    Hey @Bob if I manage to programmatically construct some HTML that is populated by database queries and custom json config to generate some nice google charts. How could I best display this in a SC item? Ideally I'd like to be able to inject this into tabs of specific item ID's so it can be displayed on selection.
     
    alfa1 likes this.
  14. Bob

    Bob Developer Staff Member

    You'd need to extend the controller to expose the data, then you'd use a Template Modification for displaying that data where you want to. You can also edit the controller directly to fetch your data and include it in the viewParams and then edit the item template to add template code for your data.
     
  15. petrolskin

    petrolskin Member AMS Premium Showcase

    Thanks Bob, Im going to need a bit more specific help with this I think. I'm fine with things until understanding parts of the XF framework.

    I have all this working now using PHP to query the database and construct the json config and html template for the specific chart. Works a treat, just need to get this into SC now :)
     
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.