Chiamare funzione ...

[maliba]

Non trovo un titolo appropriato per questo post.


In pratica il mio quesito è il seguente:

ho la pagina chiamante che ha questo script

$(document).ready(function() {
	// Load Google Chart API and callback to draw test graphs
	$.getScript('http://www.google.com/jsapi?autoload={%22modules%22%3A[{%22name%22%3A%22visualization%22%2C%22version%22%3A%221%22%2C%22packages%22%3A[%22corechart%22%2C%22geochart%22]%2C%22callback%22%3A%22DrawAllCharts%22}]}');
	// This need for correct resize charts, when box open or drag
	var graphxChartsResize;
	$(".box").resize(function(event){
		event.preventDefault();
		clearTimeout(graphxChartsResize);
		graphxChartsResize = setTimeout(DrawAllCharts, 500);
	});
	// Add Drag-n-Drop action for .box
	WinMove();
});

la funzione che mi crea il grafico è la seguente:

function DrawAllCharts(){
	//  Chart 1
	var chart1_data = [
		['Smartphones', 'PC', 'Notebooks', 'Monitors','Routers', 'Switches' ],
		['01.01.2014',  1234, 2342, 344, 232,131],
		['02.01.2014',  1254, 232, 314, 232, 331],
		['03.01.2014',  2234, 342, 298, 232, 665],
		['04.01.2014',  2234, 42, 559, 232, 321],
		['05.01.2014',  1999, 82, 116, 232, 334],
		['06.01.2014',  1634, 834, 884, 232, 191],
		['07.01.2014',  321, 342, 383, 232, 556],
		['08.01.2014',  845, 112, 499, 232, 731]
	];
	var chart1_options = {
		title: 'Sales of company',
		hAxis: {title: 'Date', titleTextStyle: {color: 'red'}},
		backgroundColor: '#fcfcfc',
		vAxis: {title: 'Quantity', titleTextStyle: {color: 'blue'}}
	};
	var chart1_element = 'google-chart-1';
	var chart1_type = google.visualization.ColumnChart;
	drawGoogleChart(chart1_data, chart1_options, chart1_element, chart1_type);
	//  Chart 2
	var chart2_data = [
		['Height', 'Width'],
		['Samsung',  74.5],
		['Apple',  31.24],
		['LG',  12.10],
		['Huawei',  11.14],
		['Sony',  8.3],
		['Nokia',  7.4],
		['Blackberry',  6.8],
		['HTC',  6.63],
		['Motorola',  3.5],
		['Other',  43.15]
	];
	var chart2_options = {
		title: 'Smartphone marketshare 2Q 2013',
		backgroundColor: '#fcfcfc'
	};
	var chart2_element = 'google-chart-2';
	var chart2_type = google.visualization.PieChart;
	drawGoogleChart(chart2_data, chart2_options, chart2_element, chart2_type);
	//  Chart 3
	var chart3_data = [
		['Age', 'Weight'],
		[ 8, 12],
		[ 4, 5.5],
		[ 11, 14],
		[ 4, 5],
		[ 3, 3.5],
		[ 6.5, 7]
	];
	var chart3_options = {
		title: 'Age vs. Weight comparison',
		hAxis: {title: 'Age', minValue: 0, maxValue: 15},
		vAxis: {title: 'Weight', minValue: 0, maxValue: 15},
		legend: 'none',
		backgroundColor: '#fcfcfc'
	};
	var chart3_element = 'google-chart-3';
	var chart3_type = google.visualization.ScatterChart;
	drawGoogleChart(chart3_data, chart3_options, chart3_element, chart3_type);
	//  Chart 4
	var chart4_data = [
		['ID', 'Life Expectancy', 'Fertility Rate', 'Region',     'Population'],
		['CAN',    80.66,              1.67,      'North America',  33739900],
		['DEU',    79.84,              1.36,      'Europe',         81902307],
		['DNK',    78.6,               1.84,      'Europe',         5523095],
		['EGY',    72.73,              2.78,      'Middle East',    79716203],
		['GBR',    80.05,              2,         'Europe',         61801570],
		['IRN',    72.49,              1.7,       'Middle East',    73137148],
		['IRQ',    68.09,              4.77,      'Middle East',    31090763],
		['ISR',    81.55,              2.96,      'Middle East',    7485600],
		['RUS',    68.6,               1.54,      'Europe',         141850000],
		['USA',    78.09,              2.05,      'North America',  307007000]
	];
	var chart4_options = {
		title: 'Correlation between life expectancy, fertility rate and population of some world countries (2010)',
		hAxis: {title: 'Life Expectancy'},
		vAxis: {title: 'Fertility Rate'},
		backgroundColor: '#fcfcfc',
		bubble: {textStyle: {fontSize: 11}}
	};
	var chart4_element = 'google-chart-4';
	var chart4_type = google.visualization.BubbleChart;
	drawGoogleChart(chart4_data, chart4_options, chart4_element, chart4_type);
	//  Chart 5
	var chart5_data = [
		['Country', 'Popularity'],
		['Germany', 200],
		['United States', 300],
		['Brazil', 400],
		['Canada', 500],
		['France', 600],
		['RU', 700]
	];
	var chart5_options = {
		backgroundColor: '#fcfcfc',
		enableRegionInteractivity: true
	};
	var chart5_element = 'google-chart-5';
	var chart5_type = google.visualization.GeoChart;
	drawGoogleChart(chart5_data, chart5_options, chart5_element, chart5_type);
	//  Chart 6
	var chart6_data = [
	['Year', 'Sales', 'Expenses'],
		['2004',  1000,      400],
		['2005',  1170,      460],
		['2006',  660,       1120],
		['2007',  1030,      540],
		['2008',  2080,      740],
		['2009',  1949,      690],
		['2010',  2334,      820]
	];
	var chart6_options = {
		backgroundColor: '#fcfcfc',
		title: 'Company Performance'
	};
	var chart6_element = 'google-chart-6';
	var chart6_type = google.visualization.LineChart;
	drawGoogleChart(chart6_data, chart6_options, chart6_element, chart6_type);
	//  Chart 7
	var chart7_data = [
	['Task', 'Hours per Day'],
		['Work',     11],
		['Eat',      2],
		['Commute',  2],
		['Watch TV', 2],
		['Sleep',    7]
	];
	var chart7_options = {
		backgroundColor: '#fcfcfc',
		title: 'My Daily Activities',
		pieHole: 0.4
	};
	var chart7_element = 'google-chart-7';
	var chart7_type = google.visualization.PieChart;
	drawGoogleChart(chart7_data, chart7_options, chart7_element, chart7_type);
	//  Chart 8
	var chart8_data = [
		['Generation', 'Descendants'],
		[0, 1], [1, 33], [2, 269], [3, 2013]
	];
	var chart8_options = {
		backgroundColor: '#fcfcfc',
		title: 'Descendants by Generation',
		hAxis: {title: 'Generation', minValue: 0, maxValue: 3},
		vAxis: {title: 'Descendants', minValue: 0, maxValue: 2100},
		trendlines: {
			0: {
				type: 'exponential',
				visibleInLegend: true
			}
		}
	};
	var chart8_element = 'google-chart-8';
	var chart8_type = google.visualization.ScatterChart;
	drawGoogleChart(chart8_data, chart8_options, chart8_element, chart8_type);
}

