// JS
var chart = JSC.chart('chartDiv', {
  debug: true,
  type: 'funnel',
  legend_visible: false,

  /*This labels y values in tooltips.*/
  yAxis_label_text: 'Applicants',
  defaultSeries: {
    /*Gaps between cone section.*/
    shape_innerPadding: 6,
    defaultPoint: {
      tooltip:
        '<b>%name</b><br><b>Applicants:</b> %yValue',
      label: {
        placement: 'auto',
        text:
          '%name %yValue (%percentOfSeriesMax%)'
      }
    }
  },
  series: [
    {
      name: 'All Applicants',
      points: [
        { name: 'Candidates Applied', y: 183 },
        { name: 'Aptitude Test', y: 140 },
        { name: 'Technical Interview', y: 136 },
        { name: 'HR Interview', y: 80 },
        { name: 'Candidates Recruited', y: 51 }
      ]
    }
  ],
  toolbar_items: {
    Mode: {
      margin: 10,
      type: 'select',
      events_change: setMode,
      items: 'enum_placement'
    },
    'Auto Hide': {
      type: 'checkbox',
      events_change: setAutoHide
    }
  }
});

function setMode(val) {
  chart.options({
    defaultPoint: { label: { placement: val } }
  });
}

function setAutoHide(val) {
  chart.options({
    defaultPoint: { label: { autoHide: val } }
  });
}