Newsgroup: it.comp.lang.javascript
Titolo: ajax mi blocca canvas

ho una pagina dove genero dei grafici:
 
se la metto in included PHP non mi da nessun problema, ma se la faccio 
rigenerare mi viene richiamata da uno script ajax.
 
    <script>
        $(document).ready(function() {
            setInterval(function(){getUpdates()}, 2000); 
        });
 
        function getUpdates() {
 
      $("#cbox").load("chart.php");
 
        }
        </script>
 
 
non mi da output.
 
questa è la pagina, consigli?:
 
<!DOCTYPE HTML>
<html>
 
<head>
	<script type="text/javascript">
		window.onload = function () {
			var chart = new 
CanvasJS.Chart("chartContainer", {
				title: {
					text: "Site Traffic",
					fontSize: 30
				},
				animationEnabled: true,
				axisX: {
					gridColor: "Silver",
					tickColor: "silver",
					valueFormatString: 
"DD/MMM"
				},
				toolTip: {
					shared: true
				},
				theme: "theme2",
				axisY: {
					gridColor: "Silver",
					tickColor: "silver"
				},
				legend: {
					verticalAlign: 
"center",
					horizontalAlign: 
"right"
				},
				axisY:{
			stripLines:[
			{
				value:200,
				color: "red"
			}
			]
		},
				data: [
				{
					type: "line",
					showInLegend: true,
					lineThickness: 2,
					name: "Visits",
					markerType: "square",
					color: "#F08080",
					dataPoints: [
					{ x: new Date(2010, 
0, 3), y: 650 },
					{ x: new Date(2010, 
0, 5), y: 700 },
					{ x: new Date(2010, 
0, 7), y: 710 },
					{ x: new Date(2010, 
0, 9), y: 658 },
					{ x: new Date(2010, 
0, 11), y: 734 },
					{ x: new Date(2010, 
0, 13), y: 963 },
					{ x: new Date(2010, 
0, 15), y: 847 },
					{ x: new Date(2010, 
0, 17), y: 853 },
					{ x: new Date(2010, 
0, 19), y: 869 },
					{ x: new Date(2010, 
0, 21), y: 943 },
					{ x: new Date(2010, 
0, 23), y: 970 }
					]
				},
				{
					type: "line",
					showInLegend: true,
					name: "Unique 
Visits",
					color: "#20B2AA",
					lineThickness: 2,
 
					dataPoints: [
					{ x: new Date(2010, 
0, 3), y: 510 },
					{ x: new Date(2010, 
0, 5), y: 560 },
					{ x: new Date(2010, 
0, 7), y: 540 },
					{ x: new Date(2010, 
0, 9), y: 558 },
					{ x: new Date(2010, 
0, 11), y: 544 },
					{ x: new Date(2010, 
0, 13), y: 693 },
					{ x: new Date(2010, 
0, 15), y: 657 },
					{ x: new Date(2010, 
0, 17), y: 663 },
					{ x: new Date(2010, 
0, 19), y: 639 },
					{ x: new Date(2010, 
0, 21), y: 673 },
					{ x: new Date(2010, 
0, 23), y: 660 }
					]
				},
				{
					type: "line",
					showInLegend: true,
					name: "Unique 
Visits",
					color: "#20B2AA",
					lineThickness: 2,
 
					dataPoints: [
					{ x: new Date(2010, 
0, 3), y: 510 },
					{ x: new Date(2010, 
0, 5), y: 560 },
					{ x: new Date(2010, 
0, 7), y: 300 },
					{ x: new Date(2010, 
0, 9), y: 250 },
					{ x: new Date(2010, 
0, 11), y: 300 },
					{ x: new Date(2010, 
0, 13), y: 693 },
					{ x: new Date(2010, 
0, 15), y: 657 },
					{ x: new Date(2010, 
0, 17), y: 663 },
					{ x: new Date(2010, 
0, 19), y: 639 },
					{ x: new Date(2010, 
0, 21), y: 673 },
					{ x: new Date(2010, 
0, 23), y: 660 }
					]
				}
				],
				legend: {
					cursor: "pointer",
					itemclick: function 
(e) {
						if (typeof 
(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
 
e.dataSeries.visible = false;
						}
						else {
 
e.dataSeries.visible = true;
						}
 
chart.render();
					}
				}
			});
 
			chart.render();
		}
	</script>
	<script src="js/canvas/canvasjs.min.js"></script>     
	<title>CanvasJS Example</title>
</head>
<body>
	<div id="chartContainer" style="height: 400px; width: 100%;">
	</div>
</body>
</html>

 non mi da output.
 
Se "includi" qualcosa tramite AJAX non viene eseguito il JS contenuto.
 
Di solito non si includono pezzi di pagina con AJAX, ma si caricano dati, 
che poi gli script JS già presenti nella pagina usano per fare qualcosa.
 
Bye.

 Bye.
 
ok.. immaginavo.  quindi in questo caso scrivo tutto sulla pagina principale   
poi cosa  dovrei caricare l'arry dei dati contenuti i questa porzione di 
codice , o la prozione di codice intera?
 
  data: [              {
                                        type: "line",
                                        showInLegend: true,
                                        lineThickness: 2,
                                        name: "Visits",
                                        markerType: "square",
                                        color: "#F08080",
                                        dataPoints: [
           { x: new Date(2010, 0, 3), y: 650 },
           { x: new Date(2010, 0, 5), y: 700 },
           { x: new Date(2010, 0, 7), y: 710 },
           { x: new Date(2010, 0, 9), y: 658 },
           { x: new Date(2010, 0, 11), y: 734 },
           { x: new Date(2010, 0, 13), y: 963 },
           { x: new Date(2010, 0, 15), y: 847 },
           { x: new Date(2010, 0, 17), y: 853 },
           { x: new Date(2010, 0, 19), y: 869 },
           { x: new Date(2010, 0, 21), y: 943 },
           { x: new Date(2010, 0, 23), y: 970 }
                                        ]
                                },
  ]
 
 
 
ps. anche se probabilmente faccio un iframe e refresh in automatico, è 
sempre utile per imparare .
thank
enrico

   ]
 
Dipende da cosa vuoi fare, am se vuoi il massimo della personalizzazione 
server-side, io genererei tutto l'object di configurazione di Chart:
 
options.php:
 
<?php
 $options = [
  'title' => [
   'text': 'Site traffic',
   'fontSize': 30,
  ],
  ...
 ];
 
 header('Content-type: application/json');
 print(json_encode($options));
 
 
 
pagina.html:
 
<!doctype html>
<html>
 
<head>
 <title>CanvasJS Example</title>
</head>
 
<body>
 <div id="chartContainer" style="height: 400px; width: 100%;"></div>
</body>
 
<script src="js/canvas/canvasjs.min.js"></script>
<script>
 $(function() {
  $.get('options.php')
   .then(function(data) {
    var chart = new CanvasJS.Chart("chartContainer", data);
    chart.render();
   });
 });
</script>
 
</html>
 
 
Sono andato un po' a memoria con jQuery, forse c'è qualche bug, ma l'idea 
è quella.
 
Bye.

 Bye.
 
Ok. thank ci provo..
 
nb. cosa strana dal mio client, mi dice che il gruppo è chiuso  e non riesco più a spedire, son dovuto passare da google. 
 
qualche altra persona ha avuto dei problemi?
 
enrico