chartjs.html

{% macro expression_profile(target, url) -%}
$( document ).ready(function() {
    $.getJSON( "{{ url}}", function( data ) {
        var ctx = document.getElementById("{{ target }}").getContext("2d");
        data['options']['responsive'] = true;
        data['options']['maintainAspectRatio'] = false;
        data['options']['tooltips'] = {
            enabled: true,
            mode: 'label',
            itemSort: function(a, b, data) {
                conversion = {'Minimum': 0, 'Mean': 1, 'Maximum': 2}

                if (conversion[data.datasets[a.datasetIndex].label] > conversion[data.datasets[b.datasetIndex].label]) {
                    return -1
                } else if (conversion[data.datasets[a.datasetIndex].label] < conversion[data.datasets[b.datasetIndex].label]) {
                    return 1
                } else {
                    return 0
                }
            },
            callbacks: {
                label: function(tooltipItems, data) {
                    return data.datasets[tooltipItems.datasetIndex].label + ': ' + tooltipItems.yLabel.toFixed(2);
                }
            }
        }
        var myChart = new Chart(ctx, data);
    });
});
{%- endmacro %}

{% macro pie_chart(target, url) -%}
$( document ).ready(function() {
    $.getJSON( "{{ url}}", function( data ) {
        var ctx = document.getElementById("{{ target }}").getContext("2d");
        data['options'] = {
            responsive: true,
            maintainAspectRatio: false,
            legend: {
                position: 'bottom'
            }
        }
        var myChart = new Chart(ctx, data);
    });
});
{%- endmacro %}