ZingChart Events

The ZingChart library raises several events that can be captured. The event model is quite granular handling node level events (node_click, node_mouseover, node_mouseout) to chart wide events like interacting with the legend, hiding and showing plots, zooming, and dozens more.

There are three methods that can be used to configure chart event listeners.

Bind

This method will bind an event to a specific chart after it has rendered.

zingchart.bind('chartId','load',function() {
    // Do something for single chart
  });

By defining a null value for chartId this will be the event to all charts on the page.

zingchart.bind(null,'load', function(e) {
    // Do something for ALL charts on page
    switch(e.id) {
      case 'chartId1':
        // Do something
        break;
      case 'chartId2':
        // Do something else
        break;
      case 'chartId3':
        // Reticulate splines
        break;
    }
  });
<<<<<<< HEAD
======= >>>>>>> a1e09e8c77a50d05a7a04a13a724e09815adf617
AttributeTypeInfo

eventName

String

The name of the event.

"load" | "complete" | ...

handler

Function

Handler fired when the event takes place.

function(params) {...}

id

String

The ID of the chart or null if event is bound to all the charts in a page.

"mydiv" | null | ...

Render Object

This method binds a list of events to an object at the time of the render. This is especially helpful when working in frameworks so you can keep all your code in one concise place.

zingchart.render({
    id: 'chartId',
    data: chartData,
    events: {
      load: function(p) {
        // do something
      }
    }
  });

Overwritten

This method will listen for the specified event across all charts in a page. To execute different functions across each chart, set up a switch that uses the chart’s returned id as the expression for the switch:

zingchart.load = function(e) {
    switch(e.id) {
      case 'chartId1':
        // Do something
        break;
      case 'chartId2':
        // Do something else
        break;
      case 'chartId3':
        // Reticulate splines
        break;
    }
  }

Unbind

This method will bind an event to a specific chart after it has rendered.

zingchart.unbind('chartId','load', function() {
      // Do something for single chart
    });

By defining a null value for chartId this will be the event to all charts on the page.

zingchart.unbind(null,'load', function(e) {
      // Do something for ALL charts on page
      switch(e.id) {
        case 'chartId1':
          // Do something
          break;
        case 'chartId2':
          // Do something else
          break;
        case 'chartId3':
          // Reticulate splines
          break;
      }
    });
AttributeTypeInfo

eventName

String

The name of the event.

"load" | "complete" | ...

handler

Function

Handler fired when the event takes place.

function(params) {...}

id

String

The ID of the chart or null if event is bound to all the charts in a page.

"mydiv" | null | ...


All Events