{% extends "AppBundle::layout_backend.html.twig" %}
{% block content %}
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <h3>Total de Ventas del dia <strong>{{ ventasDelDia[0]['total'] }}</strong></h3>
            <div id="chart_div"></div>
        </div>
    </div>

{% endblock %} 

{% block javascripts %}
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></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', 'Topping');
            data.addColumn('number', 'Slices');
            data.addRows([
                {% for item in ventasDiariasXmarketplace %}
                ['{{ item.nombre }}', {{ item.amount }}],
                {% endfor %}
            ]);

            // Set chart options
            var options = {
                'title': 'Ventas Diarias por Marketplace',
                'width': 400,
                'height': 300
            };

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