jQuery and Plotting

[tajhay]

Hi guys,
I want to post graphs on my page nodes or xencarta pages. Similiar to what Brogan did at cliptheapex : http://cliptheapex.com/community/overtaking/

when i try to do so, nothing happens. This is the code i am using.

<div id="Placeholder" style="width: 720px; height: 350px"></div>
<script>
    jQuery(function()
{
    var data =
    [
            {
                label: "John Monie",
                data: [[1995,10],[1996,11],[1997,7]]
            },
            {
                label: "Frank Endacott",
                data: [[1997,7],[1998,15]]
            },
            {
                label: "Mark Graham",
                data: [[1999,11],[2000,13]]
            },
            {
                label: "Daniel Anderson",
                data: [[2001,8],[2002,1],[2003,6],[2004,14]]
            },
            {
                label: "Tony Kemp",
                data: [[2004,14],[2005,11]]
            },
            {
                label: "Ivan Cleary",
                data: [[2006,10],[2007,4],[2008,8],[2009,14],[2010,5],[2011,6]]
            },
            {
                label: "Final Ladder Standings (3 Year Rolling Average)",
                data: [[1995,10.0],[1996,10.5],[1997,9.3],[1998,9.7],[1999,11],[2000,13],[2001,10.7],[2002,7.3],[2003,5],[2004,7],[2005,10.3],[2006,11.7],[2007,8.3],[2008,7.33],[2009,8.7],[2010,9],[2011,8.33]]
            },
     
            {}
        ]
    };
</script>

Just to give clarity on the data i am plotting - I am running a sports forum. The names are of the coach who were in charge of the team for the year and the second value is the position we finished for the season.

Anyone got any ideas? I tried the plot bbcode but that resulted in errors for my entire forum.

 

[Jake Bunce]

I have never tried doing this with jquery. I would use a regular HTML table. That's what Brogan is using. You can see the table in the source code of the page.

 

[Chris D]

I would use a regular HTML table.

This.

I don't know why you'd want to do this with jQuery. All it takes is for someone to have scripts turned off, or an overzealous ad-blocker detecting it incorrectly and your page would either look blank or like garbage.

Whereas tables will just work, for everyone on every device.

 

[tajhay]

hi guys, im not talking about the tables, im talking about the plot graphs shown under the tables. that is done via jquery. the ACP stats uses the same technique.

 

[Chris D]

Sorry I misunderstood.

It looks like that page calls some external JavaScript:

http://cliptheapex.com/community/js/cta/chart.js?_v=bba17b4a

That will be most likely what you're missing.

Also, if you're using a modern browser such as Chrome or Firefox, you should be able to use F12 to open the Development Tools and then the JavaScript console, this will give more details as to why code in <script> tags isn't executing properly.

Please bear in mind, though, that although CTA have seemingly modified some XenForo code to produce their tables, it would be unfair of you to use it without permission.

 

[tajhay]

Sorry I misunderstood.

It looks like that page calls some external JavaScript:

http://cliptheapex.com/community/js/cta/chart.js?_v=bba17b4a

That will be most likely what you're missing.

Also, if you're using a modern browser such as Chrome or Firefox, you should be able to use F12 to open the Development Tools and then the JavaScript console, this will give more details as to why code in <script> tags isn't executing properly.

Please bear in mind, though, that although CTA have seemingly modified some XenForo code to produce their tables, it would be unfair of you to use it without permission.

They have modified it to report additional info under tooltips, but jquery is open source i believe. Xenforo uses it themselves on each installation. Open your ACP -> tools -> stats

 

[Chris D]

I know, I'm just saying.

 

[Andy.N]

I think Brogan mentioned about how he did it before. I asked him in one of the threads. Search for his old posts.