TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
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();
}
Ďakujem.
Nahlásit jako SPAM
IP: 84.16.53.–
Zjistit počet nových příspěvků
