יחידה:גרפים

היחידה גרפים מיועדת להצגת מידע מספרי בצורת גרף. שני סוגי גרפים נתמכים: "עמודות" ו"עוגה".

עמודות

פרמטרים

פרמטר	הסבר
תו הפרדה	כאשר פרמטר מסוים מורכב, מחרוזת זו מפרידה בין החלקים השונים. ברירת המחדל היא : (נקודתיים), אך בחב"דפדיה בעברית פעמים רבות נוח יותר להשתמש ב{{כ}}
רוחב	מספר, המתאר את רוחב הגרף בפיקסלים. ברירת המחדל היא 500
גובה	מספר, המתאר את גובה הגרף בפיקסלים. ברירת המחדל היא 350
קבוצה N	כאשר N הוא מספר, לדוגמה "קבוצה 1", "קבוצה 2" וכן הלאה. ערך הפרמטר הוא סדרת מספרים, מופרדים על ידי תו ההפרדה, שמתארים את הערכים השונים של העמודות בקבוצה
רמזים N	אפשרות להגדיר "רמז" לעמודה או עמודות מסוימות בגרף. ראו דוגמה למטה
קישורים N	אפשרות להגדיר קישורים מעמודות שונות. ראו דוגמה למטה
מאוחד	ניתן להגדיר פרמטר זה (עם ערך כלשהו) כדי להציג את העמודות בצורה מאוחדת, כלומר העמודות של הקבוצות השונות מונחות אחת על גבי השנייה.
צבעים	הגדרת צבעים לעמודות השונות. ניתן לא להגדיר, ואז הגרף יוצג עם צבעים לפי ברירת המחדל.
כותרות בציר האופקי	הכותרות לשנתות בציר X
סקאלה לכל קבוצה	שימוש בפרמטר זה, עם ערך כלשהו, יגרום לכך שלכל קבוצה תופיעה סקאלה אנכית נפרדת. לא ניתן להשתמש בפרמטר זה יחד עם "מאוחד"
קידומת יחידות	קידומת שתופיע לפני היחידות בכותרות. בהצגה, _ (קו תחתי) יוחלף ברווח. לדוגמה, $ יגרום לכך שבכותרות יופיע $100 במקום 100.
סיומת יחידות	סיומת שתופיע אחרי היחידות בכותרות. בהצגה, _ (קו תחתי) יוחלף ברווח. למשל _ק"ג יגרום לכך שבכותרות יופיע "45 ק"ג" במקום "45"
שמות הקבוצות	שמות הקבוצות השונות בגרף
סיבוב כותרות	שימוש בפרמטר זה, עם ערך כלשהו, יגרום לסיבוב הכותרות בציר האופקי 90°. עשוי להיות שימושי כשיש מספר גדול של כותרות.
הצגת הערך בעמודה	שימוש בפרמטר זה, עם ערך כלשהו, יגרום לערך המספרי להופיע בעמודה. הערך נכתב בגופן שחור, ואם משתמשים בפרמטר זה יש לשים לב להשתמש בצבעים בהירים מספיק לעמודות עצמן. אם חלק מהערכים ארוכים (כלומר דורשים ספרות רבות לכתיבתם, למשל 144.34567) יתכן שהערכים יחרגו מהעמודה - במקרה זה יש להימנע משימוש בפרמטר, משום שהערכים לא יוצגו נכון.

דוגמאות

פשוט

{{ #invoke:גרפים | עמודות
| תו הפרדה = {{כ}}
| קבוצה 1 = 40 {{כ}} 50 {{כ}} 60 {{כ}} 20
| קבוצה 2 = 20 {{כ}} 60 {{כ}} 12 {{כ}} 44
| קבוצה 3 = 55 {{כ}} 14 {{כ}} 33 {{כ}} 5
| קבוצה 4 = 33 {{כ}} 33 {{כ}} 33 {{כ}} 33
| קישורים 1 = תפוח {{כ}} תפוח#התפוח בתרבות {{כ}} דלישס
| רמזים 2 = רמז 1 {{כ}} רמז 2 {{כ}} רמז 3 {{כ}} רמז 4
| רמזים 4 = {{כ}} {{כ}} זהו שיר מאד עצוב, הנושא שלו כאוב. אם תשים תחבושת לא יעזור לך שנתיים.
| צבעים = green {{כ}} yellow {{כ}} orange {{כ}} black
| שמות הקבוצות = תפוח {{כ}} בננה {{כ}} אשכולית {{כ}} בן הרפה
| כותרות בציר האופקי = לפני {{כ}} בזמן {{כ}} אחרי {{כ}} נתיחה לאחר המוות
| סיומת יחידות = _ק"ג
}}

שימו לב ל"קישורים" ו"רמזים":

