
<form style="margin-top: 10px;" method="post" name="form1" id="form1">
    <input type="hidden" name="Control" value="1">
    <div class="card-group">
        <div class="card">
            <h5 class="card-header text-center" style="padding: 4px;">
                <div class="form-row">
                    <div class="col-md-7">
                        VENTA Y MARGEN MENSUAL
                    </div>
                    <div class="col-md-5">
                        <div class="form-inline justify-content-center" style="width: 100%">
                            <div class="form-group">
                                <select class="form-control" id="Anio" name="Anio">
                                    <option value="<?=UtilDate::getFormatDate( $o_GSS_CompaniaBN->getFechaCreacion(), "Y" )?>"> - AÑO - </option>
                                    <?php for( $i=UtilDate::getFormatDate( $o_GSS_CompaniaBN->getFechaCreacion(), "Y" ); $i<=date( "Y" ); $i++ ){ ?>
                                        <option value="<?=$i?>" <?php if( $s_Anio==$i ){ echo "SELECTED"; } ?> > <?=$i?> </option>
                                    <?php } ?>
                                </select>
                            </div>
                            <div class="form-group">
                                <select class="form-control" id="Periodo" name="Periodo">
                                    <option value="<?=date( "m" )?>"> - PERIODO - </option>
                                    <?php foreach( Constantes::$a_meses as $s_Key => $s_Valor ){ ?>
                                        <option value="<?=$s_Key?>" <?php if( $s_Periodo==$s_Key ){ echo "SELECTED"; } ?> > <?=$s_Key?> - <?=$s_Valor?> </option>
                                    <?php } ?>
                                </select>
                            </div>
                            <div class="form-group">
                                <button class="btn btn-primary text-center" type="button" onclick="BuscarCanvas();">Buscar</button>
                            </div>
                        </div>
                    </div>
                </div>
            </h5>
            <div class="card-body" style="background-color: aquamarine;">
                <div class="table-responsive-sm" style=>
                    <table class="table">
                        <thead>
                        <tr>
                            <th style="text-align: center;" class="text-nowrap" title="Ventas del Mes">Ventas S/</th>
                            <th style="text-align: center;" class="text-nowrap" title="Margen en SOles">Margen en S/</th>
                            <th style="text-align: center;" class="text-nowrap" title="Margen Porcentual">Margen %</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td style="padding: 0; height: 20px" class="text-nowrap" align="center"><?=number_format( $a_VentaMargen['VentaTotal'], 2 )?></th>
                            <td style="padding: 0; height: 20px" class="text-nowrap" align="center"><?=number_format( $a_VentaMargen['MargenTotal'], 2 )?></td>
                            <td style="padding: 0; height: 20px" class="text-nowrap" align="center"><?=number_format( $a_VentaMargen['MargenPor'], 2 )?>%</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="card">
            <h5 class="card-header text-center" style="padding: 4px;">
                <div class="form-row">
                    <div class="col-md-7">
                        COBRANZA MENSUAL
                    </div>
                    <div class="col-md-5">
                        <div class="form-inline justify-content-center" style="width: 100%">
                            <div class="form-group">
                                <select class="form-control" id="Anio2" name="Anio2">
                                    <option value="<?=UtilDate::getFormatDate( $o_GSS_CompaniaBN->getFechaCreacion(), "Y" )?>"> - AÑO - </option>
                                    <?php for( $i=UtilDate::getFormatDate( $o_GSS_CompaniaBN->getFechaCreacion(), "Y" ); $i<=date( "Y" ); $i++ ){ ?>
                                        <option value="<?=$i?>" <?php if( $s_Anio2==$i ){ echo "SELECTED"; } ?> > <?=$i?> </option>
                                    <?php } ?>
                                </select>
                            </div>
                            <div class="form-group">
                                <select class="form-control" id="Periodo2" name="Periodo2">
                                    <option value="<?=date( "m" )?>"> - PERIODO - </option>
                                    <?php foreach( Constantes::$a_meses as $s_Key => $s_Valor ){ ?>
                                        <option value="<?=$s_Key?>" <?php if( $s_Periodo2==$s_Key ){ echo "SELECTED"; } ?> > <?=$s_Key?> - <?=$s_Valor?> </option>
                                    <?php } ?>
                                </select>
                            </div>
                            <div class="form-group">
                                <button class="btn btn-primary text-center" type="button" onclick="BuscarCanvas();">Buscar</button>
                            </div>
                        </div>
                    </div>
                </div>
            </h5>
            <div class="card-body" style="background-color: burlywood;">
                <div class="table-responsive-sm" style=>
                    <table class="table">
                        <thead>
                        <tr>
                            <th style="text-align: center;" class="text-nowrap" title="Ventas del Mes">Total Ventas S/</th>
                            <th style="text-align: center;" class="text-nowrap" title="Margen en SOles">Cobro a Cuenta S/</th>
                            <th style="text-align: center;" class="text-nowrap" title="Margen Porcentual">Pendiente Cobro $/</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td style="padding: 0; height: 20px" class="text-nowrap" align="center"><?=number_format( $a_controlGastosCobranzas['SumaTotalSinIGV'], 2 )?></th>
                            <td style="padding: 0; height: 20px" class="text-nowrap" align="center"><?=number_format( $a_controlGastosCobranzas['SumaTotalPagado'], 2 )?></td>
                            <td style="padding: 0; height: 20px" class="text-nowrap" align="center"><?=number_format( $a_controlGastosCobranzas['SumaTotalPendiente'], 2 )?></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>


