Chart tag remastered

[VLSroulette]

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.

[VLSroulette]

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]

[VLSroulette]

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]

[VLSroulette]

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]

[VLSroulette]

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]

[VLSroulette]

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]

[VLSroulette]

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]

[VLSroulette]

-