{% load ajax_helpers %}

<canvas id="{{ datatable.table_id }}" width="400" height="400"></canvas>

<script>


    (function () {

        var cell_data;
        var table = {{ datatable.model_table_setup }};
        table.find_column = django_datatables.PythonTable.prototype.find_column

        var labels = [];
        var datasets = [];

        for (var i = 0; i < table.initsetup.colOptions.length; i++) {

            if (i > 0) {
                datasets[i - 1] = {
                    label: table.row_titles[i],
                    data: [],
                    borderWidth: 1,
                    datalabels: {
                        align: 'top',
                        color: '#000000',
                        anchor: 'end'
                    },
                    backgroundColor: []
                };
            }

            for (var j = 0; j < table.data.length; j++) {
                if (table.initsetup.colOptions[i]['render'] != undefined) {
                    render = new django_datatables.column_render(i, table.initsetup.colOptions[i]['render'], table);
                    cell_data = render(table.data[j][i], null, table.data[j]);
                } else {
                    cell_data = table.data[j][i];
                }
                if (cell_data == null) {
                    cell_data = '';
                }
                if (i > 0) {
                    datasets[i - 1].data.push(cell_data);
                    var colours = table.initsetup.colOptions[i].colours;
                    if (table.initsetup.colOptions[i].colours === undefined) {
                        datasets[i - 1].backgroundColor.push('#FF0000')
                    }
                    else if (cell_data < 0) {
                        datasets[i - 1].backgroundColor.push('#' + colours.negative);
                    } else {
                        datasets[i - 1].backgroundColor.push('#' + colours.positive);
                    }
                } else {
                    labels.push(cell_data);
                }
            }
        }

        var x_axis = {
            {% if datatable.bar_chart_report.stacked %}stacked: true,{% endif %}
            display: true,
            {% if datatable.bar_chart_report.x_label %}
                title: {
                    display: true,
                    text: '{% if datatable.bar_chart_report.is_orientation_vertical %}{{ datatable.bar_chart_report.x_label|safe|escapejs }}{% else %}{{ datatable.bar_chart_report.y_label|safe|escapejs }}{% endif %}',
                },
            {% endif %}
            {% if datatable.bar_chart_report.show_blank_dates %}
                type: 'time',
                time: {
                    unit: '{{ datatable.bar_chart_report.get_chart_scale}}'
                }

            {% endif %}

        };

        var y_axis = {
            {% if datatable.bar_chart_report.stacked %}stacked: true,{% endif %}

            display: true,
            {% if datatable.bar_chart_report.y_label %}
                title: {
                    display: true,
                    text: '{% if datatable.bar_chart_report.is_orientation_vertical %}{{ datatable.bar_chart_report.y_label|safe|escapejs }}{% else %}{{ datatable.bar_chart_report.x_label|safe|escapejs }}{% endif %}',
                }
            {% endif %}
        };
        var ctx{{ datatable.table_id }} = document.getElementById('{{ datatable.table_id }}').getContext('2d');



        var bar{{ datatable.table_id }} = new Chart(ctx{{ datatable.table_id }}, {
            {% if datatable.bar_chart_report.show_totals %}plugins: [ChartDataLabels],{% endif %}
            type: 'bar',
            data: {labels: labels, datasets: datasets},
            options: {
                maintainAspectRatio: false,
                {% if not datatable.bar_chart_report.is_orientation_vertical %}indexAxis: 'y',{% endif %}

                scales: {
                    // This is because there is a bug in the library,
                    // where the axis label don't swap properly on orientation change.
                    {% if datatable.bar_chart_report.is_orientation_vertical %}
                        y: y_axis,
                        x: x_axis,
                    {% else %}
                        y: x_axis,
                        x: y_axis,
                    {% endif %}
                },
                responsive: true,
                legend: {
                    position: 'top',
                    display: false
                },
            }
        });

    })();
</script>
