// JS
var myMarker = {
    value: 320,
    color: 'red',
    id: 'yMV',
    legendEntry_name: 'Value Marker'
  },
  myMarkerR = {
    value: [100, 300],
    color: ['blue', 0.5],
    id: 'yMR',
    legendEntry_name: 'Range Marker'
  },
  addedV = false,
  addedR = false;

var yAxis;
var chart = JSC.chart(
  'chartDiv',
  {
    debug: true,
    type: 'column',
    toolbar: {
      defaultItem: {
        position: 'inside top left',
        type: 'toggle'
      },
      items: {
        RangeMarker: {
          label: 'Range Marker',
          events: { change: rangeMarker }
        },
        ValueMarker: {
          label: 'Value Marker',
          events: { change: valueMarker }
        }
      }
    },
    yAxis: { label_text: 'Units Sold' },
    xAxis: { label_text: 'Quarter' },
    title_label_text: 'Acme Tool Sales',
    series: [
      {
        name: 'Saw',
        id: 's1',
        points: [
          ['Q1', 230],
          ['Q2', 240],
          ['Q3', 267],
          ['Q4', 238]
        ]
      },
      {
        name: 'Hammer',
        points: [
          ['Q1', 325],
          ['Q2', 347],
          ['Q3', 392],
          ['Q4', 371]
        ]
      },
      {
        name: 'Grinder',
        points: [
          ['Q1', 285],
          ['Q2', 292],
          ['Q3', 327],
          ['Q4', 158]
        ]
      },
      {
        name: 'Drill',
        points: [
          ['Q1', 185],
          ['Q2', 192],
          ['Q3', 198],
          ['Q4', 318]
        ]
      }
    ]
  },
  function(chart) {
    yAxis = chart.axes('y');
  }
);

/**
 * Adds and removes the range marker
 */
function rangeMarker() {
  if (!addedR) {
    yAxis.markers.add(myMarkerR);
    chart.renderer.refresh();
    addedR = true;
  } else {
    yAxis.markers('yMR').remove();
    addedR = false;
  }
}

/**
 * Adds and removes the value marker
 */
function valueMarker() {
  if (!addedV) {
    yAxis.markers.add(myMarker);
    addedV = true;
  } else {
    //debugger;
    yAxis.markers('yMV').remove();
    addedV = false;
  }
}