Custom Field Extraction into FLOT/Google Charts

[petrolskin]

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.

 

[Bob]

What is the best graphing tool (FLOT or Google Charts) for XF

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.

• 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

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)

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

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

 

[petrolskin]

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?

 

[Bob]

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.

 

[Alpha1]

That looks awesome. Charts will be very useful for showcase and AMS. Related suggestion: Google charts integration

 

[petrolskin]

That looks awesome. Charts will be very useful for showcase and AMS. Related suggestion: Google charts integration

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

 

[Bob]

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

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.

 

[Alpha1]

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?

 

[petrolskin]

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?

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?

 

[Alpha1]

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?

 

[petrolskin]

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?

Yes ideally.

 

[tajhay]

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.

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.

 

[petrolskin]

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.

 

[Bob]

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.

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.

 

[petrolskin]

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.

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