<div class="box-body">
		<div class="row">
            <div class="col-md-12">
              <div class="box">
                <div class="box-header with-border">
                  <h3 class="box-title">Statistiche <?php echo date('Y');?></h3>
                  <div class="box-tools pull-right">
                    <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                    <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
                  </div>
                </div>
                <div class="box-body">
                  <div class="row">
                    <div class="col-md-12">
                      <p class="text-center">
                        <strong>Scarico e Carico <?php echo date('Y');?></strong>
						 
                      </p>
                    <div class="chart">
						<canvas id="barChart" style="height:200px"></canvas>
					</div>
                    </div>
                  
                  </div>
                </div>
                <div class="box-footer">                 
                </div>
              </div>
            </div>
		</div>
	</div>
		

 <script src="plugins/chartjs/Chart.min.js"></script>
    <script>
      $(function () {
        
        var areaChartData = {
          labels: ["Gennaio", "Febbraio", "Marzo", "Aprile", "Maggio", "Giugno", "Luglio","Agosto","Settembre","Ottobre","Novembre","Dicembre"],
          datasets: [
            {
              label: "Acquisti",
              fillColor: "rgba(210, 214, 222, 1)",
              strokeColor: "rgba(210, 214, 222, 1)",
              pointColor: "rgba(210, 214, 222, 1)",
              pointStrokeColor: "#c1c7d1",
              pointHighlightFill: "#fff",
              pointHighlightStroke: "rgba(220,220,220,1)",
              data: [<?php echo sum_purchases_month(1,$records[0]['id']);?>, <?php echo sum_purchases_month(2,$records[0]['id']);?>, <?php echo sum_purchases_month(3,$records[0]['id']);?>, 
			  <?php echo sum_purchases_month(4,$records[0]['id']);?>, <?php echo sum_purchases_month(5,$records[0]['id']);?>, <?php echo sum_purchases_month(6,$records[0]['id']);?>, 
			  <?php echo sum_purchases_month(7,$records[0]['id']);?>,<?php echo sum_purchases_month(8,$records[0]['id']);?>,<?php echo sum_purchases_month(9,$records[0]['id']);?>,
			  <?php echo sum_purchases_month(10,$records[0]['id']);?>,<?php echo sum_purchases_month(11,$records[0]['id']);?>,<?php echo sum_purchases_month(12,$records[0]['id']);?>]
            },
            {
              label: "Vendite",
              fillColor: "rgba(60,141,188,0.9)",
              strokeColor: "rgba(60,141,188,0.8)",
              pointColor: "#3b8bba",
              pointStrokeColor: "rgba(60,141,188,1)",
              pointHighlightFill: "#fff",
              pointHighlightStroke: "rgba(60,141,188,1)",
              data: [<?php echo sum_sales_month(1,$records[0]['id']);?>, <?php echo sum_sales_month(2,$records[0]['id']);?>, <?php echo sum_sales_month(3,$records[0]['id']);?>,
			  <?php echo sum_sales_month(4,$records[0]['id']);?>, <?php echo sum_sales_month(5,$records[0]['id']);?>, <?php echo sum_sales_month(6,$records[0]['id']);?>, 
			  <?php echo sum_sales_month(7,$records[0]['id']);?>,<?php echo sum_sales_month(8,$records[0]['id']);?>,<?php echo sum_sales_month(9,$records[0]['id']);?>,
			  <?php echo sum_sales_month(10,$records[0]['id']);?>,<?php echo sum_sales_month(11,$records[0]['id']);?>,<?php echo sum_sales_month(12,$records[0]['id']);?>]
            }
          ]
        };
        //-------------
        //- BAR CHART -
        //-------------
        var barChartCanvas = $("#barChart").get(0).getContext("2d");
        var barChart = new Chart(barChartCanvas);
        var barChartData = areaChartData;
        barChartData.datasets[1].fillColor = "#00a65a";
        barChartData.datasets[1].strokeColor = "#00a65a";
        barChartData.datasets[1].pointColor = "#00a65a";
        var barChartOptions = {
          scaleBeginAtZero: true,        
          scaleShowGridLines: true,         
          scaleGridLineColor: "rgba(0,0,0,.05)",        
          scaleGridLineWidth: 1,        
          scaleShowHorizontalLines: true,        
          scaleShowVerticalLines: true,         
          barShowStroke: true,       
          barStrokeWidth: 2,         
          barValueSpacing: 5,         
          barDatasetSpacing: 1,     
          legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].fillColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>",
          //Boolean - whether to make the chart responsive
          responsive: true,
          maintainAspectRatio: true
        };

        barChartOptions.datasetFill = false;
        barChart.Bar(barChartData, barChartOptions);
      });
	  
		
	  
    </script>