• לקבוצה 1 (כלומר העמודות הירוקות) הענקנו שלושה קישורים, כך ששלוש העמודות הירוקות הראשונות הן קישורים לערכים המתאימים. הרמז שמופיע בהצפת העכבר מעל העמודה הוא שם הערך המקושר. ניתן לקשר לפסקה או עוגן בערך על ידי שימוש ב-#
• לקבוצה 2 ("בננה") נתנו רמזים, כך שבצפת העכבר מעל אחת העמודות הצהובות מופיע הרמז. שהגדרנו, במקום רמז ברירת המחדל (שם הקבוצה, כמות ויחידות)
• לקבוצה 3 (העמודות הכתומות) אין רמזים ואין קישורים. הצפת העכבר מעל אחת העמודות הכתומות מראה את רמז ברירת המחדל
• ניתן להתאים רמז או קישור לעמודה מסוימת מתוך הקבוצה ולא לאחרות, על ידי שימוש בתווי הפרדה, כך למשל, בקבוצה 4 (העמודות השחורות) הגדרנו רמז רק לעמודה השלישית, והעמודות האחרות מציגות את רמז ברירת המחדל.

קובץ:Transparent.png

קובץ:Transparent.png

קובץ:Transparent.png

10

20

30

40

50

60

70

לפני

בזמן

אחרי

נתיחה לאחר המוות

•   תפוח
•   בננה
•   אשכולית
•   בן הרפה

מאוחד

אותו הגרף עצמו בצורה "מאוחדת", כלומר כאשר העמודות של הקבוצות השונות מונחות אחת על השנייה:

{{ #invoke:גרפים | עמודות
| תו הפרדה = {{כ}}
| קבוצה 1 = 40 {{כ}} 50 {{כ}} 60 {{כ}} 20
| קבוצה 2 = 20 {{כ}} 60 {{כ}} 12 {{כ}} 44
| קבוצה 3 = 55 {{כ}} 14 {{כ}} 33 {{כ}} 5
| קבוצה 4 = 33 {{כ}} 33 {{כ}} 33 {{כ}} 33
| קישורים 1 = תפוח {{כ}} אשכולית {{כ}} דלישס
| רמזים 2 = רמז 1 {{כ}} רמז 2 {{כ}} רמז 3 {{כ}} רמז 4
| רמזים 4 = {{כ}} {{כ}} זהו שיר מאד עצוב, 
הנושא שלו כאוב. 
אם תשים תחבושת לא יעזור לך שנתיים.
| צבעים = green {{כ}} yellow {{כ}} orange {{כ}} black
| שמות הקבוצות = תפוח {{כ}} בננה {{כ}} אשכולית {{כ}} בן הרפה
| כותרות בציר האופקי = לפני {{כ}} בזמן {{כ}} אחרי {{כ}} נתיחה לאחר המוות
| סיומת יחידות = _ק"ג
| מאוחד = כן
}}

קובץ:Transparent.png

קובץ:Transparent.png

קובץ:Transparent.png

50

100

150

200

לפני

בזמן

אחרי

נתיחה לאחר המוות

•   תפוח
•   בננה
•   אשכולית
•   בן הרפה

סקאלה לכל קבוצה

{{ #invoke:גרפים | עמודות
| רוחב = 800
| תו הפרדה = {{כ}}
| קבוצה 1 = 1500000 {{כ}} 2500000 {{כ}} 3500000
| קבוצה 2 = 200 {{כ}} 5000 {{כ}} 45000
| קבוצה 3 = 2000 {{כ}} 5000 {{כ}} 20000
| צבעים = red {{כ}} blue {{כ}} green
| שמות הקבוצות = אנשים {{כ}} מכוניות {{כ}} מחיר המכונית
| כותרות בציר האופקי = 1920 {{כ}} 1965 {{כ}} 2002
| רמזים 2 = {{כ}} {{כ}} אין נתונים טובים לשנה זו, המספרים נלקחו מהערכות של הד"ר רוני קרחוני
| קידומת יחידות = {{כ}} {{כ}} $
| סקאלה לכל קבוצה = 1
}}

500,000

1,000,000

1,500,000

2,000,000

2,500,000

3,000,000

3,500,000

4,000,000

10,000

20,000

30,000

40,000

50,000

2,500

5,000

7,500

10,000

12,500

15,000

17,500

20,000

22,500

25,000

1920

1965

2002

•   אנשים
•   מכוניות
•   מחיר המכונית

עוגה

פרמטרים

הפרמטר העיקרי ב"עוגה" הוא הפרמטר המתאר את הפרוסות. ניתן לספק פרמטר זה בשתי דרכים שונות: בעזרת פרמטר "פרוסות", כך שכל הפרוסות מתוארות בפרמטר יחיד, כשכל פרוסה מוקפת בסוגריים, או על ידי סדרת פרמטים "פרוסה 1", "פרוסה 2" וכן הלאה. אין מגבלה על מספר הפרוסות, אבל כמובן שאין טעם להגדיר יותר פרוסות מאשר ניתן להציג.

