WinLoss with Morning theme | Sparkline Charts

WinLoss

Select a theme:

                     <html>
<head>
  <script src="https://cdn.anychart.com/samples/sparkline-charts/win-loss/data.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-base.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-ui.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-exports.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-sparkline.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-table.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/themes/morning.min.js"></script>
  <link href="https://cdn.anychart.com/releases/v8/css/anychart-ui.min.css" type="text/css" rel="stylesheet">
  <link href="https://cdn.anychart.com/releases/v8/fonts/css/anychart-font.min.css" type="text/css" rel="stylesheet">
  <style type="text/css">

    html,
    body,
    #container {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
  
</style>
</head>
<body>
  
  <div id="container"></div>
  

  <script>

    anychart.onDocumentReady(function () {
	// set chart theme
anychart.theme('morning');
      // The data used in this sample can be obtained from the CDN
      // https://cdn.anychart.com/samples/sparkline-charts/win-loss/data.js
      // prepare the data for charts
      var t1 = getData()[0]; 
      var t2 = getData()[1]; 
      var t3 = getData()[2]; 
      var t4 = getData()[3]; 
      var t5 = getData()[4]; 
      var t6 = getData()[5]; 
      var t7 = getData()[6]; 
      var t8 = getData()[7]; 
      var t9 = getData()[8]; 
      var t10 = getData()[9]; 
      var t11 = getData()[10]; 
      var t12 = getData()[11]; 
      var t13 = getData()[12]; 
      var t14 = getData()[13]; 
      var t15 = getData()[14]; 
      var t16 = getData()[15]; 
      var t17 = getData()[16]; 
      var t18 = getData()[17]; 
      var t19 = getData()[18]; 
      var t20 = getData()[19]; 

      // create table, this table provides layout for the sparkline charts
      var table = anychart.standalones.table();

      // set table size settings
      table.bounds('5%', '20px', '90%', '90%');

      // set table contents (sparkline charts and text)
      table.contents([
        ['Team', null, 'W', 'L', 'History', 'Percent'],
        [
          '1.',
          'Liverpool',
          getWins(t1),
          getLoses(t1),
          createWinLoss(t1),
          getPercent(t1)
        ],
        [
          '2.',
          'Fulham',
          getWins(t2),
          getLoses(t2),
          createWinLoss(t2),
          getPercent(t2)
        ],
        [
          '3.',
          'Chelsea',
          getWins(t3),
          getLoses(t3),
          createWinLoss(t3),
          getPercent(t3)
        ],
        [
          '4.',
          'Man United',
          getWins(t4),
          getLoses(t4),
          createWinLoss(t4),
          getPercent(t4)
        ],
        [
          '5.',
          'Bolton',
          getWins(t5),
          getLoses(t5),
          createWinLoss(t5),
          getPercent(t5)
        ],
        [
          '6.',
          'Blackburn',
          getWins(t6),
          getLoses(t6),
          createWinLoss(t6),
          getPercent(t6)
        ],
        [
          '7.',
          'Wigan Athletic',
          getWins(t7),
          getLoses(t7),
          createWinLoss(t7),
          getPercent(t7)
        ],
        [
          '8.',
          'West Ham United',
          getWins(t8),
          getLoses(t8),
          createWinLoss(t8),
          getPercent(t8)
        ],
        [
          '9.',
          'Charlton',
          getWins(t9),
          getLoses(t9),
          createWinLoss(t9),
          getPercent(t9)
        ],
        [
          '10.',
          'Arsenal',
          getWins(t10),
          getLoses(t10),
          createWinLoss(t10),
          getPercent(t10)
        ],
        [
          '11.',
          'Sunderland',
          getWins(t11),
          getLoses(t11),
          createWinLoss(t11),
          getPercent(t11)
        ],
        [
          '12.',
          'Aston Villa',
          getWins(t12),
          getLoses(t12),
          createWinLoss(t12),
          getPercent(t12)
        ],
        [
          '13.',
          'Tottenham',
          getWins(t13),
          getLoses(t13),
          createWinLoss(t13),
          getPercent(t13)
        ],
        [
          '14.',
          'Everton',
          getWins(t14),
          getLoses(t14),
          createWinLoss(t14),
          getPercent(t14)
        ],
        [
          '15.',
          'West Bromwich',
          getWins(t15),
          getLoses(t15),
          createWinLoss(t15),
          getPercent(t15)
        ],
        [
          '16.',
          'Portsmouth',
          getWins(t16),
          getLoses(t16),
          createWinLoss(t16),
          getPercent(t16)
        ],
        [
          '17.',
          'Middlesbrough',
          getWins(t17),
          getLoses(t17),
          createWinLoss(t17),
          getPercent(t17)
        ],
        [
          '18.',
          'Newcastle',
          getWins(t18),
          getLoses(t18),
          createWinLoss(t18),
          getPercent(t18)
        ],
        [
          '19.',
          'Birmingham City',
          getWins(t19),
          getLoses(t19),
          createWinLoss(t19),
          getPercent(t19)
        ],
        [
          '20.',
          'Manchester City',
          getWins(t20),
          getLoses(t20),
          createWinLoss(t20),
          getPercent(t20)
        ]
      ]);

      // set [0,0] cell settings
      table.getCell(0, 0).colSpan(2);
      table.getCell(0, 0).hAlign('left');
      table.getCell(0, 0).padding(0, 0, 0, 45);

      // disable borders for all cells in the table
      table
        .cellBorder('none')
        // set table rows odd/even fill
        .rowEvenFill('#F6F7F8')
        .rowOddFill('#FFF')
        // set table text settings
        .fontFamily('Verdana')
        .fontColor('#7c868e')
        .fontSize('12px')
        .vAlign('middle')
        .hAlign('center');

      // set fixed width for some of the tables columns
      table.getCol(0).width(40);
      table.getCol(1).maxWidth(120).hAlign('left');
      table.getCol(2).width(40);
      table.getCol(3).width(40);
      table.getCol(5).width(60).fontColor('#545f69');

      // set text settings for columns
      table.getRow(0).cellFill('#e9eaed').fontColor('#545f69');

      // set container id for the table
      table.container('container');
      // draw the table and all elements it contains
      // (you don't need to call the draw method for internal tables and charts)
      table.draw();
    });

    /**
     * Helper function, creates sparkline chart with WinLos type using anychart.sparkline method,
     * sets passed data and visual preference.
     * @param {Array} array Sparkline data.
     * @return {anychart.charts.Sparkline} New sparkline chart with passed data.
     */
    function createWinLoss(array) {
      var chart = anychart.sparkline(array);
      chart.background(null);
      chart.seriesType('win-loss');
      chart.height('100%');
      chart.margin().top('5%');
      chart.margin().bottom('5%');
      chart.padding(0);
      return chart;
    }

    /**
     * Helper function, returns count of positive values in passed array.
     * @param {Array} array
     * @return {number}
     */
    function getWins(array) {
      var wins = 0;
      for (var i = 0, count = array.length - 1; i < count; i++) {
        if (array[i] > 0) wins++;
      }
      return wins;
    }

    /**
     * Helper function, returns count of negative values in passed array.
     * @param {Array} array
     * @return {number}
     */
    function getLoses(array) {
      var loses = 0;
      for (var i = 0, count = array.length - 1; i < count; i++) {
        if (array[i] < 0) loses++;
      }
      return loses;
    }

    /**
     * Helper function, returns percent ratio of positive to negative value.
     * @param {Array} array
     * @return {string}
     */
    function getPercent(array) {
      var wins = 0;
      var total = array.length;
      for (var i = 0, count = array.length - 1; i < count; i++) {
        if (array[i] > 0) wins++;
      }
      return Math.round((wins / total) * 100) + '%';
    }
  
</script>
</body>
</html>

Sparklines are compact charts: lines, areas or columns without labels and any decorations. They present the general shape of the variation of temperature, pressure, speed, humidity, stock prices or any other measurement. Sparkline can be intertwined with the text or placed into the table cells. Most of series and chart types are created to give as much data as possible, sparkline chart is a way to focus on the main point of interest and make a chart as compact as possible.

Sparklines are good not only at showing rates, but also for showing score. There is a special sparkline type used predominantly for scores in sports and games – WinLoss type. It shows no values but positive and negative positions (1 and -1).

Here we see a score table for English football teams. First column contains numbers in order, the second one is for teams‘ names, then two columns with win score and loss score, and in the fifth column, which is the widest, we’ve got winloss sparklines, which show no value except for “positive” and “negative” (1 and -1) values. Negative values are colored in red; positive are blue. The last column of the table contains the percentage of victories.

Warning!

WinLoss

WinLoss