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

    <div class="col-lg-6">
        <div class="card">
            <div class="card-block">
                <h4 class="card-title">Line chart</h4>
                <div id="main" style="width:100%; height:400px;"></div>
            </div>
            <script src="<?php echo base_url(); ?>assets/plugins/echarts/echarts-all.js"></script>
        </div>
    </div>

<!--</div>-->
<script !src="">
    var dom = document.getElementById("main");
    var mytempChart = echarts.init(dom);
    var app = {};
    option = null;
    option = {

        tooltip : {
            trigger: 'axis'
        },
        legend: {
            data:['max temp','min temp']
        },
        toolbox: {
            show : true,
            feature : {
                magicType : {show: true, type: ['line', 'bar']},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        color: ["#55ce63", "#009efb"],
        calculable : true,
        xAxis : [
            {
                type : 'category',

                boundaryGap : false,
                data : ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
            }
        ],
        yAxis : [
            {
                type : 'value',
                axisLabel : {
                    formatter: '{value} °C'
                }
            }
        ],

        series : [
            {
                name:'max temp',
                type:'line',
                color:['#000'],
                data:[11, 11, 15, 13, 12, 13, 10],
                markPoint : {
                    data : [
                        {type : 'max', name: 'Max'},
                        {type : 'min', name: 'Min'}
                    ]
                },
                itemStyle: {
                    normal: {
                        lineStyle: {
                            shadowColor : 'rgba(0,0,0,0.3)',
                            shadowBlur: 10,
                            shadowOffsetX: 8,
                            shadowOffsetY: 8
                        }
                    }
                },
                markLine : {
                    data : [
                        {type : 'average', name: 'Average'}
                    ]
                }
            },
            {
                name:'min temp',
                type:'line',
                data:[1, -2, 2, 5, 3, 2, 0],
                markPoint : {
                    data : [
                        {name : 'Week minimum', value : -2, xAxis: 1, yAxis: -1.5}
                    ]
                },
                itemStyle: {
                    normal: {
                        lineStyle: {
                            shadowColor : 'rgba(0,0,0,0.3)',
                            shadowBlur: 10,
                            shadowOffsetX: 8,
                            shadowOffsetY: 8
                        }
                    }
                },
                markLine : {
                    data : [
                        {type : 'average', name : 'Average'}
                    ]
                }
            }
        ]
    };

    if (option && typeof option === "object") {
        mytempChart.setOption(option, true), $(function() {
            function resize() {
                setTimeout(function() {
                    mytempChart.resize()
                }, 100)
            }
            $(window).on("resize", resize), $(".sidebartoggler").on("click", resize)
        });
    }

</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:['Vendas Diárias - Mês Atual']
        },
        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:'Vendas Diárias - Mês Atual',
                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>