Want to get involved in developing SMF, then why not lend a hand on our github!

Main Menu

Simple Chart

Started by Akyhne, October 25, 2012, 11:37:07 PM

Previous topic - Next topic


Link to the mod

Simple Chart 0.5
By Akyhne

SMF 2.0.x
SMF 2.1 Alpha 1

With this modification, you can insert charts in your forum. The modification supports:
* One-level vertical or horizontal charts
* Multi level vertical or horizontal charts
* One-level pie charts
* One-level, 1 value gauge charts
* One-level stars charts

Just uninstall the mod as usual from the package center.

Where to change settings for the mod
There are no settings you can change with this mod!

The BBC syntax for this mod, is as follow:

width={int} (optional)
height={int} (optional)
title="string" (optional)
align=left|right|center|none (optional)
layout=v|h|pie|gauge|stars (optional)
style=MyStyle (optional)
max={int} (optional)

[chart width=300 height=250 title="My Fruits" align=center layout=v style=GreenColumn max=10]Apples=5|Bananas=3|Lemons=9[/chart]

Pie charts as well as gauge charts are generated in the SVG format!
SVG (Scalable Vector Graphics) is a vector based format, developed by the W3 Consortium since 1999. Unfortunately, not all browsers support this format or support it directly.
This means that not all your visitors will be able to see the SVG Pie & Gauge charts.

Browsers with SVG support (that I know of):
IE9, Firefox, Google Chrome, Opera, Safari & the Android browser. Iphones (at least via an emulator).

Browsers with no SVG support (that I know of):
IE 8 & down. However there are SVG plugins on the internet to these browsers. Adobe made one:

Supported languages
English British


[chart width=550 title="IQ of forum administrators" align=right layout=h max=500]FB=25|IPB=100|MyBB=80|phpBB=70,3|SMF=210|Xen Foro=110|Vbulletin=80[/chart]

[chart width=550 height=400 title="IQ of forum administrators" align=left layout=v max=220]IPB=100|MyBB=80|phpBB=70,3|SMF=210|Xen Foro=110|Vbulletin=80[/chart]

[chart width=400 title="Multi Level - Horizontal"]a=1;2;4,3;2.22;3,33|b=3;1;5|c=2;2.5[/chart]

[chart title="Forum software" layout=pie]IPB=100|MyBB=80|phpBB=70,3|SMF=210|Xen Foro=110|Vbulletin=80[/chart]

[chart title="Standard" layout=gauge]a=50[/chart]

[chart layout=stars]x=5.5[/chart]

Gauge styles: (use them, by adding style=speedometer or style=radar etc.)
standard, graygauge, speedometer, racer, half, radar, blueglass, temp, kungfu & time

Stars styles: (use them, but adding style=book or style=led etc.)
default, led, book

Additional Notes!
You can style x-y charts, by editing the simplechart.css in your theme's folder. If you add a style=myownstyle or similar to the BBC, you can style individual charts easy with css.
You can style pies via the pie.css file. This controls the styling of the svg generated pie chart.
You can define your own gauge styles. It is a bit complicated, but you basically just edit the $style and the array $style_types in SimpleGauge.php.
You can very easy add your own star icons. Just read the readme.txt in the stars image folder.


0.1 6th October 2012
o First beta

0.2 9th October 2012
! Changed the mod to use hooks where possible
+ Added multi level charts
! Cleaned code a bit

0.3 13th October 2012
+ Added the style tag. You can now style each chart, by adding additional styles to the chart's css stylesheet.
! Renamed the "dir" tag to "layout". Suits better!
+ Added pie charts generated in SVG format.

0.4 24th October 2012
+ first submission to SMF's mod site
+ Added gauge charts (SVG format)
+ Added stars charts (PNG images)
! Rearranged the package-info.xml file

0.5 1st November 2012
! If you posted a x-y chart in a BBC table, bars floated to the top
! Removed a bit of code in the DB installscript, that didn't belong there
! Corrected a small issue in the language files
+ Added a "time" gauge style
! Made sure non declared variables do not throw an error
+ Added preparation for the help button
+ Added language strings for the help button
! Fixed layout issues with pie text strings braking layout when more than 18 values used.
! Fixed width of pies, when exceeding 40 values (overkill, but..)
+ Added compression to the link for pies, to shrink it. Saves 30-60%!
+ Text is shrinked in pies, if the text is to long.
! Adjusted position of "procentage" text on pies
+ Added a script to help you generate the code to your charts. The file can be found/called from your forum address: http://yourforum.tld/Simple_Chart/bbc_generator.php


Nice job. Congrats on the release. :)



At last. Been waiting for this. Well done on a nice (and potentially very popular) mod  :laugh:

Of course, a lot of folk are now going to look for ways to use it all over their forums. Actually, I'm talking about myself there  8)


Hmm, yeah. There are so many possabilities & options that I can hardly remember them myself lol


Very Nice :)

Thanks and Congrats


Can someone try this and see what they get?

[chart title="Oz Inputs" layout=pie min=1 max=20]WA=5|NT=8|QLD=2[/chart]


There is no min value.

[chart title="Oz Inputs" layout=pie max=20]WA=5|NT=8|QLD=2[/chart]

or.. skip the max value if you want the pie to go full 360°

[chart title="Oz Inputs" layout=pie]WA=5|NT=8|QLD=2[/chart]


Yep - that's sorted it, sort of.

I think I need to concentrate on my color styles next...


The max value can be used to pies, if you don't want the pie to be closed.

Other than that, the max is only for x-y charts.
Say you have some values, a=5, b=3, c=4, d=7, e=8. Posting that, will make the 'e' value go to full width or height, depending on the layout. That doesn't nessescarily looks nice. So a max=10 will shrink the values a bit, so that 'e' will be 80% in size.

Quote from: Shambles™ on October 26, 2012, 04:10:37 AM
I think I need to concentrate on my color styles next...
I see no image.


Quote from: Akyhne on October 26, 2012, 04:13:56 AM
I see no image.

That's what I meant ;)

Can't get any image to show... css debug shows this:

<object class="pie_object" data=";max=360"></object>

I'll keep plugging away..


It seems the Simple_Chart folder in the root of doesn't exist!

Did you have any error during installation?


Nope - no errors. I'll go check that folder....

EDIT: All folders intact


Should I be seeing some "svg" code in the source of my page output?



I posted a test topic ( The chart appears, but this also appears, above the pie chart

This page contains the following errors:

error on line 117 at column 1: Extra content at the end of the document
Below is a rendering of the page up to the first error.

I didn't get any errors on installation

Testing Zone - SMF 2.0.7, default Curve
School & Chat - phpBB3, over 170 mods installed, official live forum

I use the latest version of Chrome

phpBB: Forum = a section; Board = whole site
SMF: Forum = whole site; Board = a section


You got a script on your site, creating warnings about invalid markup:

<!-- Hosting24 Analytics Code -->
<script type="text/javascript" src=""></script>
<!-- End Of Analytics Code -->


Wait, what file do I look in to remove that?
Testing Zone - SMF 2.0.7, default Curve
School & Chat - phpBB3, over 170 mods installed, official live forum

I use the latest version of Chrome

phpBB: Forum = a section; Board = whole site
SMF: Forum = whole site; Board = a section


Well, did you add that hosting24 analytics code via a mod or what?