ora il punto è:
Dal momento che la funzione si trova su una pagina.js

avrei bisogno o di trasferire i dati estratti da un db mysql o trasferire la funzione direttamente sulla pagina che deve mostrarmi il grafico estraendo con php i dati che mi occorrono.
La strada più semplice mi sembra quella di spostare la funzione sulla pagina php in modo da estrarre i dati ed inserirli nella funzione....
E' vergognoso ma non so veramente come fare.
Grazie in anticipo a chi mi tenderà la mano...

[maliba]

forse la domanda più corretta sarebbe:
come faccio a chiamare la funzione DrawAllCharts passando la variabile chart1_data ?

[KillerWorm]

Non ho capito molto bene cosa vorresti ottenere.

come faccio a chiamare la funzione DrawAllCharts passando la variabile chart1_data ?

La domanda è: ti è permesso passare tale variabile a tale funzione?
Personalmente non so di cosa si tratta, ma immagino ci siano delle API con cui puoi interagire con tali funzioni.
Hai controllato sulla documentazione?

Il resto della richiesta non mi è chiaro. Se intendi recuperare al volo dei dati dal bd puoi usare Ajax in modo da averli a disposizione su javascript quando ti serve.

La strada più semplice mi sembra quella di spostare la funzione sulla pagina php in modo da estrarre i dati ed inserirli nella funzione....

