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/marker-and-bubble-charts/multi-series-marker-chart/data.json

  anychart.data.loadJsonFile(

    'https://cdn.anychart.com/samples/marker-and-bubble-charts/multi-series-marker-chart/data.json',

    function (data) {

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

​

      var mapTrainingData = bestSportsmenTrainingData.mapAs({

        x: 1,

        value: 2,

        training: 0,

        data: 3

      });

​

      var sportsmen1 = mapTrainingData.filter(

        'training',

        trainingFilter(1)

      );

      var sportsmen2 = mapTrainingData.filter(

        'training',

        trainingFilter(2)

      );

      var sportsmen3 = mapTrainingData.filter(

        'training',

        trainingFilter(3)

      );

      var sportsmen4 = mapTrainingData.filter(

        'training',

        trainingFilter(4)

      );

      var sportsmen5 = mapTrainingData.filter(

        'training',

        trainingFilter(5)

      );

      var sportsmen6 = mapTrainingData.filter(

        'training',

        trainingFilter(6)

      );

      var sportsmen7 = mapTrainingData.filter(

        'training',

        trainingFilter(7)

      );

      var sportsmen8 = mapTrainingData.filter(

        'training',

        trainingFilter(8)

      );

      var sportsmen9 = mapTrainingData.filter(

        'training',

        trainingFilter(9)

      );

      var sportsmen10 = mapTrainingData.filter(

        'training',

        trainingFilter(10)

      );

​

      // create scatter chart

      var chart = anychart.scatter();

​

      // turn on chart animation

      chart.animation(true);

​

      // set chart title text settings

      chart

        .title()

        .enabled(true)

        .padding([0, 0, 20, 0])

        .text('Best sportsmen training data');

​

      // set chart margin settings

      chart.padding([10, 20, 0, 20]);

​

      // grid settings

      chart.yGrid(true).xGrid(true).xMinorGrid(true).yMinorGrid(true);

​

      // set chart axes settings

      chart

        .xAxis()

        .title('Average pulse during training')

        .minorTicks(true);

      chart.yAxis().title('Average power').minorTicks(true);

​

      // create series with mapped data

      chart.marker(sportsmen1).name('Christopher Sanchez');

      chart.marker(sportsmen2).name('Judy Evans');

      chart.marker(sportsmen3).name('Walter Burke');

      chart.marker(sportsmen4).name('Daniel Williamson');

      chart.marker(sportsmen5).name('Fred Peterson');

      chart.marker(sportsmen6).name('Jason Anderson');

      chart.marker(sportsmen7).name('Brenda Boyd');

      chart.marker(sportsmen8).name('Joshua Hanson');

      chart.marker(sportsmen9).name('William Ortiz');

      chart.marker(sportsmen10).name('Roger Jones');

​

      chart

        .tooltip()

        .useHtml(true)

        .fontColor('#fff')

        .format(function () {

          return (

            this.getData('data') +

            '<br/>' +

            'Power: <span style="color: #d2d2d2; font-size: 12px">' +

            this.getData('value') +

            '</span></strong><br/>' +

            'Pulse: <span style="color: #d2d2d2; font-size: 12px">' +

            this.getData('x') +

            '</span></strong>'

          );

        });

​

      chart

        .legend()

        .enabled(true)

        // set legend position

        .position('right')

        // set legend align

        .align('top')

        // set layout of legend items

        .itemsLayout('vertical');

​

      // create marker

      chart

        .rangeMarker(0)

        .scale(chart.xScale())

        .from(125)

        .to(140)

        .fill('#CCFF99 0.7')

        .layout('vertical');

​

      // create marker

      chart

        .rangeMarker(1)

        .scale(chart.xScale())

        .fill('#99FFCC 0.7')

        .from(140)

        .to(155)

        .layout('vertical');

​

      // create marker

      chart

        .rangeMarker(2)

        .scale(chart.xScale())

        .from(155)

        .to(175)

        .fill('#FFCC66 0.5')

        .layout('vertical');

​

      // create marker

      chart

        .rangeMarker(3)

        .scale(chart.xScale())

        .from(175)

        .to(200)

        .fill('#FF3300 0.4')

        .layout('vertical');

​

      // set container id for the chart

      chart.container('container');

      // initiates chart drawing

      chart.draw();

    }

  );

});

/**

 * Helper function to bind data field to the local var.

 * @param val

 * @return {Function}

 */

function trainingFilter(val) {

  return function (fieldVal) {

    return fieldVal === val;

  };

}