Nuova funzione con chart.js

di il
6 risposte

Nuova funzione con chart.js

Ciao a tutti,

dal codice,  qui sotto riportato, che mi visualizza il grafico relativo, vorrei poter prelevare ogni singolo valore cliccanco su ogni elemento del grafico per poi passare il valore ad una nuova funzione js.

Mi basterebbe capire come implementare il codice javascript con un semplice alert che mi visualizza il singolo valore del grafico che é poi contenuto nell'array.

Grazie 1000

public static function getGrafico()
	{?>

	<div class="row"
		<?php
		$amonth = array(2000, 1500, 3000, 2850, 980, 4200, 7800);
		?>
			
		<div class="chartBox1">
			<canvas id="myChart" ></canvas>
		</div>
				
		<script>
		// Setup block
		//const amonth = <?php echo json_encode($amonth); ?>;
		const data = {
		labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange', 'Green'],
		datasets: [{
				label: 'Test my first chart',
				data: <?php echo json_encode($amonth); ?>,
				options: {
					animation: false
				},
				backgroundColor: [
					'rgba(255, 99, 132, 0.2)',
					'rgba(255, 159, 64, 0.2)',
					'rgba(255, 205, 86, 0.2)',
					'rgba(75, 192, 192, 0.2)',
					'rgba(54, 162, 235, 0.2)',
					'rgba(153, 102, 255, 0.2)',
					'rgba(201, 203, 207, 0.2)'
				],
				borderColor: [
					'rgb(255, 99, 132)',
					'rgb(255, 159, 64)',
					'rgb(255, 205, 86)',
					'rgb(75, 192, 192)',
					'rgb(54, 162, 235)',
					'rgb(153, 102, 255)',
					'rgb(201, 203, 207)'
				],
				borderWidth: 1
			}],
		};

			// Config block
			const config = {
				type: 'bar',
				data,
				options: {
					scales: {
						y: {
						beginAtZero: true
						}
					}
				}
			}

		// Render block
		const myChart = new Chart(
		"myChart",
		config
		);
		</script>
	</div>
	
	<?php
	} 

6 Risposte

  • Re: Nuova funzione con chart.js

    01/09/2023 - FrancyFede ha scritto:


    dal codice,  qui sotto riportato, che mi visualizza il grafico relativo, vorrei poter prelevare ogni singolo valore cliccanco su ogni elemento del grafico per poi passare il valore ad una nuova funzione js. […]

    La documentazione della libreria spiega tutto: leggi ad esempio qui.

  • Re: Nuova funzione con chart.js

    Se invece vuoi recuperare tramite constante config inclusa tramite constante myChart e relativo alert  dopo di esso, ti viene mostrato il tuo array

    alert(myChart.config.data.datasets[0]['data']);
  • Re: Nuova funzione con chart.js

    Grazie per le vostre risposte. Ho provato i vostri suggerimenti ma con esito negativo. 

    Vi chiedo di mostrarmi le righe di codice js da aggiungere al mio di codice che mi mivisualizzi in ogni singola bar, al click del mouse, il valore della stessa bar, con un semplice alert.

    es alert('Valore selezionato ‘+…………(valore del singolo elemento dell’array)).

    array(2000, 1500, 3000, 2850, 980, 4200, 7800);

    Grazie

  • Re: Nuova funzione con chart.js

    È la funzione alert dopo che crei la constante myChart. Sei sempre poco attenta quando leggi, per favore fai di più :)

    <!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="UTF-8">
    		<meta name="viewport" content="width=device-width, initial-scale=1">
    		<title>Test</title>
    		<style>
    			.chartBox {
    				width: 700px;
    			}
    		</style>
    		
    	</head>
    	<body>
    		<?php
    		$amonth = array(2000, 1500, 3000, 2850, 980, 4200);
    		?>
    		<div class="chartBox">
    			<canvas id="myChart" ></canvas>
    		</div>
    		
    		<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>	
    				
    		<script>
    		
    		// Setup block
    		//const amonth = <?php echo json_encode($amonth); ?>;
    		const data = {
    		labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
    			datasets: [{
    				label: '# of Votes',
    				data: <?php echo json_encode($amonth); ?>,
    				backgroundColor: [
    					'rgba(255, 99, 132, 0.2)',
    					'rgba(255, 159, 64, 0.2)',
    					'rgba(255, 205, 86, 0.2)',
    					'rgba(75, 192, 192, 0.2)',
    					'rgba(54, 162, 235, 0.2)',
    					'rgba(153, 102, 255, 0.2)',
    					'rgba(201, 203, 207, 0.2)'
    				],
    				borderColor: [
    					'rgb(255, 99, 132)',
    					'rgb(255, 159, 64)',
    					'rgb(255, 205, 86)',
    					'rgb(75, 192, 192)',
    					'rgb(54, 162, 235)',
    					'rgb(153, 102, 255)',
    					'rgb(201, 203, 207)'
    				],
    				borderWidth: 1
    			}]			
    		};
    		
    		// Config block
    		const config = {
    			type: 'bar',
    			data,
    			options: {
    				scales: {
    					y: {
    						beginAtZero: true
    					}
    				}
    			}
    		};
    		
    		// Render block
    		const myChart = new Chart(
    		"myChart",
    		config	
    		);
         alert(myChart.config.data.datasets[0]['data']);
    		</script>
    	</body>
    </html>
    
  • Re: Nuova funzione con chart.js

     :-(

    in realtà va bene anche codesto codice:

    document.getElementById("myChart").onclick = function (evt) {
    					var activePoints = myChart.getElementsAtEventForMode(evt, 'point', myChart.options);
    					var firstPoint = activePoints[0];
    					var label = myChart.data.labels[firstPoint._index];
    					var value = myChart.data.datasets[firstPoint._datasetIndex].data[firstPoint._index];
    					alert(label + ": " + value); // qui per prova visualizzo colore e valore singola bar
    					getNewAlert(value); // qui chiamo una nuova funzione passandogli come esempio il valore della bar selezionata.
    				};
    				
    Grazie per l'aiuto
  • Re: Nuova funzione con chart.js

    02/09/2023 - FrancyFede ha scritto:


    Vi chiedo di mostrarmi le righe di codice js da aggiungere al mio di codice che mi mivisualizzi in ogni singola bar, al click del mouse, il valore della stessa bar, con un semplice alert. […]

    Ricordati che qui si da una mano, ossia suggerimenti, esempi e simili, ma non si delega il proprio lavoro ad altri.

    Se si ha un problema, si riporta il codice, assieme all'errore e a tutti i dettagli, e assieme si ragiona sulla possibile soluzione, ma “vi chiedo di mostrarmi il codice” ovvero la cosiddetta “pappa pronta” è mal tollerata.

Devi accedere o registrarti per scrivere nel forum
6 risposte