<div class="card-group">
	<div class="card text-center">
        <div class="card-footer">
            <small class="text-muted"><b>TOTAL EDAD DE INVENTARIO</b></small>
        </div>
        <div class="card-body" style="background-color: cornflowerblue;">
            <div class="table-responsive-sm" style=>
                <table class="table" >
                    <thead>
                        <tr>
                            <th scope="col" style="padding: 5px;" class="text-nowrap" title="Total">Total</th>
                            <th scope="col" style="padding: 5px;" class="text-nowrap" title="0 - 15 dias">0 - 15 dias</th>
                            <th scope="col" style="padding: 5px;" class="text-nowrap" title="16 - 30 dias">16 - 30 dias</th>
                            <th scope="col" style="padding: 5px;" class="text-nowrap" title="31 - 45 dias">31 - 45 dias</th>
                            <th scope="col" style="padding: 5px;" class="text-nowrap" title="46 - 60 dias">46 - 60 dias</th>
                            <th scope="col" style="padding: 5px;" class="text-nowrap" title="61 - 75 dias">61 - 75 dias</th>
                            <th scope="col" style="padding: 5px;" class="text-nowrap" title="76 - 90 dias">76 - 90 dias</th>
                            <th scope="col" style="padding: 5px;" class="text-nowrap" title="91 - 9999 dias">91 - + dias</th>
                        </tr>
                    </thead>
                    <tbody>	
                        <tr> 
                            <td style="padding: 5px;" class="text-nowrap"><?php echo "S/ " . (number_format( ALM_TransParaRepInvFN::EdadCostoInventarioPorPeriodos( '0', '9999'), 2, ',', ' ' ));?></th>
                            <td style="padding: 5px;" class="text-nowrap"><?php echo "S/ ". (number_format( ALM_TransParaRepInvFN::EdadCostoInventarioPorPeriodos( '0', '15'), 2, ',', ' ' )); ?> </td>
                            <td style="padding: 5px;" class="text-nowrap"><?php echo "S/ ". (number_format( ALM_TransParaRepInvFN::EdadCostoInventarioPorPeriodos( '16', '30'), 2, ',', ' ' ));?></td>
                            <td style="padding: 5px;" class="text-nowrap"><?php echo "S/ ". (number_format( ALM_TransParaRepInvFN::EdadCostoInventarioPorPeriodos( '31', '45'), 2, ',', ' ' ));?></td>
                            <td style="padding: 5px;" class="text-nowrap"><?php echo "S/ ". (number_format( ALM_TransParaRepInvFN::EdadCostoInventarioPorPeriodos( '46', '60'), 2, ',', ' ' ));?></td>
                            <td style="padding: 5px;" class="text-nowrap"><?php echo "S/ ". (number_format( ALM_TransParaRepInvFN::EdadCostoInventarioPorPeriodos( '61', '75'), 2, ',', ' ' ));?></td>
                            <td style="padding: 5px;" class="text-nowrap"><?php echo "S/ ". (number_format( ALM_TransParaRepInvFN::EdadCostoInventarioPorPeriodos( '76', '90'), 2, ',', ' ' ));?></td>
                            <td style="padding: 5px;" class="text-nowrap"><?php echo "S/ ". (number_format( ALM_TransParaRepInvFN::EdadCostoInventarioPorPeriodos( '91', '9999'), 2, ',', ' ' ));?></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    
