{% extends "AppBundle::layout_backend.html.twig" %}
{% block content %}
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div id="chart_div"></div>
        </div>
    </div>

{% endblock %} 

{% block javascripts %}

    <script src="{{ asset('bundles/app/loader.js') }}" type="text/javascript"></script>
    <script type="text/javascript">

        // Load the Visualization API and the corechart package.
        google.charts.load('current', {'packages': ['corechart']});

        // Set a callback to run when the Google Visualization API is loaded.
        google.charts.setOnLoadCallback(drawChart);

        // Callback that creates and populates a data table,
        // instantiates the pie chart, passes in the data and
        // draws it.
        function drawChart() {

            // Create the data table.
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Marketplace');
            data.addColumn('number', 'Cantidad');
            data.addRows([
                {% for item in facturacionXcanal %}
                ['{{ item.nombre }}', {{ item.promedio }} ],
                {% endfor %}
            ]);

            // Set chart options
            var options = {
                'title': 'Facturación promedio por canal',
                'width': 600,
                'height': 400,
            };

            // Instantiate and draw our chart, passing in some options.
            var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
            chart.draw(data, options);
        }

        $(document).ready(function () {
            $("#myTooltip").tooltip({
                title: "<h4><img src='images/smiley.png' alt='Smiley'> Hello, <b>I'm</b> <i>Smiley!</i></h4>",
                html: true
            });
        });

    </script>
{% endblock %}