Custom Field Extraction into FLOT/Google Charts

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.

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>

 

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.

 

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.

 

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.