Simple Machines Community Forum

Link to the mod (https://custom.simplemachines.org/index.php?mod=3489)
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 (http://www.adobe.com/support/downloads/product.jsp?product=46&platform=Windows)



Supported languages
(https://www.simplemachines.org/site_images/lang/english.gif) English
(https://www.simplemachines.org/site_images/lang/english_british.gif) English British
(https://www.simplemachines.org/site_images/lang/danish.gif) 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]
(https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fthemes.e-debatten.dk%2Fimages%2FSimpleChart_HorizontalChart.png&hash=977ff334ac4faccec2f6c81cf167b56652b877fe)

[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]
(https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fthemes.e-debatten.dk%2Fimages%2FSimpleChart_VerticalChart.png&hash=58adf137cf9376ab27a6c480142ef4b1e565cacd)

[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]
(https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fthemes.e-debatten.dk%2Fimages%2FSimpleChart_HorizontalMultilevelChart.png&hash=056c8858b126ed905e8a70c3946107f96dc3ba9d)

[chart title="Forum software" layout=pie]IPB=100|MyBB=80|phpBB=70,3|SMF=210|Xen Foro=110|Vbulletin=80[/chart]
(https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fthemes.e-debatten.dk%2Fimages%2FSimpleChart_Pie.png&hash=d961633093c103a0fb19b9faf2fe8c5bf09bd1a9)

[chart title="Standard" layout=gauge]a=50[/chart]
(https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fthemes.e-debatten.dk%2Fimages%2FSimpleChart_Gauge.png&hash=c61e055bc897a3ac4b83d26137304b19b8a62f9d)

[chart layout=stars]x=5.5[/chart]
(https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fthemes.e-debatten.dk%2Fimages%2FSimpleChart_Star.png&hash=33d907df9d13f64a060a1da9330b86b304aa5b20)

Gauge styles: (use them, by adding style=speedometer or style=radar etc.)
standard, graygauge, speedometer, racer, half, radar, blueglass, temp, kungfu & time
(https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fthemes.e-debatten.dk%2Fimages%2FSimpleChart_Gauges.png&hash=68b239efbc9df94f272edaaae929737f71b1ce49)

Stars styles: (use them, but adding style=book or style=led etc.)
default, led, book
(https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fthemes.e-debatten.dk%2Fimages%2FSimpleChart_Stars.png&hash=31a546dee81b006d982fd71e7807d693716acc81)


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 (http://yourforum.tld/Simple_Chart/bbc_generator.php)

Nice job. Congrats on the release. :)

Thanks :)

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

(https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fwww.katzy.dsl.pipex.com%2FSmileys%2Fc014.gif&hash=f74820123053ff9301b57a2ded5672bfa96b900b)

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

(https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fi.imgur.com%2FRo45n.jpg&hash=c9248100d7575ecc278b360556b15f840bc9ab57)

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

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?

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?

No.

thank you.

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

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

Wait, what file do I look in to remove that?

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

This mod is super and excellent. But this is so hard for user because what are the code and codes we can not remember these during the post message. It would be better come these codes as automtic. Isn't it? Thanks

I just received an update notification, yet the version hasn't changed  ???

Quote from: akbora on October 28, 2012, 05:58:46 AM
This mod is super and excellent. But this is so hard for user because what are the code and codes we can not remember these during the post message. It would be better come these codes as automtic. Isn't it? Thanks

I have given this a lot of thoughts. But there are so many options that it's hard to choose what code to use. As an example, the 'height' only affects vertial charts.

What I would like to do, probably, is to have a drop-down menu in the BBC bar where you can click on a gauge, pie etc. to choose the proper code. But it would require some changes to the .js scripts in the forum's themes.

Quote from: ShamPire on October 28, 2012, 06:24:37 AM
I just received an update notification, yet the version hasn't changed  ???

It's a IE9 / SMF mod site bug. Whenever I edit the mod in an IE9 browser and click "save", the notify button is enabled, no matter what I changed.
In this case, I only added an image preview to the mod. I'll try to remember using another browser next time.

Quote from: ShamPire on October 26, 2012, 04:40:01 AM
Nope - no errors. I'll go check that folder....



EDIT: All folders intact

They aren't. The mod extracts a folder names Simple_Chart. It should be in the position: ./Simple_Chart

It isn't on your site:
http://www.i30ownersclub.com/forum/Simple_Chart

No it isn't now as I removed the package 2 days ago. Previously, all was intact.

I'll reinstall and check again later, but when I uninstalled it the pie diagrams would not show up (everything else did tho)

That folder is "only" nessescary for pie, gauge & star charts.

I'll be reinstalling shortly. The star charts always worked, but not pie and gauge.

Works fine http://www.zion-dc.ovh.org/index.php?topic=3.msg6#msg6

[chart title="Gdzie nas oglądają" layout=pie]Mazowieckie=1296|Malopolskie=831|Wielkopolskie=460|Łódzkie=392|Podlaskie=365|Śląskie=361|Dolnośląskie=328|Warmińsko-Mazurskie=325|Lubelskie=309|Podkarpackie=270|Pomorskie=151|Świętokrzyskie=129|Kujawsko-Pomorskie=106|Zachodnio-Pomorskie=105|Lubuskie=82|Opolskie=57[/chart]

Quote from: ShamPire on October 28, 2012, 09:00:22 AM
I'll be reinstalling shortly. The star charts always worked, but not pie and gauge.

Reinstalled on localhost, cleared down all cache files and the pie-charting now works fine. Just the "gauge" letting it down now...

I'll bang it on my live forum later.

Here's the issue when using "layout=gauge"

(https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fi7.photobucket.com%2Falbums%2Fy297%2FShamblesX%2FCAP000063.jpg&hash=2691f465354fe34d239f9e6c84fcb58775f030ad)

Quote from: Akyhne on October 28, 2012, 04:33:20 AM
Well, did you add that hosting24 analytics code via a mod or what?

No

It's probably your host that has the script added to your files, without noticing you.

cool mod - works fine!

http://test.epica-forum.de/allgemeine-diskussionen/chart/

what is the code for these charts?
(https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fthemes.e-debatten.dk%2Fimages%2FSimpleChart_Stars.png&hash=31a546dee81b006d982fd71e7807d693716acc81)

cheers Inti31

[chart
layout=stars
style=led|book    (optional)
max=20    (optional, defaults to 10)
]
xyz=5
[/chart]

So..
[chart layout=stars]x=4[/chart]    (4 out of 10 stars)

[chart layout=stars max=5]r=4[/chart]    (4 out of 5 stars)

[chart layout=stars style=book]x=4[/chart]    (4 out of 10 books)


Read the ./Simple_Chart/images/stars/readme.txt on how to add your own icons.

thx for advising me - works...

Quote from: akbora on October 28, 2012, 05:58:46 AM
This mod is super and excellent. But this is so hard for user because what are the code and codes we can not remember these during the post message. It would be better come these codes as automtic. Isn't it? Thanks

In the new 0.5 release, I have added a few help tools that can help you remembering the codes.

1) You can install the help button add-on. It's available on the download site. It adds a drop-down to the posting area in SMF 2 and a more cool one in SMF 2.1.
They have links that inserts general codes, as well as the lower ones insert a complete options layout for each type of chart.

2) A separate script has been added to Simple Chart 0.5 that you can access from http://yourforum.tld/Simple_Chart/bbc_generator.php.
It is a page where you put in your values and choose all other options, then you can snap the generated BBC code and use that to post in your forum.

I installed this on a test forum that uses 2.1 alpha, and I added the help button, but that button is not clickable. I can't click it.

I'll check later. Am on a train now

Works fine from phone.what is it you don't get on the screen?

Well the button appears but I can't click it...let me give you my forum's link and a test account...

Sure

I have a small forum theme and I want the pie to be 200-400px but it's HUGE. I can't make it smaller....any advice please? :)

Hi Jade.

I haven't found a proper method to resize the svg files the way I want yet.
I have fixed a few things, regarding the pies. A new silent update has been made to the download page.

So for now, all you can do, is to edit the script that generates the BBC. It's located in your Sources folder ./Sources/Subs-SimpleChart.php

On line #217:
<object' . ($no_of_values > 40 ? ' width="1050px"' : ($no_of_values > 20 ? ' width="840px"' : ' width="630px"')) . ' height="430px" class="pie_object" data="' . $boardurl . '/Simple_Chart/SimplePie.php?data=' . $pie_data . '&amp;max=' . $chart_ceil . '" ></object>

Change to...
<object' . ($no_of_values > 40 ? ' width="525px"' : ($no_of_values > 20 ? ' width="420px"' : ' width="315px"')) . ' height="215px" class="pie_object" data="' . $boardurl . '/Simple_Chart/SimplePie.php?data=' . $pie_data . '&amp;max=' . $chart_ceil . '" ></object>
This will reduce the size to 50% (way to small for my eyes). You may find the fonts to be a bit to small. If so, edit ./Simple_Chart/css/pie.css

On line #13
text
{
font-size: 14px;
}

Edit to the font-size you want.

Please remember to download Simple Chart v 0.5 again and upload to your server, before making any changes!

okay here's my info
http://testplace.net23.net/index.php
Username: Test
Password: test123


EDIT: I figured out the problem. I had that view source thing enabled...

Except for the fact that your forum theme is somehow broken, the dropdown works as it should.

Yeah it works now

What do you mean by saying my forum theme is broken? Looks fine to me..

Well, try logging in with your test account. The theme is broken. If you don't see it, I'll post a screenshot.

Okay I did that but it still looks fine. I'm using Chrome. Are you using a different browser or something? I guess you should post a screenshoot >_<

Seems ok now.

Interesting mod

Hello, this looks like a great mod. Can it be backported to SMF 1.1 please? Thank you Nicole

No chance, sorry.

I upgraded and it's just not working how I expected ha ha.

I made the changes you suggested and I changed the width in SimplePie.php as well :). It's set to 490px.
http://www.bunnyrabbitsex.com/chatter/testing-pie-charts/

