The ZingChart team is excited about the 2014 FIFA World Cup. We turned our excitement into a data visualization to show which professional clubs are sending the most players to the tournament, and which countries have the most players on these squads.

Our Interactive Chart for the World Cup

Visit our World Cup demo page to interact with the full-sized chart.

thumbnail image of interactive chart for 2014 World Cup

Selecting a chart type - stacked bar

We wanted to come up with a visualization that would be interesting to football/soccer fans, but also hold relevance for the casual World Cup watcher. We decided to show the top clubs sending players to the tournament. If we stopped there, we’d have a bar chart. However, we also wanted to show countries the players will be representing, so we segmented each bar by country. The end result? A stacked bar chart.

Setting up stacked bar data

Setting up a stacked bar chart in ZingChart is straightforward. Your chart type is set to “bar” and the stacked attribute set to true or 1.

"type":"bar",  
"stacked":true,  

 

As for adding data, no special measures need to be taken. Each series is its own stack. The values in your first series will display on the bottom stack of each bar, the values in the second series on the next stack up, until you are finished adding data.

When constructing a chart with multiple plots, you may run into this scenario: the number of data points for each plot is not equal, yet an equal number of datapoints is required to successfully complete the visualization. If this is the case, you can add “0” for data points, or “null.” In this case, we chose to use “null” so that a tooltip would not be presented for a value of “0.”

Tool tips

Tooltips are an easy way to add interactivity to your charts while painting a more informative picture for the user. The tooltips for this chart were created using ZingChart custom tokens. Simply prefix the token name of your choice with “data-” and you can then use the values in the corresponding array throughout your chart. Note that token array values are used in the same order as series values. As you can see, the first value, 7, is associated with Spain (data-country) and the first set of values from data-players (Alexis Sánchez, Gerard Piqué, Jordi Alba, Xavi Hernández, Andrés Iniesta, Cesc Fàbregas, Sergio Busquets, Pedro Rodríguez).

ZingChart’s library also comes 40 pre-made tokens for you to use as well, including:

  • value
  • total
  • text
    and more.
"series":[  
    {  
        "values":[7,7,4,6,4,3,4,3,3,4,5,3],  
        "data-country":  ["Spain","Germany","England","Italy",  
                          "Spain", "Switzerland","Brazil",  
                          "Spain","France","Spain",  
                          "England","Germany"],  
        "data-players":  ["Alexis Sánchez<br>Gerard Piqué<br>  
                           Jordi Alba<br>Xavi Hernández<br>  
                           Andrés Iniesta<br>Cesc Fàbregas<br>  
                           Sergio Busquets<br>Pedro Rodríguez",  
                           "Manuel Neuer<br>Philipp Lahm<br>  
                           Jérôme Boateng<br>Bastian Schweinsteiger  
                           <br>Toni Kroos<br>Mario Götze  
                           <br>Thomas Müller","Chris Smalling<br>  
                           Phil Jones<br>Wayne Rooney<br>  
                           Danny Welbeck","Gianluigi Buffon<br>  
                           Giorgio Chiellini<br>Andrea Barzagli<br>  
                           Leonardo Bonucci<br>Andrea Pirlo<br>  
                           Claudio Marchisio","Iker Casillas<br>  
                           Sergio Ramos<br>Daniel Carvajal<br>  
                           Xabi Alonso","Gökhan Inler<br>Valon Behrami  
                           <br>Blerim Džemaili","David Luiz<br>  
                           Ramires< br>Oscar<br> William","David Silva  
                           <br>Jesús Navas<br>Álvaro Negredo",  
                           "Lucas Digne<br>Yohan Cabaye<br>  
                           Blaise Matuidi","Juanfran<br>Koke<br>  
                           David Villa<br>Diego Costa","Glen Johnson  
                           <br>Steven Gerrard<br>Jordan Henderson  
                           <br>Raheem Sterling<br>Daniel Sturridge",  
                           "Per Mertesacker<br>Mesut Özil<br>   
                           Lukas Podolski"],  
          "tooltip":{  
              "text":"%data-country - %v<br>%data-players",  
              "width":"135px",  
              "offset-x":"35px",  
              "wrap-text":"true",  
              "shadow-distance":"1px"  
           },  
           {...}  

 

Choosing a color scheme

Initially, we relied on the default theme to color our chart. Then we considered a color palette with a unique color for each country. This proved to be complicated to assemble, and did not contribute to the readability of our chart. Finally, we decided to color countries based on the number of players they had represented on selected teams. This improved readability and made the chart more useful. Handy tip: we used this gradient maker to generate the exact number of shades we needed, with the beginning and ending colors we desired.

Legend

The legend in this chart is actually a custom shape, positioned and styled accordingly with a text label. A gradient was applied by setting two hex codes in the background-color attribute and using a fill-angle of 180.

Chart Styling

Some additional style choices for this chart included a background image and guides on the y-axis. The background image is set quite simply with a URL for the image source, and we used no-repeat.

     "background-color":"white",  
     "background-image":"http://i.imgur.com/cAO89EN.png",  
     "background-repeat":"no-repeat",  
     "background-position":"0 0",  

Guides and their style attributes are set in the corresponding scale object. We chose dotted with a lowered opacity to keep the user's focus on the bars, but still provide a bit of guide for the overall numbers.

    "scale-y":{  
        "values":"0:17:1",  
        "line-color":"#999999",  
        "item":{  
            "font-family":"Arial",  
            "color":"#999999"  
         },  
         "tick":{  
             "line-color":"#999999",  
             "alpha":0.5  
         },  
         "guide":{  
             "alpha":0.4,  
             "line-style":"dotted",  
             "line-gap-size":"8px"  
         }  
     }  

That covers the basics of how we made an interactive stacked bar chart with our JavaScript charting library. Share your questions or tell us who you will be supporting in #WorldCup2014 in the comments below!