</div> 
 
<style type="text/css">
#content_periodo .ui-datepicker-calendar 
{
    display: none;
}
</style>
 
<div class="card-group">
    <div class="card  text-center">
    
        <div class="card-footer">
            <small class="text-muted"><b>OPERACIONES POR MES</b></small>
        </div>
        <div class="card" style="background-color: chocolate;">
        	<div class="container">
                <div class="form-row mx-0" id="content_periodo">
                	<div class="col-md-6 mb-1">
                        <label class="col-form-label" for="FechaDesde">Periodo Desde</label>
                        <input type="text" class="form-control text-center" name="PeriodoDesde" id="PeriodoDesde" value="<?=$s_PeriodoDesde?>" onclick="$( '.ui-datepicker-calendar' ).hide();" />
                        <script type="text/javascript">
                        $( '#PeriodoDesde' ).datepicker
                        ({
                            changeMonth:     true,
                            changeYear:      true,
                            showButtonPanel: true,
                            dateFormat:      'yy-mm',
                            onClose: function( dateText, inst ) 
                            { 
                                //$( this ).datepicker( 'setDate', new Date( inst.selectedYear, inst.selectedMonth, 1 ) );
                                var mes = str_pad( String( ( inst.selectedMonth + 1 ) ), 2, '0', 'STR_PAD_LEFT');
                                $( "#PeriodoDesde" ).val( inst.selectedYear + "-" + mes );
                            }
                        });
                        </script>
                    </div>
                	
                	<div class="col-md-6 mb-1">
                        <label class="col-form-label" for="PeriodoHasta">Periodo Hasta</label>
                        <input type="text" class="form-control text-center" name="PeriodoHasta" id="PeriodoHasta" value="<?=$s_PeriodoHasta?>" onclick="$( '.ui-datepicker-calendar' ).hide();" />
                        <script type="text/javascript">
                        $( '#PeriodoHasta' ).datepicker( 
                        {
                            changeMonth:     true,
                            changeYear:      true,
                            showButtonPanel: true,
                            dateFormat:      'yy-mm',
                            onClose: function( dateText, inst ) 
                            { 
                                //$( this ).datepicker( 'setDate', new Date( inst.selectedYear, inst.selectedMonth, 1 ) );
                                var mes = str_pad( String( ( inst.selectedMonth + 1 ) ), 2, '0', 'STR_PAD_LEFT');
                                $( "#PeriodoHasta" ).val( inst.selectedYear + "-" + mes );
                            }
                        });
                        </script>
                    </div>
                </div>

            </div>
            <div class="text-center mt-2" style="margin-left: auto; margin-right: auto;">
                <button class="btn btn-primary text-center" type="button" onclick="BuscarCanvas();">Buscar</button>
            </div>
    	</div>
        
        
        <div class="card-body" style="background-color: lightseagreen;">
            <div style="width:100%;">
                <canvas id="canvas9"></canvas>
            </div>
        </div>
    </div>
    <div class="card  text-center">
        <div class="card-footer">
            <small class="text-muted"><b>OPERACIONES POR DIA</b></small>
        </div>
        
        <div class="card" style="background-color: aquamarine;">
        	<div class="container">
                <div class="form-row mx-0">
                	<div class="col-md-6 mb-1">
                    	<label class="col-form-label" for="FechaOperacion1">Fecha Inicio</label>
                        <input type="text" class="form-control text-center" id="FechaOperacion1" name="FechaOperacion1" placeholder="Fecha Desde" value="<?=$i_FechaOperacion1?>">
                        <script type="text/javascript">
                        $( "#FechaOperacion1" ).datepicker( { dateFormat: "yy-mm-dd", changeYear:true, yearRange: "-5:+0", changeMonth: true, onClose: function (){ this.focus(); } } );
                        </script>
                	</div>
                    <div class="col-md-6 mb-1">
                        <label class="col-form-label" for="FechaOperacion2">Fecha Fin</label>
                        <input type="text" class="form-control text-center" id="FechaOperacion2" name="FechaOperacion2" placeholder="Fecha Hasta" value="<?=$i_FechaOperacion2?>">
                        <script type="text/javascript">
                        $( "#FechaOperacion2" ).datepicker( { dateFormat: "yy-mm-dd", changeYear:true, yearRange: "-5:+0", changeMonth: true, onClose: function (){ this.focus(); } } );
                        </script>
                	</div>    
                </div>
            </div>
            <div class="text-center mt-2" style="margin-left: auto; margin-right: auto;">
                <button class="btn btn-primary text-center" type="button" onclick="BuscarCanvas();">Buscar</button>
            </div>   
    	</div>
        
        <div class="card-body" style="background-color: lightseagreen;">
            <div style="width:100%;">
                <canvas id="canvas10"></canvas>
            </div>
        </div>
    
    </div>
