CanvasJs - dva grafy – JavaScript, AJAX, jQuery – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu

CanvasJs - dva grafy – JavaScript, AJAX, jQuery – Fórum – Programujte.comCanvasJs - dva grafy – JavaScript, AJAX, jQuery – Fórum – Programujte.com

 

Martin
~ Anonymní uživatel
1542 příspěvků
7. 2. 2017   #1
-
0
-

Ahojte, využil som z CanvasJs tento graf: http://canvasjs.com/editor/?id=http://canvasjs.com/example/gallery/line/site_traffic/

Mám vytvorené 2 JS súbory s rozdielnymi chartami, teda Chart1 a Chart2 a aj rôznymi Containermi chartDayPresContainer a chartDayTempContainer. V jednom charte vypisujem graf vývoja teplôt za deň a v druhom vypisujem vývoj tlaku počas dňa. Avšak tieto grafy sa vypisujú v HTML (PHP) cez div, kde jeho id je názov containera grafu. Ak mám includnutý jeden .js súbor a jeden graf vypisujem, ide to ok. Ak chcem vypísať 2 grafy a includujem 2 subory je problém a nejde to, vypíše vždy iba ten posledný.
Nič nehlási ani console v Chrome. Skúšal som ich dať na jeden .js súbor a taktiež problém. Skúšal som solutions priamo z ich stránky ale všetko doposiaľ bolo neúspešné. Vedel by mi niekto pomôcť? Skúšal som meniť chart a taktiež aj container presne tak, ako to majú na stránke.  Ešte .. vedel by mi tam niekto do toho .js kodu vpísať to, aby mi ten kód ukazoval aj čas, kedy bol ten výsledok zaznamenaný, example posielam ako obrázok?
vyvoj.php: 

</head>
<?php include("connect.php"); 
  $todaytemperaturesoutsideall = mysqli_query($con,"SELECT temperature, time FROM TempOutside WHERE date(time) = CURDATE() ORDER by time") or die(mysqli_error($con));         
    $todaytemperaturesoutsideallJs=array();                                                     
           while($row = mysqli_fetch_assoc($todaytemperaturesoutsideall)){
             $date = strtotime($row['time']);
	 $todaytemperaturesoutsideallJs[]='{ x: new Date('.date('Y,n,d,H,i', $date).'), y: '.round($row['temperature'],2).' }'; }
   $todaytemperatureslivingroomall = mysqli_query($con,"SELECT temperature, time FROM TempLivingRoom WHERE date(time) = CURDATE() ORDER by time") or die(mysqli_error($con));         
    $todaytemperatureslivingroomallJs=array();                                                     
           while($row = mysqli_fetch_assoc($todaytemperatureslivingroomall)){
             $date = strtotime($row['time']);
	 $todaytemperatureslivingroomallJs[]='{ x: new Date('.date('Y,n,d,H,i', $date).'), y: '.round($row['temperature'],2).' }'; }
   $todaytemperaturesbedroomall = mysqli_query($con,"SELECT temperature, time FROM TempBedRoom WHERE date(time) = CURDATE() ORDER by time") or die(mysqli_error($con));         
    $todaytemperaturesbedroomallJs=array();                                                     
           while($row = mysqli_fetch_assoc($todaytemperaturesbedroomall)){
             $date = strtotime($row['time']);
	 $todaytemperaturesbedroomallJs[]='{ x: new Date('.date('Y,n,d,H,i', $date).'), y: '.round($row['temperature'],2).' }'; }
   
   
   
   
    $todaypressureoutsideall = mysqli_query($con,"SELECT pressure, time FROM PressureOutside WHERE date(time) = CURDATE() ORDER by time") or die(mysqli_error($con));         
    $todaypressureoutsideallJs=array();                                                     
           while($row = mysqli_fetch_assoc($todaypressureoutsideall)){
             $date = strtotime($row['time']);
	 $todaypressureoutsideallJs[]='{ x: new Date('.date('Y,n,d,H,i', $date).'), y: '.round($row['pressure'],2).' }'; }
 
                                           

         

?>

<script>         
window.todaytemperaturesoutsideallJs = [<?= implode(',', $todaytemperaturesoutsideallJs) ?>];
window.todaytemperatureslivingroomallJs = [<?= implode(',', $todaytemperatureslivingroomallJs) ?>];
window.todaytemperaturesbedroomallJs = [<?= implode(',', $todaytemperaturesbedroomallJs) ?>];
window.todaypressureoutsideallJs = [<?= implode(',', $todaypressureoutsideallJs) ?>];
</script> 
<script src="js/vyvoj_teplot.js"></script>
<script src="js/vyvoj_tlaku.js"></script>
<script src="js/canvasjs.min.js"></script>
<script src="js/jquery.canvasjs.min.js"></script>
<body>
<ul class="topnav">
  <li><a href="index.php"><img src="img/gauge.png" alt="Aktuálne merania"></a></li>
  <li><a href="zaznamy.php"><img src="img/newspaper.png" alt="newspaper.png, 935B" title="Záznamy" height="64" width="64"></a></li>
  <li><a  href="rekordy.php"><img src="img/trophy.png" alt="trophy.png, 1,9kB" title="Rekordy" height="64" width="64"></a></li>
  <li><a class="active" href="vyvoj.php"><img src="img/chart.png" alt="chart.png, 1,2kB" title="Vývoj" height="64" width="64"></a></li>
  <li><a href="rele.php"><img src="img/switch.png" alt="switch.png, 1,9kB" title="Relé" height="64" width="64"></a></li>
   <li><a href="pristroje.php"><img src="img/settings.png" alt="settings.png, 1,5kB" title="Prístroje" height="64" width="64"></a></li>
    <li><a href="prognoza.php"><img src="img/sunny.png" alt="sunny.png, 1,2kB" title="Prognóza" height="64" width="64"></a></li>
   <li class=right><a href="kontakt.php"><img src="img/chat.png" alt="chat.png, 1,2kB" title="Kontakt" height="64" width="64"></a></li>
 </ul>                                          

   <div style="padding:0 16px;">

 <br>
