// JS
var chart = JSC.chart('chartDiv', {
  debug: true,
  legend_position: 'inside left bottom',
  defaultSeries: {
    type: 'pie',
    pointSelection: true
  },
  defaultPoint_label: {
    text: '<b>%name</b>',
    placement: 'auto',
    autoHide: false
  },
  toolbar_items: {
    Mode: {
      margin: 10,
      type: 'select',
      events_change: setMode,
      items: 'enum_placement'
    },
    'Auto Hide': {
      type: 'checkbox',
      events_change: setAutoHide
    }
  },
  title_label_text: 'Countries GDP',
  yAxis: { label_text: 'GDP', formatString: 'n' },
  series: [
    {
      name: 'Countries',
      points: [
        { name: 'United States', y: 5452500 },
        { name: 'Canada', y: 786052 },
        { name: 'United Kingdom', y: 477338 },
        { name: 'Mexico', y: 155313 }
      ]
    }
  ]
});

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

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