<div class="row">
    <div class="col-lg-6">
        <div class="card">
            <div class="card-block">
                <h4 class="card-title">Monthly Report</h4>
                <div id="bar-chart" style="width:100%; height:400px;"></div>
            </div>
        </div>
    </div>
</div>



<script src="<?php echo base_url(); ?>assets/plugins/echarts/echarts-all.js"></script>
<!--<script src="--><?php //echo base_url(); ?><!--assets/plugins/echarts/echarts-init.js"></script>-->

<script !src="">
    // ==============================================================
    // Bar chart option
    // ==============================================================
    var myChart = echarts.init(document.getElementById('bar-chart'));

    var dadosCategoria = [<?php
        foreach ($vendasDiariasDoMes as $a) {
            echo "'" .$a->Dia."/". $a->Mes . "',";
        }
        ?>];

    var dadosValorVendas = [<?php
        foreach ($vendasDiariasDoMes as $a) {
            echo number_format($a->totalPreventiva, 2, '.', '') . ",";
        }
        ?>];

    // specify chart configuration item and data
    option = {
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            data:['Site A','Site B']
        },
        toolbox: {
            show : true,
            feature : {

                magicType : {show: true, type: ['line', 'bar']},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        color: ["#55ce63", "#009efb"],
        calculable : true,
        xAxis : [
            {
                type : 'category',
                data : dadosCategoria
                // data : ['Jan','Feb','Mar','Apr','May','Jun','July','Aug','Sept','Oct','Nov','Dec']
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:'Site A',
                type:'bar',


                data:dadosValorVendas,
                // data:[2, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
                markPoint : {
                    data : [
                        {type : 'max', name: 'Max'},
                        {type : 'min', name: 'Min'}
                    ]
                },
                markLine : {
                    data : [
                        {type : 'average', name: 'Average'}
                    ]
                }    ,            label: {
                    show: true,
                    position: 'inside'
                },
            },

        ]
    };


    // use configuration item and data specified to show chart
    myChart.setOption(option, true), $(function() {
        function resize() {
            setTimeout(function() {
                myChart.resize()
            }, 100)
        }
        $(window).on("resize", resize), $(".sidebartoggler").on("click", resize)
    });

</script>