.on( evtName, fn)

Bind event handler functions to the chart.

chart.on(event, fn)

Arguments

Name Type Required Description
event string yes Name of the interaction event to bind the function. (mouseover)
fn function yes Function(event, data) that is called when the event occurs.

Available Events

Name Description
mouseover fires when the mouse moves over elements on the chart
mouseout fires when the mouse leaves an elements on the chart
click fires when on clicking an element on the chart
update-start fires on chart.update();
update-end fires when chart finishes rendering

Handler Parameters

When a handler is fired, the data associated with the chart element is passed along.

Example Code

<div class="row">
  <div class="col-lg-12" id="chart"></div>
</div>

<script>

   //define a handler for chart events 
  function showItem(event,data){
    //dump event to console such as mouse location...
    console.dir(event);
    //dump data to console...
    console.dir(data);
  }

  //setup a chart using a json file that is the complete definition
  var chart = new Cedar({
    "definition":"../../../cedar/data/definitions/scatter-events.json"
  });

  //render the chart
  chart.show({
    elementId: "#chart"
  });

  //attach handler (can also be done before .show())
  chart.on('click', showItem);

  window.onresize = function() { chart.update() }

</script>

Edit this page on GitHub