Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Responsive Chart.js Example with AJAX Callback
<canvas id="invoice_status_chart" min-height="300" max-height="500"></canvas>
<script type="text/javascript" charset="utf-8">
var invoice_status_data = {};
function invoice_status_chart() {
var can = jQuery('#invoice_status_chart');
var ctx = can.get(0).getContext("2d");
var container = can.parent().parent(); // get width from proper parent
var $container = jQuery(container);
can.attr('width', $container.width()); //max width
can.attr('height', $container.height()); //max height
var chart = new Chart(ctx).Doughnut(invoice_status_data);
}
var invoice_status_data = function () {
jQuery.post( ajaxurl, {
action: 'callback_id',
data: 'invoice_statuses',
security: 'nonce'
},
function( data ) {
invoice_status_data = [
{
value: data.status_temp,
color:"#26292C",
highlight: "#363B3F",
label: "Temp"
},
{
value: data.status_pending,
color:"#FFA500",
highlight: "#FAD694",
label: "Pending"
},
{
value: data.status_partial,
color:"#E14D43",
highlight: "#FF5A5E",
label: "Partial"
},
{
value: data.status_complete,
color: "#76AB48",
highlight: "#86BC4A",
label: "Complete"
}
];
invoice_status_chart();
}
);
};
jQuery(document).ready(function($) {
jQuery(window).resize(invoice_status_chart);
invoice_status_data();
});
</script>
@bgoetzmann

This comment has been minimized.

Copy link

bgoetzmann commented Mar 16, 2016

Thanks for this Gist that inspired me! For anyone interested, I wrote an article in how to include this kind of chart in a Grails 3 application (it's in french), and for which the source code is here.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.