חב"דפדיה

תבנית:גרף

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

תבנית זו משתמשת ביחידה:Graph.

המידע מטה מוצג מתוך הדף תבנית:גרף/תיעוד.

תיעוד הפרמטרים בדף "יחידת גרף בגרמנית" "(תרגום התעוד לאנגלית)".

CSV2Chart עריכה

בכדי לייבא גרפים ממסמך של תוכנת גיליון נתונים או מתוכנת סטטיסטיקה ניתן לעשות שימוש בכלי ליבוא של גרפים מקבצי CSV ( [niebert.github.io/csv2wikichart_app/ CSV2Chart]) CSV2WikiChart נוצר ככלי תמיכה עבור ויקיפדיה ועבור משאבי למידה של Wikiversity המכילים נתונים.

פרמטרים עריכה

  • |width= - רוחב התרשים. בפיקסלים. ברירת מחדל: 150.
  • |height= - גובה התרשים. בפיקסלים. ברירת מחדל: 150.
  • |type=: סוג התרשים. ברירת מחדל: line.
    • line - תרשים רציף
    • area - תרשים שטח
    • rect - תרשים עמודות
    • pie - תרשים עוגה (וכעך)
    • stacked - תרשים עמודות ערימה
    • stackedarea - תרשים שטח מוערם
  • |interpolate= - שיטה להחלקת לתרשימי קווים ושטחים. מומלץ להשתמש ב-monotone עבור אינטרפולציה מעוקבת מונוטונית. ערכים נתמכים נוספים מפורטים בכתובת github.com/nyurik/vega/wiki/Marks#line.
  • |colors= - לוח צבעים. יש לרשום שם הצבע לערך y כמו (blue, red) (שמות צבעים: [www.w3schools.com/cssref/css_colors.asp css_colors]) או את קוד הצבע בפורמטים המקובלים #rgb /#rrggbb. הערכים צריכים להיות מופרדים בפסיקים. במידה ופרמטר זה יהיה ריק, המערכת תבחר צבעים מתוך רשימה שקיימת בה. יש להימנע מרווחים כפולים בערכי הצבעים.
  • |xAxisTitle= |yAxisTitle=:  - כתוביות של הצירים
  • |xAxisMin, xAxisMax, yAxisMin, ו yAxisMax=: ערכי מינימום ומקסימום של צירי x ו-y. הערכים מעוגלים למעלה ביחידות של 5. ניתן לבצע היפוך צירים, בשימוש בפרמטרים אלה, בקביעת הערך הנמוך ביותר ל-Max והערך הגבוה ביותר ל-Min. (פרמטרים אלה עדיין לא נתמכים עבור תרשימי עמודות)
  • |xAxisFormat= ו|yAxisFormat= : קובע את העיצוב של תוויות הציר. הערכים הנתמכים מפורטים בכתובת github.com/d3/d3-3.x-api-reference/blob/master/Formatting.md#numbers עבור מספרים. לדוגמה, ניתן להשתמש בפורמט % לפלט אחוזים. עבור מפרט תאריך/שעה של ערכים נתמכים הוא github.com/d3/d3-3.x-api-reference/blob/master/Time-Formatting.md,
למשל. xAxisFormat=%d-%m-%Y עבור תוצאה 13-01-1977.
  • |xAxisAngle=: מסובב את תוויות ציר ה-X בזווית שצוינה. ערכים מומלצים הם: -45, +45, -90, +90.
  • |xType= ו|yType=: סוגי נתונים של הערכים: integer למספר שלם, number למספר אמיתי (נקודה צפה). date לתאריך. string לערכים סידוריים. (השתמשו ב-string כדי למנוע חזרות על ערכי ציר, כאשר יש רק כמה ערכים).
  • |xScaleType= ו |yScaleType=: סוגי קנה מידה של צירי x ו-y. ערכים אפשריים: linear (סולם ליניארי) או log (סולם לוגריתמי) או sqrt (סולם שורש ריבועי). ברירת מחדל - linear.
  • |x=: ערכי x כרשימה מופרדת בפסיקים, לתאריכים ושעה ראו הערה ב-xType ו yType.
  • |y= או y1, y2, …: ערכי y עבור סדרת נתונים אחת או כמה, בהתאמה. עבור תרשימי עוגה y2 מציין את הרדיוס של המגזרים המתאימים. לתאריכים ושעה ראו הערה ב-xType ו-yType. במידה ויש ערכים שערכם 0, אין לכתוב 0, אלא להשאיר אותם ריקים, מופרדים בין פסיקים, אחרת ה-0 יוצג בתוית העמודה.
  • |legend=: הצג מקרא. (פועל רק במקרה של מספר סדרות נתונים).
  • |y1Title=, |y2Title=, …: מגדיר את התווית של סדרת הנתונים המתאימה במקרא.
  • |linewidths=: רוחב קו עבור תרשימי קו או מרחק בין מקטעי העוגה עבור תרשימי עוגה.
  • |showSymbols=: הצג סמל בנקודת הנתונים עבור גרפי קווים, אם סופק מספר, הוא יקבע את גודל הסמל, ברירת מחדל 2.5. ניתן להגדיר עבור כל סדרת נתונים עם csv, למשל: showSymbols=1, 2, 3, 4.
  • |symbolsShape=: צורה מותאמת אישית לסמלים שמצוירת בנקודות של הגרפים. הצורות יכולות להיות עיגול, x, ריבוע, צלב, יהלום, ומשולשים. ניתן להגדיר עבור כל סדרה של נתונים של csv.  צורות אפשריות:  circle, square, cross, diamond, triangle_up, triangle_down, triangle_right, triangle_left, banana
  • |symbolsNoFill=: אם true סמל יהיה מלא.
  • |symbolsStroke=: אם נעשה שימוש בסמל "x" או באופציה "symbolsNoFill" סמל רוחב קו, ברירת מחדל 2.5
  • |showValues=: תוספת. פלט של ערכי y כטקסט. (כרגע נתמכים רק תרשימי עמודות ועוגה.) ניתן להגדיר את הפלט באמצעות הפרמטרים הבאים המסופקים:

