Como alimentar meu gráfico, usando charts, com mais de um dataset e buscando no banco de dados?

HTML

JavaScript

Google Chart

16/04/2020

Estou usando o charts para criar um gráfico no wix e queria alimentar o gráfico com uma tabela do banco de dados, tendo duas barras no gráfico: de "despesa" e de "receita".
Consegui fazer o gráfico colocando valores pré-definidos no dataset, mas quando tento fazê-lo pegar os arrays já gerados no meu código para alimentar o gráfico, não consigo acertar o código, alguém sabe como fazer?
Segue o meu código html:

<!DOCTYPE html>
<html lang="pt">
<head>
	<meta charset="UTF-8">
	<title></title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.bundle.min.js"></script>
</head>
<body onLoad="ready()">
	<canvas id="myChart" width="500" height="200"></canvas>
	<script>
	     var colors = ["#E24A4A", "#87C44A"];
		 var myChart = document.getElementById("myChart").getContext(''2d'');
		 var chartData = {
				 labels: [],
				 datasets: [{
					 label: ''Receita'',
					 data: [],
					 backgroundColor: colors[1],
					 borderWidth: 0
				 },
				 {
					 label: ''Despesa'',
					 data: [],
					 backgroundColor: colors[0],
					 borderWidth: 0
				 }
				 ]
			 };
		 
			if (myChart) {
					new Chart(myChart, {
						type: ''bar'',
						data: chartData,
						options: {
							tooltips: {
								mode: ''index'',
								intersect: false,
								titleMarginBottom: 10
							},
							scales: {
								xAxes: [{
									barPercentage: 0.9,
									categoryPercentage: 0.6
								}],
								yAxes: [{
									ticks: {
										beginAtZero: true
									}
								  }]
							},
							legend: {
								 display: true,
								 position: ''right'',
								
							}
						}
					});
					}
		 
		 window.onmessage = function(event){
			 if (event.data && Array.isArray(event.data)) {
				 
				 myChart.data.datasets[0].data[0] = event.data[0][0]; //aqui recebe a array de despesa
				 myChart.data.datasets[0].data[1] = event.data[1][0]; //aqui a de receita
				 chartData.data.labels = event.data[2][0];
                                 //no código do site eu uso o seguinte pra alimentar aqui:      let dados = [[despesa], [receita], [rotulos]];
		                                                                                                                         //$w("#graficoBarras").postMessage(dados);
				 chartData.update();
					
			 }
			 else {
				 console.log("HTML Code Element received a generic message:");
				 console.log(event.data);
			 }
		 };
		 
		 
		 
		 function handleClick(e){
			 var activeBars = myChart.getElementAtEvent(e);
			 var value = myChart.config.data.datasets[activeBars[0]._datasetIndex].data[activeBars[0]._index];
			 var label = activeBars[0]._model.label;
			 window.parent.postMessage({
				 "type":"click",
				 "label":label,
				 "value":value
			 } , "*");
		 }
		 
		 function ready(){
			window.parent.postMessage({"type":"ready"}, "*");
		 }
	</script>
</body>
</html>
Renata

Renata

Curtidas 0

Respostas

Vinicius

Vinicius

16/04/2020

Olá bom dia,

aqui tens um exemplo de como alimentar o chart com arrays:

https://codepen.io/vczb/pen/wvKGeOg?editors=1010

recomendo fortemente a leitura de:

https://www.mundojs.com.br/2018/01/18/iniciando-com-chart-js/#page-content

abraço espero ter ajudado
GOSTEI 0
POSTAR