Vis kilden til Mal:Chart/doc

<includeonly>{{esoteric}}</includeonly>
<noinclude>{{documentation subpage}}</noinclude>
<!--VENLIGST LEGG TIL METADATA I <includeonly> SEKSJONEN PÅ BUNN AV SIDEN

    REDIGER MALDOKUMENTASJONEN UNDER DENNE LINJE-->

==Bruk==
Denne malen lager en rad i et slektstre, som består av bokser forbundet med linjer basert løselig på [https://no.wikipedia.org/wiki/ASCII-kunst| ASCII kunst]-syntaksen. Malen er ment å brukes sammen med {{tl|chart/start}} og {{tl|chart/end}} og vises som [https://no.wikipedia.org/wiki/HTML| HTML], ved hjelp av [https://no.wikipedia.org/wiki/Cascading_style_sheets| CSS] som definerer utseendet. I boksene kan det også kobles opp mot andre artikler. Denne malen er basert på den eldre [https://en.wikipedia.org/wiki/Template:Family_tree| Familytree malen] og er kompatibel med den nåværende [https://en.wikipedia.org/wiki/Template:Chart| Chart malen], som brukes i wikipedia.

==Grunnleggende eksempel==
Denne koden:
<pre><nowiki>
{{chart/start|sammendrag=Slektstre eksempel}}
{{chart| | | |FM |~|y|~| FF | |FM=Farmor|FF=Farfar}}
{{chart| | | | | | | |)|-|-|-|.| }}
{{chart| | | MOR |y| FAR | |ASTRID|MOR=Mor|FAR=Far|ASTRID=[[Tante Astrid]]}}
{{chart| |,|-|-|-|+|-|-|-|.| | | }}
{{chart| OLA | | MEG  | | SØS | | |OLA=Min bror Ola|MEG='''Meg!'''|SØS=Min lillesøster}}
{{chart/end}}
</nowiki></pre>

gir dette resultatet:

{{chart/start|sammendrag=Slektstre eksempel}}
{{chart| | | |FM |~|y|~| FF | |FM=Farmor|FF=Farfar}}
{{chart| | | | | | | |)|-|-|-|.| }}
{{chart| | | MOR |y| FAR | |ASTRID|MOR=Mor|FAR=Far|ASTRID=[[Tante Astrid]]}}
{{chart| |,|-|-|-|+|-|-|-|.| | | }}
{{chart| OLA | | MEG  | | SØS | | |OLA=Min bror Ola|MEG='''Meg!'''|SØS=Min lillesøster}}
{{chart/end}}

Dette diagrammet visualiserer at jeg har en bror som heter Ola og en lillesøster, min mor er gift med min far 
og min fars foreldre kalles farmor og farfar, min fars foreldre har også et barn til som kalles Tante Astrid.
Sammendragsteksten {{para|sammendrag=|<var>tekst</var>}} bør brukes til å beskrive hva diagrammet inneholder. 

==Parametere==
Denne malen aksepterer opptil 50 ikke navngitte parametere, hver av disse angir en '''flis''' eller '''boks'''.
* '''Bokser''' kan i tillegg til tekst inneholde linker til andre sider og innholdet i hver boks er angitt ved å bruke ekstra navneparametere knyttet til malens formål. Hver boks er '''tre fliser bred''' og har normalt en svart marg som er to piksler bred. Bokser kan ha hvilket som helst navn, så lenge de er gyldige mal parameter navn, disse skal minimum ha to bokstaver.
* '''Fliser''' er linjefigurer som sammen brukes for å knytte sammen boksene. De inneholder varierende typer av horisontale og vertikale linjer, samt hjørner og kryss som behøves. Disse flisene er spesifisert ved å bruke en kode på en eller to symboler. Denne koden er mer eller mindre sammenlignbart med figuren på flisen som skal brukes. Det finnes også tomme fliser, som brukes for å lage mellomrom og koden er da et tomt mellomrom, en oversikt over tilgjengelige fliser sees under:

{| style="float: left; margin-left: 1em;"
|+ '''Heltrukne linjer:'''
|-
| {{big|<code>!</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|!}}{{chart/end}} || &nbsp;
| {{big|<code>,</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|,}}{{chart/end}} || &nbsp;
| {{big|<code>v</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|v}}{{chart/end}} || &nbsp;
| {{big|<code>.</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|.}}{{chart/end}} || &nbsp;
|-
| {{big|<code>-</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|-}}{{chart/end}} || &nbsp;
| {{big|<code>)</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|)}}{{chart/end}} || &nbsp;
| {{big|<code>+</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|+}}{{chart/end}} || &nbsp;
| {{big|<code>(</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|(}}{{chart/end}} || &nbsp;
|-
| || ||
| {{big|<code>`</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|`}}{{chart/end}} || &nbsp;
| {{big|<code>^</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|^}}{{chart/end}} || &nbsp;
| {{big|<code>'</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|'}}{{chart/end}} || &nbsp;
|}
{| style="float: left; margin-left: 1em;"
|+ '''Stiplede linjer:'''
|-
| {{big|<code>:</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|:}}{{chart/end}} || &nbsp;
| {{big|<code>F</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|F}}{{chart/end}} || &nbsp;
| {{big|<code>V</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|V}}{{chart/end}} || &nbsp;
| {{big|<code>7</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|7}}{{chart/end}} || &nbsp;
|-
| {{big|<code>~</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|~}}{{chart/end}} || &nbsp;
| {{big|<code>D</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|D}}{{chart/end}} || &nbsp;
| {{big|<code>%</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|%}}{{chart/end}} || &nbsp;
| {{big|<code>C</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|C}}{{chart/end}} || &nbsp;
|-
| || ||
| {{big|<code>L</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|L}}{{chart/end}} || &nbsp;
| {{big|<code>A</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|A}}{{chart/end}} || &nbsp;
| {{big|<code>J</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|J}}{{chart/end}} || &nbsp;
|}
{| style="float: left; margin-left: 1em;"
|+ '''Prikkede linjer:'''
|-
| {{big|<code>Q</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|Q}}{{chart/end}} || &nbsp;
| {{big|<code>S</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|S}}{{chart/end}} || &nbsp;
| {{big|<code>M</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|M}}{{chart/end}} || &nbsp;
| {{big|<code>T</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|T}}{{chart/end}} || &nbsp;
|-
| {{big|<code>P</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|P}}{{chart/end}} || &nbsp;
| {{big|<code>H</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|H}}{{chart/end}} || &nbsp;
| {{big|<code>R</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|R}}{{chart/end}} || &nbsp;
| {{big|<code>G</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|G}}{{chart/end}} || &nbsp;
|-
| || ||
| {{big|<code>Y</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|Y}}{{chart/end}} || &nbsp;
| {{big|<code>W</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|W}}{{chart/end}} || &nbsp;
| {{big|<code>Z</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|Z}}{{chart/end}} || &nbsp;
|}
{| style="float: left; margin-left: 1em;"
|+ '''Kombinert:'''
|-
| || ||
| {{big|<code>j</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|j}}{{chart/end}} || &nbsp;
| || ||
| || ||
| {{big|<code>y</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|y}}{{chart/end}} || &nbsp;
| || ||
| &nbsp; || &nbsp; || &nbsp;
| || ||
| {{big|<code>r</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|r}}{{chart/end}} || &nbsp;
| || ||
| || ||
| {{big|<code>m</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|m}}{{chart/end}} || &nbsp;
| || ||
| &nbsp; || &nbsp; || &nbsp;
| || ||
| {{big|<code>r2</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|r2}}{{chart/end}} || &nbsp;
| || ||
| || ||
| {{big|<code>m2</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|m2}}{{chart/end}} || &nbsp;
| || ||
|-
| {{big|<code>d</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|d}}{{chart/end}} || &nbsp;
| {{big|<code>*</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|*}}{{chart/end}} || &nbsp;
| {{big|<code>c</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|c}}{{chart/end}} || &nbsp;
| {{big|<code>f</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|f}}{{chart/end}} || &nbsp;
| {{big|<code>t</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|t}}{{chart/end}} || &nbsp;
| {{big|<code>e</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|e}}{{chart/end}} || &nbsp;
| &nbsp; || &nbsp; || &nbsp;
| {{big|<code>k</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|k}}{{chart/end}} || &nbsp;
| {{big|<code>a</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|a}}{{chart/end}} || &nbsp;
| {{big|<code>l</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|l}}{{chart/end}} || &nbsp;
| {{big|<code>o</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|o}}{{chart/end}} || &nbsp;
| {{big|<code>b</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|b}}{{chart/end}} || &nbsp;
| {{big|<code>p</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|p}}{{chart/end}} || &nbsp;
| &nbsp; || &nbsp; || &nbsp;
| {{big|<code>k2</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|k2}}{{chart/end}} || &nbsp;
| {{big|<code>a2</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|a2}}{{chart/end}} || &nbsp;
| {{big|<code>l2</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|l2}}{{chart/end}} || &nbsp;
| {{big|<code>o2</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|o2}}{{chart/end}} || &nbsp;
| {{big|<code>b2</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|b2}}{{chart/end}} || &nbsp;
| {{big|<code>p2</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|p2}}{{chart/end}} || &nbsp;
|-
| || ||
| {{big|<code>i</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|i}}{{chart/end}} || &nbsp;
| || ||
| || ||
| {{big|<code>h</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|h}}{{chart/end}} || &nbsp;
| || ||
| &nbsp; || &nbsp; || &nbsp;
| || ||
| {{big|<code>q</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|q}}{{chart/end}} || &nbsp;
| || ||
| || ||
| {{big|<code>n</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|n}}{{chart/end}} || &nbsp;
| || ||
| &nbsp; || &nbsp; || &nbsp;
| || ||
| {{big|<code>q2</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|q2}}{{chart/end}} || &nbsp;
| || ||
| || ||
| {{big|<code>n2</code>}} || style="border: 1px solid gray;" | {{chart/start}}{{chart|n2}}{{chart/end}} || &nbsp;
| || ||
|}
<br clear="both" />

==Utseende attributer==
Utseende til boksene på en rad kan styres ved hjelp av følgende valgfrie mal parametere:
* '''border''' beskriver bredden av boksens marg i piksler.
* '''boxstyle''' kan brukes for å knytte andre CSS koder direkte til boksens utseende, eksempelvis denne koden: 

<pre><nowiki>
{{chart/start}}
{{chart|border=1|boxstyle=background:green;  | | FOO |y| BAR | |FOO=Box 1|BAR=Box 2}}
{{chart | | |,|-|^|-|.| | }}
{{chart|border=3|boxstyle=background:yellow; | | FOO | | BAR | |FOO=Box 3|BAR=Box 4}}
{{chart/end}}
</nowiki></pre>

gir dette resultatet:

{{chart/start}}
{{chart|border=1|boxstyle=background:green;  | | FOO |y| BAR | |FOO=Box 1|BAR=Box 2}}
{{chart | | |,|-|^|-|.| | }}
{{chart|border=3|boxstyle=background:yellow; | | FOO | | BAR | |FOO=Box 3|BAR=Box 4}}
{{chart/end}}

Utseende attributer kan også brukes for å bestemme utseende av individuelle bokser innenfor en linje, som i eksempelet under:

<pre><nowiki>
{{chart/start}}
{{chart| | | | |CLEAR| | | | |CLEAR=Clear box}}
{{chart| |,|-|-|'|!|`|-|-|.| }}
{{chart|RED  |~|GREEN|~|BLUE |RED=Red box|GREEN=Green box|BLUE=Blue box
|boxstyle_RED  =background-color: red;
|boxstyle_GREEN=background-color: green;
|boxstyle_BLUE =background-color: blue;
}}
{{chart/end}}
</nowiki></pre>

som gir dette resultatet:

{{chart/start}}
{{chart| | | | |CLEAR| | | | |CLEAR=Clear box}}
{{chart| |,|-|-|'|!|`|-|-|.| }}
{{chart|RED  |~|GREEN|~|BLUE |RED=Red box|GREEN=Green box|BLUE=Blue box
|boxstyle_RED  =background-color: red;
|boxstyle_GREEN=background-color: green;
|boxstyle_BLUE =background-color: blue;
}}
{{chart/end}}

{{Warnsign|'''Note:'''}} Ved å spesifisere utseende attributer for individuelle navngitte bokser, må boksens navn være plassert til '''venstre''' i området reservert for dette i malen (som i "<code>|RED&nbsp;&nbsp;|</code>" isteden for "<code>|&nbsp;RED&nbsp;|</code>" i eksempelet over), ellers vil malen se etter utseende parametere med mellomrom i navnet.

{{tl|chart/start}} malen aksepterer også en valgfri '''utseende''' parameter som kan bli brukt til å bestemme CSS utseende for hele diagrammet.

==Overflytting fra den gamle [https://en.wikipedia.org/wiki/Template:Family_tree| Familytree malen.]==
{{tl|chart}} malen er basert på og stort sett kompatibelt med den tidligere [https://en.wikipedia.org/wiki/Template:Family_tree| Familytree malen.] Men for å bruke de ekstra funksjonene som denne malen tilbyr, må diagrammet oppdateres ved å bruke {{tl|chart}} isteden. De fleste av de eldre {{tl|familytree}} diagrammene kan bli oppdatert ved å bruke {{tl|chart}} og under-malene ved å bytte ut koden <code>familytree</code> med <code>chart</code>. Noen få av de kombinerte flisene måtte omdøpes og {{tl|familytree}} diagrammer som bruker disse flisene må gjøre forandringer. I tillegg er to kombinerte fliser lagt til, disse førte til at man kan føye stiplede linjer til heltrukne. Følgende oversikt viser forskjellene: 

{| class="notwikitable" style="text-align:center;" border="1" cellspacing="0" cellpadding="3"
!Tile!!{{tl|familytree}}!!{{tl|chart}}
|-
|{{chart/start}}{{chart|c}}{{chart/end}}||<code>{</code>||<code>c</code>
|-
|{{chart/start}}{{chart|d}}{{chart/end}}||<code>}</code>||<code>d</code>
|-
|{{chart/start}}{{chart|t}}{{chart/end}}||<code>#</code>||<code>t</code>
|-
|{{chart/start}}{{chart|e}}{{chart/end}}||<code>[</code>||<code>e</code>
|-
|{{chart/start}}{{chart|f}}{{chart/end}}||<code>]</code>||<code>f</code>
|-
|{{chart/start}}{{chart|i}}{{chart/end}}||&nbsp;||<code>i</code>
|-
|{{chart/start}}{{chart|j}}{{chart/end}}||&nbsp;||<code>j</code>
|}

Det må også nevnes at hvis {{tl|familytree}} malen ender med <code>|}}</code>, så bør den vertikale linjen bli fjernet, slik at den blir erstattet med enten tekst eller et tomt mellomrom.
familytree.js verktøyet under kan bli brukt til å konvertere mellom syntaksene. Endre start taggen i redigeringsmodus og trykk "Art&nbsp;→&nbsp;Templates" for å skifte tilbake til wikitekst modusen. 
Ved å gjøre dette vil alle de tilhørende malene bli oppdatert for å passe.

==Feilmeldinger==
* "{{red|Mal:Chart/cellb}}" Forårsakes ved å bytte <code>|}}</code> - til <code>| }}</code>.
* "{{red|Mal:Chart/celltTemplate:Chart/cellb}}" Forårsakes ved å bytte <code>||</code> - til <code>| |</code>, eller <code>|}}</code> - til <code>| }}</code>.
* "{{red|Mal:Chart/celly tTemplate:Chart/celly b}}" Forårsakes ved å bytte <code>|y |</code> - til <code>|y|</code>.

==Se også==
* [https://en.wikipedia.org/wiki/User:GregU/familytree.js| familytree.js] – Et verktøy for enkelt å lage eller oppdatere diagrammer som kan brukes i malene.
* [https://en.wikipedia.org/wiki/Category:Family_tree_templates| :Category:Family tree templates]

[[Kategori:Maler]]