name1:value1, name2:value2 |showValues=fontcolor:blue,angle:0).

    • format: פרמט את הפלט [github.com/d3/d3-3.x-api-reference/blob/master/Formatting.md#numbers למספרים], [github.com/d3/d3-3.x-api-reference/blob/master/Time-Formatting.md לתאריך/זמן] :
    • fontcolor: צבע טקסט.
    • fontsize: גודל טקסט.
    • offset: הזזת טקסט לפי ההיסט הנתון. (לתרשימי עמוד ועוגה)
    • angle: (תרשים עוגה בלבד):
  • |innerRadius=: עבור תרשימי עוגה: מגדיר את הרדיוס הפנימי ליצירת תרשים כעך.
  • |xGrid ו yGrid=: הצגת קווי רשת על צירי x ו-y.
  • הערות (Annotations):
    • |vAnnotatonsLine ו hAnnotatonsLine:= הצגת קווי הערה אנכיים או אופקיים על ערכים ספציפיים, למשל.hAnnotationsLine=4, 5, 6
    • |vAnnotatonsLabel ו hAnnotatonsLabel:= הצגת תוויות הערות אנכיות או אופקיות עבור קווים, למשל. hAnnotationLabel = תוית1, תוית2, תוית3.

דוגמאות עריכה

קו עריכה

הגרף המינימלי ביותר שניתן לכתוב בתבנית. רק ערכי הצירים. ניתן לראות בגרף זה שבררת המחדל של סוג הגרף (type) הוא line, בררת המחדל של פרמטרים height ו width שווה ל-150 פיקסלים. ובררת המחדל של צבע הקו הראשון הוא כחול. 

{{גרף
 |x = 1,2,3,4,5,6,7,8
 |y = 10,12,6,14,2,10,7,9
}}

<graph>{"legends":[],"scales":[{"type":"linear","name":"x","zero":false,"domain":{"data":"chart","field":"x"},"range":"width","nice":true},{"type":"linear","name":"y","domain":{"data":"chart","field":"y"},"zero":false,"range":"height","nice":true},{"domain":{"data":"chart","field":"series"},"type":"ordinal","name":"color","range":"category10"}],"version":2,"marks":[{"type":"line","properties":{"hover":{"stroke":{"value":"red"}},"update":{"stroke":{"scale":"color","field":"series"}},"enter":{"y":{"scale":"y","field":"y"},"x":{"scale":"x","field":"x"},"stroke":{"scale":"color","field":"series"},"strokeWidth":{"value":2.5}}},"from":{"data":"chart"}}],"height":200,"axes":[{"type":"x","scale":"x","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false},{"type":"y","scale":"y","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false}],"data":[{"format":{"parse":{"y":"integer","x":"integer"},"type":"json"},"name":"chart","values":[{"y":10,"series":"y","x":1},{"y":12,"series":"y","x":2},{"y":6,"series":"y","x":3},{"y":14,"series":"y","x":4},{"y":2,"series":"y","x":5},{"y":10,"series":"y","x":6},{"y":7,"series":"y","x":7},{"y":9,"series":"y","x":8}]}],"width":200}</graph> שימו לב: ציר-Y לא מתחיל דווקא ב-0, אלא בערך הקטן ביותר בסדרת הערכים. אפשר לשנות זאת בעזרת פרמטר yAxisMin.

קנה מידה לוגריתמי עריכה

כדי ליצור גרף עם קנה מידה לוגריתמי בציר Y, משתמשים ב yScaleType=log. 

{{גרף
|width=400|height=250
|type=line
|yScaleType=log
|yAxisMax = 10000
|x=1947,1950,1955,1960,1965,1970,1975,1980,1985,1990
|y1=12,120,130,260,400,950,1040,1500,5000,9000
|yGrid=
}}

<graph>{"legends":[],"scales":[{"type":"linear","name":"x","zero":false,"domain":{"data":"chart","field":"x"},"range":"width","nice":true},{"clamp":true,"type":"log","name":"y","domainMax":10000,"domain":{"data":"chart","field":"y"},"zero":false,"range":"height","nice":false},{"domain":{"data":"chart","field":"series"},"type":"ordinal","name":"color","range":"category10"}],"version":2,"marks":[{"type":"line","properties":{"hover":{"stroke":{"value":"red"}},"update":{"stroke":{"scale":"color","field":"series"}},"enter":{"y":{"scale":"y","field":"y"},"x":{"scale":"x","field":"x"},"stroke":{"scale":"color","field":"series"},"strokeWidth":{"value":2.5}}},"from":{"data":"chart"}}],"height":250,"axes":[{"type":"x","scale":"x","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false},{"type":"y","scale":"y","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":true}],"data":[{"format":{"parse":{"y":"integer","x":"integer"},"type":"json"},"name":"chart","values":[{"y":12,"series":"y","x":1947},{"y":120,"series":"y","x":1950},{"y":130,"series":"y","x":1955},{"y":260,"series":"y","x":1960},{"y":400,"series":"y","x":1965},{"y":950,"series":"y","x":1970},{"y":1040,"series":"y","x":1975},{"y":1500,"series":"y","x":1980},{"y":5000,"series":"y","x":1985},{"y":9000,"series":"y","x":1990}]}],"width":400}</graph>

שטח עריכה 

{{גרף
 |type = area
 |width = 400
 |height = 100
 |x = 1,2,3,4,5,6,7,8
 |y = 10,12,6,14,2,10,7,9
}}

<graph>{"legends":[],"scales":[{"type":"linear","name":"x","zero":false,"domain":{"data":"chart","field":"x"},"range":"width","nice":true},{"type":"linear","name":"y","domain":{"data":"chart","field":"y"},"zero":true,"range":"height","nice":true},{"domain":{"data":"chart","field":"series"},"type":"ordinal","name":"color","range":"category10"}],"version":2,"marks":[{"type":"area","properties":{"hover":{"fill":{"value":"red"}},"update":{"fill":{"scale":"color","field":"series"}},"enter":{"y":{"scale":"y","field":"y"},"x":{"scale":"x","field":"x"},"y2":{"scale":"y","value":0},"fill":{"scale":"color","field":"series"}}},"from":{"data":"chart"}}],"height":100,"axes":[{"type":"x","scale":"x","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false},{"type":"y","scale":"y","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false}],"data":[{"format":{"parse":{"y":"integer","x":"integer"},"type":"json"},"name":"chart","values":[{"y":10,"series":"y","x":1},{"y":12,"series":"y","x":2},{"y":6,"series":"y","x":3},{"y":14,"series":"y","x":4},{"y":2,"series":"y","x":5},{"y":10,"series":"y","x":6},{"y":7,"series":"y","x":7},{"y":9,"series":"y","x":8}]}],"width":400}</graph>

שימו לב
ציר Y מתחיל ב-0

עמודות עריכה 

{{גרף
 |type = rect
 |width = 400
 |height = 100
 |xAxisTitle = X
 |yAxisTitle = Y
 |x = 1,2,3,4,5,6,7,8
 |y = 10,12,6,14,2,10,7,9
}}

<graph>{"legends":[],"scales":[{"type":"ordinal","name":"x","zero":false,"domain":{"data":"chart","field":"x"},"padding":0.2,"range":"width","nice":true},{"type":"linear","name":"y","domain":{"data":"chart","field":"y"},"zero":true,"range":"height","nice":true},{"domain":{"data":"chart","field":"series"},"type":"ordinal","name":"color","range":"category10"}],"version":2,"marks":[{"type":"rect","properties":{"hover":{"fill":{"value":"red"}},"update":{"fill":{"scale":"color","field":"series"}},"enter":{"y":{"scale":"y","field":"y"},"x":{"scale":"x","field":"x"},"y2":{"scale":"y","value":0},"width":{"scale":"x","offset":-1,"band":true},"fill":{"scale":"color","field":"series"}}},"from":{"data":"chart"}}],"height":100,"axes":[{"type":"x","title":"X","scale":"x","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false},{"type":"y","title":"Y","scale":"y","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false}],"data":[{"format":{"parse":{"y":"integer","x":"integer"},"type":"json"},"name":"chart","values":[{"y":10,"series":"y","x":1},{"y":12,"series":"y","x":2},{"y":6,"series":"y","x":3},{"y":14,"series":"y","x":4},{"y":2,"series":"y","x":5},{"y":10,"series":"y","x":6},{"y":7,"series":"y","x":7},{"y":9,"series":"y","x":8}]}],"width":400}</graph>

עוגה עריכה 

{{גרף
 |type = pie
 |width = 100
 |height = 100
 |legend = מקרא
 |x = תפוחים,תפוזים,בננות,אגוזים,אבוקדו,אורז,חיטה,אגסים,פפאיה
 |y1 = 100,200,150,300,100,100,150,50,200
}}

<graph>{"legends":[{"properties":{"legend":{"y":{"value":-100}},"title":{"fill":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"stroke":"color","title":"מקרא","fill":"color"}],"scales":[{"domain":{"data":"chart","field":"x"},"type":"ordinal","name":"color","range":"category10"}],"version":2,"marks":[{"type":"arc","properties":{"hover":{"fill":{"value":"red"}},"update":{"fill":{"scale":"color","field":"x"}},"enter":{"endAngle":{"field":"layout_end"},"innerRadius":{"value":0},"outerRadius":{"value":100},"startAngle":{"field":"layout_start"},"stroke":{"value":"white"},"fill":{"scale":"color","field":"x"},"strokeWidth":{"value":1}}},"from":{"data":"chart","transform":[{"type":"pie","field":"y"}]}}],"height":100,"axes":[],"data":[{"format":{"parse":{"y":"integer","x":"string"},"type":"json"},"name":"chart","values":[{"y":100,"x":"תפוחים"},{"y":200,"x":"תפוזים"},{"y":150,"x":"בננות"},{"y":300,"x":"אגוזים"},{"y":100,"x":"אבוקדו"},{"y":100,"x":"אורז"},{"y":150,"x":"חיטה"},{"y":50,"x":"אגסים"},{"y":200,"x":"פפאיה"}]}],"width":100}</graph>

קווים מרובים עריכה 

{{גרף
 |type = line
 |width = 400
 |height = 100
 |xAxisTitle = X
 |yAxisTitle = Y
 |legend = מקרא
 |x = 1,2,3,4,5,6,7,8
 |y1 = 10,12,6,14,2,10,7,9
 |y2 = 2,4,6,8,13,11,9,2
 |y1Title = סדרה א
 |y2Title = סדרה ב
 |colors = #0000aa,#ff8000
}}

<graph>{"legends":[{"properties":{"title":{"fill":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"stroke":"color","title":"מקרא","fill":"color"}],"scales":[{"type":"linear","name":"x","zero":false,"domain":{"data":"chart","field":"x"},"range":"width","nice":true},{"type":"linear","name":"y","domain":{"data":"chart","field":"y"},"zero":false,"range":"height","nice":true},{"domain":{"data":"chart","field":"series"},"type":"ordinal","name":"color","range":["#0000aa","#ff8000"]}],"version":2,"marks":[{"type":"group","marks":[{"properties":{"hover":{"stroke":{"value":"red"}},"update":{"stroke":{"scale":"color","field":"series"}},"enter":{"y":{"scale":"y","field":"y"},"x":{"scale":"x","field":"x"},"stroke":{"scale":"color","field":"series"},"strokeWidth":{"value":2.5}}},"type":"line"}],"from":{"data":"chart","transform":[{"groupby":["series"],"type":"facet"}]}}],"height":100,"axes":[{"type":"x","title":"X","scale":"x","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false},{"type":"y","title":"Y","scale":"y","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false}],"data":[{"format":{"parse":{"y":"integer","x":"integer"},"type":"json"},"name":"chart","values":[{"y":10,"series":"סדרה א","x":1},{"y":12,"series":"סדרה א","x":2},{"y":6,"series":"סדרה א","x":3},{"y":14,"series":"סדרה א","x":4},{"y":2,"series":"סדרה א","x":5},{"y":10,"series":"סדרה א","x":6},{"y":7,"series":"סדרה א","x":7},{"y":9,"series":"סדרה א","x":8},{"y":2,"series":"סדרה ב","x":1},{"y":4,"series":"סדרה ב","x":2},{"y":6,"series":"סדרה ב","x":3},{"y":8,"series":"סדרה ב","x":4},{"y":13,"series":"סדרה ב","x":5},{"y":11,"series":"סדרה ב","x":6},{"y":9,"series":"סדרה ב","x":7},{"y":2,"series":"סדרה ב","x":8}]}],"width":400}</graph> ציר Y מתחיל בערך הנמוך ביותר בכל הסדרות.

שטחים מרובים, חופפים עריכה 

{{גרף
 |type = area
 |width = 400
 |height = 100
 |xAxisTitle = X
 |yAxisTitle = Y
 |legend = מקרא
 |x = 1,2,3,4,5,6,7,8
 |y1 = 10,12,6,14,2,10,7,9
 |y2 = 2,4,6,8,13,11,9,2
 |y1Title = סדרה א
 |y2Title = סדרה ב
 |colors = #800000aa,#80ff8000
}}

<graph>{"legends":[{"properties":{"title":{"fill":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"stroke":"color","title":"מקרא","fill":"color"}],"scales":[{"type":"linear","name":"x","zero":false,"domain":{"data":"chart","field":"x"},"range":"width","nice":true},{"type":"linear","name":"y","domain":{"data":"chart","field":"y"},"zero":true,"range":"height","nice":true},{"domain":{"data":"chart","field":"series"},"type":"ordinal","name":"color","range":["#0000aa","#ff8000"]},{"type":"ordinal","name":"transparency","range":["0.50196078431373","0.50196078431373"]}],"version":2,"marks":[{"type":"group","marks":[{"properties":{"hover":{"fill":{"value":"red"}},"update":{"fillOpacity":{"scale":"transparency","field":"series"},"fill":{"scale":"color","field":"series"}},"enter":{"y":{"scale":"y","field":"y"},"x":{"scale":"x","field":"x"},"y2":{"scale":"y","value":0},"fill":{"scale":"color","field":"series"}}},"type":"area"}],"from":{"data":"chart","transform":[{"groupby":["series"],"type":"facet"}]}}],"height":100,"axes":[{"type":"x","title":"X","scale":"x","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false},{"type":"y","title":"Y","scale":"y","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false}],"data":[{"format":{"parse":{"y":"integer","x":"integer"},"type":"json"},"name":"chart","values":[{"y":10,"series":"סדרה א","x":1},{"y":12,"series":"סדרה א","x":2},{"y":6,"series":"סדרה א","x":3},{"y":14,"series":"סדרה א","x":4},{"y":2,"series":"סדרה א","x":5},{"y":10,"series":"סדרה א","x":6},{"y":7,"series":"סדרה א","x":7},{"y":9,"series":"סדרה א","x":8},{"y":2,"series":"סדרה ב","x":1},{"y":4,"series":"סדרה ב","x":2},{"y":6,"series":"סדרה ב","x":3},{"y":8,"series":"סדרה ב","x":4},{"y":13,"series":"סדרה ב","x":5},{"y":11,"series":"סדרה ב","x":6},{"y":9,"series":"סדרה ב","x":7},{"y":2,"series":"סדרה ב","x":8}]}],"width":400}</graph>

עמודות מרובות עריכה 

{{גרף
 |type = rect
 |width = 400
 |height = 100
 |xAxisTitle = X
 |yAxisTitle = Y
 |legend = מקרא
 |x = 1,2,3,4,5,6,7,8
 |y1 = 10,12,6,14,2,10,7,9
 |y2 = 2,4,6,8,13,11,9,2
 |y1Title = סדרה א
 |y2Title = סדרה ב
 |colors = #800000aa,#80ff8000
}}

<graph>{"legends":[{"properties":{"title":{"fill":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"stroke":"color","title":"מקרא","fill":"color"}],"scales":[{"type":"ordinal","name":"x","zero":false,"domain":{"data":"chart","field":"x"},"padding":0.2,"range":"width","nice":true},{"type":"linear","name":"y","domain":{"data":"chart","field":"y"},"zero":true,"range":"height","nice":true},{"domain":{"data":"chart","field":"series"},"type":"ordinal","name":"color","range":["#0000aa","#ff8000"]},{"type":"ordinal","name":"transparency","range":["0.50196078431373","0.50196078431373"]}],"version":2,"marks":[{"type":"group","from":{"data":"chart","transform":[{"groupby":"x","type":"facet"}]},"properties":{"enter":{"width":{"scale":"x","band":true},"x":{"scale":"x","field":"key"}}},"marks":[{"properties":{"hover":{"fill":{"value":"red"}},"update":{"fillOpacity":{"scale":"transparency","field":"series"},"fill":{"scale":"color","field":"series"}},"enter":{"y":{"scale":"y","field":"y"},"x":{"scale":"series","field":"series"},"y2":{"scale":"y","value":0},"width":{"scale":"series","offset":-1,"band":true},"fill":{"scale":"color","field":"series"}}},"type":"rect"}],"scales":[{"domain":{"field":"series"},"type":"ordinal","name":"series","range":"width"}]}],"height":100,"axes":[{"type":"x","title":"X","scale":"x","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false},{"type":"y","title":"Y","scale":"y","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false}],"data":[{"format":{"parse":{"y":"integer","x":"integer"},"type":"json"},"name":"chart","values":[{"y":10,"series":"סדרה א","x":1},{"y":12,"series":"סדרה א","x":2},{"y":6,"series":"סדרה א","x":3},{"y":14,"series":"סדרה א","x":4},{"y":2,"series":"סדרה א","x":5},{"y":10,"series":"סדרה א","x":6},{"y":7,"series":"סדרה א","x":7},{"y":9,"series":"סדרה א","x":8},{"y":2,"series":"סדרה ב","x":1},{"y":4,"series":"סדרה ב","x":2},{"y":6,"series":"סדרה ב","x":3},{"y":8,"series":"סדרה ב","x":4},{"y":13,"series":"סדרה ב","x":5},{"y":11,"series":"סדרה ב","x":6},{"y":9,"series":"סדרה ב","x":7},{"y":2,"series":"סדרה ב","x":8}]}],"width":400}</graph>

שטחים מצטברים, עם החלקה ובלעדיה עריכה

שימו לב לפרמטר interpolate, ששולט על ההחלקה 

{{גרף
 |type = stackedarea
 |width = 400
 |height = 200
 |xAxisTitle = X
 |yAxisTitle = Y
 |legend = מקרא
 |x = 1,2,3,4,5,6,7,8
 |y1 = 10,12,6,14,2,10,7,9
 |y2 = 2,4,6,8,13,11,9,2
 |y1Title = סדרה א
 |y2Title = סדרה ב
 | colors = #800000aa,#80ff8000
}}

{{גרף
 |width = 400
 |height = 200
 |xAxisTitle = X
 |yAxisTitle = Y
 |legend = מקרא
 |type = stackedarea
 |x = 1,2,3,4,5,6,7,8
 |y1 = 10,12,6,14,2,10,7,9
 |y2 = 2,4,6,8,13,11,9,2
 |y1Title = סדרה א
 |y2Title = סדרה ב
 |interpolate = monotone
 |colors = seagreen, orchid
}}

<graph>{"legends":[{"properties":{"title":{"fill":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"stroke":"color","title":"מקרא","fill":"color"}],"scales":[{"type":"linear","name":"x","zero":false,"domain":{"data":"chart","field":"x"},"range":"width","nice":true},{"type":"linear","name":"y","domain":{"data":"stats","field":"sum_y"},"zero":true,"range":"height","nice":true},{"domain":{"data":"chart","field":"series"},"type":"ordinal","name":"color","range":["#0000aa","#ff8000"]},{"type":"ordinal","name":"transparency","range":["0.50196078431373","0.50196078431373"]}],"version":2,"marks":[{"type":"group","marks":[{"properties":{"hover":{"fill":{"value":"red"}},"update":{"fillOpacity":{"scale":"transparency","field":"series"},"fill":{"scale":"color","field":"series"}},"enter":{"y":{"scale":"y","field":"layout_start"},"x":{"scale":"x","field":"x"},"y2":{"scale":"y","field":"layout_end"},"fill":{"scale":"color","field":"series"}}},"type":"area"}],"from":{"data":"chart","transform":[{"field":"y","type":"stack","sortby":["-_id"],"groupby":["x"]},{"groupby":["series"],"type":"facet"}]}}],"height":200,"axes":[{"type":"x","title":"X","scale":"x","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false},{"type":"y","title":"Y","scale":"y","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false}],"data":[{"format":{"parse":{"y":"integer","x":"integer"},"type":"json"},"name":"chart","values":[{"y":10,"series":"סדרה א","x":1},{"y":12,"series":"סדרה א","x":2},{"y":6,"series":"סדרה א","x":3},{"y":14,"series":"סדרה א","x":4},{"y":2,"series":"סדרה א","x":5},{"y":10,"series":"סדרה א","x":6},{"y":7,"series":"סדרה א","x":7},{"y":9,"series":"סדרה א","x":8},{"y":2,"series":"סדרה ב","x":1},{"y":4,"series":"סדרה ב","x":2},{"y":6,"series":"סדרה ב","x":3},{"y":8,"series":"סדרה ב","x":4},{"y":13,"series":"סדרה ב","x":5},{"y":11,"series":"סדרה ב","x":6},{"y":9,"series":"סדרה ב","x":7},{"y":2,"series":"סדרה ב","x":8}]},{"transform":[{"type":"aggregate","summarize":{"y":"sum"},"groupby":["x"]}],"name":"stats","source":"chart"}],"width":400}</graph>

<graph>{"legends":[{"properties":{"title":{"fill":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"stroke":"color","title":"מקרא","fill":"color"}],"scales":[{"type":"linear","name":"x","zero":false,"domain":{"data":"chart","field":"x"},"range":"width","nice":true},{"type":"linear","name":"y","domain":{"data":"stats","field":"sum_y"},"zero":true,"range":"height","nice":true},{"domain":{"data":"chart","field":"series"},"type":"ordinal","name":"color","range":["seagreen","orchid"]}],"version":2,"marks":[{"type":"group","marks":[{"properties":{"hover":{"fill":{"value":"red"}},"update":{"fill":{"scale":"color","field":"series"}},"enter":{"y":{"scale":"y","field":"layout_start"},"interpolate":{"value":"monotone"},"y2":{"scale":"y","field":"layout_end"},"x":{"scale":"x","field":"x"},"fill":{"scale":"color","field":"series"}}},"type":"area"}],"from":{"data":"chart","transform":[{"field":"y","type":"stack","sortby":["-_id"],"groupby":["x"]},{"groupby":["series"],"type":"facet"}]}}],"height":200,"axes":[{"type":"x","title":"X","scale":"x","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false},{"type":"y","title":"Y","scale":"y","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false}],"data":[{"format":{"parse":{"y":"integer","x":"integer"},"type":"json"},"name":"chart","values":[{"y":10,"series":"סדרה א","x":1},{"y":12,"series":"סדרה א","x":2},{"y":6,"series":"סדרה א","x":3},{"y":14,"series":"סדרה א","x":4},{"y":2,"series":"סדרה א","x":5},{"y":10,"series":"סדרה א","x":6},{"y":7,"series":"סדרה א","x":7},{"y":9,"series":"סדרה א","x":8},{"y":2,"series":"סדרה ב","x":1},{"y":4,"series":"סדרה ב","x":2},{"y":6,"series":"סדרה ב","x":3},{"y":8,"series":"סדרה ב","x":4},{"y":13,"series":"סדרה ב","x":5},{"y":11,"series":"סדרה ב","x":6},{"y":9,"series":"סדרה ב","x":7},{"y":2,"series":"סדרה ב","x":8}]},{"transform":[{"type":"aggregate","summarize":{"y":"sum"},"groupby":["x"]}],"name":"stats","source":"chart"}],"width":400}</graph>

עמודות מצטברות, סיבוב כותרות בציר X עריכה

שימו לב. y1 יהיה העליון ביותר. y הגדול ביותר יהיה התחתון ביותר. 

{{גרף
 |type = stackedrect
 |width = 400
 |height = 200
 |xAxisAngle = -90
 |xAxisTitle = יעד משלוח
 |yAxisTitle = משלוחים, באלפי טונות
 |legend = מקרא
 |x = ים,שוק,סופר,זבל,מכולת,יצוא,צה"ל,עיבוד,פחת
 |y1 = 10,12,6,14,2,10,7,9
 |y2 = 2,4,6,8,13,11,9,2
 |y1Title = פירות
 |y2Title = ירקות
 |colors = seagreen, orchid
}}

<graph>{"legends":[{"properties":{"title":{"fill":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"stroke":"color","title":"מקרא","fill":"color"}],"scales":[{"type":"ordinal","name":"x","zero":false,"domain":{"data":"chart","field":"x"},"range":"width","nice":true},{"type":"linear","name":"y","domain":{"data":"stats","field":"sum_y"},"zero":true,"range":"height","nice":true},{"domain":{"data":"chart","field":"series"},"type":"ordinal","name":"color","range":["seagreen","orchid"]}],"version":2,"marks":[{"type":"group","marks":[{"properties":{"hover":{"fill":{"value":"red"}},"update":{"fill":{"scale":"color","field":"series"}},"enter":{"y":{"scale":"y","field":"layout_start"},"x":{"scale":"x","field":"x"},"y2":{"scale":"y","field":"layout_end"},"width":{"scale":"x","offset":-1,"band":true},"fill":{"scale":"color","field":"series"}}},"type":"rect"}],"from":{"data":"chart","transform":[{"field":"y","type":"stack","sortby":["-_id"],"groupby":["x"]},{"groupby":["series"],"type":"facet"}]}}],"height":200,"axes":[{"type":"x","title":"יעד משלוח","scale":"x","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"align":{"value":"right"},"angle":{"value":-90},"fill":{"value":"#54595d"}}},"grid":false},{"type":"y","title":"משלוחים, באלפי טונות","scale":"y","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false}],"data":[{"format":{"parse":{"y":"integer","x":"string"},"type":"json"},"name":"chart","values":[{"y":10,"series":"פירות","x":"ים"},{"y":12,"series":"פירות","x":"שוק"},{"y":6,"series":"פירות","x":"סופר"},{"y":14,"series":"פירות","x":"זבל"},{"y":2,"series":"פירות","x":"מכולת"},{"y":10,"series":"פירות","x":"יצוא"},{"y":7,"series":"פירות","x":"צה\"ל"},{"y":9,"series":"פירות","x":"עיבוד"},{"y":2,"series":"ירקות","x":"ים"},{"y":4,"series":"ירקות","x":"שוק"},{"y":6,"series":"ירקות","x":"סופר"},{"y":8,"series":"ירקות","x":"זבל"},{"y":13,"series":"ירקות","x":"מכולת"},{"y":11,"series":"ירקות","x":"יצוא"},{"y":9,"series":"ירקות","x":"צה\"ל"},{"y":2,"series":"ירקות","x":"עיבוד"}]},{"transform":[{"type":"aggregate","summarize":{"y":"sum"},"groupby":["x"]}],"name":"stats","source":"chart"}],"width":400}</graph>

עמודות עם ערכים בעמודה או מעליה, פורמט תצוגת מספרים עריכה

שימו לב לפרמטר showValues
{{גרף
 |type = rect
 |width = 400
 |height = 200
 |xAxisTitle = X
 |yAxisTitle = Y
 |x = 1,2,3,4,5,6,7,8
 |y = 10,12,6,14,2,10,7,9
 |showValues = fontsize:12
}}

{{גרף
 |type = rect
 |width = 400
 |height = 200
 |xAxisTitle = X
 |yAxisTitle = Y
 |x = 1,2,3,4,5,6,7,8
 |y = 10,12,6,14,2,10,7,9
 |showValues = fontsize:15,offset:1
}}

<graph>{"legends":[],"scales":[{"type":"ordinal","name":"x","zero":false,"domain":{"data":"chart","field":"x"},"padding":0.2,"range":"width","nice":true},{"type":"linear","name":"y","domain":{"data":"chart","field":"y"},"zero":true,"range":"height","nice":true},{"domain":{"data":"chart","field":"series"},"type":"ordinal","name":"color","range":"category10"}],"version":2,"marks":[{"type":"rect","properties":{"hover":{"fill":{"value":"red"}},"update":{"fill":{"scale":"color","field":"series"}},"enter":{"y":{"scale":"y","field":"y"},"x":{"scale":"x","field":"x"},"y2":{"scale":"y","value":0},"width":{"scale":"x","offset":-1,"band":true},"fill":{"scale":"color","field":"series"}}},"from":{"data":"chart"}},{"type":"text","properties":{"enter":{"baseline":{"value":"middle"},"align":{"value":"right"},"text":{"field":"y"},"y":{"scale":"y","offset":4,"field":"y"},"dy":{"scale":"x","mult":0.5,"band":true},"x":{"scale":"x","field":"x"},"angle":{"value":-90},"fontSize":{"value":12},"fill":{"value":"white"}}},"from":{"data":"chart"}}],"height":200,"axes":[{"type":"x","title":"X","scale":"x","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false},{"type":"y","title":"Y","scale":"y","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false}],"data":[{"format":{"parse":{"y":"integer","x":"integer"},"type":"json"},"name":"chart","values":[{"y":10,"series":"y","x":1},{"y":12,"series":"y","x":2},{"y":6,"series":"y","x":3},{"y":14,"series":"y","x":4},{"y":2,"series":"y","x":5},{"y":10,"series":"y","x":6},{"y":7,"series":"y","x":7},{"y":9,"series":"y","x":8}]}],"width":400}</graph>

<graph>{"legends":[],"scales":[{"type":"ordinal","name":"x","zero":false,"domain":{"data":"chart","field":"x"},"padding":0.2,"range":"width","nice":true},{"type":"linear","name":"y","domain":{"data":"chart","field":"y"},"zero":true,"range":"height","nice":true},{"domain":{"data":"chart","field":"series"},"type":"ordinal","name":"color","range":"category10"}],"version":2,"marks":[{"type":"rect","properties":{"hover":{"fill":{"value":"red"}},"update":{"fill":{"scale":"color","field":"series"}},"enter":{"y":{"scale":"y","field":"y"},"x":{"scale":"x","field":"x"},"y2":{"scale":"y","value":0},"width":{"scale":"x","offset":-1,"band":true},"fill":{"scale":"color","field":"series"}}},"from":{"data":"chart"}},{"type":"text","properties":{"enter":{"baseline":{"value":"middle"},"align":{"value":"left"},"text":{"field":"y"},"y":{"scale":"y","offset":-1,"field":"y"},"dy":{"scale":"x","mult":0.5,"band":true},"x":{"scale":"x","field":"x"},"angle":{"value":-90},"fontSize":{"value":15},"fill":{"value":"#54595d"}}},"from":{"data":"chart"}}],"height":200,"axes":[{"type":"x","title":"X","scale":"x","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false},{"type":"y","title":"Y","scale":"y","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false}],"data":[{"format":{"parse":{"y":"integer","x":"integer"},"type":"json"},"name":"chart","values":[{"y":10,"series":"y","x":1},{"y":12,"series":"y","x":2},{"y":6,"series":"y","x":3},{"y":14,"series":"y","x":4},{"y":2,"series":"y","x":5},{"y":10,"series":"y","x":6},{"y":7,"series":"y","x":7},{"y":9,"series":"y","x":8}]}],"width":400}</graph>

שימוש ב-format עבור ציר Y והמספרים המוצגים בגוף הגרף. עבור ציר Y, הפרמטר הוא yAxisFormat. עבור המספרים בגוף הגרף, רכיב format של פרמטר showValues. תיעוד של הגדרת אופן תצוגת מספרים נמצא ב-[github.com/mbostock/d3/wiki/Formatting#numbers]. בדוגמה נעשה שימוש ב-%. שימו לב ששימוש ב-% גורם להכפלת הערכים ב-100, כkומר, כדי להציג 20% יש להזין 0.2 

{{גרף
 |type = rect
 |width = 400
 |height = 200
 |xAxisTitle = X
 |yAxisTitle = Y
 |x = 1,2,3,4,5,6,7,8
 |y = 0.10,0.12,0.06,0.14,0.2,0.10,0.7,0.9
 |showValues = fontsize:15,offset:1,format:2.0%
 |yAxisFormat= 2.0%
}}

<graph>{"legends":[],"scales":[{"type":"ordinal","name":"x","zero":false,"domain":{"data":"chart","field":"x"},"padding":0.2,"range":"width","nice":true},{"type":"linear","name":"y","domain":{"data":"chart","field":"y"},"zero":true,"range":"height","nice":true},{"domain":{"data":"chart","field":"series"},"type":"ordinal","name":"color","range":"category10"}],"version":2,"marks":[{"type":"rect","properties":{"hover":{"fill":{"value":"red"}},"update":{"fill":{"scale":"color","field":"series"}},"enter":{"y":{"scale":"y","field":"y"},"x":{"scale":"x","field":"x"},"y2":{"scale":"y","value":0},"width":{"scale":"x","offset":-1,"band":true},"fill":{"scale":"color","field":"series"}}},"from":{"data":"chart"}},{"type":"text","properties":{"enter":{"baseline":{"value":"middle"},"align":{"value":"left"},"text":{"template":"{{datum.y|number:'2.0%'}}"},"y":{"scale":"y","offset":-1,"field":"y"},"dy":{"scale":"x","mult":0.5,"band":true},"x":{"scale":"x","field":"x"},"angle":{"value":-90},"fontSize":{"value":15},"fill":{"value":"#54595d"}}},"from":{"data":"chart"}}],"height":200,"axes":[{"type":"x","title":"X","scale":"x","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false},{"type":"y","title":"Y","scale":"y","format":"2.0%","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false}],"data":[{"format":{"parse":{"y":"number","x":"integer"},"type":"json"},"name":"chart","values":[{"y":0.1,"series":"y","x":1},{"y":0.12,"series":"y","x":2},{"y":0.06,"series":"y","x":3},{"y":0.14,"series":"y","x":4},{"y":0.2,"series":"y","x":5},{"y":0.1,"series":"y","x":6},{"y":0.7,"series":"y","x":7},{"y":0.9,"series":"y","x":8}]}],"width":400}</graph>

עוגה עם ערכים בפלחים או לידם עריכה 

{{גרף
 |type = pie
 |width = 100
 |height = 100
 |legend = מקרא
 |x = תפוחים,תפוזים,בננות,אגוזים,אבוקדו,אורז,חיטה
 |y1 = 100,200,150,300,100,100,150,50,200
 |showValues =
}}
ערכים מוצגים בפנים, באוריינטציה היקפית
 
{{גרף
 |type = pie
 |width = 100
 |height = 100
 |legend = מקרא
 |x = תפוחים,תפוזים,בננות,אגוזים,אבוקדו,אורז,חיטה
 |y1 = 100,200,150,300,100,100,150,50,200
 |showValues = angle:0,fontsize:19
}}
ערכים מוצגים מחוץ לפלח, במאוזן, גופן בגודל 19

<graph>{"legends":[{"properties":{"legend":{"y":{"value":-100}},"title":{"fill":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"stroke":"color","title":"מקרא","fill":"color"}],"scales":[{"domain":{"data":"chart","field":"x"},"type":"ordinal","name":"color","range":"category10"}],"version":2,"marks":[{"type":"arc","properties":{"hover":{"fill":{"value":"red"}},"update":{"fill":{"scale":"color","field":"x"}},"enter":{"endAngle":{"field":"layout_end"},"innerRadius":{"value":0},"outerRadius":{"value":100},"startAngle":{"field":"layout_start"},"stroke":{"value":"white"},"fill":{"scale":"color","field":"x"},"strokeWidth":{"value":1}}},"from":{"data":"chart","transform":[{"type":"pie","field":"y"}]}},{"type":"text","properties":{"enter":{"theta":{"field":"layout_mid"},"baseline":{"value":"top"},"align":{"value":"center"},"text":{"field":"y"},"y":{"group":"height","mult":0.5},"x":{"group":"width","mult":0.5},"fontSize":{"value":10},"angle":{"mult":57.29577951308232,"field":"layout_mid"},"radius":{"offset":-4,"value":100},"fill":{"value":"white"}}},"from":{"data":"chart","transform":[{"field":"y","type":"pie"}]}}],"height":100,"axes":[],"data":[{"format":{"parse":{"y":"integer","x":"string"},"type":"json"},"name":"chart","values":[{"y":350,"x":"תפוחים"},{"y":200,"x":"תפוזים"},{"y":150,"x":"בננות"},{"y":300,"x":"אגוזים"},{"y":100,"x":"אבוקדו"},{"y":100,"x":"אורז"},{"y":150,"x":"חיטה"}]}],"width":100}</graph>

<graph>{"legends":[{"properties":{"legend":{"y":{"value":-100}},"title":{"fill":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"stroke":"color","title":"מקרא","fill":"color"}],"scales":[{"domain":{"data":"chart","field":"x"},"type":"ordinal","name":"color","range":"category10"},{"type":"quantize","name":"align","domainMax":6.283185307179586,"domainMin":0,"range":["left","right"]}],"version":2,"marks":[{"type":"arc","properties":{"hover":{"fill":{"value":"red"}},"update":{"fill":{"scale":"color","field":"x"}},"enter":{"endAngle":{"field":"layout_end"},"innerRadius":{"value":0},"outerRadius":{"value":100},"startAngle":{"field":"layout_start"},"stroke":{"value":"white"},"fill":{"scale":"color","field":"x"},"strokeWidth":{"value":1}}},"from":{"data":"chart","transform":[{"type":"pie","field":"y"}]}},{"type":"text","properties":{"enter":{"theta":{"field":"layout_mid"},"baseline":{"value":"middle"},"align":{"scale":"align","field":"layout_mid"},"text":{"field":"y"},"y":{"group":"height","mult":0.5},"x":{"group":"width","mult":0.5},"fontSize":{"value":19},"angle":{"value":0},"radius":{"offset":4,"value":100},"fill":{"value":"#54595d"}}},"from":{"data":"chart","transform":[{"field":"y","type":"pie"}]}}],"height":100,"axes":[],"data":[{"format":{"parse":{"y":"integer","x":"string"},"type":"json"},"name":"chart","values":[{"y":350,"x":"תפוחים"},{"y":200,"x":"תפוזים"},{"y":150,"x":"בננות"},{"y":300,"x":"אגוזים"},{"y":100,"x":"אבוקדו"},{"y":100,"x":"אורז"},{"y":150,"x":"חיטה"}]}],"width":100}</graph>

עוגה עם פלחים בעומק שונה עריכה

סדרת הערכים הראשונה (y1) מייצגת את "רוחב" הפלחים (זווית הגזרה), והסדרה השנייה את "עומק" הפלחים, כלומר הרדיוס.
{{גרף
 |type = pie
 |width = 100
 |height = 100
 |legend = מקרא
 |x = תפוחים,תפוזים,בננות,אגוזים,אבוקדו,אורז,חיטה,אגסים,פפאיה
 |y1 = 100,200,150,300,100,100,150,50,200
 |y2 = 7,8,9,8,8,9,10,9,5
 |showValues =
}}

<graph>{"legends":[{"properties":{"legend":{"y":{"value":-100}},"title":{"fill":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"stroke":"color","title":"מקרא","fill":"color"}],"scales":[{"domain":{"data":"chart","field":"x"},"type":"ordinal","name":"color","range":"category10"},{"range":[0,100],"type":"linear","name":"r","domain":{"data":"chart","field":"r"}}],"version":2,"marks":[{"type":"arc","properties":{"hover":{"fill":{"value":"red"}},"update":{"fill":{"scale":"color","field":"x"}},"enter":{"endAngle":{"field":"layout_end"},"innerRadius":{"value":0},"outerRadius":{"scale":"r","field":"r"},"startAngle":{"field":"layout_start"},"stroke":{"value":"white"},"fill":{"scale":"color","field":"x"},"strokeWidth":{"value":1}}},"from":{"data":"chart","transform":[{"type":"pie","field":"y"}]}},{"type":"text","properties":{"enter":{"theta":{"field":"layout_mid"},"baseline":{"value":"top"},"align":{"value":"center"},"text":{"field":"y"},"y":{"group":"height","mult":0.5},"x":{"group":"width","mult":0.5},"fontSize":{"value":10},"angle":{"mult":57.29577951308232,"field":"layout_mid"},"radius":{"scale":"r","offset":-4,"field":"r"},"fill":{"value":"white"}}},"from":{"data":"chart","transform":[{"field":"y","type":"pie"}]}}],"height":100,"axes":[],"data":[{"format":{"parse":{"y":"integer","x":"string","r":"integer"},"type":"json"},"name":"chart","values":[{"y":100,"x":"תפוחים","r":7},{"y":200,"x":"תפוזים","r":8},{"y":150,"x":"בננות","r":9},{"y":300,"x":"אגוזים","r":8},{"y":100,"x":"אבוקדו","r":8},{"y":100,"x":"אורז","r":9},{"y":150,"x":"חיטה","r":10},{"y":50,"x":"אגסים","r":9},{"y":200,"x":"פפאיה","r":5}]}],"width":100}</graph>

"עוגה עם חור", "כעך" או "טבעת" עריכה

שימו לב לפרמטר innerRadius
{{גרף
 |type = pie
 |width = 100
 |height = 100
 |innerRadius = 40
 |legend = מקרא
 |x = תפוחים,תפוזים,בננות,אגוזים,אבוקדו,אורז,חיטה,אגסים,פפאיה
 |y1 = 100,200,150,300,100,100,150,50,200
 }}

<graph>{"legends":[{"properties":{"legend":{"y":{"value":-100}},"title":{"fill":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"stroke":"color","title":"מקרא","fill":"color"}],"scales":[{"domain":{"data":"chart","field":"x"},"type":"ordinal","name":"color","range":"category10"}],"version":2,"marks":[{"type":"arc","properties":{"hover":{"fill":{"value":"red"}},"update":{"fill":{"scale":"color","field":"x"}},"enter":{"endAngle":{"field":"layout_end"},"innerRadius":{"value":40},"outerRadius":{"value":100},"startAngle":{"field":"layout_start"},"stroke":{"value":"white"},"fill":{"scale":"color","field":"x"},"strokeWidth":{"value":1}}},"from":{"data":"chart","transform":[{"type":"pie","field":"y"}]}}],"height":100,"axes":[],"data":[{"format":{"parse":{"y":"integer","x":"string"},"type":"json"},"name":"chart","values":[{"y":100,"x":"תפוחים"},{"y":200,"x":"תפוזים"},{"y":150,"x":"בננות"},{"y":300,"x":"אגוזים"},{"y":100,"x":"אבוקדו"},{"y":100,"x":"אורז"},{"y":150,"x":"חיטה"},{"y":50,"x":"אגסים"},{"y":200,"x":"פפאיה"}]}],"width":100}</graph>

רשת עריכה

פרמטרים xGrid yGrid יוצרים את הרשת. הראשון קובע את האנכי והשני קובע את האופקי. 

{{גרף
 | width=300
 | height=150
 | xGrid=
 | yGrid=
 | xAxisTitle=X
 | yAxisTitle=Y
 | legend=Legend
 | type=line
 | x=1,2,3,4,5,6,7,8
 | y1=10,12,6,14,2,10,7,9
 | y1Title=Y1 Series
 | y2=2,4,6,8,13,11,9,2
 | y2Title=Y2 Series
 | colors=#0000aa,#ff8000
}}

<graph>{"legends":[{"properties":{"title":{"fill":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"stroke":"color","title":"Legend","fill":"color"}],"scales":[{"type":"linear","name":"x","zero":false,"domain":{"data":"chart","field":"x"},"range":"width","nice":true},{"type":"linear","name":"y","domain":{"data":"chart","field":"y"},"zero":false,"range":"height","nice":true},{"domain":{"data":"chart","field":"series"},"type":"ordinal","name":"color","range":["#0000aa","#ff8000"]}],"version":2,"marks":[{"type":"group","marks":[{"properties":{"hover":{"stroke":{"value":"red"}},"update":{"stroke":{"scale":"color","field":"series"}},"enter":{"y":{"scale":"y","field":"y"},"x":{"scale":"x","field":"x"},"stroke":{"scale":"color","field":"series"},"strokeWidth":{"value":2.5}}},"type":"line"}],"from":{"data":"chart","transform":[{"groupby":["series"],"type":"facet"}]}}],"height":150,"axes":[{"type":"x","title":"X","scale":"x","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":true},{"type":"y","title":"Y","scale":"y","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":true}],"data":[{"format":{"parse":{"y":"integer","x":"integer"},"type":"json"},"name":"chart","values":[{"y":10,"series":"Y1 Series","x":1},{"y":12,"series":"Y1 Series","x":2},{"y":6,"series":"Y1 Series","x":3},{"y":14,"series":"Y1 Series","x":4},{"y":2,"series":"Y1 Series","x":5},{"y":10,"series":"Y1 Series","x":6},{"y":7,"series":"Y1 Series","x":7},{"y":9,"series":"Y1 Series","x":8},{"y":2,"series":"Y2 Series","x":1},{"y":4,"series":"Y2 Series","x":2},{"y":6,"series":"Y2 Series","x":3},{"y":8,"series":"Y2 Series","x":4},{"y":13,"series":"Y2 Series","x":5},{"y":11,"series":"Y2 Series","x":6},{"y":9,"series":"Y2 Series","x":7},{"y":2,"series":"Y2 Series","x":8}]}],"width":300}</graph>

גרף עמודות משולב עריכה 

{{גרף
  |height = 150
  |width = 200
  |xAxisTitle = Year
  |xAxisAngle = -40
  |yAxisTitle = Units of something
  |yAxisMin = 0
  |type = rect
  |showValues = offset:4
  |x = 2011, 2012, 2013, 2014, 2015, 2016
  |y1 = 1326, 145, 203, 377, 639, 306
  |y2 =   ,     ,     , 226, 208, 276
  |colors = blue,grey
  }}

<graph>{"legends":[],"scales":[{"type":"ordinal","name":"x","zero":false,"domain":{"data":"chart","field":"x"},"padding":0.2,"range":"width","nice":true},{"clamp":true,"type":"linear","name":"y","domain":{"data":"chart","field":"y"},"domainMin":0,"zero":true,"range":"height","nice":true},{"domain":{"data":"chart","field":"series"},"type":"ordinal","name":"color","range":["blue","grey"]}],"version":2,"marks":[{"type":"group","from":{"data":"chart","transform":[{"groupby":"x","type":"facet"}]},"properties":{"enter":{"width":{"scale":"x","band":true},"x":{"scale":"x","field":"key"}}},"marks":[{"properties":{"hover":{"fill":{"value":"red"}},"update":{"fill":{"scale":"color","field":"series"}},"enter":{"y":{"scale":"y","field":"y"},"x":{"scale":"series","field":"series"},"y2":{"scale":"y","value":0},"width":{"scale":"series","offset":-1,"band":true},"fill":{"scale":"color","field":"series"}}},"type":"rect"},{"properties":{"enter":{"baseline":{"value":"middle"},"align":{"value":"left"},"text":{"field":"y"},"y":{"scale":"y","offset":-4,"field":"y"},"dy":{"scale":"series","mult":0.5,"band":true},"x":{"scale":"series","field":"series"},"angle":{"value":-90},"fontSize":{"value":11},"fill":{"value":"#54595d"}}},"type":"text"}],"scales":[{"domain":{"field":"series"},"type":"ordinal","name":"series","range":"width"}]}],"height":150,"axes":[{"type":"x","title":"Year","scale":"x","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"align":{"value":"right"},"angle":{"value":-40},"fill":{"value":"#54595d"}}},"grid":false},{"type":"y","title":"Units of something","scale":"y","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false}],"data":[{"format":{"parse":{"y":"integer","x":"integer"},"type":"json"},"name":"chart","values":[{"y":1326,"series":"y1","x":2011},{"y":145,"series":"y1","x":2012},{"y":203,"series":"y1","x":2013},{"y":377,"series":"y1","x":2014},{"y":639,"series":"y1","x":2015},{"y":306,"series":"y1","x":2016},{"y":226,"series":"y2","x":2014},{"y":208,"series":"y2","x":2015},{"y":276,"series":"y2","x":2016}]}],"width":200}</graph>

גרף פיזור עריכה

גרף פיזור מבוסס על גרף line, כאשר רוחב הקו הוא 0 ולכן מוסתר. גודל הנקודות בגרף נקבע על ידי showSymbols. בדוגמה ערכו 1. שימוש בפרמטר ללא ערך יציג את הנקודות בגודל ברירית מחדל - 2.5 

{{גרף
|width=400
|height=200
|type=line
|x=15.7,10.8,68.5,33.4,23.8,42.2,27.1,38.2,13.5,74.3
|y1=1517,970,4075,3819,2106,2919,2428,2164,1393,7603
|showSymbols=1
|linewidths=0
| xGrid=
| yGrid=
}}

<graph>{"legends":[],"scales":[{"type":"linear","name":"x","zero":false,"domain":{"data":"chart","field":"x"},"range":"width","nice":true},{"type":"linear","name":"y","domain":{"data":"chart","field":"y"},"zero":false,"range":"height","nice":true},{"domain":{"data":"chart","field":"series"},"type":"ordinal","name":"color","range":"category10"},{"domain":{"data":"chart","field":"series"},"type":"ordinal","name":"line","range":[0]},{"domain":{"data":"chart","field":"series"},"type":"ordinal","name":"symSize","range":[8.5]}],"version":2,"marks":[{"type":"line","properties":{"hover":{"stroke":{"value":"red"}},"update":{"stroke":{"scale":"color","field":"series"}},"enter":{"y":{"scale":"y","field":"y"},"x":{"scale":"x","field":"x"},"stroke":{"scale":"color","field":"series"},"strokeWidth":{"scale":"line","field":"series"}}},"from":{"data":"chart"}},{"type":"symbol","properties":{"enter":{"y":{"scale":"y","field":"y"},"x":{"scale":"x","field":"x"},"size":{"scale":"symSize","field":"series"},"fill":{"scale":"color","field":"series"},"stroke":{"scale":"color","field":"series"},"shape":{"value":"circle"},"strokeWidth":{"value":0}}},"from":{"data":"chart"}}],"height":200,"axes":[{"type":"x","scale":"x","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":true},{"type":"y","scale":"y","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":true}],"data":[{"format":{"parse":{"y":"integer","x":"number"},"type":"json"},"name":"chart","values":[{"y":1517,"series":"y1","x":15.7},{"y":970,"series":"y1","x":10.8},{"y":4075,"series":"y1","x":68.5},{"y":3819,"series":"y1","x":33.4},{"y":2106,"series":"y1","x":23.8},{"y":2919,"series":"y1","x":42.2},{"y":2428,"series":"y1","x":27.1},{"y":2164,"series":"y1","x":38.2},{"y":1393,"series":"y1","x":13.5},{"y":7603,"series":"y1","x":74.3}]}],"width":400}</graph>

גרף פיזור למספר סדרות עריכה 

{{גרף
|width=400
|xAxisTitle=X
|yAxisTitle=Y
|xAxisMin=0
|legend=מקרא
|type=line
|x=1,2,3,4,5,8,9,10
|y1=10, 12, 6, 14, 2, 10, 7,5 |y2=2,4,6,8,13,11,9,2 |y3=10,3,5,1,7,3,1,11 |y4=5,7,6,8,5,4,8,6
|linewidths=0
|showSymbols=true}}

<graph>{"legends":[{"properties":{"title":{"fill":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"stroke":"color","title":"מקרא","fill":"color"}],"scales":[{"clamp":true,"type":"linear","name":"x","zero":false,"domainMin":0,"domain":{"data":"chart","field":"x"},"range":"width","nice":true},{"type":"linear","name":"y","domain":{"data":"chart","field":"y"},"zero":false,"range":"height","nice":true},{"domain":{"data":"chart","field":"series"},"type":"ordinal","name":"color","range":"category10"},{"domain":{"data":"chart","field":"series"},"type":"ordinal","name":"line","range":[0]}],"version":2,"marks":[{"type":"group","marks":[{"properties":{"hover":{"stroke":{"value":"red"}},"update":{"stroke":{"scale":"color","field":"series"}},"enter":{"y":{"scale":"y","field":"y"},"x":{"scale":"x","field":"x"},"stroke":{"scale":"color","field":"series"},"strokeWidth":{"scale":"line","field":"series"}}},"type":"line"},{"properties":{"enter":{"y":{"scale":"y","field":"y"},"x":{"scale":"x","field":"x"},"size":{"value":50},"fill":{"scale":"color","field":"series"},"stroke":{"scale":"color","field":"series"},"shape":{"value":"circle"},"strokeWidth":{"value":0}}},"type":"symbol"}],"from":{"data":"chart","transform":[{"groupby":["series"],"type":"facet"}]}}],"height":200,"axes":[{"type":"x","title":"X","scale":"x","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false},{"type":"y","title":"Y","scale":"y","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false}],"data":[{"format":{"parse":{"y":"integer","x":"integer"},"type":"json"},"name":"chart","values":[{"y":10,"series":"y1","x":1},{"y":12,"series":"y1","x":2},{"y":6,"series":"y1","x":3},{"y":14,"series":"y1","x":4},{"y":2,"series":"y1","x":5},{"y":10,"series":"y1","x":8},{"y":7,"series":"y1","x":9},{"y":5,"series":"y1","x":10},{"y":2,"series":"y2","x":1},{"y":4,"series":"y2","x":2},{"y":6,"series":"y2","x":3},{"y":8,"series":"y2","x":4},{"y":13,"series":"y2","x":5},{"y":11,"series":"y2","x":8},{"y":9,"series":"y2","x":9},{"y":2,"series":"y2","x":10},{"y":10,"series":"y3","x":1},{"y":3,"series":"y3","x":2},{"y":5,"series":"y3","x":3},{"y":1,"series":"y3","x":4},{"y":7,"series":"y3","x":5},{"y":3,"series":"y3","x":8},{"y":1,"series":"y3","x":9},{"y":11,"series":"y3","x":10},{"y":5,"series":"y4","x":1},{"y":7,"series":"y4","x":2},{"y":6,"series":"y4","x":3},{"y":8,"series":"y4","x":4},{"y":5,"series":"y4","x":5},{"y":4,"series":"y4","x":8},{"y":8,"series":"y4","x":9},{"y":6,"series":"y4","x":10}]}],"width":400}</graph>

אחוזים עריכה

כאשר xAxisFormat או yAxisFormat מוגדרים ל-%, סימן אחוז יתווסף לסולם של הציר המתאים.

  • ערך של 1 שווה ל-100%. יש להוסיף נקודה עשרונית לפני אחוזים בין 0 ל-100, למשל .25 עבור 25%.
  • הקוד yAxisMin=0 | yAxisMax=1 יאלץ את קנה המידה של ציר ה-y לפעול מ-0% ל-100%.
{{גרף
| width = 350
| height = 350
| x = 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23
| yAxisMin = 0
| yAxisMax = 1
| yAxisFormat = %
| showSymbols = 
| y1 = , , , .43, , , , .39, .43, .38, .38, .40, .48, .54 , .42, .47, .45, .48, .44, .41, .41, .45, .46
| y2 = .40, .377, .38, , .39, .38, .419, .55, .60, .63
| y3 = .27, .311, .31, , .26, .28, .285
| y4 = ,,,,,,, .40, .44, .42, .47, .44, .43, .42
}}

<graph>{"legends":[],"scales":[{"type":"linear","name":"x","zero":false,"domain":{"data":"chart","field":"x"},"range":"width","nice":true},{"clamp":true,"type":"linear","zero":false,"range":"height","nice":true,"name":"y","domainMax":1,"domain":{"data":"chart","field":"y"},"domainMin":0},{"domain":{"data":"chart","field":"series"},"type":"ordinal","name":"color","range":"category10"}],"version":2,"marks":[{"type":"group","marks":[{"properties":{"hover":{"stroke":{"value":"red"}},"update":{"stroke":{"scale":"color","field":"series"}},"enter":{"y":{"scale":"y","field":"y"},"x":{"scale":"x","field":"x"},"stroke":{"scale":"color","field":"series"},"strokeWidth":{"value":2.5}}},"type":"line"},{"properties":{"enter":{"y":{"scale":"y","field":"y"},"x":{"scale":"x","field":"x"},"size":{"value":50},"fill":{"scale":"color","field":"series"},"stroke":{"scale":"color","field":"series"},"shape":{"value":"circle"},"strokeWidth":{"value":0}}},"type":"symbol"}],"from":{"data":"chart","transform":[{"groupby":["series"],"type":"facet"}]}}],"height":350,"axes":[{"type":"x","scale":"x","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false},{"type":"y","scale":"y","format":"%","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false}],"data":[{"format":{"parse":{"y":"number","x":"integer"},"type":"json"},"name":"chart","values":[{"y":0.43,"series":"y1","x":4},{"y":0.39,"series":"y1","x":8},{"y":0.43,"series":"y1","x":9},{"y":0.38,"series":"y1","x":10},{"y":0.38,"series":"y1","x":11},{"y":0.4,"series":"y1","x":12},{"y":0.48,"series":"y1","x":13},{"y":0.54,"series":"y1","x":14},{"y":0.42,"series":"y1","x":15},{"y":0.47,"series":"y1","x":16},{"y":0.45,"series":"y1","x":17},{"y":0.48,"series":"y1","x":18},{"y":0.44,"series":"y1","x":19},{"y":0.41,"series":"y1","x":20},{"y":0.41,"series":"y1","x":21},{"y":0.45,"series":"y1","x":22},{"y":0.46,"series":"y1","x":23},{"y":0.4,"series":"y2","x":1},{"y":0.377,"series":"y2","x":2},{"y":0.38,"series":"y2","x":3},{"y":0.39,"series":"y2","x":5},{"y":0.38,"series":"y2","x":6},{"y":0.419,"series":"y2","x":7},{"y":0.55,"series":"y2","x":8},{"y":0.6,"series":"y2","x":9},{"y":0.63,"series":"y2","x":10},{"y":0.27,"series":"y3","x":1},{"y":0.311,"series":"y3","x":2},{"y":0.31,"series":"y3","x":3},{"y":0.26,"series":"y3","x":5},{"y":0.28,"series":"y3","x":6},{"y":0.285,"series":"y3","x":7},{"y":0.4,"series":"y4","x":8},{"y":0.44,"series":"y4","x":9},{"y":0.42,"series":"y4","x":10},{"y":0.47,"series":"y4","x":11},{"y":0.44,"series":"y4","x":12},{"y":0.43,"series":"y4","x":13},{"y":0.42,"series":"y4","x":14}]}],"width":350}</graph>

מקרא חלופי עריכה

ערכי מקרא ארוכים יכולים להיראות מגושמים. אולי עדיף להשמיט את פרמטר legend ולהשתמש במקום זאת ב-תבנית:מקרא (או בתבנית דומה). 

{{גרף
 | width=400
 | height=150
 | xAxisTitle=X
 | yAxisTitle=Y
 | colors=darkred, gold
 | type=line
 | x=1,2,3,4,5,6,7,8
 | y1=10,12,6,14,2,10,7,9
 | y2=2,4,6,8,13,11,9,2
}}
{{מקרא|darkred|זה הוא מקרא ארוך שלא יראה טוב אם היה חלק מהגרף עצמו}}
{{מקרא|gold|זה עוד ערך ארוך למדי.}}

<graph>{"legends":[],"scales":[{"type":"linear","name":"x","zero":false,"domain":{"data":"chart","field":"x"},"range":"width","nice":true},{"type":"linear","name":"y","domain":{"data":"chart","field":"y"},"zero":false,"range":"height","nice":true},{"domain":{"data":"chart","field":"series"},"type":"ordinal","name":"color","range":["darkred","gold"]}],"version":2,"marks":[{"type":"group","marks":[{"properties":{"hover":{"stroke":{"value":"red"}},"update":{"stroke":{"scale":"color","field":"series"}},"enter":{"y":{"scale":"y","field":"y"},"x":{"scale":"x","field":"x"},"stroke":{"scale":"color","field":"series"},"strokeWidth":{"value":2.5}}},"type":"line"}],"from":{"data":"chart","transform":[{"groupby":["series"],"type":"facet"}]}}],"height":150,"axes":[{"type":"x","title":"X","scale":"x","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false},{"type":"y","title":"Y","scale":"y","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false}],"data":[{"format":{"parse":{"y":"integer","x":"integer"},"type":"json"},"name":"chart","values":[{"y":10,"series":"y1","x":1},{"y":12,"series":"y1","x":2},{"y":6,"series":"y1","x":3},{"y":14,"series":"y1","x":4},{"y":2,"series":"y1","x":5},{"y":10,"series":"y1","x":6},{"y":7,"series":"y1","x":7},{"y":9,"series":"y1","x":8},{"y":2,"series":"y2","x":1},{"y":4,"series":"y2","x":2},{"y":6,"series":"y2","x":3},{"y":8,"series":"y2","x":4},{"y":13,"series":"y2","x":5},{"y":11,"series":"y2","x":6},{"y":9,"series":"y2","x":7},{"y":2,"series":"y2","x":8}]}],"width":400}</graph>

██ זה הוא מקרא ארוך שלא יראה טוב אם היה חלק מהגרף עצמו

██ זה עוד ערך ארוך למדי.

אפשר להשתמש בשמות צבעים הבאים: [www.w3schools.com/cssref/css_colors.asp css_colors]

הערות אופקיות עריכה

פרמטרים:

  • hAnnotatonsLine ו-hAnnotatonsLabel קובעים את מיקום ותוכן התויות.
  • linewidths קובע את רוחב הקוים (הקו הכתום עובה והקו הירוק הועלם)
  • showSymbols symbolsShape קובעים את צורת הסמלים שמצוירים. (משולש, משולש הפוך, צלב)
{{גרף
| type = line
| x = 0,1,2,3
| y1 = 0,3.342,2.3423,5.32423
| y2 = 1,2.342,4.63,2.32423
| y3 = 3,1.342,2.63,6.32423
| xType = string
| linewidths = 2,4,0
| hAnnotatonsLine = 4, 5, 6
| hAnnotatonsLabel = label4, label5, label6
| showSymbols = 3,3,3
| symbolsShape = triangle_up, triangle_down, cross
}}

<graph>{"legends":[],"scales":[{"type":"ordinal","name":"x","zero":false,"domain":{"data":"chart","field":"x"},"points":true,"range":"width","nice":true},{"type":"linear","name":"y","domain":{"data":"chart","field":"y"},"zero":false,"range":"height","nice":true},{"domain":{"data":"chart","field":"series"},"type":"ordinal","name":"color","range":"category10"},{"domain":{"data":"chart","field":"series"},"type":"ordinal","name":"line","range":[2,4,0]},{"domain":{"data":"chart","field":"series"},"type":"ordinal","name":"symSize","range":[76.5,76.5,76.5]},{"domain":{"data":"chart","field":"series"},"type":"ordinal","name":"symShape","range":["triangle-up","triangle-down","cross"]}],"version":2,"marks":[{"type":"group","marks":[{"properties":{"hover":{"stroke":{"value":"red"}},"update":{"stroke":{"scale":"color","field":"series"}},"enter":{"y":{"scale":"y","field":"y"},"x":{"scale":"x","field":"x"},"stroke":{"scale":"color","field":"series"},"strokeWidth":{"scale":"line","field":"series"}}},"type":"line"},{"properties":{"enter":{"y":{"scale":"y","field":"y"},"x":{"scale":"x","field":"x"},"size":{"scale":"symSize","field":"series"},"fill":{"scale":"color","field":"series"},"stroke":{"scale":"color","field":"series"},"shape":{"scale":"symShape","field":"series"},"strokeWidth":{"value":0}}},"type":"symbol"}],"from":{"data":"chart","transform":[{"groupby":["series"],"type":"facet"}]}},{"type":"rule","properties":{"update":{"y":{"scale":"y","field":"y"},"x":{"value":0},"x2":{"field":{"group":"width"}},"stroke":{"value":"#54595d"},"opacity":{"value":0.75},"strokeWidth":{"value":"#54595d"}}},"from":{"data":"h_anno"}},{"type":"text","properties":{"update":{"y":{"scale":"y","offset":3,"field":"y"},"x":{"value":0,"offset":3},"opacity":{"value":0.75},"baseline":{"value":"top"},"text":{"field":"label"},"angle":{"value":0},"fill":{"value":"#54595d"}}},"from":{"data":"h_anno"}}],"height":200,"axes":[{"type":"x","scale":"x","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false},{"type":"y","scale":"y","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false}],"data":[{"format":{"parse":{"y":"number","x":"string"},"type":"json"},"name":"chart","values":[{"y":0,"series":"y1","x":"0"},{"y":3.342,"series":"y1","x":"1"},{"y":2.3423,"series":"y1","x":"2"},{"y":5.32423,"series":"y1","x":"3"},{"y":1,"series":"y2","x":"0"},{"y":2.342,"series":"y2","x":"1"},{"y":4.63,"series":"y2","x":"2"},{"y":2.32423,"series":"y2","x":"3"},{"y":3,"series":"y3","x":"0"},{"y":1.342,"series":"y3","x":"1"},{"y":2.63,"series":"y3","x":"2"},{"y":6.32423,"series":"y3","x":"3"}]},{"format":{"parse":{"y":"number"},"type":"json"},"name":"h_anno","values":[{"y":"4","label":"label4"},{"y":"5","label":"label5"},{"y":"6","label":"label6"}]}],"width":200}</graph>

הערות אנכיות עריכה

פרמטרים vAnnotatonsLine vAnnotatonsLabel שולטים על ההערות. 

{{גרף
| type = area
| x = 0,1,2,3
| y1 = 3,1.342,2.63,6.32423
| y2 = 1,2.342,4.63,2.32423
| y3 = 0,3.342,2.3423,5.32423
| xType = string
| colors = #ffff5ba0, #641050ff, #ffaaff00
| vAnnotatonsLine = 1, 2, 3
| vAnnotatonsLabel = label1, label2, label3
}}

<graph>{"legends":[],"scales":[{"type":"ordinal","name":"x","zero":false,"domain":{"data":"chart","field":"x"},"points":true,"range":"width","nice":true},{"type":"linear","name":"y","domain":{"data":"chart","field":"y"},"zero":true,"range":"height","nice":true},{"domain":{"data":"chart","field":"series"},"type":"ordinal","name":"color","range":["#ff5ba0","#1050ff","#aaff00"]},{"type":"ordinal","name":"transparency","range":["1","0.3921568627451","1"]}],"version":2,"marks":[{"type":"group","marks":[{"properties":{"hover":{"fill":{"value":"red"}},"update":{"fillOpacity":{"scale":"transparency","field":"series"},"fill":{"scale":"color","field":"series"}},"enter":{"y":{"scale":"y","field":"y"},"x":{"scale":"x","field":"x"},"y2":{"scale":"y","value":0},"fill":{"scale":"color","field":"series"}}},"type":"area"}],"from":{"data":"chart","transform":[{"groupby":["series"],"type":"facet"}]}},{"type":"rule","properties":{"update":{"y":{"value":0},"x":{"scale":"x","field":"x"},"opacity":{"value":0.75},"y2":{"field":{"group":"height"}},"stroke":{"value":"#54595d"},"strokeWidth":{"value":"#54595d"}}},"from":{"data":"v_anno"}},{"type":"text","properties":{"update":{"y":{"offset":-3,"field":{"group":"height"}},"x":{"scale":"x","offset":3,"field":"x"},"opacity":{"value":0.75},"baseline":{"value":"top"},"text":{"field":"label"},"angle":{"value":-90},"fill":{"value":"#54595d"}}},"from":{"data":"v_anno"}}],"height":200,"axes":[{"type":"x","scale":"x","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false},{"type":"y","scale":"y","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false}],"data":[{"format":{"parse":{"y":"number","x":"string"},"type":"json"},"name":"chart","values":[{"y":3,"series":"y1","x":"0"},{"y":1.342,"series":"y1","x":"1"},{"y":2.63,"series":"y1","x":"2"},{"y":6.32423,"series":"y1","x":"3"},{"y":1,"series":"y2","x":"0"},{"y":2.342,"series":"y2","x":"1"},{"y":4.63,"series":"y2","x":"2"},{"y":2.32423,"series":"y2","x":"3"},{"y":0,"series":"y3","x":"0"},{"y":3.342,"series":"y3","x":"1"},{"y":2.3423,"series":"y3","x":"2"},{"y":5.32423,"series":"y3","x":"3"}]},{"format":{"parse":{"x":"string"},"type":"json"},"name":"v_anno","values":[{"label":"label1","x":"1"},{"label":"label2","x":"2"},{"label":"label3","x":"3"}]}],"width":200}</graph>


ראו גם עריכה

למפתחים ראו גם [vega.github.io/editor/#/ שימוש בעורך של וגה]

תבנית זו יוצרת גרף מתוך סדרות נתונים המוזנות לתוכה. יכולה ליצור גרף מתוך כמה סוגים: גרף רציף, גרף שטח, גרף עמודות וגרף עוגה.

פרמטרים של תבניות[עריכת נתוני תבנית]

התבנית הזאת מעדיפה עיצוב פרמטרים בתור פסקה.

פרמטרתיאורסוגמצב
סוג הגרף (קו, שטח, עמודות, עוגה)type

חייב לקבל את אחד הערכים הבאים: line, area, rect, pie, stackedrect, stackedarea. ארבעת הראשונים עבור קו, שטח, עמודות ועוגה. שני הבאים עבור עמודות ושטח כאשר סדרת ערכים אחת מוצגת מעל השנייה.

ערכים מוצעים
pie rect area line stackedarea stackedrect
דוגמה
area
מחרוזתלא חובה
xx

כותרות השנתות בציר האופקי (x), מופרדים בפסיקים

דוגמה
1980,1985,1990,1995,2000,2005,2010,2015
מחרוזתדרוש
yy

ערכי סדרת הנתונים בציר האנכי (y), מופרדים בפסיקים. עבור יותר מסדרת נתונים אחת, יש להשתמש ב־y1, y2 וכו'

דוגמה
10,12,6,14,2,10,7,9
לא ידועמוצע
שם ציר xxAxisTitle

תיאור הציר האופקי, כפי שיופיע בגרף

דוגמה
זמן (שניות)
מחרוזתמוצע
שם ציר yyAxisTitle

תיאור הציר האנכי, כפי שיופיע בגרף

דוגמה
ערך ($)
מחרוזתמוצע
y1y1

ערכי סדרת נתונים אחת, מופרדים בפסיקים ביניהם (כאשר יש יותר מסדרת נתונים אחת).

מחרוזתלא חובה
y2y2

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

מחרוזתלא חובה
y3y3

ערכי סדרת נתונים שלישית, מופרדים בפסיקים ביניהם.

מחרוזתלא חובה
y4y4

ערכי סדרת נתונים רביעית, מופרדים בפסיקים ביניהם.

מחרוזתלא חובה
y5y5

ערכי סדרת נתונים חמישית, מופרדים בפסיקים ביניהם.

מחרוזתלא חובה
y6y6

ערכי סדרת נתונים ששית, מופרדים בפסיקים ביניהם.

מחרוזתלא חובה
y7y7

ערכי סדרת נתונים שביעית, מופרדים בפסיקים ביניהם.

מחרוזתלא חובה
כותרת מקראlegend

הוספת מקרא (עם הכותרת במשתנה זה) לגרף. עובד רק אם יש יותר מסדרת נתונים אחת (למשל, y1, y2).

דוגמה
מקרא
מחרוזתלא חובה
כותרת y1y1Title

השם שיופיע במקרא לסדרת הנתונים הראשונה

מחרוזתלא חובה
כותרת y2y2Title

השם שיופיע במקרא לסדרת הנתונים השנייה

מחרוזתלא חובה
כותרת y3y3Title

השם שיופיע במקרא לסדרת הנתונים השלישית

מחרוזתלא חובה
כותרת y4y4Title

השם שיופיע במקרא לסדרת הנתונים הרביעית

מחרוזתלא חובה
כותרת y5y5Title

השם שיופיע במקרא לסדרת הנתונים החמישית

מחרוזתלא חובה
כותרת y6y6Title

השם שיופיע במקרא לסדרת הנתונים הששית

מחרוזתלא חובה
כותרת y7y7Title

השם שיופיע במקרא לסדרת הנתונים הששית

מחרוזתלא חובה
רוחבwidth

רוחב הגרף, בפיקסלים. מספר בלבד.

מספרלא חובה
גובהheight

גובה הגרף, בפיקסלים. מספר בלבד.

מספרלא חובה
שיטת אינטרפולציהinterpolate

מיועד להחלקת גרף קו או שטח. לא בשימוש עבור עמודות או עוגה. אם לא מזינים, הגרף ישורטט ללא החלקה. מקבל את אחד מהערכים הבאים: linear, step-before,step-after, basis, basis-open, cardinal, cardinal-open, monotone

ערכים מוצעים
linear step-before step-after basis basis-open cardinal cardinal-open monotone
מחרוזתלא חובה
x מינימליxAxisMin

הערך הקטן ביותר שיפיע על הציר האופקי

מספרלא חובה
x מקסימליxAxisMax

הערך הגדול ביותר שיפיע על הציר האופקי

מספרלא חובה
y מינימליyAxisMin

הערך הקטן ביותר שיפיע על הציר האנכי

מספרלא חובה
y מקסימליyAxisMax

הערך הגדול ביותר שיפיע על הציר האנכי

מספרלא חובה
פורמט תווית בציר xxAxisFormat

פורמט לערכים בציר האופקי, בעזרת [https://github.com/mbostock/d3/wiki/Formatting] ו־[https://github.com/mbostock/d3/wiki/Time-Formatting].

דוגמה
% לפלט אחוזים. %d-%m-%Y לפלט 13-01-1977.
מחרוזתלא חובה
פורמט תווית בציר yyAxisFormat

פורמט לערכים בציר האנכי, בעזרת [https://github.com/mbostock/d3/wiki/Formatting] ו־[https://github.com/mbostock/d3/wiki/Time-Formatting].

דוגמה
% לפלט אחוזים. %d-%m-%Y לפלט 13-01-1977.
מחרוזתלא חובה
סוג xxType

סוג הערכים בציר האופקי: integer למספר שלם, number למספר ממשי, date לתאריך, string עבור משתנה שמי

מחרוזתלא חובה
סוג yyType

סוג הערכים בציר האופקי: integer למספר שלם, number למספר ממשי, date לתאריך, string עבור משתנה שמי

מחרוזתלא חובה
צבעיםcolors

הצבעים לסדרות הנתונים השונות, מופרדים בפסיק. שמות צבעים נמצאים בקישור הבא: [https://www.w3schools.com/cssref/css_colors.asp]

דוגמה
red, blue,orange
מחרוזתלא חובה
רוחב קוlinewidths

מספר פיקסלים. בגרף רציף: רוחב הקו; בגרף עוגה: המרווח בין פרוסה לפרוסה.

מספרלא חובה
רדיוס פנימיinnerRadius

בגרף עוגה: מגדיר גודל רדיוס פנימי (בפיקסלים) לגרף בצורת דונאט.

מספרלא חובה
הצגת ערכיםshowValues

עבור גרף עמודות (לא נערם) וגרף עוגה: הצגת ערכי סדרת הנתונים כטקסט. ניתן להזין מאפיינים לטקסט בצורה name1:value1, name2:value2 וכו' (ראו פירוט בדף התיעוד)

דוגמה
fontsize:15,fontcolor:blue,offset:1,angle:0,
מחרוזתלא חובה
רשת אנכיתxGrid

הצגת קוי רשת אנכי שמתארים את ציר ה-x. ברירת מחדל true. כך שהוא יכול להיות ריק

דוגמה
true, false
בוליאנילא חובה
רשת אופקיתyGrid

הצגת קוי רשת אופקי שמתאר את ציר ה-y. ברירת מחדל true. כך שאין צורך למלא את הפרמטר.

דוגמה
true, false
בוליאנילא חובה
מיקום קו הערה אופקיhAnnotatonsLine

מיקום קו הערה אופקית. מספרים מופרדים בפסיקים.

לא ידועלא חובה
תוית הערה אופקיתhAnnotatonsLabel

תוית ההערה האופקית שתוצג בסמוך לקו. תויות מופרדות בפסיקים.

דוגמה
"תוית1", "תוית2", "תוית3"
מחרוזתלא חובה
מיקום קו הערה אנכיvAnnotatonsLine

מיקום קו הערה אנכי. מופרד בפסיקים.

לא ידועלא חובה
תוית הערה אנכיתvAnnotatonsLabel

תוית ההערה האנכית שתוצג בסמוך לקו. מופרד בפסיקים.

לא ידועלא חובה
תצוגת סמלshowSymbols

גודל תצוגת סמל. סדרת מספרים מפוסקת.

לא ידועלא חובה
צורת סמלsymbolsShape

צורת סמל. סדרת מחרוזות מפוסקת. צורות אפשריות: circle, x, square, cross, diamond, triangle_up, triangle_down, triangle_right, triangle_left, banana

לא ידועלא חובה
סמל לא מלאsymbolsNoFill

אין תיאור

בוליאנילא חובה
symbolsStrokesymbolsStroke

אין תיאור

מספרלא חובה
סוג קנה מידה xxScaleType

סוגי קנה מידה של ציר x. אפשרויות: linear (סולם ליניארי) או log (סולם לוגריתמי) או sqrt (סולם שורש ריבועי). ברירת מחדל - linear.

ערכים מוצעים
linear log sqrt
ברירת מחדל
linear
מחרוזתלא חובה
סוג קנה מידה yyScaleType

סוגי קנה מידה של ציר y. אפשרויות: linear (סולם ליניארי) או log (סולם לוגריתמי) או sqrt (סולם שורש ריבועי). ברירת מחדל - linear.

ערכים מוצעים
linear log sqrt
ברירת מחדל
linear
מחרוזתלא חובה
זויתצירxxAxisAngle

מסובב את תוויות ציר ה-X בזווית שצוינה. ערכים מומלצים הם: -45, +45, -90, +90.

דוגמה
xAxisAngle=45
מספרלא חובה
אוחזר מתוך "https://chabadpedia.co.il/index.php?title=תבנית:גרף&oldid=799616"