<div id="chartDayTempContainer" style="height: 300px; width: 100%;"></div><br>
<div id="chartDayPresContainer" style="height: 300px; width: 100%;"></div>
  

</body>    
</html>


vyvoj_teplot.js:
 

window.onload = function () {
		var chart = new CanvasJS.Chart("chartDayTempContainer",
		{

			title:{
				text: "Vývoj teplôt chronologicky - Dnes",
				fontSize: 30
			},
                        animationEnabled: true,
			axisX:{
            
				gridColor: "Silver",
				tickColor: "silver",
        valueFormatString: "HH:mm"

			},                        
                        toolTip:{
                          shared:true
                        },
			
      theme: "theme2",
			axisY: {
				gridColor: "Silver",
				tickColor: "silver"
			},
			legend:{                               
				verticalAlign: "center",
				horizontalAlign: "right"
			},
			data: [
			{     
				type: "line",
				showInLegend: true,
				lineThickness: 2,
				name: "Von",
				markerType: "square",
				color: "red",
				dataPoints: window.todaytemperaturesoutsideallJs
			},
      {     
				type: "line",
				showInLegend: true,
				lineThickness: 2,
				name: "Obývačka",
				markerType: "square",
				color: "blue",
				dataPoints: window.todaytemperatureslivingroomallJs
			},
      {     
				type: "line",
				showInLegend: true,
				lineThickness: 2,
				name: "Spálňa",
				markerType: "square",
				color: "green",
				dataPoints: window.todaytemperaturesbedroomallJs
			},
			

			
			],
          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(); 

  
}

vyvoj_tlaku.js:
 

window.onload = function () {
		var chart1 = new CanvasJS.Chart("chartDayPresContainer",
		{

			title:{
				text: "Vývoj tlaku chronologicky - Dnes",
				fontSize: 30
			},
                        animationEnabled: true,
			axisX:{
            
				gridColor: "Silver",
				tickColor: "silver",
        valueFormatString: "HH:mm"

			},                        
                        toolTip:{
                          shared:true
                        },
			
      theme: "theme2",
			axisY: {
				gridColor: "Silver",
				tickColor: "silver"
			},
			legend:{                               
				verticalAlign: "center",
				horizontalAlign: "right"
			},
			data: [
			{     
				type: "line",
				showInLegend: true,
				lineThickness: 2,
				name: "Von",
				markerType: "square",
				color: "red",
				dataPoints: window.todaypressureoutsideallJs
			},
     
			

			
			],
          legend:{
            cursor:"pointer",
            itemclick:function(e){
              if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
              	e.dataSeries.visible = false;
              }
              else{
                e.dataSeries.visible = true;
              }
              chart1.render();
            }
          }
		});

chart1.render(); 

  
}

Připojen obrázek.










Ďakujem.

Nahlásit jako SPAM
IP: 84.16.53.–
peter
~ Anonymní uživatel
3619 příspěvků
7. 2. 2017   #2
-
0
-

a = 1
a = 2
alert(a) //vypise 2
window.onload = ...
window.onload = ...
Prohlizec logicky pak po spusteni window.onload(); provede posledni funkci, kterou do toho vlozis.

Co s tim? Dat to oboje do jedne funkce.
window.onload = function () {...graf1();} // a
window.onload = function () {...graf2();} // prepsat jako
window.onload = function () {...graf1(); ...graf2();}

Nebo muzes kazdy z grafu dat do samostatneho iframe. Kod pak muze zustat stejny.

Nahlásit jako SPAM
IP: 2001:718:2601:26c:3dbe:91...–
Martin
~ Anonymní uživatel
1542 příspěvků
7. 2. 2017   #3
-
0
-

 

#2 peter
http://arduino.php5.sk/vyvoj.php

Nefunguje to. Je to na tej stránke, píše chybu v console: Unexpected token... tieto grafy sú ''Trial'' môže byť problém, že môžem použiť maximálne 1 graf? Neviem už kde by mohla byť chyba. Nahral som na stránku .js súbor, takže si to môžeš mrknut

Nahlásit jako SPAM
IP: 84.16.53.–
Martin
~ Anonymní uživatel
1542 příspěvků
7. 2. 2017   #4
-
0
-

Opravil som to! Ďakujem za pomoc

Nahlásit jako SPAM
IP: 84.16.53.–
peter
~ Anonymní uživatel
3619 příspěvků
7. 2. 2017   #5
-
0
-

Ted uz spustit jen validator a zbavit se z html nesmyslu, jako meta tagy. Nechat jen jmeno, mail, rok. Ridim se pravidlem, ze na strance by mel byt pomer text bez tagu / cely soubor v nejakem rozumnem pomeru. Idealne 1:1, ale da se tusim docili 4/10. Ti lepsi i 8/10

Nahlásit jako SPAM
IP: 2001:718:2601:26c:3dbe:91...–
Zjistit počet nových příspěvků

Přidej příspěvek

Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!

Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 16 hostů

Podobná vlákna

C# a grafy — založil Svist

Grafy — založil Pavel

GUI - Grafy — založil Jirka

LaTeX: SK + grafy — založil jozef

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032020 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý