function desenhaLineChart (ctx, dados){

	var valores = new Array();
	var custom_labels = new Array();
	
	for( var i =0; i < Object.keys(dados).length; i++){
		valores.push( parseFloat(dados[i]['vl_dinheiro']).toFixed(2) );
		custom_labels.push(dados[i]['ds_label']);
	}
	
	var dados = {
	        labels: custom_labels,
	        datasets: [{
	            label: "Receitas R$",
	            //os 3 primeiros digitos representam a cor do Background, o Quarto a transparencia (0 todo transparente, 1 nada transparente)
	            backgroundColor: 'rgb(54, 162, 235, 0.8)',
	            borderColor: 'rgb(255, 99, 132)',
	            data: valores,
	            borderWidth: 1
	        }]
	    };

	var configuracoes = {
	        fontColor: "white",
	        tooltips: {
	            mode: 'x-axis'
	        },
	        elements: {
	            line: {
	                tension: 0
	            }
	        },
	        legend: {
	            display: true,
	            labels: {
	                fontColor: 'white'
	            }
	        },
	        title: {
	            display: true,
	            text: 'Vendas do Ano',
	            fontColor: 'white',
	            fontStyle: 'bold'
	        },
	        scales: {
	            yAxes: [{
	                ticks: {
	                    fontColor: "white",
	                    fontSize: 12,
	                    beginAtZero: true
	                }
	            }],
	            xAxes: [{
	                ticks: {
	                    fontColor: "white",
	                    fontSize: 14,
	                    stepSize: 1,
	                    beginAtZero: true
	                }
	            }]
	        },
	        // String - Template string for single tooltips
	        tooltipTemplate: "<%if (label){%><%=label %>: <%}%><%= value + ' %' %>",
	        // String - Template string for multiple tooltips
	        multiTooltipTemplate: "<%= 'R$ ' + value %>",
	};

	
	// Histórico de Vendas (ANO)
    new Chart(ctx, {
    // The type of chart we want to create
    type: 'line',
    // The data for our dataset
    data: dados,
    // Configuration options go here
    options: configuracoes
    });
}


//"ctx" é um ctx chartjs referenciando um canvas html. EX: document.getElementById("piechart_anual").getContext('2d');
//"dados" é um objeto que contenha vl_dinheiro, ds_label
//"titulo" é uma string com o nome dado ao gráfico
//"buraco" é o tamanho do buraco no centro. 0 é sem buraco, 1 é o maxímo do buraco.
function desenhaDoughnut(ctx, dados, titulo, buraco){

	var valores = new Array();
	var custom_labels = new Array();
	
	for( var i =0; i < Object.keys(dados).length; i++){
		valores.push( parseFloat(dados[i]['vl_dinheiro']).toFixed(2) );
		custom_labels.push(dados[i]['ds_label']);
	}

    data_geral = {  
        datasets: [{
            data: valores,                    
            backgroundColor: ["#0074D9", "#FF4136", "#2ECC40", "#FF851B", "#7FDBFF", "#B10DC9", "#FFDC00", "#001f3f", "#39CCCC", "#01FF70", "#85144b", "#F012BE", "#3D9970", "#111111", "#AAAAAA"]
        }],

        // These labels appear in the legend and in the tooltips when hovering different arcs
        labels: custom_labels

    };
    
    var opt_geral = {
        responsive: true,
        cutoutPercentage: buraco,
        rotation: -0.5 * Math.PI,
        circumference: 2 * Math.PI,
        animation: {
            animateRotate: false,
            animateScale: false
        },
        title: {
            display: true,
            text: titulo,
            fontColor: 'white',
            fontStyle: 'bold'
        },
        legend: {
            labels: {
                fontColor: 'white',
                fontStyle: 'bold'
            }
        } 
    };
    
    var pie_forma_pgto_anual = new Chart(ctx,{
        type: 'pie',
        data: data_geral,
        options: opt_geral
    });
}


//"ctx" é um ctx chartjs referenciando um canvas html. EX: document.getElementById("piechart_anual").getContext('2d');
//"dados" é um objeto que contenha vl_dinheiro, ds_label
//"titulo" é uma string com o nome dado ao gráfico
//"ds_eixo_x" nome no eixo X. Deve-se informar uma variável como no exemplo: var teste = ['Ponto 1', 'Ponto 2']'
function desenhaStackedBar(ctx, dados, titulo, ds_eixo_x){
	
	var data_geral = new Array();

	
	for( var i =0; i < Object.keys(dados).length; i++){

		var backgroundColor = ["#0074D9", "#FF4136", "#2ECC40", "#FF851B", "#7FDBFF", "#B10DC9", "#FFDC00", "#001f3f", "#39CCCC", "#01FF70", "#85144b", "#F012BE", "#3D9970", "#111111", "#AAAAAA"];

		var numero = parseFloat(dados[i]['vl_dinheiro']).toFixed(2);
		var labela = dados[i]['ds_label'];
		var backcolor = backgroundColor[i];
		
		var ar_dataset = {
				label: labela,
				data: [numero],
				backgroundColor: backcolor
		}

		data_geral.push(ar_dataset);
	}

	
	var stackedBar = new Chart(ctx, {
		type: 'bar',
		data: {
		    labels: [ds_eixo_x],
		    datasets: data_geral
		  },
        options: {
            scales: {
                xAxes: [{ 
                    	stacked: true,
                    	ticks: {
                            fontColor: "white",
                            fontSize: 12,
                            beginAtZero: true
                        }
                    }],
                yAxes: [{ 
                    	stacked: true, 
                    	ticks: {
                            fontColor: "white",
                            fontSize: 12,
                            beginAtZero: true
                        }
                    }]
            },
            title: {
                display: true,
                text: titulo,
                fontColor: 'white',
                fontStyle: 'bold'
            },
            legend: {
                labels: {
                    fontColor: "white",
                    fontSize: 12
                }
            }
        }
    });
    
	/*
	var stackedBar = new Chart(ctx, {
		type: 'bar',
		   data: {
		      labels: [ds_eixo_x], // responsible for how many bars are gonna show on the chart
		      // create 12 datasets, since we have 12 items
		      // data[0] = labels[0] (data for first bar - 'Standing costs') | data[1] = labels[1] (data for second bar - 'Running costs')
		      // put 0, if there is no data for the particular bar
		      datasets: [{
		         label: 'Washing and cleaning',
		         data: [8],
		         backgroundColor: '#22aa99'
		      }, {
		         label: 'Traffic tickets',
		         data: [2],
		         backgroundColor: '#994499'
		      }]
		   },
		   options: {
		      responsive: false,
		      legend: {
		         position: 'right' // place legend on the right side of chart
		      },
		      scales: {
		         xAxes: [{
		            stacked: true // this should be set to make the bars stacked
		         }],
		         yAxes: [{
		            stacked: true // this also..
		         }]
		      }
		   }
    });
    */
}
