News:

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

Akyhne

Link to the mod

Simple Chart 0.5
By Akyhne

Compatibility
SMF 2.0.x
SMF 2.1 Alpha 1


Introduction
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


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

Usage
The BBC syntax for this mod, is as follow:

[chart
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)
]
Apples=5|Bananas=3|Lemons=10
[/chart]

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



Important!
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: http://www.adobe.com/support/downloads/product.jsp?product=46&platform=Windows



Supported languages
English
English British
Danish


Examples:

[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!
Styling
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.


Changelog

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

Antechinus

Nice job. Congrats on the release. :)

Akyhne


Shambles

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)

Akyhne

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

mrintech

Very Nice :)

Thanks and Congrats


Shambles

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]


Akyhne

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]

Shambles

Yep - that's sorted it, sort of.

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


Akyhne

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.

Shambles

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="http://www.i30ownersclub.com/forum/Simple_Chart/SimplePie.php?data=WA%3A%3A%3A5%7CNT%3A%3A%3A8%7CQLD%3A%3A%3A2&amp;max=360"></object>


I'll keep plugging away..

Akyhne

It seems the Simple_Chart folder in the root of http://www.i30ownersclub.com/forum/ doesn't exist!

Did you have any error during installation?

Shambles

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



EDIT: All folders intact

Shambles

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

Akyhne



Jessica.

I posted a test topic (http://testinggrounds.net84.net/index.php?topic=22.0). 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

Akyhne

You got a script on your site, creating warnings about invalid markup:
http://validator.w3.org/check?uri=http%3A%2F%2Ftestinggrounds.net84.net%2Findex.php%3Ftopic%3D22.0&charset=%28detect+automatically%29&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.3

Hmm..
</body></html>
<!-- Hosting24 Analytics Code -->
<script type="text/javascript" src="http://stats.hosting24.com/count.php"></script>
<!-- End Of Analytics Code -->

Jessica.

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

Akyhne

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

Advertisement: