html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

  // The data used in this sample can be obtained from the CDN

  // https://cdn.anychart.com/samples/quadrant-charts/quadrant-motion/data.json

  anychart.data.loadJsonFile(

    'https://cdn.anychart.com/samples/quadrant-charts/quadrant-motion/data.json',

    function (data) {

      var MONTHS = [

        'Jan',

        'Feb',

        'Mar',

        'Apr',

        'May',

        'June',

        'July',

        'Aug',

        'Sep',

        'Nov',

        'Des',

        'Jan'

      ];

​

      $('#container').append(

        '<div class="control-container"><span class="edge left">2015 Jan ' +

        '<button id="playButton"><i class="ac ac-play" aria-hidden="true"></i></button></span>' +

        '<input id="rangeInput" name="rangeInput" type="range" min="1" max="12" step="1" value="1">' +

        '<span class="edge right">2016 Jan</span></div>'

      );

      var ri = $('#rangeInput');

      var currentMonth = +ri[0].value;

      ri.on('change', function () {

        changeValue();

      });

​

      var bloggerData = anychart.data.set(data);

​

      var lineMapping = [];

      var markerMapping = [];

      var NAMES = ['John', 'Jane', 'Mary', 'Angel', 'July', 'Rodrigo'];

​

      // create dataset

      lineMapping.push(

        bloggerData.mapAs().filter('name', function (val) {

          return val === 'John';

        })

      );

      markerMapping.push(

        bloggerData

          .mapAs({

            value: 'y',

            fill: 'mfill',

            stroke: 'mstroke',

            label: 'mlabel'

          })

          .filter('name', function (val) {

            return val === 'John';

          })

      );

      lineMapping.push(

        bloggerData.mapAs().filter('name', function (val) {

          return val === 'Jane';

        })

      );

      markerMapping.push(

        bloggerData

          .mapAs({

            value: 'y',

            fill: 'mfill',

            stroke: 'mstroke',

            label: 'mlabel'

          })

          .filter('name', function (val) {

            return val === 'Jane';

          })

      );

      lineMapping.push(

        bloggerData.mapAs().filter('name', function (val) {

          return val === 'Mary';

        })

      );

      markerMapping.push(

        bloggerData

          .mapAs({

            value: 'y',

            fill: 'mfill',

            stroke: 'mstroke',

            label: 'mlabel'

          })

          .filter('name', function (val) {

            return val === 'Mary';

          })

      );

      lineMapping.push(

        bloggerData.mapAs().filter('name', function (val) {

          return val === 'Angel';

        })

      );

      markerMapping.push(

        bloggerData

          .mapAs({

            value: 'y',

            fill: 'mfill',

            stroke: 'mstroke',

            label: 'mlabel'

          })

          .filter('name', function (val) {

            return val === 'Angel';

          })

      );

      lineMapping.push(

        bloggerData.mapAs().filter('name', function (val) {

          return val === 'July';

        })

      );

      markerMapping.push(

        bloggerData

          .mapAs({

            value: 'y',

            fill: 'mfill',

            stroke: 'mstroke',

            label: 'mlabel'

          })

          .filter('name', function (val) {

            return val === 'July';

          })

      );

      lineMapping.push(

        bloggerData.mapAs().filter('name', function (val) {

          return val === 'Rodrigo';

        })

      );

      markerMapping.push(

        bloggerData

          .mapAs({

            value: 'y',

            fill: 'mfill',

            stroke: 'mstroke',

            label: 'mlabel'

          })

          .filter('name', function (val) {

            return val === 'Rodrigo';

          })

      );

​

      // create quadrant chart

      var chart = anychart.quadrant();

      // set chart padding

      chart.padding([10, 30, 70, 30]);

​

      // set chart title text settings

      chart

        .title()

        .enabled(true)

        .useHtml(true)

        .text('Blogger\'s Popularity Growth in 2015');

      chart.legend(true);

​

      // set scales settings

      chart.yScale().minimum(0).maximum(5000);

      chart.xScale().minimum(0).maximum(5000);

​

      // set quarters settings

      chart.quarters({

        rightTop: {

          fill: '#fff',

          title: {

            useHtml: true,

            fontSize: 12,

            lineHeight: 1.2,

            text:

              'Good for advertising<br><span style="color: #2d4053;">REALLY POPULAR</span>',

            padding: 10

          }

        },

        rightBottom: {

          title: {

            useHtml: true,

            fontSize: 12,

            lineHeight: 1.2,

            text:

              'Popular in particular group<br><span style="color: #2d4053;">LOCAL</span>',

            padding: 10

          }

        },

        leftTop: {

          title: {

            useHtml: true,

            fontSize: 12,

            lineHeight: 1.2,

            text:

              'Popular, but not interesting enough<br><span style="color: #2d4053;">ACTIVITY NEEDED</span>',

            padding: 10

          }

        },

        leftBottom: {

          fill: '#fff',

          title: {

            useHtml: true,

            fontSize: 12,

            lineHeight: 1.2,

            text:

              'Bad for advertising<br><span style="color: #2d4053;">STARTERS</span>',

            padding: 10

          }

        }

      });

​

      // create first label in the upper-left quarter

      chart

        .quarters()

        .leftTop()

        .label(0)

        .enabled(true)

        .useHtml(true)

        .position('left-top')

        .anchor('left-center')

        .offsetY(-15)

        .text('COMMENTS →');

​

      // create first label in the lower-right quarter

      chart

        .quarters()

        .rightBottom()

        .label(0)

        .enabled(true)

        .useHtml(true)

        .rotation(90)

        .position('right-bottom')

        .anchor('right-center')

        .offsetX(-15)

        .text('← FOLLOWERS');

​

      // create  series with data

      var colors = '#f8bbd0 #f48fb1 #d4e157 #f2d1be #ffab00 #e1bee7'.split(

        ' '

      );

      for (var i = 0; i < 6; i++) {

        chart

          .line()

          .data(lineMapping[i])

          .labels(false)

          .markers(false)

          .tooltip(false)

          .stroke('#CECECE')

          .legendItem(null)

          .hovered({ stroke: null })

          .selected({ stroke: null });

​

        chart

          .marker()

          .data(markerMapping[i])

          .name(NAMES[i])

          .zIndex(99)

          .fill(colors[i])

          .stroke('2 #fff')

          .type('circle')

          .size(4)

          .selectionMode('none')

          .legendItem({ iconType: 'circle' });

      }

​

      chart

        .labels()

        .fontFamily('Arial')

        .position('right')

        .fontColor('#0288d1')

        .anchor('left-center')

        .offsetX(5)

        .offsetY(0)

        .format(function () {

          return MONTHS[this.getData('month') - 1];

        });

​

      chart

        .tooltip()

        .useHtml(true)

        .titleFormat('{%Name}')

        .format(function () {

          var year = '2015 ';

          if (this.getData('month') === 12) year = '2016 ';

          return (

            year +

            MONTHS[this.getData('month') - 1] +

            '<br/><span style="color: #cecece; font-size: 11px">' +

            'Comments: </span>' +

            this.getData('x') +

            '<br/><span style="color: #cecece; font-size: 11px">' +

            'Followers: </span>' +

            this.getData('y')

          );

        });

​

      // set chart container id

      chart.container('container');

      // initiate chart drawing

      chart.draw();

​

      var ifPlaying = false;

      var monthPlaying = 2;

      var interval;

      $('#playButton').click(function () {

        var $element = $('#playButton .ac');

        if (ifPlaying) {

          $element.prop('class', 'ac ac-play');

          ifPlaying = false;

          clearInterval(interval);

        } else {

          $element.prop('class', 'ac ac-stop');

          ifPlaying = true;

          interval = setInterval(function () {

            $('#rangeInput').val(monthPlaying);

            changeValue();

            if (monthPlaying < 12) {

              monthPlaying += 1;

            } else {

              monthPlaying = 1;

            }

          }, 500);

        }

      });

​

      function changeValue() {

        var newMonth = ri[0].value;

        var mapping = bloggerData.mapAs();

        var iter = mapping.getIterator();

        while (iter.advance()) {

          var month = iter.get('month');

          if (month == currentMonth) {

            mapping.set(iter.getIndex(), 'mfill', undefined);

            mapping.set(iter.getIndex(), 'mstroke', undefined);

            mapping.set(iter.getIndex(), 'mlabel', undefined);

          } else if (month == newMonth) {

            mapping.set(iter.getIndex(), 'mfill', '#0288d1');

            mapping.set(iter.getIndex(), 'mstroke', '#0288d1');

            mapping.set(iter.getIndex(), 'mlabel', { enabled: true });

          }

        }

        currentMonth = newMonth;

        chart.getSeriesAt(0).data(null).data(lineMapping[0]);

      }

    }

  );

});