Okay, the new charting engine is on and this thread is in for documenting it.
The tag is remastered to take input in the format:
<field>|<data>
Left part holds the name of the target field, and right side of the pipe holds the actual data for it.
Simple chart:
[chart]
values|hour=1,2,3,4,5,6,7,8,9,10,9,8,7,6,5,4,3,2,1
[/chart]
Outputs:
[chart]
values|hour=1,2,3,4,5,6,7,8,9,10,9,8,7,6,5,4,3,2,1
[/chart]
It defaults to line display. Multiple lines can be shown in the format:
values|line1=data1;line2=data2;line3=data3...
For instance:
[chart]
values|hour=1,2,3,4,5,6,7,8,9,10,9,8,7,6,5,4,3,2,1;day=7,3,6,1,9,12
[/chart]
Outputs:
[chart]
values|hour=1,2,3,4,5,6,7,8,9,10,9,8,7,6,5,4,3,2,1;day=7,3,6,1,9,12
[/chart]
You can change the display type by setting the type field:
For instance surface and bar:
Surface:
[chart]
values|hour=1,2,3,4,5,6,7,8,9,10,9,8,7,6,5,4,3,2,1;day=7,3,6,1,9,12
type|surface
[/chart]
Outputs:
[chart]
values|hour=1,2,3,4,5,6,7,8,9,10,9,8,7,6,5,4,3,2,1;day=7,3,6,1,9,12
type|surface
[/chart]
Bar:
[chart]
values|hour=1,2,3,4,5,6,7,8,9,10,9,8,7,6,5,4,3,2,1;day=7,3,6,1,9,12
type|bar
[/chart]
Outputs:
[chart]
values|hour=1,2,3,4,5,6,7,8,9,10,9,8,7,6,5,4,3,2,1;day=7,3,6,1,9,12
type|bar
[/chart]
You can have text displayed within the tag:
[chart]
values|hour=1,2,3,4,5,6,7,8,9,10,9,8,7,6,5,4,3,2,1;day=7,3,6,1,9,12
type|surface
text|This is a demonstrative chart for educational forum purposes!
[/chart]
Outputs:
[chart]
values|hour=1,2,3,4,5,6,7,8,9,10,9,8,7,6,5,4,3,2,1;day=7,3,6,1,9,12
type|surface
text|This is a demonstrative chart for educational forum purposes!
[/chart]
You can alter the background of your chart with ease:
For instance, only two colors: orange-white
[chart]
values|hour=1,2,3,4,5,6,7,8,9,10,9,8,7,6,5,4,3,2,1;day=7,3,6,1,9,12
type|surface
text|This is a demonstrative chart for educational forum purposes!
background|orange-white
[/chart]
Outputs:
[chart]
values|hour=1,2,3,4,5,6,7,8,9,10,9,8,7,6,5,4,3,2,1;day=7,3,6,1,9,12
type|surface
text|This is a demonstrative chart for educational forum purposes!
background|orange-white
[/chart]
The coloring is first-come, first served: from top-to-bottom.
Reverting the background field to "white-orange":
[chart]
values|hour=1,2,3,4,5,6,7,8,9,10,9,8,7,6,5,4,3,2,1;day=7,3,6,1,9,12
type|surface
text|This is a demonstrative chart for educational forum purposes!
background|white-orange
[/chart]
does this:
[chart]
values|hour=1,2,3,4,5,6,7,8,9,10,9,8,7,6,5,4,3,2,1;day=7,3,6,1,9,12
type|surface
text|This is a demonstrative chart for educational forum purposes!
background|white-orange
[/chart]
Why have only two colors? You can have as many as you wish!
[chart]
values|hour=1,2,3,4,5,6,7,8,9,10,9,8,7,6,5,4,3,2,1;day=7,3,6,1,9,12
type|line
background|pink-white-white-white-tan-cyan-green
[/chart]
Gets you this:
[chart]
values|hour=1,2,3,4,5,6,7,8,9,10,9,8,7,6,5,4,3,2,1;day=7,3,6,1,9,12
type|line
background|pink-white-white-white-tan-cyan-green
[/chart]
You have the following color pallete at your disposal:
red, lightred, green, blue, black, white, gray, pink, yellow, shaddow, darkred, darkblue, darkgreen, darkyellow, darkpink, darkgray, lightgray, orange, darkorange, tan, darktan, tan3, darktan3, violet, darkviolet, turquoise, darkturquoise, cyan, darkcyan, aquamarine, darkaquamarine, khaki, darkkhaki, indianred, darkindianred, lightblue, slategray, navajowhite, lavender, peach, lightslategray, greenyellow, mediumspringgreen, rosybrown, brown, chocolate, plum, antiquewhite, honeydew, lightgray2
You can even specify any background available at the world-wide-web in the jpg, jpeg and png format :)
[chart]
values|hour=1,2,3,4,5,6,7,8,9,10,9,8,7,6,5,4,3,2,1;day=7,3,6,1,9,12
background|nolinks://images0.funadvice.com/photo/image/109302/cool_background.jpg
[/chart]
Outputs:
[chart]
values|hour=1,2,3,4,5,6,7,8,9,10,9,8,7,6,5,4,3,2,1;day=7,3,6,1,9,12
background|nolinks://images0.funadvice.com/photo/image/109302/cool_background.jpg
[/chart]
and
[chart]
values|hour=1,2,3,4,5,6,7,8,9,10,9,8,7,6,5,4,3,2,1;day=7,3,6,1,9,12
type|bar
background|nolinks://media-cdn.tripadvisor.com/media/photo-s/01/04/92/37/arid-landscape-of-bonaire.jpg
[/chart]
does:
[chart]
values|hour=1,2,3,4,5,6,7,8,9,10,9,8,7,6,5,4,3,2,1;day=7,3,6,1,9,12
type|bar
background|nolinks://media-cdn.tripadvisor.com/media/photo-s/01/04/92/37/arid-landscape-of-bonaire.jpg
[/chart]
Very easy and totally beautiful charts for the forum!
[chart]
values|hour=1,2,3,4,5,6,7,8,9,10,9,8,7,6,5,4,3,2,1;day=7,3,6,1,9,12
background|nolinks://nolinks.things4myspace.com/wp-content/uploads/2007/04/preview_myspace_cool_background_26.jpg
[/chart]
[chart]
values|hour=1,2,3,4,5,6,7,8,9,10,9,8,7,6,5,4,3,2,1;day=7,3,6,1,9,12
background|nolinks://nolinks.things4myspace.com/wp-content/uploads/2007/04/preview_myspace_cool_background_26.jpg
[/chart]
We continue with data display and chart type, this time with the "pie" chart.
By definition the pie chart serves to graphically notice percentages. Values are taken one at a time, only a single value per data field, like this:
values|Data1=X;Data2=Y;Data3=Z
and the actual percentage deriving from their distribution is to be automatically displayed:
[chart]
values|Circle=5;Square=2;Line=8;Triangle=3;Rectangle=4
type|pie
background|pink-white-white-lightblue
[/chart]
Outputs:
[chart]
values|Circle=5;Square=2;Line=8;Triangle=3;Rectangle=4
type|pie
background|pink-white-white-lightblue
[/chart]
You can also emphasize a value from the pie chart if you want to bring more attention to it, by using the following format:
emphasize|Data(name)
Like this -emphasis on "Rectangle":
[chart]
values|Circle=5;Square=2;Line=8;Triangle=3;Rectangle=4
type|pie
background|pink-white-white-lightblue
emphasize|Rectangle
[/chart]
Outputs:
[chart]
values|Circle=5;Square=2;Line=8;Triangle=3;Rectangle=4
type|pie
background|pink-white-white-lightblue
emphasize|Rectangle
[/chart]
You can also emphasize more than one data field by using a comma-separated list:
[chart]
values|Circle=5;Square=2;Line=8;Triangle=3;Rectangle=4
type|pie
background|pink-white-white-lightblue
emphasize|Rectangle,Square
[/chart]
[chart]
values|Circle=5;Square=2;Line=8;Triangle=3;Rectangle=4
type|pie
background|pink-white-white-lightblue
emphasize|Rectangle,Square
[/chart]