פרמטר	הסבר
תו הפרדה	ראו הסבר ב"עמודות"
רדיוס	מספר המתאר את רדיוס העוגה, בפיקסלים. ברירת המחדל - 150
פרוסות	רשימת הפרוסת השנות, כשכל פרוסה מוקפת בסוגריים. תוכן הפרוסה מורכב מארבעה חלקים, חלקם אופציונליים, מופרדים על ידי תווי הפרדה. החלקים הם: ערך. זהו נתון מספרי המתאר את הערך שפרוסה זו מייצגת. ניתן לכתוב את המספר בצורה נוחה להצגה, לדוגמה "1,240,000" או 1240000. אפשר להשתמש בסימון מדעי: 1.24e6. שלוש האפשרויות מייצגות את אותו המספר - מיליון ומאתיים וארבעים אלף. שם. שם זה מתאר את האובייקט שהפרוסה מייצגת צבע. נתון זה הוא אפציונלי - אם לא תבחרו צבע, ייעשה שימוש בצבע ברירת המחדל. מוגדרים 26 צבעי ברירת מחדל - אם תרצו להציג עוגה עם יותר מ-26 פרוסות, חובה להגדיר צבע לפרוסה 27 והלאה. קישור: נתון אופציונלי. שלא כמו ב"עמודות", הקישור אינו שם ערך, אלא יש להשתמש בקוד ויקי לקישור. ניתן להשתמש בקישורים פנימיים או חיצוניים, או לקשר לסעיף בערך בו מוצגת העוגה בעזרת קישור שנפתח ב-#. הרמז שיוצג כאשר מציפים את העכבר מעל לפרוסה הוא הטקסט של הקישור. דוגמה (ננית שתו ההפרדה הוא {{כ}}: | פרוסות = ( 147 {{כ}} רובים ושושנים {{כ}} {{כ}} [[#אל תביא לי את הסעיף|אקסל רוז מאבד את העשתונות]] ) ( 112 {{כ}} נירוונה ) התבנית מתעלמת מטקסט שמופיע בין הפרוסות השונות. ניתן לשבור את השורה אם הרשימה ארוכה.
פרוסה N	דרך אלטרנטיבית להזין את הפרמטרים. דרך זו אינה תואמת את השימוש ב"פרוסות=", ויש לבחור אחת מהשתיים. בדרך זו אין שימוש בסוגריים, ותוכן הפרוסה זהה למה שתואר לעיל. יש לתאר את כל הפרוסות, החל מ-1, ללא דילוגים. אם תגדירו "פרוסה 1", "פרוסה 2", "פרוסה 4" (בלי פרוסה 3), העוגה לא תוצג כראוי. דוגמה: | פרוסה 1 = 147 {{כ}} רובים ושושנים {{כ}} {{כ}} [[#אל תביא לי את הסעיף|אקסל רוז מאבד את העשתונות]] | פרוסה 2 = 112 {{כ}} נירוונה
קידומת יחידות	קידומת שתופיע לפני הערך המספרי במקרא וברמזים. _ (קו תחתי) יוחלף ברווח. לדוגמה, $ יגרום לכך שבמקרא יופיע $100 במקום 100.
סיומת יחידות	בדומה לקידומת, אך מוצג אחרי הערך. לדוגמה _ק"ג יגרום לכך שבמקרא יופיע 100 ק"ג במקום 100
אחוזים	פרמטר אופציונלי. שימוש בו יגרום לחישוב החלק של כל פרוסה, באחוזים והצגתו בסוגריים אחרי הערך המספרי במקרא, לדוגמה, 100 (37%) במקום 100

דוגמאות

{{#invoke:גרפים|עוגה
| רדיוס = 150
| פרוסות = 
    ( 1000000 : תפוחים ) 
    ( 2000000 : בננות  : gold) 
    ( 1440000 : משמשים ) 
    ( 6.4e5 : אגסים :: [[אגס|אגסים]] )
    ( 750,000 : אננסים )
| סיומת יחידות = _טונות
| אחוזים = כן
}}

נקודות לעיון:
# הגדרנו צבע (gold) עבור בננות - שאר הפרוסות יוצגו בצבעי ברירת המחדל.
# בפרוסות שונות, נעשה שימוש בשלוש הצורות השונות להזין מספרים. במקרא המספרים יוצגו בצורה אחידה
# בפרוסה "אגסים" השתמשנו בקישור - הקשה על הפרוסה תעביר את הקוראים לערך [[אגס]]

•   תפוחים: 1,000,000 טונות (17.2%)
•   בננות: 2,000,000 טונות (34.3%)
•   משמשים: 1,440,000 טונות (24.7%)
•   אגסים: 640,000 טונות (11.0%)
•   אננסים: 750,000 טונות (12.9%)

זו הצורה האלטרנטיבית להגדיר פרוסות:

{{#invoke:גרפים|עוגה
|רדיוס = 200
|סיומת יחידות = _יחידות
| פרוסה 1 = 1 : 1
| פרוסה 2 = 7 : 7
| פרוסה 3 = 8 : 8
| פרוסה 4 = 9 : 9
| פרוסה 5 = 10 : 10
| פרוסה 6 = 11 : 11
| פרוסה 7  = 12 : 12
| פרוסה 8  = 13 : 13
| פרוסה 9  = 14 : 14
| פרוסה 10 = 15 : 15
| פרוסה 11 = 16 : 16
| פרוסה 12 = 17 : 17
| פרוסה 13 = 18 : 18
| פרוסה 14 = 19 : 19
| פרוסה 15 = 20 : 20
| פרוסה 16 = 21 : 21
| פרוסה 17 = 22 : 22
| פרוסה 18 = 23 : 23
| פרוסה 19 = 24 : 24
| פרוסה 20 = 25 : 25
| פרוסה 21 = 26 : 26
| פרוסה 22 = 27 : 27
| פרוסה 23 = 28 : 28
| פרוסה 24 = 29 : 29
| פרוסה 25 = 30 : 30
| פרוסה 26 = 31 : 31
| אחוזים = כן
}}

•   1: 1 יחידות (0.2%)
•   7: 7 יחידות (1.5%)
•   8: 8 יחידות (1.7%)
•   9: 9 יחידות (1.9%)
•   10: 10 יחידות (2.1%)
•   11: 11 יחידות (2.3%)
•   12: 12 יחידות (2.5%)
•   13: 13 יחידות (2.7%)
•   14: 14 יחידות (2.9%)
•   15: 15 יחידות (3.2%)
•   16: 16 יחידות (3.4%)
•   17: 17 יחידות (3.6%)
•   18: 18 יחידות (3.8%)
•   19: 19 יחידות (4.0%)
•   20: 20 יחידות (4.2%)
•   21: 21 יחידות (4.4%)
•   22: 22 יחידות (4.6%)
•   23: 23 יחידות (4.8%)
•   24: 24 יחידות (5.0%)
•   25: 25 יחידות (5.3%)
•   26: 26 יחידות (5.5%)
•   27: 27 יחידות (5.7%)
•   28: 28 יחידות (5.9%)
•   29: 29 יחידות (6.1%)
•   30: 30 יחידות (6.3%)
•   31: 31 יחידות (6.5%)

---

--<syntaxhighlight lang=lua>
--[[
    keywords are used for languages: they are the names of the actual
    parameters of the template
]]

local keywords = {
    delimiter = 'תו הפרדה',
    barChart = 'עמודות',
    pieChart = 'עוגה',
    width = 'רוחב',
    height = 'גובה',
    stack = 'מאוחד',
    colors = 'צבעים',
    group = 'קבוצה',
    xlegend = 'כותרות בציר האופקי',
    tooltip = 'רמזים',
    links = 'קישורים',
    scalePerGroup = 'סקאלה לכל קבוצה',
    unitsPrefix = 'קידומת יחידות',
    unitsSuffix = 'סיומת יחידות',
    groupNames = 'שמות הקבוצות',
    slices = 'פרוסות',
    slice = 'פרוסה',
    radius = 'רדיוס',
    percent = 'אחוזים',
    xrotation = 'סיבוב כותרות',
    valueInBar = 'הצגת הערך בעמודה',

} -- here is what you want to translate


local defColors = {
'red',
'blue',
'green',
'yellow',
'fuchsia',
'aqua',
'brown',
'orange',
'purple',
'sienna',
'#F0A3FF',
'#191919',
'#005C31',
'#FFCC99',
'#808080',
'#8F7C00',
'#9DCC00',
'#003380',
'#FFA8BB',
'#426600',
'#5EF1F2',
'#00998F',
'#E0FF66',
'#740AFF',
'#FFFF80',
'#FF5005',
}

local function nulOrWhitespace( s )
    return not s or mw.text.trim( s ) == ''
end

local function createGroupList( tab, legends, cols )
    if #legends > 1 then
        table.insert( tab, mw.text.tag( 'div' ) )
        local list = {}
        local spanStyle = "padding:0 1em;background-color:%s;border:1px solid %s;margin-right:1em;-webkit-print-color-adjust:exact;"
        for gi = 1, #legends do
            local span = mw.text.tag( 'span', { style = string.format( spanStyle, cols[gi], cols[gi] ) }, '&nbsp;' ) .. ' '..  legends[gi]
            table.insert( list, mw.text.tag( 'li', {}, span ) )
        end
        table.insert( tab,
            mw.text.tag( 'ul',
-- chrome bug with column display with rtl.                 {style="text-align:right;width:100%;list-style:none;-webkit-column-width:12em;-moz-column-width:12em;column-width:12em"},
                {style="text-align:right;width:100%;list-style:none;-moz-column-width:12em;column-width:12em"},
                table.concat( list, '\n' )
            )
        )
        table.insert( tab, '</div>' )
    end
end

function pieChart( frame )
    local res, imslices, args = {}, {}, frame.args
    local radius
    local values, colors, names, legends, links = {}, {}, {}, {}, {}
    local delimiter = args[keywords.delimiter] or ':'
    local lang = mw.getContentLanguage()

    function getArg( s, def, subst, with )
        local result = args[keywords[s]] or def or ''
        if subst and with then result = mw.ustring.gsub( result, subst, with ) end
        return result
    end

    function analyzeParams()
        function addSlice( i, slice )
            local value, name, color, link = unpack( mw.text.split( slice, '%s*' .. delimiter .. '%s*' ) )
            values[i] = tonumber( lang:parseFormattedNumber( value ) )
                or error( string.format( 'Slice %d: \"%s\" could not be parsed as a number', i, value or '' ) )
            colors[i] = not nulOrWhitespace( color ) and color or defColors[i]
            names[i] = name or ''
            links[i] = link
        end
        
        radius = getArg( 'radius', 150 )
        local slicesStr = getArg( 'slices' )
        local prefix = getArg( 'unitsPrefix', '', '_', ' ' )
        local suffix = getArg( 'unitsSuffix', '', '_', ' ' )
        local percent = args[keywords.percent]
        local sum = 0
        local i, value = 0
        for slice in mw.ustring.gmatch( slicesStr or '', "%b()" ) do
            i = i + 1
            addSlice( i, mw.ustring.match( slice, '^%(%s*(.-)%s*%)$' ) )
        end
        
        for k, v in pairs(args) do
            local ind = mw.ustring.match( k, '^' .. keywords.slice .. '%s+(%d+)$' )
            if ind then addSlice( tonumber( ind ), v ) end
        end
        
        for _, val in ipairs( values ) do sum = sum + val end
        for i, value in ipairs( values ) do
            local addprec = percent and string.format( ' (%0.1f%%)', value / sum * 100 ) or ''
            legends[i] = mw.ustring.format( '%s: %s%s%s%s', names[i], prefix, lang:formatNum( value ), suffix, addprec )
            links[i] = mw.text.trim( links[i] or mw.ustring.format( '[[#noSuchAnchor|%s]]', mw.ustring.gsub( legends[i] or '', '[%[%]]', '' ) ) )
        end
    end

    function addRes( ... )
        for _, v in pairs( { ... } ) do
            table.insert( res, v )
        end
    end

    function createImageMap()
        addRes( '{{#tag:imagemap|', 'Image:Circle frame.svg{{!}}' .. ( radius * 2 ) .. 'px' )
        addRes( unpack( imslices ) )
        addRes( 'desc none', '}}' )
    end

    function drawSlice( i, q, start )
        local color = colors[i]
        local angle = start * 2 * math.pi
        local sin, cos = math.abs( math.sin( angle ) ), math.abs( math.cos( angle ) )
        local wsin, wcos = sin * radius, cos * radius
        local s1, s2, w1, w2, w3, w4, width, border
        local style
        if q == 1 then
            border = 'left'
            w1, w2, w3, w4 = 0, 0, wsin, wcos
            s1, s2 = 'bottom', 'left'
        elseif q == 2 then
            border = 'bottom'
            w1, w2, w3, w4 = 0, wcos, wsin, 0
            s1, s2 = 'bottom', 'right'
        elseif q == 3 then
            border = 'right'
            w1, w2, w3, w4 = wsin, wcos, 0, 0
            s1, s2 = 'top', 'right'
        else
            border = 'top'
            w1, w2, w3, w4 = wsin, 0, 0, wcos
            s1, s2 = 'top', 'left'
        end

        local style = string.format( 'position:absolute;%s:%spx;%s:%spx;width:%spx;height:%spx', s1, radius, s2, radius, radius, radius )
        if start <= ( q - 1 ) * 0.25 then
            style = string.format( '%s;border:0;background-color:%s', style, color )
        else
            style = string.format( '%s;border-width:%spx %spx %spx %spx;border-%s-color:%s', style, w1, w2, w3, w4, border, color )
        end
        addRes( mw.text.tag( 'div', { class = 'transborder', style = style }, '' ) )
    end

    function createSlices()
        function coordsOfAngle( angle )
            return ( 100 + math.floor( 100 * math.cos( angle ) ) ) .. ' ' .. ( 100 - math.floor( 100 * math.sin( angle ) ) )
        end

        local sum, start = 0, 0
        for _, value in ipairs( values ) do sum = sum + value end
        for i, value in ipairs(values) do
            local poly = { 'poly 100 100' }
            local startC, endC =  start / sum, ( start + value ) / sum
            local startQ, endQ = math.floor( startC * 4 + 1 ), math.floor( endC * 4 + 1 )
            for q = startQ, math.min( endQ, 4 ) do drawSlice( i, q, startC ) end
            for angle = startC * 2 * math.pi, endC * 2 * math.pi, 0.02 do
                table.insert( poly,  coordsOfAngle( angle ) )
            end
            table.insert( poly, coordsOfAngle( endC * 2 * math.pi ) .. ' 100 100 ' .. links[i] )
            table.insert( imslices, table.concat( poly, ' ' ) )
            start = start + values[i]
        end
    end

    analyzeParams()
    if #values == 0 then error( "no slices found - can't draw pie chart" ) end
    addRes( mw.text.tag( 'div', { style = string.format( "max-width:%spx", radius * 2 ) } ) )
    addRes( mw.text.tag( 'div', { style = string.format( 'position:relative;min-width:%spx;min-height:%spx;max-width:%spx;overflow:hidden;', radius * 2, radius * 2, radius * 2 ) } ) )
    createSlices()
    addRes( mw.text.tag( 'div', { style = string.format( 'position:absolute;min-width:%spx;min-height:%spx;overflow:hidden;', radius * 2, radius * 2 ) } ) )
    createImageMap()
    addRes( '</div>' ) -- close "position:relative" div that contains slices and imagemap.
    addRes( '</div>' ) -- close "position:relative" div that contains slices and imagemap.
    createGroupList( res, legends, colors ) -- legends
    addRes( '</div>' ) -- close containing div
    return frame:preprocess( table.concat( res, '\n' ) )
end


function barChart( frame )
    local res = {}
    local args = frame.args -- can be changed to frame:getParent().args
    local values, xlegends, colors, tooltips, yscales = {}, {}, {}, {} ,{}, {}, {}
    local groupNames, unitsSuffix, unitsPrefix, links = {}, {}, {}, {}
    local width, height, stack, delimiter, xrotation = 500, 350, false, args[keywords.delimiter] or ':'
    local chartWidth, chartHeight, defcolor, scalePerGroup 
    local valueInBar = args[keywords.valueInBar]


    local numGroups, numValues
    local scaleWidth

    function validate()
        function asGroups( name, tab, toDuplicate, emptyOK, defGroup )
            if #tab == 0 and not emptyOK then
                error( "must supply values for " .. keywords[name] )
            end
            if #tab == 1 and toDuplicate then
                for i = 2, numGroups do tab[i] = tab[1] end
            end
            if defGroup then for i = #tab + 1, numGroups do tab[i] = defGroup[i] end end 
            if #tab > 0 and #tab ~= numGroups then
                error ( keywords[name] .. ' should contain the same number of items as the number of groups (' .. numGroups .. '), but it has ' .. #tab .. ' items')
            end
        end

        -- do all sorts of validation here, so we can assume all params are good from now on.
        -- among other things, replace numerical values with mw.language:parseFormattedNumber() result


        chartHeight = height - 80
        numGroups = #values
        numValues = #values[1]
        defcolor = defcolor or 'blue'
        colors[1] = colors[1] or defColors[1]
        scaleWidth = scalePerGroup and 80 * numGroups or 100
        chartWidth = width -scaleWidth
        asGroups( 'unitsPrefix', unitsPrefix, true, true )
        asGroups( 'unitsSuffix', unitsSuffix, true, true )
        asGroups( 'colors', colors, false, true, defColors )
        asGroups( 'groupNames', groupNames, false, false )
        if stack and scalePerGroup then
            error( string.format( 'Illegal settings: %s and %s are incompatible.', keyword.stack, keyword.scalePerGroup ) )
        end
        for gi = 2, numGroups do
            if #values[gi] ~= numValues then error( keywords.group .. " " .. gi .. " does not have same number of values as " .. keywords.group .. " 1" ) end
        end
        if #xlegends ~= numValues then error( 'Illegal number of ' .. keywords.xlegend .. '. Should be exactly ' .. numValues .. 
                '\n' .. '(param="' .. args[keywords.xlegend] .. '")') end
    end

    function extractParams()
        function testone( keyword, key, val, tab )
            i = keyword == key and 0 or key:match( keyword .. "%s+(%d+)" )
            if not i then return end
            i = tonumber( i ) or error("Expect numerical index for key " .. keyword .. " instead of '" .. key .. "'")
            if i > 0 then tab[i] = {} end
            for s in mw.text.gsplit( val, '%s*' .. delimiter .. '%s*' ) do
                table.insert( i == 0 and tab or tab[i], s )
            end
            return true
        end

        for k, v in pairs( args ) do
            if k == keywords.width then
                width = tonumber( v )
                if not width or width < 200 then
                    error( 'Illegal width value (must be a number, and at least 200): ' .. v )
                end
            elseif k == keywords.height then
                height = tonumber( v )
                if not height or height < 200 then
                    error( 'Illegal height value (must be a number, and at least 200): ' .. v )
                end
            elseif k == keywords.stack then stack = true
            elseif k == keywords.scalePerGroup then scalePerGroup = true
            elseif k == keywords.defcolor then defcolor = v
            elseif k == keywords.xrotation then xrotation = true
            else
                for keyword, tab in pairs( {
                    group = values,
                    xlegend = xlegends,
                    colors = colors,
                    tooltip = tooltips,
                    unitsPrefix = unitsPrefix,
                    unitsSuffix = unitsSuffix,
                    groupNames = groupNames,
                    links = links,
                    } ) do
                        if testone( keywords[keyword], k, v, tab )
                            then break
                        end
                end
            end
        end
    end

    function roundup( x ) -- returns the next round number: eg., for 30 to 39.999 will return 40, for 3000 to 3999.99 wil return 4000. for 10 - 14.999 will return 15.
        local ordermag = 10 ^ math.floor( math.log10( x ) )
        local normalized = x /  ordermag
        local top = normalized >= 2.5 and ( math.floor( normalized + 1 ) )
            or normalized >= 2 and 2.5
            or normalized >= 1.5 and 2
            or 1.5
        return ordermag * top, top, ordermag
    end

    function calcHeightLimits() -- if limits were passed by user, use ithem, otherwise calculate. for "stack" there's only one limet.
        if stack then
            local sums = {}
            for _, group in pairs( values ) do
                for i, val in ipairs( group ) do sums[i] = ( sums[i] or 0 ) + val end
            end
            local sum = math.max( unpack( sums ) )
            for i = 1, #values do yscales[i] = sum end
        else
            for i, group in ipairs( values ) do yscales[i] = math.max( unpack( group ) ) end
        end
        for i, scale in ipairs( yscales ) do yscales[i] = roundup( scale ) end
        if not scalePerGroup then for i = 1, #values do yscales[i] = math.max( unpack( yscales ) ) end end
    end

    function tooltip( gi, i, val )
        if tooltips and tooltips[gi] and not nulOrWhitespace( tooltips[gi][i] ) then return tooltips[gi][i], true end
        local groupName = not nulOrWhitespace( groupNames[gi] ) and groupNames[gi] .. ': ' or ''
        local prefix = unitsPrefix[gi] or unitsPrefix[1] or ''
        local suffix = unitsSuffix[gi] or unitsSuffix[1] or ''
        return mw.ustring.gsub(groupName .. prefix .. mw.getContentLanguage():formatNum( tonumber( val ) or 0 ) .. suffix, '_', ' '), false
    end

    function calcHeights( gi, i, val )
        local barHeight = math.floor( val / yscales[gi] * chartHeight + 0.5 ) -- add half to make it "round" insstead of "trunc"
        local top, base = chartHeight - barHeight, 0
        if stack then
            local rawbase = 0
            for j = 1, gi - 1 do rawbase = rawbase + values[j][i] end -- sum the "i" value of all the groups below our group, gi.
            base = math.floor( chartHeight * rawbase / yscales[gi] ) -- normally, and especially if it's "stack", all the yscales must be equal.
        end
        return barHeight, top - base
    end

    function groupBounds( i )
        local setWidth = math.floor( chartWidth / numValues )
        local setOffset = ( i - 1 ) * setWidth
        return setOffset, setWidth
    end

    function calcx( gi, i )
        local setOffset, setWidth = groupBounds( i )
        if stack then
            local barWidth = math.min( 38, math.floor( 0.8 * setWidth ) )
            return setOffset + (setWidth - barWidth) / 2, barWidth
        end
        setWidth = 0.85 * setWidth
        local barWidth = math.floor( 0.75 * setWidth / numGroups )
        local left = setOffset + math.floor( ( gi - 1 ) / numGroups * setWidth )
        return left, barWidth
    end

    function drawbar( gi, i, val )
        local color, tooltip, custom = colors[gi] or defcolor or 'blue', tooltip( gi, i, val )
        local left, barWidth = calcx( gi, i )
        local barHeight, top = calcHeights( gi, i, val )
        local style = string.format("position:absolute;left:%spx;top:%spx;height:%spx;min-width:%spx;max-width:%spx;background-color:%s;box-shadow:2px -1px 4px 0 silver;overflow:hidden;text-align:center;line-height:%spx",
                        left, top, barHeight, barWidth, barWidth, color, barHeight)
        local link = links[gi] and links[gi][i] or ''
        local img = not nulOrWhitespace( link ) and mw.ustring.format( '[[File:Transparent.png|1000px|link=%s|%s]]', link, custom and tooltip or '' ) or ''
        table.insert( res, mw.text.tag( 'div', { style = style, title = tooltip, }, img .. (valueInBar and val or '' ) ) )
    end


    function drawYScale()
        function drawSingle( gi, color, width, single )
            local yscale = yscales[gi]
            local _, top, ordermag = roundup( yscale * 0.999 )
            local numnotches = top <= 1.5 and top * 4
                    or top == 2.5 and 10
                    or top <= 4  and top * 2
                    or top
            local valStyleStr =
                single and 'position:absolute;height=20px;text-align:right;vertical-align:middle;width:%spx;top:%spx;padding:0 2px'
                or 'position:absolute;height=20px;text-align:right;vertical-align:middle;width:%spx;top:%spx;left:3px;background-color:%s;color:white;font-weight:bold;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;padding:0 2px'
            local notchStyleStr = 'position:absolute;height=1px;min-width:5px;top:%spx;left:%spx;border:1px solid %s;'
            for i = 1, numnotches do
                local val = i / numnotches * yscale
                local y = chartHeight - calcHeights( gi, 1, val )
                local div = mw.text.tag( 'div', { style = string.format( valStyleStr, width - 10, y - 10, color ) }, mw.getContentLanguage():formatNum( tonumber( val ) or 0 ) )
                table.insert( res, div )
                div = mw.text.tag( 'div', { style = string.format( notchStyleStr, y, width - 4, color ) }, '' )
                table.insert( res, div )
            end
        end

        if scalePerGroup then
            local colWidth = 80
            local colStyle = "position:absolute;height:%spx;min-width:%spx;left:%spx;border-right:1px solid %s;color:%s"
            for gi = 1, numGroups do
                local left = ( gi - 1 ) * colWidth
                local color = colors[gi] or defcolor
                table.insert( res, mw.text.tag( 'div', { style = string.format( colStyle, chartHeight, colWidth, left, color, color ) } ) )
                drawSingle( gi, color, colWidth )
                table.insert( res, '</div>' )
            end
        else
            drawSingle( 1, 'black', scaleWidth, true )
        end
    end

    function drawXlegends()
        local setOffset, setWidth
        local legendDivStyleFormat = "position:absolute;left:%spx;top:20px;min-width:%spx;max-width:%spx;text-align:center;veritical-align:top;padding:0 0.3em;"
        local tickDivstyleFormat = "position:absolute;left:%spx;height:10px;width:1px;border-left:1px solid black;"
        for i = 1, numValues do
            if not nulOrWhitespace( xlegends[i] ) then
                setOffset, setWidth = groupBounds( i )
                table.insert( res, mw.text.tag( 'div', 
                    { 
                        class = xrotation and 'rot90', -- assigning null to a key means "do not use this key"
                        style = string.format( legendDivStyleFormat, setOffset, setWidth, setWidth ) 
                    }, xlegends[i] or '' )
                )
                table.insert( res, mw.text.tag( 'div', { style = string.format( tickDivstyleFormat, setOffset + setWidth / 2 ) }, '' ) )
            end
        end
    end

    function drawChart()
        table.insert( res, mw.text.tag( 'div', { style = string.format( 'max-width:%spx;', width ) } ) )
        table.insert( res, mw.text.tag( 'div', { style = string.format("position:relative;min-height:%spx;min-width:%spx;max-width:%spx;", height, width, width ) } ) )
        
        table.insert( res, mw.text.tag( 'div', { style = string.format("position:relative;top:0;left:0;min-height:%spx;min-width:%spx;max-width:%spx;border-left:1px black solid;border-bottom:1px black solid;", chartHeight, chartWidth, chartWidth ) } ) )
        for gi, group in pairs( values ) do
            for i, val in ipairs( group ) do
                drawbar( gi, i, val )
            end
        end
        table.insert( res, '</div>' )

        table.insert( res, mw.text.tag( 'div', { style = string.format("position:absolute;top:0;left:-4px;height:%spx;min-width:%spx;max-width:%spx;", chartHeight, scaleWidth, scaleWidth, scaleWidth ) } ) )
        drawYScale()
        table.insert( res, '</div>' )

        table.insert( res, mw.text.tag( 'div', { style = string.format( "position:absolute;top:%spx;left:%spx;width:%spx;", chartHeight, scaleWidth, chartWidth ) } ) )
        drawXlegends()
        table.insert( res, '</div>' )
        table.insert( res, '</div>' )
        createGroupList( res, groupNames, colors )
        table.insert( res, '</div>' )
    end

    extractParams()
    validate()
    calcHeightLimits()
    drawChart()
    return table.concat( res, "\n" )
end

return {
    ['bar-chart'] = barChart,
    [keywords.barChart] = barChart,
    [keywords.pieChart] = pieChart,
}
--</syntaxhighlight>