NXTAKE Odds - AG

by lamarant

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/5.0.10/highcharts.js"></script>
<div id="chart" style="width:100%; height: 500px;"></div>

JavaScript

Highcharts.setOptions({
    colors: ['#737373', '#000000', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
});

var apidata = {
  "ID": 104,
  "game_datetime": "05\/04\/2017 05:00",
  "status": "Upcoming",
  "Team1Name": "ViCi",
  "Team2Name": "Renegades",
  "game_type": 1,
  "maps": [{
    "Name": "Cache",
    "Team1Odds": 0.449,
    "Team2Odds": 0.551
  }, {
    "Name": "Cobblestone",
    "Team1Odds": 0.422,
    "Team2Odds": 0.578
  }, {
    "Name": "Dust2",
    "Team1Odds": 0.375,
    "Team2Odds": 0.625
  }, {
    "Name": "Inferno",
    "Team1Odds": 0.566,
    "Team2Odds": 0.434
  }, {
    "Name": "Mirage",
    "Team1Odds": 0.48,
    "Team2Odds": 0.52
  }, {
    "Name": "Nuke",
    "Team1Odds": 0.414,
    "Team2Odds": 0.586
  }, {
    "Name": "Overpass",
    "Team1Odds": 0.651,
    "Team2Odds": 0.349
  }, {
    "Name": "Train",
    "Team1Odds": 0.516,
    "Team2Odds": 0.484
  }],
  "DisplayDate": "05\/04\/2017 05:00"
};

var el = document.getElementById('chart');
var ch = new Highcharts.chart({

  chart: {
    renderTo: el, //using native javascript to select first .chart element
    type: 'column',
    inverted: true,
    events: {
      load: function() {

        //add all data to chart dynamically
        var catArray = [],
          team1Data = [],
          team2Data = [];
        for (var i = 0; i < apidata.maps.length; i++) {
          catArray.push(apidata.maps[i].Name);

          //add the map as category
          var oddsTeam1 = apidata.maps[i].Team1Odds * 1000;
          var oddsTeam2 = 1000 - oddsTeam1;
          team1Data.push(oddsTeam1 / 10);
          team2Data.push(oddsTeam2 / 10);
        }

        //update the chart
        this.xAxis[0].setCategories(catArray);
        this.series[0].setData(team1Data);
        this.series[1].setData(team2Data);
      }
    }
  },
  title: {
    text: apidata.game_datetime,
    align: 'right',



      //text: apidata.Team1Name + ' vs. ' + apidata.Team2Name
  },
    legend:...