html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

  // create quadrant chart

  var chart = anychart.quadrant();

  // set chart title

  chart.title('SWOT Analysis');

  // set chart padding

  chart.padding([20, 20, 60, 60]);

​

  // set quarters settings

  chart.quarters({

    rightTop: {

      fill: '#ADD8E6'

    },

    rightBottom: {

      fill: '#DEB887'

    },

    leftTop: {

      fill: '#A9A9A9'

    },

    leftBottom: {

      fill: '#A3BB59'

    }

  });

​

  // create first label for left top quarter

  chart

    .quarters()

    .leftTop()

    .label(0)

    .enabled(true)

    .fontColor('#2F4F4F')

    .fontSize(16)

    .width('90%')

    .text(

      ' STRENGTHS\n' +

      '1) Developed by a reputable, award-winning developer - Paramount Property.\n' +

      '2) Conveniently located with existing amenities and accessibility of Klang Town.\n' +

      '3) Offers a variety of unit types to cater to various market segments.\n' +

      '4) Seamless connectivity with excellent network of highways and roads.\n' +

      '5) Equipped with three-tier security.\n' +

      '6) Competitive pricing from reputable developer.\n' +

      '7) Free maintenance fee for the first two years.\n' +

      '8) Loan subsidy of 24 months.\n' +

      '9) Partially furnished.\n' +

      '10) Zero down payment.\n' +

      '11) Conveniences of future commercial and amenities in Phase 3 and 4.\n' +

      '12) Close proximity to Sri KDU International School.'

    );

​

  // create first label for right top quarter

  chart

    .quarters()

    .rightTop()

    .label(0)

    .enabled(true)

    .fontColor('#2F4F4F')

    .fontSize(16)

    .width('90%')

    .text(

    'WEAKNESSES\n' +

     '1) Surrounded by old residential areas, shoplots, and factories— needs further rejuvenation from other developers.\n' +

     '2) 48 months completion period from SPA date.\n' +

     '3) No frill design in terms of facade, facilities, orientation, and unit layout.' 

    );

​

  // create first label for left bottom quarter

  chart

    .quarters()

    .leftBottom()

    .label(0)

    .enabled(true)

    .fontColor('#2F4F4F')

    .fontSize(16)

    .width('90%')

    .text(

      'OPPORTUNITIES\n' +

      '1) Eligible under the government initiative Home Ownership Campaign, which allows exemption of stamp duty— encourages sales as it brings a lot of savings.\n' +

      '2) Easy to get loan.\n' +

      '3) Not prone to flooding.'

    );

​

  // create first label for right bottom quarter

  chart

    .quarters()

    .rightBottom()

    .label(0)

    .enabled(true)

    .fontColor('#2F4F4F')

    .fontSize(16)

    .width('90%')

    .text(

      'THREATS\n' +

      '1) Landed property in Klang is affordable at a range of RM300 - RM600 per square feet, thus residents will prefer to buy landed property rather than high rise.\n' +

      '2) Concentration of Klang residents are more towards the existing matured and developed townships. For example, Bandar Bukit Tinggi, Bandar Botanik, Bandar Bukit Raja and Setia Alam. Thus, potential purchasers might prefer those areas.'

    );

​

  // create second label for left top quarter

  chart

    .quarters()

    .leftTop()

    .label(1)

    .enabled(true)

    .fontColor('#7c868e')

    .fontSize(17)

    .position('left-center')

    .rotation(-90)

    .offsetX(-20)

    .text('Internal');

​

  // create second label for left bottom quarter

  chart

    .quarters()

    .leftBottom()

    .label(1)

    .enabled(true)

    .fontColor('#7c868e')

    .fontSize(17)

    .position('left-center')

    .rotation(-90)

    .offsetX(-20)

    .text('External');

​

  // create third label for left bottom quarter

  chart

    .quarters()

    .leftBottom()

    .label(2)

    .enabled(true)

    .fontColor('#7c868e')

    .fontSize(17)

    .position('center-bottom')

    .offsetY(20)

    .text('Favourable');

​

  // create second label for right bottom quarter

  chart

    .quarters()

    .rightBottom()

    .label(1)

    .enabled(true)

    .fontColor('#7c868e')

    .fontSize(17)

    .position('center-bottom')

    .offsetY(20)

    .text('Unfavourable');

​

  // set chart container id

  chart.container('container');

  // initiate chart drawing

  chart.draw();

});