Bene. Hai provato?

[maliba]

Alla fine basta solo un po di buona volontà. Ho semplicemente spostato la funzione sulla pagina PHP ed ho inserito le variabili che mi interessavano. Un passettino alla volta si va verso la luce. Non avevo mai fatto nulla del genere, ma prova e riprova e la soluzione si trova. Grazie a tutti di cuore...

[maliba]

bho. mi sono perso nuovamente. La storia è questa.
Premetto che si tratta di un template bello, comodo ma molto complicato per le mie modeste conoscenze.
Ho una pagina .js che raccoglie tutte le funzioni del sito.
L'index del template richiama, via ajax, la pagina dashboard.html
Mi sono tuffato in redirect e copia incolla di codice tirando fuori una cosa ancora più complicata e instabile...
Il punto è dunque questo:
L'API in questione è google chart
La mia soluzione (purtroppo provvisoria) era questa:

<script type="text/javascript">
function LaMiaPrimaFunzione(){
		//  Grafico a barre CONTATTI


	var chart1_data = [
          ['Provincia', 'Contatti', 'Relazioni']
		<?php do { ?>
		  ,['<?PHP echo $row_rs_stat['citta'];?>',<?PHP echo $row_rs_stat['tot_contatti_citta'];?>,<?PHP echo $row_rs_stat['tot_relazioni_citta'];?>]


		<?php } while ($row_rs_stat = mysql_fetch_assoc($rs_stat)); ?>
	];
	var chart1_options = {
		title: 'Contatti/Relazioni per provincia',
		hAxis: {title: 'Province', titleTextStyle: {color: 'red'}},
		backgroundColor: '#fcfcfc',
		vAxis: {title: 'Quantità', titleTextStyle: {color: 'red'}}
	};
	var chart1_element = 'google-chart-1';
	var chart1_type = google.visualization.ColumnChart;
	drawGoogleChart(chart1_data, chart1_options, chart1_element, chart1_type);
	
	////////////////////////////////////////////////////	
		//  Grafico a torta RELAZIONI
	////////////////////////////////////////////////////	
	
	var chart2_data = [
		  ['Height', 'Width']
		<?php do { 
				mysql_select_db($database_crm4you, $crm4you);
				$query_ident_chart2 = "SELECT stato FROM menu_stato WHERE id = ".$row_rs_chart2['stato']."";
				$ident_chart2 = mysql_query($query_ident_chart2, $crm4you) or die(mysql_error());
				$row_ident_chart2 = mysql_fetch_assoc($ident_chart2);
				$totalRows_ident_chart2 = mysql_num_rows($ident_chart2);
		?>
		  ,['<?php echo $row_ident_chart2['stato']?>', <?php echo $row_rs_chart2['tot']?>]
		<?php } while ($row_rs_chart2 = mysql_fetch_assoc($rs_chart2)); ?>
	];
	var chart2_options = {
		title: 'Stato contatti',
		backgroundColor: '#fcfcfc'
	};
	var chart2_element = 'google-chart-2';
	var chart2_type = google.visualization.PieChart;
	drawGoogleChart(chart2_data, chart2_options, chart2_element, chart2_type);
	};
</script>

Il tutto lo avevo inserito in una pagina php e per un po di tempo ha vunzionato.
Ora mi chiedevo:
come faccio a chiamare le variabili php e impostarle come parametri nella funzione js?
In effetti vorrei risistemare la funzione nel foglio js, recuperare le variabili sulla pagina php e mandare in output su dashboard.html