Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > it.comp.lang.javascript > #8163 > unrolled thread

ajax mi blocca canvas

Started byEnrico Maria Chellini <bitit@bitit.it>
First post2017-01-02 20:03 +0100
Last post2017-01-04 06:30 -0800
Articles 5 — 3 participants

Back to article view | Back to it.comp.lang.javascript

Contents

  ajax mi blocca canvas Enrico Maria Chellini <bitit@bitit.it> - 2017-01-02 20:03 +0100
    Re: ajax mi blocca canvas Alessandro Pellizzari <shuriken@amiran.it> - 2017-01-03 07:56 +0000
      Re: ajax mi blocca canvas Enrico Maria Chellini <bitit@bitit.it> - 2017-01-03 10:23 +0100
        Re: ajax mi blocca canvas Alessandro Pellizzari <shuriken@amiran.it> - 2017-01-03 13:28 +0000
          Re: ajax mi blocca canvas gobitit@gmail.com - 2017-01-04 06:30 -0800

#8163 — ajax mi blocca canvas

FromEnrico Maria Chellini <bitit@bitit.it>
Date2017-01-02 20:03 +0100
Subjectajax mi blocca canvas
Message-ID<o4e85k$112f$1@gioia.aioe.org>
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>

[toc] | [next] | [standalone]

#8164

FromAlessandro Pellizzari <shuriken@amiran.it>
Date2017-01-03 07:56 +0000
Message-ID<ed13peFu6neU1@mid.individual.net>
In reply to#8163
Il Mon, 02 Jan 2017 20:03:17 +0100, Enrico Maria Chellini ha scritto:

> 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.
> ...
> 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.

[toc] | [prev] | [next] | [standalone]

#8165

FromEnrico Maria Chellini <bitit@bitit.it>
Date2017-01-03 10:23 +0100
Message-ID<o4fqiq$16ud$1@gioia.aioe.org>
In reply to#8164
> 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.

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

[toc] | [prev] | [next] | [standalone]

#8166

FromAlessandro Pellizzari <shuriken@amiran.it>
Date2017-01-03 13:28 +0000
Message-ID<ed1n7tF4c8uU1@mid.individual.net>
In reply to#8165
Il Tue, 03 Jan 2017 10:23:38 +0100, Enrico Maria Chellini ha scritto:

> 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 }
>                                         ]
>                                 },
>   ]

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.

[toc] | [prev] | [next] | [standalone]

#8167

Fromgobitit@gmail.com
Date2017-01-04 06:30 -0800
Message-ID<33f42661-fb67-4891-936e-33787dcb3502@googlegroups.com>
In reply to#8166
> <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.

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

[toc] | [prev] | [standalone]

Back to top | Article view | it.comp.lang.javascript

csiph-web