Untitled

<html>
<head>
	<title> Gráficos com anuais</title>
	<meta charset='utf8'>
	<link href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.css" rel="stylesheet">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js"></script>
</head>
<body>
	<h1>Receita Líquida</h1>
	<div style="width: 600px; height:320px;">
		<canvas id="canvas_receita_liquida"></canvas>
	</div>
	<h1>Custos</h1>
	<div style="width: 600px; height:320px;">
		<canvas id="canvas_custo"></canvas>
	</div>
<script>


dados = configuraDados(getDados('data'));
montaGraficos(dados);
//Criamos uma função com a criação do gráfico, para que possamos reutilizar o código.
//informamos para a função via parametro qual é a div onde ficará o gráfico e qual o tipo de gráfico queremos gerar.
//usaremos o tipo informado no lado php, para determinar qual query será executada
function gerarGrafico(canvas, titulo, p_datasets){
console.log(p_datasets);
var myChart = new Chart(canvas, {
    type: 'bar',
    options: {
        title: {
            display: true,
            text: titulo,
        }
    },
    data: {
        labels: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro','Dezembro'],
        datasets: [...p_datasets],
          	fill: false
          }
});
}

function config_dataset(plabel, pData){
	return {
        	backgroundColor: 'rgba(0, 0, 0, 0.5)' ,
        	borderColor: 'rgba(0, 0, 0, 0.5)',
            label: plabel,
            data: pData
        	};
}


function montaGraficos(dados)
{
	dataSetArgumentos = [];
	var canvas_receita_liquida = document.getElementById('canvas_receita_liquida').getContext('2d');
	pDataset = config_dataset('Receita Liquida', dados.rec_liq);
	dataSetArgumentos.push(pDataset);
	gerarGrafico(canvas_receita_liquida, 'Receita Liquida', dataSetArgumentos);

	dataSetArgumentos = [];
	var canvas_custo = document.getElementById('canvas_custo').getContext('2d');
	pDatasetCusto = config_dataset('Custo', dados.custo);
	pDatasetPesoCusto = config_dataset('Peso custo', dados.peso_custo);
	pDatasetPesoCusto.type = 'line';
	dataSetArgumentos.push(pDatasetCusto, pDatasetPesoCusto); ///= [pDatasetCusto, pDatasetPesoCusto];
	//console.log(dataSetArgumentos);
	gerarGrafico(canvas_custo, 'Custo', dataSetArgumentos);


}

function getDados(info)
{
	//var lista = [];
	let xhr = new XMLHttpRequest();
	xhr.open("POST", "php/graficos_anuais/graficos_anuais.php", false);
	xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
	xhr.addEventListener("load", function()
	{
		if(xhr.status == 200)
		{
			lista = JSON.parse(xhr.responseText);
		}
		else
			console.log("não encontrou");
	});
	xhr.send(encodeURI("info=" + info));

	return lista;
}


function configuraDados(dados_json){ // separa o json em arrays individuais para cada data-set;

	let rec_liq = [];
	let custo = [];
	let peso_custo = [];
	let despesa = [];
	let peso_despesa = [];
	let lucro = [];

	Object.entries(dados_json).forEach(([key, value]) =>
	{
		if(key.indexOf("rec_liq_") != -1)
			rec_liq.push(value);
		if(key.indexOf("custo_puro") != -1)
			custo.push(value);
		if(key.indexOf("peso_custo_") != -1)
			peso_custo.push(value);
		if(key.indexOf("despesa_pura") != -1)
			despesa.push(value);
		if(key.indexOf("peso_despesa_") != -1)
			peso_despesa.push(value);
		if(key.indexOf("lucro_") != -1)
			lucro.push(value);
	});

	return  {rec_liq:rec_liq, custo:custo, peso_custo:peso_custo, despesa:despesa, peso_despesa:peso_despesa, lucro:lucro };
}
</script>
</body>
</html>