BI Services Comparison

Select a theme:
                     <html>
<head>
  <script src="https://code.jquery.com/jquery-3.1.1.min.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-data-adapter.min.js"></script>
  <script src="https://cdn.anychart.com/samples/quadrant-charts/bi-services-comparison/data.js"></script>
  <link href="https://cdn.anychart.com/playground-css/quadrant-charts/bi-services-comparison/style.css" type="text/css" rel="stylesheet">
  <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 () {
      // The data used in this sample can be obtained from the CDN
      // https://cdn.anychart.com/samples/quadrant-charts/bi-services-comparison/data.json
      anychart.data.loadJsonFile(
        'https://cdn.anychart.com/samples/quadrant-charts/bi-services-comparison/data.json',
        function (data) {
          var $tooltip = $(
            '<div class=\'custom-tooltip\'>' +
            '<h1></h1><div class=\'subtitle\'></div>' +
            '<p class=\'description\'></p>' +
            '</div>'
          );

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

          // create quadrant chart
          var chart = anychart.quadrant();

          // set chart padding
          chart.padding(35);

          // create marker series
          var markers = chart.marker(dataSet);
          // set labels settings
          markers
            .labels()
            .enabled(true)
            .fontFamily('Arial')
            .fontColor('#546e7a')
            .position('right')
            .anchor('left-center')
            .offsetX(5)
            .offsetY(0)
            .format('{%Name}');
          // disabled tooltip
          markers.tooltip(false);

          // set quarters settings
          chart.quarters({
            rightTop: {
              title: {
                text: 'LEADERS',
                fontColor: '#ff8f00',
                padding: 10
              }
            },
            rightBottom: {
              title: {
                text: 'VISIONARIES',
                fontColor: '#ff8f00',
                padding: 10
              }
            },
            leftTop: {
              title: {
                text: 'CHALLENGERS',
                fontColor: '#ff8f00',
                padding: 10
              }
            },
            leftBottom: {
              title: {
                text: 'NICHE PLAYERS',
                fontColor: '#ff8f00',
                padding: 10
              }
            }
          });

          // create first label in the lower-left quarter
          chart
            .quarters()
            .leftBottom()
            .label(0)
            .enabled(true)
            .useHtml(true)
            .rotation(-90)
            .position('left-bottom')
            .anchor('left-center')
            .offsetX(-20)
            .text('Power to Perform &#8594;');

          // create second label in the lower-left quarter
          chart
            .quarters()
            .leftBottom()
            .label(1)
            .enabled(true)
            .useHtml(true)
            .position('left-bottom')
            .anchor('left-center')
            .offsetY(20)
            .text('Entirety of Representation &#8594;');

          // set chart container id
          chart.container('container');
          // initiate chart drawing
          chart.draw();

          // add custom tooltip to chart container
          chart.listen('chartDraw', function () {
            var $container = $(this.container().getStage().container());

            $container.append($tooltip);
          });

          // event for mouse over a point
          chart.listen('pointMouseMove', function (e) {
            var clientX = e.originalEvent.offsetX;
            var clientY = e.originalEvent.offsetY;
            var delta = 35;

            // prevent tooltip from leaving the screen
            var left = clientX - $tooltip.width() / 2;
            if (left + $tooltip.width() > chart.container().width()) { left = chart.container().width() - $tooltip.width(); }
            if (left < 0) left = 0;

            // move tooltip
            $tooltip.css({
              left: left,
              top: clientY - delta - $tooltip.height()
            });

            // show tooltip
            $tooltip.show();
          });

          // event for mouse leaving point
          chart.listen('pointMouseOut', function () {
            // hide tooltip
            $tooltip.hide();
          });

          // event for point hover
          chart.listen('pointsHover', function (e) {
            var item = companiesData[e.currentPoint.index];
            putDataInTooltip(item);
          });

          // Place data for hovered point in custom tooltip
          function putDataInTooltip(item) {
            var description = '';
            var linkToLogo =
              'https://cdn.anychart.com/images/quadrant-chart/';

            $('.custom-tooltip h1').html(item.name + '<img class="img"/>');
            $('.custom-tooltip .subtitle').html(item.description_short);
            $('.custom-tooltip .img').attr('src', linkToLogo + item.logo);

            if (item.founded) {
              description += '<b>Founded: </b>' + item.founded + '<br/>';
            }
            if (item.headquarters) {
              description +=
                '<b>Headquarters: </b>' + item.headquarters + '<br/>';
            }
            if (item.description) {
              description += '<br/>' + item.description;
            }

            $('.custom-tooltip .description').html(description);
          }
        }
      );
    });
  
</script>
</body>
</html>
Quadrant Charts are popular in planning and analyzing the data of three measures, which can be plotted on X-Axis, Y-Axis and by the size of the bubbles. They use baselines to draw the quadrants of equal size, which represent the categories of tasks. Also Quadrants are used to plan the tasks, like Eisenhower Matrix.
Note: all data demonstrated in this sample is fictional.
Warning!

BI Services Comparison

BI Services Comparison