</div>

<div class="card-group">
    <div class="card  text-center">
        <div class="card-footer">
            <small class="text-muted"><b>TOP 5 VENDEDORES DEL MES</b></small>
        </div>
        <div class="card-body" style="background-color: aquamarine;">
            <div style="width:100%;">
                <canvas id="canvas"></canvas>
            </div>
        </div>
    </div>
    <div class="card text-center">
        <div class="card-footer">
            <small class="text-muted"><B>REPORTE TOTAL DE VENDEDORES</B></small>
        </div>
        <div class="card-body" style="background-color: yellowgreen;">
            <div class="overflow-auto" style=>
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th scope="col" style="padding: 0;" title="VENDEDOR">Vend</th>
                            <th scope="col" style="padding: 0;" title="MES ACTUAL">MesAct S/</th>
                            <th scope="col" style="padding: 0;" title="MES ANTERIOR">MesAnt S/</th>
                            <th scope="col" style="padding: 0;" title="% VARIACION DE VENTAS">% Vari S/</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php foreach ( $a_DataVendedor as $s_Key => $a_Value ){ ?>
                        <tr>
                            <td style="padding: 0; text-align: left;"><?=$s_Key?></th>
                            <td style="padding: 0;"><?=number_format( $a_Value['PeriodoUno'], 2)?></td>
                            <td style="padding: 0;"><?=number_format( $a_Value['PeriodoDos'], 2 )?></td>
                            <td style="padding: 0;"><?=number_format( $a_Value['PorcVariacion'], 2 )?>%</td>
                        </tr>
                        <?php } ?>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<div class="card-group">
    <div class="card  text-center">
        <div class="card-footer">
            <small class="text-muted"><b>VENTAS POR FAMILIA DE PRODUCTO</b></small>
        </div>
        <div class="card-body" style="background-color: aquamarine;">
            <div style="width:100%;">
                <canvas id="canvas2"></canvas>
            </div>
        </div>
    </div>
    <div class="card text-center">
        <div class="card-footer">
            <small class="text-muted"><B>PRODUCTOS MAS VENDIDOS</B></small>
        </div>
        <div class="card-body" style="background-color: burlywood;">
            <div style="width:100%;">
                <canvas id="canvas11"></canvas>
            </div>
        </div>
    </div>
</div>
</form> 

<script type="text/javascript">
    BuscarCanvas = function()
    {
        $( '#form1' ).attr( 'action', '' );
        $( '#form1' ).submit();
    }
</script>

    <br>