I made the font size in SimplePie.php 24. I'm trying to get the thing to make the height change so that text isnt hidden.


Thanks for the help Aky!! <3

How are you making the line breaks?

You can't have small size pie charts and large text. You need to choose.

Quote from: Akyhne on November 11, 2012, 07:37:49 AM
How are you making the line breaks?

That was my work. The code looks something like this
$text = split("\n",wordwrap($chart_keys[$c][0], $line_width));

$first = true;
foreach ($text as $line)
{
if ($first)
{
$svg .= '
<g class="text_holder" onmouseover="Highlight(evt, \'cake' . $c . '\', \'text_bg' . $c . '\');" onmouseout="Unhighlight(evt, \'cake' . $c . '\', \'text_bg' . $c . '\');">
<rect id="text_bg' . $c . '" x="' . $text_offsetX . '" y="' . $text_offsetY . '" width="198" height="' . $line_height . '" stroke="none" stroke-width="0" fill-opacity="0" fill="#ccd"/>
<text text-anchor="start" x="' . ($text_offsetX + 24) . '" y="' . ($text_offsetY +13) . '" font-family="Arial" font-size="' . $fontSizeFinal . '" stroke="none" stroke-width="0" fill="#222222">' . $line . ' (' . $chart_keys[$c][1] . ')</text>
<rect id="cake' . $c . '_box" x="' . $text_offsetX . '" y="' . $text_offsetY . '" width="14" height="14" stroke="none" stroke-width="0" fill="' . $colors[$c] . '"/>
</g>';
$first = false;
}
else
{
$text_offsetY = $text_offsetY + $line_height;
$svg .= '
<g class="text_holder" onmouseover="Highlight(evt, \'cake' . $c . '\', \'text_bg' . $c . '\');" onmouseout="Unhighlight(evt, \'cake' . $c . '\', \'text_bg' . $c . '\');">
<rect id="text_bg' . $c . '" x="' . $text_offsetX . '" y="' . $text_offsetY . '" width="198" height="' . $line_height . '" stroke="none" stroke-width="0" fill-opacity="0" fill="#ccd"/>
<text text-anchor="start" x="' . ($text_offsetX + 24) . '" y="' . ($text_offsetY +13) . '" font-family="Arial" font-size="' . $fontSizeFinal . '" stroke="none" stroke-width="0" fill="#222222">' . $line . ' </text>
</g>';
}
}


