/*CSS*/

// JS
var chart = JSC.chart('chartDiv',{
  debug: true,
  type: 'funnel',
  legend_visible: false,
  chartArea_outline_width: 0,
  
/*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 }}});
	}