<script>
//var MONTHS = ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Setiembre', 'Octubre', 'Noviembre', 'Diciembre'];
var VENDEDOR = [<?=$s_Vendedores?>];
var color = Chart.helpers.color;
var config = 
{
    type: 'bar',
    data: 
    {
        labels: VENDEDOR,
        datasets: 
        [
            {
                label: 'Mes Actual',
                backgroundColor: color( window.chartColors.blue ).alpha( 0.8 ).rgbString(),
                borderColor: window.chartColors.blue,
                data: 
                [
                    <?=$s_PeriodoActual?>
                ],
                fill: false
            },
            {
                label: 'Mes Anterior',
                backgroundColor: color( window.chartColors.red ).alpha( 0.8 ).rgbString(),
                borderColor: window.chartColors.red,
                data: 
                [
                    <?=$s_PeriodoAnterior?>
                ],
                fill: false
            }
        ]
    },
    options: 
    {
        responsive: true,
        title: 
        {
            display: false,
            text: 'Top 5 Vendedores del Mes'
        },
        tooltips: 
        {
            mode: 'index',
            intersect: false,
        },
        hover: 
        {
            mode: 'nearest',
            intersect: true
        },
        scales: 
        {
            xAxes: 
            [
                {
                    display: true,
                    scaleLabel: 
                    {
                        display: true,
                        labelString: 'VENDEDORES'
                    }
                }
            ],
            yAxes: 
            [
                {
                    display: true,
                    scaleLabel: 
                    {
                        display: true,
                        labelString: 'SOLES'
                    }
                }
            ]
        }
    }
};

var ctx = document.getElementById( 'canvas' ).getContext( '2d' );
window.myLine = new Chart( ctx, config );
</script>

<script>
//var MONTHS = ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Setiembre', 'Octubre', 'Noviembre', 'Diciembre'];
var randomScalingFactor = function() 
{
    return Math.round( Math.random() * 100 );
};
var config = 
{
    type: 'pie',
    data: 
    {
        datasets: 
        [
            {
                data: 
                [
                    <?=$s_DataSoles?>
                ],
                backgroundColor: 
                [
                    window.chartColors.red,
                    window.chartColors.orange,
                    window.chartColors.yellow,
                    window.chartColors.green,
                    window.chartColors.blue,
                    window.chartColors.purple,
                ],
                label: 'Dataset 1'
            }
        ],
        labels: 
        [
            <?=$s_DataLabel?>
            /*'CAJA 2: S/. 11,254,161.80',
            'FRASCO 2: S/. 5,622,365.68',
            'BLISTER: S/. 2,763,927.23',
            'UNIDAD: S/. 1,948,636.72',
            'SOBRES: S/. 1,162,527.11',
            'JARABE: S/. 1,073,220.25'*/
        ]
    },
    options: 
    {
        responsive: true,
        legend: 
        {
            position: 'left',
        },
        title: 
        {
            display: false,
            text: 'Ventas por Familia de Producto'
        },
        tooltips: 
        {
            mode: 'index',
            intersect: true,
            callbacks: {
                label: function(tooltipItem, data)
                {
                    var allData = data.datasets[tooltipItem.datasetIndex].data;
                    var tooltipLabel = data.labels[tooltipItem.index];
                    var tooltipData = allData[tooltipItem.index];
                    var total = 0;
                    for ( var i in allData )
                    {
                        total += allData[i];
                    }
                    var tooltipPercentage = Math.round( ( tooltipData / total ) * 100 );
                    //return tooltipLabel + ': ' + tooltipData + ' ( ' + tooltipPercentage + '% )';
                    return tooltipLabel + ' :  ( ' + tooltipPercentage + ' % )';
                }
            }
        },
        /*
        hover: 
        {
            mode: 'nearest',
            intersect: true
        },
        */
        animation: 
        {
            animateRotate: true,
            animateScale: true
        }
        /*
        scales: 
        {
            xAxes: 
            [
                {
                    display: true,
                    scaleLabel: 
                    {
                        display: true,
                        labelString: 'VENDEDORES'
                    }
                }
            ],
            yAxes: 
            [
                {
                    display: true,
                    scaleLabel: 
                    {
                        display: true,
                        labelString: 'MONTO'
                    }
                }
            ]
        }
        */
    }
};

var ctx = document.getElementById( 'canvas2' ).getContext( '2d' );
window.myLine = new Chart( ctx, config );