where $line_width is 40.

Well, you can't just split that way, without making some other changes to the code. The <tspan> is also the correct way of splitting up a text.

I already made it for the next version. But it won't help a lot for Jade, if she insists on having such a tight layout. She needs text to be much smaller or live with much wider charts.

Thanks for this Mod

If it would resize like the tag suggests I would have no issue at all. I will have wider layouts in certain areas but I'm forced to make the pies tiny because they don't resize.

I'll update when they resize.

Hi there  :)

This is excellent mod, but I have a small problem, same as ®Shambles had - there is no pie or gauge images.  Stars and bars are shown perfectly, but pies and gauges not.  And there is no errors shown ???
On my test forum, everything worked perfectly.

Where could be a problem? 

Thank on your help in advance :)

I never did resolve my issue with the pies & gauges :(

®Shambles  I found solution :)  I hope it will work in your forum too :)

Firstly, I changed file Subs-SimpleChart.php  by replacing all  /Simple_Chart with /Simple/Simple_Chart. I have uploaded  Subs-SimpleChart.php here so you can see the changes I've made  (sorry for my English :( )

Than, in root, I put folder named Simple and put Simple_Chart folder inside that folder and everything worked like a charm :D

Hrm, I was wondering if I could get a hand?

What would I need to change, to make the bars different colours on the same table? Is that possible?

Thank you :D

The mod-coder is "Guest" now...

maybe another member can tell me, how i can delete an entry in the dropdown-field, when i have the "Help Buttons" installed ??

Nobody an idea?

Does this help?

custom.simplemachines.org/mods/index.php?action=parse;attach=211487&smf_version=2.0.1&mod=3489 (http://custom.simplemachines.org/mods/index.php?action=parse;attach=211487&smf_version=2.0.1&mod=3489)

Though the mod has a warning that it might be outdated, I just installed is successfully in SMF 2.0.15 (with emulation for 2.0.14, just to be sure).

Not all code still works, but the some does and that makes me very happy.

The look is a bit outdated, but I guess that can be adjusted in the css.

Since I couldn't find any other mod that does this, thought this info might help other people as well...