Difference between revisions of "Template:Graph:Chart/doc"

From blackwiki
Jump to navigation Jump to search
imported>Aspargos
imported>Aspargos
m (Undid revision 789664045 by Aspargos (talk) sorry mistake test)
Line 1: Line 1:
<includeonly>{{#tag:graph|</includeonly><noinclude>{{:{{FULLPAGENAME}} }}<br>'''&lt;graph>'''{{#tag:syntaxhighlight|</noinclude>
+
{{Documentation subpage}}
{
+
{{Lua|Module:Graph}}
  "version": 2, "width": 950, "height": 400,
+
{{meta|Template:Graph:Chart}}
 +
<!-- Please place categories where indicated at the bottom of this page and interwikis at Wikidata (see [[Wikipedia:Wikidata]]) -->
  
  "data": [
+
== Parameters ==
    {
+
{{Module:Graph/doc|chart}}
      // Each Data value has the following attributes:
 
      // date_sold, price_adj, year_painted, period (binned p1, p2, p3, p4), artist (artist name),
 
      // author (binned Van Gogh, Picasso, Warhol, other), title, ratio (approximate image ratio), img
 
  
      // Automatically generated inflation value depends on a reliably sourced input, both of cost, as well as a definite year the cost figure is relevant to. It is not safe to assume this to be the publication date or the year the event happened. Manually calculating inflation, or entering the wrong year the original figure was actually written to describe, will result in an incorrect calculation of inflation.
+
== Examples ==
      "name": "table",
+
Line Chart:<br />
      "format": {"type": "json", "parse": {"date_sold": "date"} },
+
<tt><nowiki>{{Graph:Chart|width=400|height=100|type=line|x=1,2,3,4,5,6,7,8|y=10,12,6,14,2,10,7,9}}</nowiki></tt><br />{{Graph:Chart|width=400|height=100|type=line|x=1,2,3,4,5,6,7,8|y=10,12,6,14,2,10,7,9}}<br />
      "values": [
+
Note: The y-axis starts from the smallest y value, though this can be overridden with the <tt>yAxisMin</tt> parameter.
        {"date_sold": "April 18, 1985", "price_adj": {{Inflation|US|10.5|1985|r=1}}, "year_painted": 1462, "period": "p1", "artist": "Mantegna", "author": "other", "title": "Adoration of the Magi", "ratio": {"x": 0, "y": 0} },
 
        {"date_sold": "March 30, 1987", "price_adj": {{Inflation|US|39.67425|1987|r=1}}, "year_painted": 1888, "period": "p2", "artist": "Vincent van Gogh", "author": "Van Gogh", "title": "Vase with Fifteen Sunflowers", "ratio": {"x": 1, "y": 1.26}, "img": "wikirawupload:{{filepath:Vincent Willem van Gogh 127.jpg|190}}"},
 
        {"date_sold": "November 11, 1987", "price_adj": {{Inflation|US|53.9|1987|r=1}}, "year_painted": 1889, "period": "p2", "artist": "Vincent van Gogh", "author": "Van Gogh", "title": "Irises", "ratio": {"x": 1.31, "y": 1}, "img": "wikirawupload:{{filepath:Irises-Vincent van Gogh.jpg|190}}"},
 
        {"date_sold": "November 28, 1988", "price_adj": {{Inflation|US|38.5396|1988|r=1}}, "year_painted": 1905, "period": "p3", "artist": "Pablo Picasso", "author": "Picasso", "title": "Acrobate et jeune arlequin", "ratio": {"x": 0, "y": 0} },
 
        {"date_sold": "May 9, 1989", "price_adj": {{Inflation|US|47.85|1989|r=1}}, "year_painted": 1901, "period": "p3", "artist": "Pablo Picasso", "author": "Picasso", "title": " Yo, Picasso", "ratio": {"x": 0, "y": 0} },
 
        {"date_sold": "May 31, 1989", "price_adj": {{Inflation|US|35.2|1989|r=1}}, "year_painted": 1537, "period": "p1", "artist": "Pontormo", "author": "other", "title": "Portrait of a Halberdier", "ratio": {"x": 1, "y": 1.316}, "img": "wikirawupload:{{filepath:Pontormo (Jacopo Carucci) (Italian, Florentine) - Portrait of a Halberdier (Francesco Guardi?) - Google Art Project.jpg|190}}"},
 
        {"date_sold": "August 1, 1989", "price_adj": {{Inflation|US|60|1989|r=1}}, "year_painted": 1889, "period": "p2", "artist": "Vincent van Gogh", "author": "Van Gogh", "title": "Portrait of Joseph Roulin", "ratio": {"x": 1, "y": 1.184}, "img": "wikirawupload:{{filepath:Vincent van Gogh - Portrait of Joseph Roulin.jpg|190}}"},
 
        {"date_sold": "November 27, 1989", "price_adj": {{Inflation|US|40.7|1989|r=1}}, "year_painted": 1904, "period": "p3", "artist": "Pablo Picasso", "author": "Picasso", "title": "Au Lapin Agile", "ratio": {"x": 0, "y": 0} },
 
        {"date_sold": "November 30, 1989", "price_adj": {{Inflation|US|49.32|1989|r=1}}, "year_painted": 1905, "period": "p3", "artist": "Pablo Picasso", "author": "Picasso", "title": "Les Noces de Pierrette", "ratio": {"x": 0, "y": 0} },
 
        {"date_sold": "May 15, 1990", "price_adj": {{Inflation|US|82.5|1990|r=1}}, "year_painted": 1890, "period": "p2", "artist": "Vincent van Gogh", "author": "Van Gogh", "title": "Portrait of Dr. Gachet", "ratio": {"x": 1, "y": 1.232}, "img": "wikirawupload:{{filepath:Portrait of Dr. Gachet.jpg|190}}"},
 
        {"date_sold": "May 17, 1990", "price_adj": {{Inflation|US|78.1|1990|r=1}}, "year_painted": 1876, "period": "p2", "artist": "Pierre-Auguste Renoir", "author": "other", "title": "Bal du moulin de la Galette", "ratio": {"x": 1.338, "y": 1}, "img": "wikirawupload:{{filepath:Pierre-Auguste Renoir, Le Moulin de la Galette.jpg|190}}"},
 
        {"date_sold": "May 1993", "price_adj": {{Inflation|US|57|1993|r=1}}, "year_painted": 1889, "period": "p2", "artist": "Vincent van Gogh", "author": "Van Gogh", "title": "A Wheatfield with Cypresses", "ratio": {"x": 1.258, "y": 1}, "img": "wikirawupload:{{filepath:Vincent van Gogh - Wheat Field with Cypresses (National Gallery version).jpg|190}}"},
 
        {"date_sold": "1997", "price_adj": {{Inflation|US|47.5|1997|r=1}}, "year_painted": 1890, "period": "p2", "artist": "Vincent van Gogh", "author": "Van Gogh", "title": "Peasant Woman Against a Background of Wheat", "ratio": {"x": 1, "y": 1.268}, "img": "wikirawupload:{{filepath:Vincent Willem van Gogh 097.jpg|190}}"},
 
        {"date_sold": "November 19, 1998", "price_adj": {{Inflation|US|71.5|1998|r=1}}, "year_painted": 1889, "period": "p2", "artist": "Vincent van Gogh", "author": "Van Gogh", "title": "Portrait de l'artiste sans barbe", "ratio": {"x": 1, "y": 1.253}, "img": "wikirawupload:{{filepath:Vincent Willem van Gogh 102.jpg|190}}"},
 
        {"date_sold": "May 10, 1999", "price_adj": {{Inflation|US|60.5|1999|r=1}}, "year_painted": 1894, "period": "p2", "artist": "Paul Cézanne", "author": "other", "title": "Rideau, Cruchon et Compotier", "ratio": {"x": 1.429, "y": 1}, "img": "wikirawupload:{{filepath:Paulcezanneart.jpg|190}}"},
 
        {"date_sold": "November 10, 1999", "price_adj": {{Inflation|US|49.5025|1999|r=1}}, "year_painted": 1938, "period": "p3", "artist": "Pablo Picasso", "author": "Picasso", "title": "Femme assise dans un jardin", "ratio": {"x": 0, "y": 0} },
 
        {"date_sold": "November 8, 2000", "price_adj": {{Inflation|US|55.006|2000|r=1}}, "year_painted": 1902, "period": "p3", "artist": "Pablo Picasso", "author": "Picasso", "title": "Femme aux Bras Croisés", "ratio": {"x": 1, "y": 1.389}, "img": "wikirawupload:{{filepath:Pablo Picasso, 1901-02, Femme aux Bras Croisés, Woman with Folded Arms (Madchenbildnis), oil on canvas, 81 × 58 cm (32 × 23 in).jpg|190}}"},
 
        {"date_sold": "July 10, 2002", "price_adj": {{Inflation|US|76.69570218|2002|r=1}}, "year_painted": 1611, "period": "p1", "artist": "Peter Paul Rubens", "author": "other", "title": "Massacre of the Innocents", "ratio": {"x": 1.348, "y": 1}, "img": "wikirawupload:{{filepath:0 Le Massacre des Innocents d'après P.P. Rubens - Musées royaux des beaux-arts de Belgique (2).JPG|190}}"},
 
        {"date_sold": "November 2003", "price_adj": {{Inflation|US|70|2003|r=1}}, "year_painted": 1533, "period": "p1", "artist": "Titian", "author": "other", "title": "Portrait of Alfonso d'Avalos, Marquis of Vasto, in Armor with a Page", "ratio": {"x": 1, "y": 1.284}, "img": "wikirawupload:{{filepath:Titian - Marchese del Vasto.jpg|190}}"},
 
        {"date_sold": "May 4, 2004", "price_adj": {{Inflation|US|104.168|2004|r=1}}, "year_painted": 1905, "period": "p3", "artist": "Pablo Picasso", "author": "Picasso", "title": "Garçon à la pipe", "ratio": {"x": 1, "y": 1.242}, "img": "wikirawupload:{{filepath:Garçon à la pipe.jpg|190}}"},
 
        {"date_sold": "May 3, 2006", "price_adj": {{Inflation|US|95.216|2006|r=1}}, "year_painted": 1941, "period": "p3", "artist": "Pablo Picasso", "author": "Picasso", "title": "Dora Maar au Chat", "ratio": {"x": 0, "y": 0} },
 
        {"date_sold": "June 18, 2006", "price_adj": {{Inflation|US|135|2006|r=1}}, "year_painted": 1907, "period": "p3", "artist": "Gustav Klimt", "author": "other", "title": "Portrait of Adele Bloch-Bauer I", "ratio": {"x": 1, "y": 1}, "img": "wikirawupload:{{filepath:Gustav Klimt 046.jpg|190}}"},
 
        {"date_sold": "October 12, 2006", "price_adj": {{Inflation|US|63.5|2006|r=1}}, "year_painted": 1955, "period": "p4", "artist": "Willem de Kooning", "author": "other", "title": "Police Gazette", "ratio": {"x": 0, "y": 0} },
 
        {"date_sold": "October 12, 2006", "price_adj": {{Inflation|US|80|2006|r=1}}, "year_painted": 1959, "period": "p4", "artist": "Jasper Johns", "author": "other", "title": "False Start", "ratio": {"x": 0, "y": 0} },
 
        {"date_sold": "November 2, 2006", "price_adj": {{Inflation|US|87.936|2006|r=1}}, "year_painted": 1912, "period": "p3", "artist": "Gustav Klimt", "author": "other", "title": "Adele Bloch-Bauer II", "ratio": {"x": 1, "y": 1.642}, "img": "wikirawupload:{{filepath:Gustav Klimt 047.jpg|190}}"},
 
        {"date_sold": "November 2, 2006", "price_adj": {{Inflation|US|140|2006|r=1}}, "year_painted": 1948, "period": "p4", "artist": "Jackson Pollock", "author": "other", "title": "No. 5, 1948", "ratio": {"x": 0, "y": 0} },
 
        {"date_sold": "November 18, 2006", "price_adj": {{Inflation|US|137.5|2006|r=1}}, "year_painted": 1953, "period": "p4", "artist": "Willem de Kooning", "author": "other", "title": "Woman III", "ratio": {"x": 0, "y": 0} },
 
        {"date_sold": "April 12, 2007", "price_adj": {{Inflation|US|68|2007|r=1}}, "year_painted": 1875, "period": "p2", "artist": "Thomas Eakins", "author": "other", "title": "The Gross Clinic", "ratio": {"x": 1, "y": 1.242}, "img": "wikirawupload:{{filepath:Thomas Eakins, American - Portrait of Dr. Samuel D. Gross (The Gross Clinic) - Google Art Project.jpg|190}}"},
 
        {"date_sold": "May 15, 2007", "price_adj": {{Inflation|US|72.84|2007|r=1}}, "year_painted": 1950, "period": "p4", "artist": "Mark Rothko", "author": "other", "title": "White Center (Yellow, Pink and Lavender on Rose)", "ratio": {"x": 0, "y": 0} },
 
        {"date_sold": "May 16, 2007", "price_adj": {{Inflation|US|71.72|2007|r=1}}, "year_painted": 1963, "period": "p4", "artist": "Andy Warhol", "author": "Warhol", "title": "Green Car Crash (Green Burning Car I)", "ratio": {"x": 0, "y": 0} },
 
        {"date_sold": "May 20, 2007", "price_adj": {{Inflation|US|80|2007|r=1}}, "year_painted": 1964, "period": "p4", "artist": "Andy Warhol", "author": "Warhol", "title": " Turquoise Marilyn", "ratio": {"x": 0, "y": 0} },
 
        {"date_sold": "May 14, 2008", "price_adj": {{Inflation|US|86.281|2008|r=1}}, "year_painted": 1976, "period": "p4", "artist": "Francis Bacon", "author": "other", "title": "Triptych, 1976", "ratio": {"x": 0, "y": 0} },
 
        {"date_sold": "June 24, 2008", "price_adj": {{Inflation|US|80.549389|2008|r=1}}, "year_painted": 1919, "period": "p3", "artist": "Claude Monet", "author": "other", "title": "Le Bassin aux Nymphéas", "ratio": {"x": 2.043, "y": 1}, "img": "wikirawupload:{{filepath:Le bassin aux nymphéas - Claude Monet.jpg|190}}"},
 
        {"date_sold": "October 2008", "price_adj": {{Inflation|US|100|2008|r=1}}, "year_painted": 1963, "period": "p4", "artist": "Andy Warhol", "author": "Warhol", "title": "Eight Elvises", "ratio": {"x": 0, "y": 0} },
 
        {"date_sold": "November 3, 2008", "price_adj": {{Inflation|US|60.0025|2008|r=1}}, "year_painted": 1916, "period": "p3", "artist": "Kazimir Malevich", "author": "other", "title": "Suprematist Composition", "ratio": {"x": 1, "y": 1.247}, "img": "wikirawupload:{{filepath:Suprematist Composition - Kazimir Malevich.jpg|190}}"},
 
        {"date_sold": "February 1, 2009", "price_adj": {{Inflation|US|70.625|2009|r=1}}, "year_painted": 1559, "period": "p1", "artist": "Titian", "author": "other", "title": "Diana and Actaeon", "ratio": {"x": 1.092, "y": 1}, "img": "wikirawupload:{{filepath:Titian - Diana and Actaeon - 1556-1559.jpg|190}}"},
 
        {"date_sold": "March 2010", "price_adj": {{Inflation|US|110|2010|r=1}}, "year_painted": 1954, "period": "p4", "artist": "Jasper Johns", "author": "other", "title": "Flag", "ratio": {"x": 0, "y": 0} },
 
        {"date_sold": "May 4, 2010", "price_adj": {{Inflation|US|106.4825|2010|r=1}}, "year_painted": 1932, "period": "p3", "artist": "Pablo Picasso", "author": "Picasso", "title": "Nude, Green Leaves and Bust", "ratio": {"x": 0, "y": 0} },
 
        {"date_sold": "November 2, 2010", "price_adj": {{Inflation|US|68.9625|2010|r=1}}, "year_painted": 1917, "period": "p3", "artist": "Amedeo Modigliani", "author": "other", "title": "Nude Sitting on a Divan ('La Belle Romaine')", "ratio": {"x": 1, "y": 1.579}, "img": "wikirawupload:{{filepath:Amedeo Modigliani 063.jpg|190}}"},
 
        {"date_sold": "November 8, 2010", "price_adj": {{Inflation|US|63.3625|2010|r=1}}, "year_painted": 1962, "period": "p4", "artist": "Andy Warhol", "author": "Warhol", "title": "Men in Her Life", "ratio": {"x": 0, "y": 0} },
 
        {"date_sold": "April 2011", "price_adj": {{Inflation|US|259|2011|r=0}}, "year_painted": 1893, "period": "p2", "artist": "Paul Cézanne", "author": "other", "title": "The Card Players", "ratio": {"x": 1.418, "y": 1}, "img": "wikirawupload:{{filepath:Paul Cézanne 222.jpg|190}}"},
 
        {"date_sold": "May 22, 2011", "price_adj": {{Inflation|US|65.48445|2011|r=1}}, "year_painted": 1946, "period": "p4", "artist": "Qi Baishi", "author": "other", "title": "Eagle Standing on Pine Tree", "ratio": {"x": 0, "y": 0} },
 
        {"date_sold": "June 4, 2011", "price_adj": {{Inflation|US|62.1299|2011|r=1}}, "year_painted": 1350, "period": "p1", "artist": "Wang Meng", "author": "other", "title": "Zhichuan Resettlement", "ratio": {"x": 1, "y": 2.152}, "img": "wikirawupload:{{filepath:ZhichuanResettlement.jpg|190}}"},
 
        {"date_sold": "July 12, 2011", "price_adj": {{Inflation|US|75|2011|r=0}}, "year_painted": 1526, "period": "p1", "artist": "Hans Holbein", "author": "other", "title": "Darmstadt Madonna", "ratio": {"x": 1, "y": 1.416}, "img": "wikirawupload:{{filepath:Darmstadtmadonna.jpg|190}}"},
 
        {"date_sold": "2012", "price_adj": {{Inflation|US|118|2012|r=0}}, "year_painted": 1917, "period": "p3", "artist": "Amedeo Modigliani", "author": "other", "title": "Reclining Nude With Blue Cushion", "ratio": {"x": 0, "y": 0} },
 
        {"date_sold": "March 2, 2012", "price_adj": {{Inflation|US|71.7|2012|r=1}}, "year_painted": 1559, "period": "p1", "artist": "Titian", "author": "other", "title": "Diana and Callisto", "ratio": {"x": 1.086, "y": 1}, "img": "wikirawupload:{{filepath:TitianDianaCallistoEdinburgh.jpg|190}}"},
 
        {"date_sold": "May 2, 2012", "price_adj": {{Inflation|US|119.9225|2012|r=1}}, "year_painted": 1895, "period": "p2", "artist": "Edvard Munch", "author": "other", "title": "The Scream", "ratio": {"x": 1, "y": 1.332}, "img": "wikirawupload:{{filepath:The Scream Pastel.jpg|190}}"},
 
        {"date_sold": "May 8, 2012", "price_adj": {{Inflation|US|86.8825|2012|r=1}}, "year_painted": 1961, "period": "p4", "artist": "Mark Rothko", "author": "other", "title": "Orange, Red, Yellow", "ratio": {"x": 0, "y": 0} },
 
        {"date_sold": "November 13, 2012", "price_adj": {{Inflation|US|75.1225|2012|r=1}}, "year_painted": 1954, "period": "p4", "artist": "Mark Rothko", "author": "other", "title": "No 1 (Royal Red and Blue)", "ratio": {"x": 0, "y": 0} },
 
        {"date_sold": "2013", "price_adj": {{Inflation|US|100|2013|r=0}}, "year_painted": 1904, "period": "p3", "artist": "Paul Cézanne", "author": "other", "title": "La Montagne Sainte-Victoire vue du bosquet du Château Noir", "ratio": {"x": 1.275, "y": 1}, "img": "wikirawupload:{{filepath:Sainte-Victoire.jpg|190}}"},
 
        {"date_sold": "March 26, 2013", "price_adj": {{Inflation|US|155|2013|r=1}}, "year_painted": 1932, "period": "p3", "artist": "Pablo Picasso", "author": "Picasso", "title": "Le Rêve", "ratio": {"x": 0, "y": 0} },
 
        {"date_sold": "May 2013", "price_adj": {{Inflation|US|127.5|2013|r=1}}, "year_painted": 1519, "period": "p1", "artist": "Attributed to Leonardo da Vinci", "author": "other", "title": "Salvator Mundi", "ratio": {"x": 1, "y": 1.453}, "img": "wikirawupload:{{filepath:Leonardo da Vinci or Boltraffio (attrib) Salvator Mundi circa 1500.jpg|190}}"},
 
        {"date_sold": "October 4, 2013", "price_adj": {{Inflation|US|105.7|2013|r=1}}, "year_painted": 1968, "period": "p4", "artist": "Barnett Newman", "author": "other", "title": "Anna's Light", "ratio": {"x": 0, "y": 0} },
 
        {"date_sold": "November 12, 2013", "price_adj": {{Inflation|US|142.405|2013|r=1}}, "year_painted": 1969, "period": "p4", "artist": "Francis Bacon", "author": "other", "title": "Three Studies of Lucian Freud", "ratio": {"x": 0, "y": 0} },
 
        {"date_sold": "November 13, 2013", "price_adj": {{Inflation|US|105.445|2013|r=1}}, "year_painted": 1963, "period": "p4", "artist": "Andy Warhol", "author": "Warhol", "title": "Silver Car Crash (Double Disaster)", "ratio": {"x": 0, "y": 0} },
 
        {"date_sold": "May 13, 2014", "price_adj": {{Inflation|US|66.245|2014|r=1}}, "year_painted": 1952, "period": "p4", "artist": "Mark Rothko", "author": "other", "title": "Untitled", "ratio": {"x": 0, "y": 0} },
 
        {"date_sold": "May 13, 2014", "price_adj": {{Inflation|US|84.165|2014|r=1}}, "year_painted": 1961, "period": "p4", "artist": "Barnett Newman", "author": "other", "title": "Black Fire I", "ratio": {"x": 0, "y": 0} },
 
        {"date_sold": "May 13, 2014", "price_adj": {{Inflation|US|80.805|2014|r=1}}, "year_painted": 1984, "period": "p4", "artist": "Francis Bacon", "author": "other", "title": "Three Studies for a Portrait of John Edwards", "ratio": {"x": 0, "y": 0} },
 
        {"date_sold": "August 2014", "price_adj": {{Inflation|US|186|2014|r=0}}, "year_painted": 1951, "period": "p4", "artist": "Mark Rothko", "author": "other", "title": "No. 6 (Violet, Green and Red)", "ratio": {"x": 0, "y": 0} },
 
        {"date_sold": "November 5, 2014", "price_adj": {{Inflation|US|65.125|2014|r=1}}, "year_painted": 1881, "period": "p2", "artist": "Édouard Manet", "author": "other", "title": "Spring (Le Printemps)", "ratio": {"x": 1, "y": 1.447}, "img": "wikirawupload:{{filepath:Édouard Manet - Jeanne (Spring).jpg|190}}"},
 
        {"date_sold": "November 12, 2014", "price_adj": {{Inflation|US|81.925|2014|r=1}}, "year_painted": 1963, "period": "p4", "artist": "Andy Warhol", "author": "Warhol", "title": "Triple Elvis", "ratio": {"x": 0, "y": 0} },
 
        {"date_sold": "November 12, 2014", "price_adj": {{Inflation|US|69.605|2014|r=1}}, "year_painted": 1966, "period": "p4", "artist": "Andy Warhol", "author": "Warhol", "title": "Four Marlons", "ratio": {"x": 0, "y": 0} },
 
        {"date_sold": "November 12, 2014", "price_adj": {{Inflation|US|69.605|2014|r=1}}, "year_painted": 1970, "period": "p4", "artist": "Cy Twombly", "author": "other", "title": "Untitled", "ratio": {"x": 0, "y": 0} },
 
        {"date_sold": "February 2015", "price_adj": {{Inflation|US|300|2015|r=0}}, "year_painted": 1892, "period": "p2", "artist": "Paul Gauguin", "author": "other", "title": "Nafea Faa Ipoipo (When Will You Marry?)", "ratio": {"x": 1, "y": 1.332}, "img": "wikirawupload:{{filepath:Paul Gauguin, Nafea Faa Ipoipo? (When Will You Marry?) 1892, oil on canvas, 101 x 77 cm.jpg|190}}"},
 
        {"date_sold": "May 5, 2015", "price_adj": {{Inflation|US|66.33|2015|r=1}}, "year_painted": 1888, "period": "p2", "artist": "Vincent van Gogh", "author": "Van Gogh", "title": "L’Allée des Alyscamps", "ratio": {"x": 1, "y": 1.311}, "img": "wikirawupload:{{filepath:Van Gogh - Les Alyscamps, Allee in Arles1.jpeg|190}}"},
 
        {"date_sold": "May 11, 2015", "price_adj": {{Inflation|US|67.365|2015|r=1}}, "year_painted": 1938, "period": "p3", "artist": "Pablo Picasso", "author": "Picasso", "title": "Buste de femme (Femme à la résille)", "ratio": {"x": 0, "y": 0} },
 
        {"date_sold": "May 11, 2015", "price_adj": {{Inflation|US|179.365|2015|r=1}}, "year_painted": 1955, "period": "p4", "artist": "Pablo Picasso", "author": "Picasso", "title": "Les Femmes d'Alger ('Version O')", "ratio": {"x": 0, "y": 0} },
 
        {"date_sold": "May 13, 2015", "price_adj": {{Inflation|US|81.925|2015|r=1}}, "year_painted": 1961, "period": "p4", "artist": "Mark Rothko", "author": "other", "title": "No. 10", "ratio": {"x": 0, "y": 0} },
 
        {"date_sold": "September, 2015", "price_adj": {{Inflation|US|300|2015|r=1}}, "year_painted": 1955, "period": "p4", "artist": "Willem de Kooning", "author": "other", "title": "Interchange", "ratio": {"x": 0, "y": 0} },
 
        {"date_sold": "September, 2015", "price_adj": {{Inflation|US|200|2015|r=1}}, "year_painted": 1948, "period": "p4", "artist": "Jackson Pollock", "author": "other", "title": "Number 17A", "ratio": {"x": 0, "y": 0} },
 
        {"date_sold": "September 21, 2015", "price_adj": {{Inflation|US|181|2015|r=0}}, "year_painted": 1634, "period": "p1", "artist": "Rembrandt", "author": "other", "title": "Pendant portraits of Maerten Soolmans and Oopjen Coppit", "ratio": {"x": 1.397, "y": 1}, "img": "wikirawupload:{{filepath:Pendant portraits of Maerten Soolmans and Oopjen Coppit.jpeg|190}}"},
 
        {"date_sold": "November 5, 2015", "price_adj": {{Inflation|US|67.45|2015|r=1}}, "year_painted": 1901, "period": "p3", "artist": "Pablo Picasso", "author": "Picasso", "title": "La Gommeuse", "ratio": {"x": 1, "y": 1.532}, "img": "wikirawupload:{{filepath:Pablo Picasso - La Gommeuse.jpg|190}}"},
 
        {"date_sold": "November 9, 2015", "price_adj": {{Inflation|US|95.365|2015|r=1}}, "year_painted": 1964, "period": "p4", "artist": "Roy Lichtenstein", "author": "other", "title": "Nurse", "ratio": {"x": 0, "y": 0} },
 
        {"date_sold": "November 9, 2015", "price_adj": {{Inflation|US|170.405|2015|r=1}}, "year_painted": 1917, "period": "p3", "artist": "Amedeo Modigliani", "author": "other", "title": "Nu Couché", "ratio": {"x": 1.583, "y": 1}, "img": "wikirawupload:{{filepath:Modigliani - Nu couché.jpg|190}}"},
 
        {"date_sold": "November 11, 2015", "price_adj": {{Inflation|US|70.53|2015|r=1}}, "year_painted": 1968, "period": "p4", "artist": "Cy Twombly", "author": "other", "title": "Untitled (New York City)", "ratio": {"x": 0, "y": 0} },
 
      ]
 
    },
 
    {
 
      "name": "date_min_max",
 
      "format": {"type": "json", "parse": {"min_max": "date"} },
 
      "values": [
 
        {"min_max": "1985"},
 
        {"min_max": "2017"}
 
      ]
 
    },
 
    {
 
      // Specify the names (corresponding to artist in table) that should appear in the artist legend.
 
      "name": "popular_artists",
 
      "values": [
 
        {"name": "Vincent van Gogh"}, {"name": "Pablo Picasso"},
 
        {"name": "Andy Warhol"}, {"name": "Mark Rothko"}
 
      ]
 
    },
 
    {
 
      // Filter the reference point from the dataset
 
      // This point is not included in the wikipedia table, but corresponds to data from the 'Background' section
 
      "name": "old_record",
 
      "source": "table",
 
      "transform": [{
 
        "type": "filter",
 
        "test": "datum.title == 'Adoration of the Magi'"
 
      }]
 
    },
 
    {
 
      // Specify the values corresponding to the period attribute in the table.
 
      "name": "periods",
 
      "values": ["p1", "p2", "p3", "p4"]
 
    },
 
    {
 
      // Helper dataset for drawing images. Filtering this dataset based on the availability of an image ensures
 
      // that the image is drawn correctly and does not throw a 404 error. See transforms of this dataset for
 
      // more information on how it is used.
 
      "name": "drawImage",
 
      "values": [0]
 
    }
 
  ],
 
  
  "signals": [
+
Area chart:<br />
    {
+
<tt><nowiki>{{Graph:Chart|width=400|height=100|type=area|x=1,2,3,4,5,6,7,8|y=10,12,6,14,2,10,7,9}}</nowiki></tt><br />{{Graph:Chart|width=400|height=100|type=area|x=1,2,3,4,5,6,7,8|y=10,12,6,14,2,10,7,9}}<br />
      // Tooltip signal: extract the data for the hovered point and provide an empty value.
+
Note: The y-axis starts from zero
      "name": "tooltip",
 
      "init": {"title": "Sale Date for the Most Expensive Paintings", "ratio": {"x": 0, "y":0} },
 
      "streams": [
 
        {"type": "@points:mouseover", "expr": "datum"},
 
        {"type": "@points:mouseout", "expr": "{title: 'Sale Date for the Most Expensive Paintings', ratio:{x: 0, y:0} }"}
 
      ]
 
    },
 
    {
 
      // Define the selected artist (background select for none, point or legend for artist)
 
      "name": "artist",
 
      "init": "",
 
      "streams": [
 
        {"type": "click", "expr": "''"},
 
        {"type": "symbol:click", "expr": "datum.artist"},
 
        {"type": "@artist_legend:click", "expr": "datum.name"}
 
      ]
 
    },
 
    {
 
      // Define the selected period (background select for none or legend data)
 
      "name": "period",
 
      "init": "",
 
      "streams": [
 
        {"type": "click", "expr": "''"},
 
        {"type": "@period_legend_text:click", "expr": "datum.data"}
 
      ]
 
    },
 
    {
 
      // Scale the tooltip image ratio to the desired size
 
      "name": "image_size",
 
      "init": {"width":0, "height":0},
 
      "streams": [
 
        {"type": "tooltip", "expr": "{width:tooltip.ratio.x * 100, height:tooltip.ratio.y * 100}"}
 
      ]
 
    },
 
    {
 
      // Determine the x position of the tooltip
 
      "name": "xPosition",
 
      "init": {},
 
      "streams": [
 
        {"type": "tooltip", "expr": "tooltip.date_sold", "scale": {"name": "scale_date"} }
 
      ]
 
    },
 
    {
 
      // Determine the y position of the tooltip
 
      "name": "yPosition",
 
      "init": {},
 
      "streams": [
 
        {"type": "tooltip", "expr": "tooltip.price_adj", "scale": {"name": "scale_price"} }
 
      ]
 
    }
 
  ],
 
  
  "scales": [
+
Bar chart:<br />
    {
+
<tt><nowiki>{{Graph:Chart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y|type=rect|x=1,2,3,4,5,6,7,8|y=10,12,6,14,2,10,7,9}}</nowiki></tt><br />{{Graph:Chart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y|type=rect|x=1,2,3,4,5,6,7,8|y=10,12,6,14,2,10,7,9}}
      "name": "scale_date",
 
      "type": "time",
 
      "domain": {"data": "date_min_max", "field": "min_max"},
 
      "range": [0, 800],
 
      "nice": "year"
 
    },
 
    {
 
      "name": "scale_price",
 
      "type": "linear",
 
      "domain": {"data": "table", "field": "price_adj"},
 
      "range": "height",
 
      "nice": true
 
    },
 
    {
 
      "name": "scale_period_colour",
 
      "type": "ordinal",
 
      "domain": {"data": "periods", "field": "data"},
 
      "range": ["#a1dab4", "#41b6c4", "#2c7fb8", "#253494"]
 
    },
 
    {
 
      "name": "scale_period_text",
 
      "type": "ordinal",
 
      "domain": {"data": "periods", "field": "data"},
 
      "range": ["before 1700", "1851–1900", "1901–1945", "after 1945"]
 
    },
 
    {
 
      // Scale to position the labels for the period legend.
 
      "name": "scale_period_position",
 
      "type": "ordinal",
 
      "domain": {"data": "periods", "field": "data"},
 
      "range": [30, 90]
 
    },
 
    {
 
      // Scale to position the labels for the artist legend.
 
      "name": "scale_artist_position",
 
      "type": "ordinal",
 
      "domain": {"data": "popular_artists", "field": "name"},
 
      "range": [30, 90]
 
    }
 
  ],
 
  
  "axes": [
+
Line chart with more than one data series, using colors:<br />
    {
+
<tt><nowiki>{{Graph:Chart|width=400|height=100|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|y2=2,4,6,8,13,11,9,2|colors=#0000aa,#ff8000}}</nowiki></tt><br />{{Graph:Chart|width=400|height=100|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|y2=2,4,6,8,13,11,9,2|colors=#0000aa,#ff8000}}
      "type": "x",
 
      "scale": "scale_date",
 
      "title": "Date of sale",
 
      "tickSizeEnd": 0,
 
      "subdivide": 4
 
    },
 
    {
 
      "type": "y",
 
      "scale": "scale_price",
 
      "title": "Adjusted price (equivalent to US$ millions in {{Inflation-year|US}})",
 
      "subdivide": 4,
 
      "grid": true,
 
      "layer": "back"
 
    }
 
  ],
 
  
  "marks": [
+
Area chart with more than one data series showing blended overlap:<br />
    {
+
<tt><nowiki>{{Graph:Chart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y|legend=Legend|type=area|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|colors=#800000aa,#80ff8000}}</nowiki></tt><br />{{Graph:Chart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y|legend=Legend|type=area|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|colors=#800000aa,#80ff8000}}
      // The 'symbol' mark specifies the points visible in the scatterplot.
+
 
      "name": "points",
+
Bar chart with multiple data series:<br />
      "type": "symbol",
+
<tt><nowiki>{{Graph:Chart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y|legend=Legend|type=rect|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|colors=#800000aa,#80ff8000}}</nowiki></tt><br />{{Graph:Chart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y|legend=Legend|type=rect|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|colors=#800000aa,#80ff8000}}
      "from": {
+
 
        "data": "table",
+
Area chart with smoothed data values:<br />
        "transform": [{"type": "sort", "by": "-year_painted"}]
+
<tt><nowiki>{{Graph:Chart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y|legend=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|interpolate=monotone|colors=seagreen, orchid}}</nowiki></tt><br />{{Graph:Chart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y|legend=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|interpolate=monotone|colors=seagreen, orchid}}
      },
+
 
      "properties": {
+
Bar chart with stacked data series:<br />
        "enter": {
+
<tt><nowiki>{{Graph:Chart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y|legend=Legend|type=stackedrect|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=Data A|y2Title=Data B|colors=seagreen, orchid}}</nowiki></tt><br />{{Graph:Chart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y|legend=Legend|type=stackedrect|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=Data A|y2Title=Data B|colors=seagreen, orchid}}
          "x": {"scale": "scale_date", "field": "date_sold"},
+
 
          "y": {"scale": "scale_price", "field": "price_adj"},
+
<tt><nowiki>{{Graph:Chart|width=100|height=100|type=pie|legend=Legende|x=A,B,C,D,E,F,G,H,I|y1=100,200,150,300,100,100,150,50,200}}</nowiki></tt><br />
          "fill": {"scale": "scale_period_colour", "field": "period"},
+
{{Graph:Chart|width=100|height=100|type=pie|legend=Legende|x=A,B,C,D,E,F,G,H,I|y1=100,200,150,300,100,100,150,50,200}}
          "size": {"value": 150},
+
 
          "shape": [
+
<tt><nowiki>{{Graph:Chart|width=100|height=100|type=pie|legend=Legende|x=A,B,C,D,E,F,G,H,I|y1=100,200,150,300,100,100,150,50,200|showValues=}}</nowiki></tt><br />
            {"test": "datum.img == null", "value": "square"},
+
{{Graph:Chart|width=100|height=100|type=pie|legend=Legende|x=A,B,C,D,E,F,G,H,I|y1=100,200,150,300,100,100,150,50,200|showValues=}}
            {"value": "circle"}
+
 
          ]
+
<tt><nowiki>{{Graph:Chart|width=100|height=100|type=pie|legend=Legende|x=A,B,C,D,E,F,G,H,I|y1=100,200,150,300,100,100,150,50,200|y2=7,8,9,8,8,9,10,9,5|showValues=}}</nowiki></tt><br />
        },
+
{{Graph:Chart|width=100|height=100|type=pie|legend=Legende|x=A,B,C,D,E,F,G,H,I|y1=100,200,150,300,100,100,150,50,200|y2=7,8,9,8,8,9,10,9,5|showValues=}}
        "update": {
+
 
          // If the data point corresponds to the selected artist, selected period, or if nothing is selected,
+
<tt><nowiki>{{Graph:Chart|width=100|height=100|type=pie|innerRadius=40|legend=Legende|x=A,B,C,D,E,F,G,H,I|y1=100,200,150,300,100,100,150,50,200}}</nowiki></tt><br />
          // it should be completely visible. Otherwise, it should become transparent.
+
{{Graph:Chart|width=100|height=100|type=pie|innerRadius=40|legend=Legende|x=A,B,C,D,E,F,G,H,I|y1=100,200,150,300,100,100,150,50,200}}
          "opacity": [
+
 
            {"test": "datum.artist == artist", "value": 1},
+
== See also ==
            {"test": "datum.period == period", "value": 1},
+
* {{tl|Line chart}}
            {"test": "period == '' && artist == ''", "value": 1},
+
 
            {"value": 0.25}
+
<includeonly>{{#ifeq:{{SUBPAGENAME}}|sandbox||
          ],
+
<!-- Categories below this line, please; interwikis at Wikidata -->
          "stroke": {"value": "white"},
+
 
          "strokeWidth": {"value": 1}
+
}}</includeonly>
        },
 
        "hover": {
 
          "stroke": {"value": "black"},
 
          "strokeWidth": {"value": 2}
 
        }
 
      }
 
    },
 
    {
 
      // The tooltip consists of two lines of text 'No image available' and 'non-free content'.
 
      "name": "tooltip",
 
      "from": {
 
        // Only draw the tooltip when there is no image available (and mousing over a point).
 
        // If there is an image associated with the tooltip point or the default title is set,  
 
        // the filter will remove all data points and this group will not be drawn.
 
        "data": "drawImage",
 
        "transform": [{"type": "filter", "test": "tooltip.img == null && tooltip.title != 'Sale Date for the Most Expensive Paintings'"}]
 
      },
 
      "type": "group",
 
      "properties": {
 
        // Specify properties of the entire tooltip (background, fill, position, etc.)
 
        "update": {
 
          "width": {"value": 115},
 
          "height": {"value": 33},
 
          "opacity": {"value": 0.75},
 
          "fill": [
 
            {"test": "tooltip.title == 'Adoration of the Magi'", "value": "white"},
 
            {"value": "black"}
 
          ],
 
          // Specify the xPosition of the text tooltip based on the point position to prevent the tooltip from
 
          // being drawn outside the visible region (e.g. draw it to the left if the point is near the right edge).
 
          "x": [
 
            {"test": "xPosition < 550", "scale": "scale_date", "signal": "tooltip.date_sold", "offset": 7},
 
            {"scale": "scale_date", "signal": "tooltip.date_sold", "offset": -122}
 
          ],
 
          // Specify the yPosition of the text tooltip based on the point position to prevent the tooltip from
 
          // being drawn outside the visible region (e.g. draw it below the point if the point is near the top).
 
          "y": [
 
            {"test": "yPosition > 150", "scale": "scale_price", "signal": "tooltip.price_adj", "offset": -40},
 
            {"scale": "scale_price", "signal": "tooltip.price_adj", "offset": -60}
 
          ]
 
        }
 
      },
 
      "marks": [
 
        {
 
          // Text: 'No image available'
 
          "type": "text",
 
          "properties": {
 
            "enter": {
 
              "align": {"value": "left"},
 
              "baseline": {"value": "top"},
 
              "text": {"value": "No image available"},
 
              "fill": {"value": "white"},
 
              "x": {"value": 9},
 
              "y": {"value": 3},
 
              "opacity": {"value": 1}
 
            }
 
          }
 
        },
 
        {
 
          // Text: 'non-free content'
 
          "type": "text",
 
          "properties": {
 
            "enter": {
 
              "align": {"value": "left"},
 
              "baseline": {"value": "top"},
 
              "text": {"value": "non-free content"},
 
              "fill": {"value": "lightgrey"},
 
              "x": {"value": 9},
 
              "y": {"value": 17},
 
              "opacity": {"value": 1}
 
            }
 
          }
 
        }
 
      ]
 
    },
 
    {
 
      // Draw a white background behind the legends to hide the gridlines.
 
      "name": "legend_background",
 
      "type": "rect",
 
      "properties": {
 
        "enter": {
 
          "fill": {"value": "white"},
 
          "x": {"value": 800},
 
          "x2": {"value": 950},
 
          "y": {"value": 0},
 
          "y2": {"value": 405}
 
        }
 
      }
 
    },
 
    {
 
      // Update the painting title when a point has been moused over.
 
      "name": "painting_title",
 
      "type": "text",
 
      "properties": {
 
        "enter": {
 
          "align": {"value": "left"},
 
          "fill": {"value": "black"},
 
          "fontSize": {"value": 18},
 
          "fontStyle": {"value": "bold"},
 
          "text": {"signal": "tooltip.title"}
 
        },
 
        "update": {
 
          "x": {"value": 20},
 
          "y": {"value": 20},
 
          "text": {"signal": "tooltip.title"}
 
        }
 
      }
 
    },
 
    {
 
      // Update the painting artist when a point has been moused over.
 
      "name": "painting_artist",
 
      "type": "text",
 
      "properties": {
 
        "enter": {
 
          "align": {"value": "left"},
 
          "fill": {"value": "gray"},
 
          "fontSize": {"value": 14},
 
          "x": {"value": 20},
 
          "y": {"value": 40},
 
          "fontStyle": {"value": "italic"}
 
        },
 
        "update": {
 
          "text": {"signal": "tooltip.artist"}
 
        }
 
      }
 
    },
 
    {
 
      // Manually create the artist legend to support interaction.
 
      // Selecting text in the legend updates the opacity of the points.
 
      "name": "artist_legend",
 
      "type": "group",
 
      "properties": {
 
        "enter": {
 
          "x": {"value": 820},
 
          "y": {"value": 0},
 
          "width": {"value": 160},
 
          "height": {"value": 80},
 
          "stroke": {"value": "#ddd"},
 
          "stroke-width": {"value": 2},
 
          "fill": {"value": "white"}
 
        }
 
      },
 
      "marks": [
 
        {
 
          // Add a text mark for each artist specified in "popular_artists"
 
          "name": "artist_legend",
 
          "type": "text",
 
          "from": {"data": "popular_artists"},
 
          "properties": {
 
            "enter": {
 
              "align": {"value": "left"},
 
              "fill": {"value": "black"},
 
              "x": {"value": 7},
 
              "y": {"scale": "scale_artist_position", "field": "name"},
 
              "fontSize": {"value": 12},
 
              "text": {"field": "name"}
 
            },
 
            "update": {
 
              "opacity": [
 
                {"test": "datum.name == artist", "value": 1},
 
                {"test": "period == '' && artist == ''", "value": 1},
 
                {"value": 0.15}
 
              ]
 
            }
 
          }
 
        },
 
        {
 
          // Add a text mark for the legend title.
 
          "type": "text",
 
          "properties": {
 
            "enter": {
 
              "align": {"value": "left"},
 
              "fill": {"value": "black"},
 
              "x": {"value": 7},
 
              "y": {"value": 15},
 
              "fontSize": {"value": 12},
 
              "fontStyle": {"value": "bold"},
 
              "text": {"value": "Most Represented Artists"}
 
            }
 
          }
 
        }
 
      ]
 
    },
 
    {
 
      // Manually create the period legend to support interaction.
 
      // Selecting text in the legend updates the opacity of the points.
 
      "name": "period_legend",
 
      "type": "group",
 
      "properties": {
 
        "enter": {
 
          "x": {"value": 820},
 
          "y": {"value": 95},
 
          "width": {"value": 160},
 
          "height": {"value": 80},
 
          "stroke": {"value": "#ddd"},
 
          "stroke-width": {"value": 2},
 
          "fill": {"value": "white"}
 
        }
 
      },
 
      "marks": [
 
        {
 
          // Add a text mark for each period specified in "periods"
 
          "name": "period_legend_text",
 
          "type": "text",
 
          "from": {"data": "periods"},
 
          "properties": {
 
            "enter": {
 
              "align": {"value": "left"},
 
              "fill": {"value": "black"},
 
              "x": {"value": 25},
 
              "y": {"scale": "scale_period_position", "field": "data"},
 
              "fontSize": {"value": 12},
 
              "text": {"scale": "scale_period_text", "field": "data"}
 
            },
 
            "update": {
 
              "opacity": [
 
                {"test": "datum.data == period", "value": 1},
 
                {"test": "period == '' && artist == ''", "value": 1},
 
                {"value": 0.15}
 
              ]
 
            }
 
          }
 
        },
 
        {
 
          // Add a text mark for the legend title.
 
          "type": "text",
 
          "properties": {
 
            "enter": {
 
              "align": {"value": "left"},
 
              "fill": {"value": "black"},
 
              "x": {"value": 7},
 
              "y": {"value": 15},
 
              "fontSize": {"value": 12},
 
              "fontStyle": {"value": "bold"},
 
              "text": {"value": "Periods"}
 
            }
 
          }
 
        },
 
        {
 
          // Add a filled circle for each text mark in the legend to specify the point color.
 
          "name": "period_legend_symbol",
 
          "type": "symbol",
 
          "from": {"data": "periods"},
 
          "properties": {
 
            "enter": {
 
              "size": {"value": 75},
 
              "fill": {"scale": "scale_period_colour", "field": "data"},
 
              "x": {"value": 12},
 
              "y": {"scale": "scale_period_position", "field": "data", "offset": -5}
 
            }
 
          }
 
        }
 
      ]
 
    },
 
    {
 
      "name": "shape_legend",
 
      "type": "group",
 
      "properties": {
 
        "enter": {
 
          "x": {"value": 820},
 
          "y": {"value": 190},
 
          "width": {"value": 160},
 
          "height": {"value": 50},
 
          "stroke": {"value": "#ddd"},
 
          "stroke-width": {"value": 2},
 
          "fill": {"value": "white"}
 
        }
 
      },
 
      "marks": [
 
        {
 
          "type": "text",
 
          "properties": {
 
            "enter": {
 
              "align": {"value": "left"},
 
              "fill": {"value": "black"},
 
              "x": {"value": 25},
 
              "y": {"value": 30},
 
              "fontSize": {"value": 12},
 
              "text": {"value": "Mouseover for image"}
 
            }
 
          }
 
        },
 
        {
 
          "type": "text",
 
          "properties": {
 
            "enter": {
 
              "align": {"value": "left"},
 
              "fill": {"value": "black"},
 
              "x": {"value": 25},
 
              "y": {"value": 45},
 
              "fontSize": {"value": 12},
 
              "text": {"value": "No image available"}
 
            }
 
          }
 
        },
 
        {
 
          // Add a text mark for the legend title.
 
          "type": "text",
 
          "properties": {
 
            "enter": {
 
              "align": {"value": "left"},
 
              "fill": {"value": "black"},
 
              "x": {"value": 7},
 
              "y": {"value": 15},
 
              "fontSize": {"value": 12},
 
              "fontStyle": {"value": "bold"},
 
              "text": {"value": "Image Availability"}
 
            }
 
          }
 
        },
 
        {
 
          "type": "symbol",
 
          "properties": {
 
            "enter": {
 
              "size": {"value": 75},
 
              "fill": {"value": "#253494"},
 
              "x": {"value": 12},
 
              "y": {"value": 25}
 
            }
 
          }
 
        },
 
        {
 
          "type": "symbol",
 
          "properties": {
 
            "enter": {
 
              "size": {"value": 75},
 
              "shape": {"value": "square"},
 
              "fill": {"value": "#253494"},
 
              "x": {"value": 12},
 
              "y": {"value": 40}
 
            }
 
          }
 
        }
 
      ]
 
    },
 
    {
 
      // Add a text mark for the annotation of the reference point.
 
      "name": "record_annotation",
 
      "type": "text",
 
      "from": {"data": "old_record"},
 
      "properties": {
 
        "enter": {
 
          "align": {"value": "left"},
 
          "fill": {"value": "grey"},
 
          "x": {"scale": "scale_date", "field": "date_sold", "offset": 9},
 
          "y": {"scale": "scale_price", "field": "price_adj", "offset": 3},
 
          "fontSize": {"value": 10},
 
          "fontStyle": {"value": "italic"},
 
          "text": {"value": "Record sale price prior to first listed painting."}
 
        },
 
        "update": {
 
          // Update the opacity of the text based on whether or not the artist, period, or nothing is selected.
 
          "opacity": [
 
            {"test": "datum.artist == artist", "value": 1},
 
            {"test": "datum.period == period", "value": 1},
 
            {"test": "period == '' && artist == ''", "value": 1},
 
            {"value": 0.25}
 
          ]
 
        }
 
      }
 
    },
 
    {
 
      // The painting image tooltip.
 
      "type": "image",
 
      "from": {
 
        // Only draw the tooltip image when there is an image available.
 
        // If there is an image associated with the tooltip point the filter will keep the only element and
 
        // draw the image. Otherwise the value will be removed and nothing will be drawn.
 
        "data": "drawImage",
 
        "transform": [{"type": "filter", "test": "tooltip.img != null"}]
 
      },
 
      "properties": {
 
        "update": {
 
          "url": {"signal": "tooltip.img"},
 
          "width": {"signal": "image_size.width"},
 
          "height": {"signal": "image_size.height"},
 
          // Align, baseline, x, and y all use the offset predicates to account for the position to update
 
          // the image location so that the image is not drawn out of the visible range of the scatterplot.
 
         
 
          // Specify the alignment based on the x position.
 
          // If the point is in the right half of the scatterplot, draw it to the left.
 
          "align": [
 
            {"test": "xPosition < 550", "value": "left"},
 
            {"value": "right"}
 
          ],
 
          // Specify the baseline based on the y position.
 
          // If the point is near the bottom, display the image above the point.
 
          "baseline": [
 
            {"test": "yPosition > 150", "value": "bottom"},
 
            {"value": "top"}
 
          ],
 
          // Update the offset of the x position based on whether or not
 
          // the point is displayed to the left or right.
 
          "x": [
 
            {"test": "xPosition < 550", "scale": "scale_date", "signal": "tooltip.date_sold", "offset": 7},
 
            {"scale": "scale_date", "signal": "tooltip.date_sold", "offset": -7}
 
          ],
 
          // Update the offset of the y position based on whether or not
 
          // the point is displayed to the bottom or top.
 
          "y": [
 
            {"test": "yPosition > 150", "scale": "scale_price", "signal": "tooltip.price_adj", "offset": -7},
 
            {"scale": "scale_price", "signal": "tooltip.price_adj", "offset": 7}
 
          ]
 
        }
 
      }
 
    }
 
  ]
 
}
 
<includeonly>|mode=interactive|title=Sale of the Most Expensive Paintings}}</includeonly><noinclude>|lang=javascript}}'''&lt;/graph>'''</noinclude>
 

Revision as of 19:18, 8 July 2017

Template:Meta

Parameters

  • width: width of the chart
  • height: height of the chart
  • type: type of the chart: line for line charts, area for area charts, and rect for (column) bar charts, and pie for pie charts. Multiple series can stacked using the stacked prefix, e.g. stackedarea.
  • interpolate: interpolation method for line and area charts. It is recommended to use monotone for a monotone cubic interpolation – further supported values are listed at https://github.com/vega/vega/wiki/Marks#area.[dead link]
  • colors: color palette of the chart as a comma-separated list of colors. The color values must be given either as #rgb/#rrggbb/#aarrggbb or by a CSS color name. For #aarrggbb the aa component denotes the alpha channel, i.e. FF=100% opacity, 80=50% opacity/transparency, etc. (The default color palette if n <= 10 is Category10:                                         else is Category20:                                                                                ).
  • xAxisTitle and yAxisTitle: captions of the x and y axes
  • xAxisMin, xAxisMax, yAxisMin, and yAxisMax: minimum and maximum values of the x and y axes (not yet supported for bar charts). These parameters can be used to invert the scale of a numeric axis by setting the lowest value to the Max and highest value to the Min.
  • xAxisFormat and yAxisFormat: changes the formatting of the axis labels. Supported values are listed at https://github.com/d3/d3-3.x-api-reference/blob/master/Formatting.md#numbers for numbers and https://github.com/d3/d3-3.x-api-reference/blob/master/Time-Formatting.md for date/time. For example, the format % can be used to output percentages.
  • xAxisAngle: rotates the x axis labels by the specified angle. Recommended values are: -45, +45, -90, +90
  • xType and yType: data types of the values, e.g. integer for integers, number for real numbers, date for dates (e.g. YYYY/MM/DD), and string for ordinal values (use string to prevent axis values from being repeated when there are only a few values).
  • xScaleType and yScaleType: scale types of the x and y axes, e.g. linear for linear scale (default), log for logarithmic scale and sqrt for square root scale.
  • x: the x-values as a comma-separated list
  • y or y1, y2, …: the y-values for one or several data series, respectively. For pie charts y2 denotes the radiuses of the corresponding sectors.
  • legend: show legend (only works in case of multiple data series)
  • y1Title, y2Title, …: defines the label of the respective data series in the legend
  • linewidth: line width for line charts or distance between the pie segments for pie charts. Setting to 0 with type=line creates a scatter plot.
  • linewidths: different line widths may be defined for each series of data with csv, if set to 0 with "showSymbols" results with points graph, eg.: linewidths=1, 0, 5, 0.2
  • showSymbols: show symbol on data point for line graphs, if number is provided it's size of symbol, default 2.5. may be defined for each series of data with csv, eg.: showSymbols=1, 2, 3, 4
  • symbolsShape: custom shape for symbol: circle, x, square, cross, diamond, triangle_up, triangle_down, triangle_right, triangle_left. May be defined for each series of data with csv, eg.: symbolsShape= circle, cross, square
  • symbolsNoFill: if true symbol will be without fill (only stroke),
  • symbolsStroke: if "x" symbol is used or option "symbolsNoFill" symbol stroke width, default 2.5
  • showValues: Additionally, output the y values as text. (Currently, only (non-stacked) bar and pie charts are supported.) The output can be configured used the following parameters provided as name1:value1, name2:value2:
  • innerRadius: For pie charts: defines the inner radius to create a doughnut chart.
  • xGrid and yGrid: display grid lines on the x and y axes.
  • Annotations
    • vAnnotatonsLine and hAnnotatonsLine: display vertical or horizontal annotation lines on specific values e.g. hAnnotatonsLine=4, 5, 6
    • vAnnotatonsLabel and vAnnotatonsLabel: display vertical or horizontal annotation labels for lines e.g. hAnnotationLabel = label1, label2, label3

Note: In the editor preview the graph extension creates a canvas element with vector graphics. However, when saving the page a PNG raster graphics is generated instead.

Examples

Line Chart:
{{Graph:Chart|width=400|height=100|type=line|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":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>
Note: The y-axis starts from the smallest y value, though this can be overridden with the yAxisMin parameter.

Area chart:
{{Graph:Chart|width=400|height=100|type=area|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>
Note: The y-axis starts from zero

Bar chart:
{{Graph:Chart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y|type=rect|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>

Line chart with more than one data series, using colors:
{{Graph:Chart|width=400|height=100|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|y2=2,4,6,8,13,11,9,2|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":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":"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>

Area chart with more than one data series showing blended overlap:
{{Graph:Chart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y|legend=Legend|type=area|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|colors=#800000aa,#80ff8000}}
<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":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":"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>

Bar chart with multiple data series:
{{Graph:Chart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y|legend=Legend|type=rect|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|colors=#800000aa,#80ff8000}}
<graph>{"legends":[{"properties":{"title":{"fill":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"stroke":"color","title":"Legend","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":"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>

Area chart with smoothed data values:
{{Graph:Chart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y|legend=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|interpolate=monotone|colors=seagreen, orchid}}
<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":"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":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":"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}]},{"transform":[{"type":"aggregate","summarize":{"y":"sum"},"groupby":["x"]}],"name":"stats","source":"chart"}],"width":400}</graph>

Bar chart with stacked data series:
{{Graph:Chart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y|legend=Legend|type=stackedrect|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=Data A|y2Title=Data B|colors=seagreen, orchid}}
<graph>{"legends":[{"properties":{"title":{"fill":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"stroke":"color","title":"Legend","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":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":"Data A","x":1},{"y":12,"series":"Data A","x":2},{"y":6,"series":"Data A","x":3},{"y":14,"series":"Data A","x":4},{"y":2,"series":"Data A","x":5},{"y":10,"series":"Data A","x":6},{"y":7,"series":"Data A","x":7},{"y":9,"series":"Data A","x":8},{"y":2,"series":"Data B","x":1},{"y":4,"series":"Data B","x":2},{"y":6,"series":"Data B","x":3},{"y":8,"series":"Data B","x":4},{"y":13,"series":"Data B","x":5},{"y":11,"series":"Data B","x":6},{"y":9,"series":"Data B","x":7},{"y":2,"series":"Data B","x":8}]},{"transform":[{"type":"aggregate","summarize":{"y":"sum"},"groupby":["x"]}],"name":"stats","source":"chart"}],"width":400}</graph>

{{Graph:Chart|width=100|height=100|type=pie|legend=Legende|x=A,B,C,D,E,F,G,H,I|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":"Legende","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":"A"},{"y":200,"x":"B"},{"y":150,"x":"C"},{"y":300,"x":"D"},{"y":100,"x":"E"},{"y":100,"x":"F"},{"y":150,"x":"G"},{"y":50,"x":"H"},{"y":200,"x":"I"}]}],"width":100}</graph>

{{Graph:Chart|width=100|height=100|type=pie|legend=Legende|x=A,B,C,D,E,F,G,H,I|y1=100,200,150,300,100,100,150,50,200|showValues=}}
<graph>{"legends":[{"properties":{"legend":{"y":{"value":-100}},"title":{"fill":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"stroke":"color","title":"Legende","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":100,"x":"A"},{"y":200,"x":"B"},{"y":150,"x":"C"},{"y":300,"x":"D"},{"y":100,"x":"E"},{"y":100,"x":"F"},{"y":150,"x":"G"},{"y":50,"x":"H"},{"y":200,"x":"I"}]}],"width":100}</graph>

{{Graph:Chart|width=100|height=100|type=pie|legend=Legende|x=A,B,C,D,E,F,G,H,I|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":"Legende","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":"A","r":7},{"y":200,"x":"B","r":8},{"y":150,"x":"C","r":9},{"y":300,"x":"D","r":8},{"y":100,"x":"E","r":8},{"y":100,"x":"F","r":9},{"y":150,"x":"G","r":10},{"y":50,"x":"H","r":9},{"y":200,"x":"I","r":5}]}],"width":100}</graph>

{{Graph:Chart|width=100|height=100|type=pie|innerRadius=40|legend=Legende|x=A,B,C,D,E,F,G,H,I|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":"Legende","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":"A"},{"y":200,"x":"B"},{"y":150,"x":"C"},{"y":300,"x":"D"},{"y":100,"x":"E"},{"y":100,"x":"F"},{"y":150,"x":"G"},{"y":50,"x":"H"},{"y":200,"x":"I"}]}],"width":100}</graph>

See also