Chart.plugins.register
(
    {
        afterDatasetsDraw: function( chartInstance, easing ) 
        {
            // To only draw at the end of animation, check for easing === 1
            var ctx = chartInstance.chart.ctx;
            chartInstance.data.datasets.forEach
            (
                function( dataset, i ) 
                {
                    var meta = chartInstance.getDatasetMeta( i );
                    if ( meta.type == "pie" ) 
                    {
                        if ( !meta.hidden ) 
                        {
                            meta.data.forEach
                            (
                                function( element, index ) 
                                {
                                    //console.log( arguments );
                                    // Draw the text in black, with the specified font
                                    ctx.fillStyle = '#ffff';
                                    var fontSize = 16;
                                    var fontStyle = 'normal';
                                    var fontFamily = 'Helvetica Neue';
                                    ctx.font = Chart.helpers.fontString( fontSize, fontStyle, fontFamily );
                                    // Just naively convert to string for now
                                    var dataString = dataset.data[index].toString();
                                    // Make sure alignment settings are correct
                                    ctx.textAlign = 'center';
                                    ctx.textBaseline = 'middle';
                                    var padding = 5;
                                    var position = element.tooltipPosition();
                                    var tooltipPercentage = Math.round( ( parseFloat( dataString ) / <?=$f_MontoTota?> ) * 100 );
                                    //ctx.fillText( dataString + '%', position.x, position.y - ( fontSize / 2 ) - padding );
                                    ctx.fillText( tooltipPercentage + '%', position.x, position.y - ( fontSize / 2 ) - padding );
                                }
                            );
                        }
                    }
                }
            );
        }
    }
);

</script>

<script>
        var config = {
            type: 'line',
            data: {
                //labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
                labels: [<?=$s_DataMes?>],
                datasets: 
                [
                    {
                        label: 'SOLES',
                        backgroundColor: window.chartColors.red,
                        borderColor: window.chartColors.red,
                        data: 
                        [
                            <?=$s_DataMontos?>
                        ],
                        fill: false
                    }/*, 
                    {
                        label: 'My Second dataset',
                        fill: false,
                        backgroundColor: window.chartColors.blue,
                        borderColor: window.chartColors.blue,
                        data: 
                        [
                            randomScalingFactor(),
                            randomScalingFactor(),
                            randomScalingFactor(),
                            randomScalingFactor(),
                            randomScalingFactor(),
                            randomScalingFactor(),
                            randomScalingFactor()
                        ],
                    },
                    {
                        label: 'My Second dataset',
                        fill: false,
                        backgroundColor: window.chartColors.yellow,
                        borderColor: window.chartColors.yellow,
                        data: 
                        [
                            randomScalingFactor(),
                            randomScalingFactor(),
                            randomScalingFactor(),
                            randomScalingFactor(),
                            randomScalingFactor(),
                            randomScalingFactor(),
                            randomScalingFactor()
                        ],
                    }*/
                ]
            },
            options: {
                responsive: true,
                title: {
                    display: false,
                    text: 'Chart.js Line Chart'
                },
                /*tooltips: {
                    mode: 'index',
                    intersect: false,
                },*/
                tooltips: 
                {
                    mode: 'index',
                    intersect: true,
                    callbacks: {
                        label: function(tooltipItem, data)
                        {
                            var allData = data.datasets[tooltipItem.datasetIndex].data;
                            var tooltipLabel = data.labels[tooltipItem.index];
                            var tooltipData = allData[tooltipItem.index];
                            var total = 0;
                            for ( var i in allData )
                            {
                                total += allData[i];
                            }
                            var tooltipPercentage = Math.round( ( tooltipData / total ) * 100 );
                            //return tooltipLabel + ': ' + tooltipData + ' ( ' + tooltipPercentage + '% )';
                            //return tooltipLabel + ' :  ( ' + tooltipPercentage + ' % )';
                            return 'S/. ' + number_format( tooltipData, 2 ) + ' ( ' + tooltipPercentage + '% )';
                        }
                    }
                },
                hover: {
                    mode: 'nearest',
                    intersect: true
                },
                scales: {
                    xAxes: [{
                        display: true,
                        scaleLabel: {
                            display: true,
                            labelString: 'MES'
                        }
                    }],
                    yAxes: [{
                        display: true,
                        scaleLabel: {
                            display: true,
                            labelString: 'SOLES'
                        }
                    }]
                }
            }
        };

        var ctx = document.getElementById('canvas0').getContext('2d');
            window.myLine = new Chart(ctx, config);
    </script>

