Javascript events

Available in M Chart v.2.0+

There are two front-end Javascript events that occur when a chart is rendering. One occurs immediately before the chart renders and one immediately after. These are native browser CustomEvents dispatched on .m-chart elements.

Upgrading from v1.x? Events previously used jQuery's custom events API. See Migrating to v2 for details on updating your code.

Front-end Events

render_start

render_start is dispatched immediately before a chart starts rendering.

The event's detail object has the chart's WordPress post ID and instance values, which allow you to manipulate the container divs that the chart will render inside of.

Example:

document.querySelectorAll( '.m-chart' ).forEach( function( el ) {
	el.addEventListener( 'render_start', function( event ) {
		document.querySelector( '.m-chart-container-' + event.detail.post_id + '-' + event.detail.instance ).classList.add( 'awesome-chart' );
	});
});

render_done

render_done is dispatched immediately after a chart has finished rendering.

The event's detail object has the chart's WordPress post ID and instance values. When using the Highcharts library, event.detail.chart contains the Highcharts chart instance.

Example:

document.querySelectorAll( '.m-chart' ).forEach( function( el ) {
	el.addEventListener( 'render_done', function( event ) {
		console.log( 'Chart ' + event.detail.post_id + ' rendered' );
	});
});

Highcharts example (accessing the chart instance):

document.querySelectorAll( '.m-chart' ).forEach( function( el ) {
	el.addEventListener( 'render_done', function( event ) {
		if ( event.detail.chart ) {
			event.detail.chart.addSeries({
				data: [194.1, 95.6, 54.4, 29.9, 71.5, 106.4]
			});
		}
	});
});

See Admin UI Javascript hooks for documentation on the wp.hooks-based API for extending the admin interface.