Javascript events - methnen/m-chart GitHub Wiki

There are two Javascript events that occur when a chart is rendering. One occurs immediately before the chart renders and one immediately after. These are carried out using the jQuery custom events functionality.

render_start

render_start occurs immediately before a chart starts rendering.

The event has the chart's WordPress post ID and INSTANCE values available to it, which in turn would allow you to manipulate the m_chart_highcharts_ID_INSTANCE object or the container divs that the chart will render inside of.

Highcharts Example:

$( '.m-chart' ).on( 'render_start', function( event ){
	$( '.m-chart-container-' + event.post_id + '-' + event.instance ).addClass( 'awesome-chart' );
});

render_done

render_done occurs immediately after a chart has finished rendering.

The event has the chart's WordPress post ID and INSTANCE values available to it, and in the case of Highcharts the chart object.

Chart.js don't pass the chart object but it can be modified via a different method (see example).

The M Chart admin panel Javascript uses this event to generate the high resolution PNG version of the graph. However, it could be used to manipulate the chart object however you wished.

See the Highcharts API reference Methods and Properties section for all the possibilities.

Highcharts Example:

$( '.m-chart' ).on( 'render_done', function( event ){
	event.chart.addSeries({
		data: [194.1, 95.6, 54.4, 29.9, 71.5, 106.4]
	});
});

Chart.js Example:

$( '.m-chart' ).on( 'render_done', function( event ){
	window[ 'm_chart_chartjs_' + event.post_id + '_' + event.instance ].chart.data = {
		"labels": ["Dill", "Sweet", "Cornichon", "Sour", "Kool-Aid", "Bread & Butter"],
		"datasets": [{
			"data": [69, 5, 5, 10, 1, 5],
			"backgroundColor": ["#ed6d85", "#f7d06b", "#f2a354", "#56a0e5", "#6cbebf", "#47494b"]
		}]
	};
});

canvas_done

Available in M Chart v.1.1+

canvas_done occurs immediately after the chart edit panel has rendered the canvas version of the chart and only applies to Highcharts charts.

This allows you to manipulate the canvas context before it is turned into an image. For instance you could use this to add a watermark to the image versions of a chart (since the image versions are used in syndication/rss situations this might be valuable from a branding standpoint).

The m_chart_admin object is available to your Javascript at this point which has the following items (among others) available to it depending on the time your code triggers:

• post_id
• $spreadsheets
• canvas
• canvas_context

See the m_chart_admin_footer_javascript Action hook docs which have a perfect example of this being used.