html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

​

  anychart.data.loadJsonFile('https://gist.githubusercontent.com/shacheeswadia/9e4598a73bb86180f1726daf9de8062f/raw/b258e93e1f9db37da6847eb05a230afcb64446d5/circularGaugeData.json', function (data) {

​

    // Get the names of the records 

    var recordNames = data.map(function(d){

      return d.Record;

    });

​

    // Get the percent values

    var recordPercentValue = data.map(function(d){

      return d.percent;

    });

​

    // Add the 100% value to signify the max value for each of the radial ring

    recordPercentValue.push(100);

​

    // Set the data to indicate the percent values

    var dataSet = anychart.data.set(recordPercentValue);

​

    // Create the angular gauge

    var gauge = anychart.gauges.circular();

​

    // Set the data for the angular gauge

    gauge.data(dataSet);

    // Set the colors based on the designated palette

    var palette = anychart.palettes

      .distinctColors()

      .items([

        '#593d04', '#6c4304', '#966905', '#a77b0a', '#cf9f20', '#ddb22e', '#f1c84d', '#ffdc73'

      ]);

​

    // Specify the attributes of the angular gauge chart

    gauge

      .fill('#fff')

      .stroke(null)

      .padding(25, 100, 25, 100)

      .margin(0)

      .startAngle(0)

      .sweepAngle(270);

​

    // Create the angular gauge axis

    var axis = gauge.axis().radius(100).width(1).fill(null);

​

    // Set the minimum and maximum values for the axis

    axis

      .scale()

      .minimum(0)

      .maximum(100);

​

    // Hide the axis labels and ticks

    axis.labels().enabled(false);

    axis.ticks().enabled(false);

    axis.minorTicks().enabled(false);

​

    // Create a function to make radial bars for each data point

    var makeBarWithBar = function (gauge, radius, i, width) {

​

      // Create the radial bars based on the data

      gauge

        .bar(i)

        .dataIndex(i)

        .radius(radius)

        .width(width)

        .fill(palette.itemAt(i))

        .stroke(null)

        .zIndex(5);

​

      // Create the background radial bars indicating the total value

      gauge

        .bar(i + 100)

        .dataIndex(8)

        .radius(radius)

        .width(width)

        .fill('#F5F4F4')

        .stroke(null)

        .zIndex(4);

​

      // Set the labels based on each data point

      gauge

        .label(i)

        .text(recordNames[i]);

​

      // Align the labels   

      gauge

        .label(i)

        .hAlign('center')

        .vAlign('middle')

        .anchor('right-center')

        .padding(0, 10)

        .height(width / 2 + '%')

        .offsetY(radius + '%')

        .offsetX(0);

​

      return gauge.bar(i);

​

    };

​

    // Get the time of each song

    var recordLength = data.map(function(d){

      return d['Time'];

    });

​

    // Call the function to create the radial bars with specifications

    for(var i=0, j=100; i<data.length, j>=12.5; i++, j-=12.5){

      makeBarWithBar(gauge, j, i, (recordLength[i]* 2.75));

    }

​

    // Add the angular gauge chart title

    gauge.title('Popularity of 2021 GRAMMYs Record of the Year Nominations on Spotify');

​

    gauge

      .title()

      .enabled(true)

      .hAlign('center')

      .padding(0)

      .margin([0, 0, 10, 0]);

    // Drawing the resulting angular gauge

    gauge.container('container');

    gauge.draw();

​

  });

​

});