<script type="text/javascript">
    //var MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
    var color = Chart.helpers.color;
    var barChartData = {
        labels: [<?=$s_DataMes?>],
                datasets: 
                [
                    {
                        label: 'SOLES',
                        backgroundColor: window.chartColors.red,
                        borderColor: window.chartColors.red,
                        data: 
                        [
                            <?=$s_DataMontos?>
                        ],
                        
                    }/*, {
            label: 'Dataset 2',
            backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
            borderColor: window.chartColors.blue,
            borderWidth: 1,
            data: [
                randomScalingFactor(),
                randomScalingFactor(),
                randomScalingFactor(),
                randomScalingFactor(),
                randomScalingFactor(),
                randomScalingFactor(),
                randomScalingFactor()
            ]
        }*/
        ]

    };

var ctx = document.getElementById( 'canvas9' ).getContext( '2d' );
window.myBar = new Chart(ctx, {
    type: 'bar',
    data: barChartData,
    options: {
        responsive: true,
        legend: {
            position: 'top',
        },
        title: {
            display: false,
            text: 'Chart.js Bar Chart'
        },
        scales: {
            yAxes: [{
                ticks: {
                    suggestedMin: 0,
                    suggestedMax: 100
                }
            }]
        }

    }
});
</script>

<script type="text/javascript">
    //var MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
    var color = Chart.helpers.color;
    var barChartData = {
        labels: [<?=$s_DataFecha?>],
                datasets: 
                [
                    {
                        label: 'SOLES',
                        backgroundColor: window.chartColors.red,
                        borderColor: window.chartColors.red,
                        data: 
                        [
                            <?=$s_DataMontoDia?>
                        ],
                        
                    }/*, {
            label: 'Dataset 2',
            backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
            borderColor: window.chartColors.blue,
            borderWidth: 1,
            data: [
                randomScalingFactor(),
                randomScalingFactor(),
                randomScalingFactor(),
                randomScalingFactor(),
                randomScalingFactor(),
                randomScalingFactor(),
                randomScalingFactor()
            ]
        }*/
        ]

    };

var ctx = document.getElementById( 'canvas10' ).getContext( '2d' );
window.myBar = new Chart(ctx, {
    type: 'bar',
    data: barChartData,
    options: {
        responsive: true,
        legend: {
            position: 'top',
        },
        title: {
            display: false,
            text: 'Chart.js Bar Chart'
        },
        scales: {
            yAxes: [{
                ticks: {
                    suggestedMin: 0,
                    suggestedMax: 100
                }
            }]
        }

    }
});
</script>
<script type="text/javascript">
    
    var color = Chart.helpers.color;
    var barChartData = {
        labels: [<?=$s_DescripcionPMV?>],
                datasets: 
                [
                    {
                        label: 'SOLES',
                        backgroundColor: window.chartColors.red,
                        borderColor: window.chartColors.red,
                        data: 
                        [
                            <?=$s_MontoFinalPMV?>
                        ],
                        
                    }/*, {
            label: 'Dataset 2',
            backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
            borderColor: window.chartColors.blue,
            borderWidth: 1,
            data: [
                randomScalingFactor(),
                randomScalingFactor(),
                randomScalingFactor(),
                randomScalingFactor(),
                randomScalingFactor(),
                randomScalingFactor(),
                randomScalingFactor()
            ]
        }*/
        ]

    };

var ctx = document.getElementById( 'canvas11' ).getContext( '2d' );
window.myBar = new Chart(ctx, {
    type: 'bar',
    data: barChartData,
    options: {
        responsive: true,
        legend: {
            position: 'top',
        },
        title: {
            display: false,
            text: 'Chart.js Bar Chart'
        },
        scales: {
            yAxes: [{
                ticks: {
                    suggestedMin: 0,
                    suggestedMax: 100
                }
            }]
        }

    }
});
</script>