Hallo, ich versuche mit Canvas Ein Diagramm aus Javascript Daten aufzubauen. Das Klappt auch. Aber ich möchte die Datenbasis durch andere externe JS Dateien ändern. Auch das klappt bei dem unten angefügten Code. Allerdings werden meine JS Daten erst beim 2. Laden (klick auf das Digramm oder den Hauptseite Button) aktualisiert die Aktualisierung erfolgt über document.getElementsByTagName('head')[0].appendChild(jsTag); in der funktion datei_laden() Hat jemand eine Idee was ich falsch mache?
Anbei mein Code in der HTML Datei
dazu gibt es dann externe JS Dateien wie diese (alle_2016.js)
Anbei mein Code in der HTML Datei
HTML:
<script type="text/javascript" src="alle_2016.js"> // fak1/f1_2016.js alle_2016.js
</script>
<script type="text/javascript">
if(window.addEventListener){
addEventListener("load", drawCanvas, false);}
else{
attachEvent("onload", drawCanvas);}
function drawCanvas(){
var canvas = document.getElementById('solardaten');
if(canvas.getContext){
var context = canvas.getContext('2d');
context.fillStyle = "rgb(255, 255, 255)"; // Weisser Hintergrund
context.fillRect(0, 0, canvas.width, canvas.height);
context.strokeStyle = "rgb(0, 0,0,8)"; // Schwarzer rahmen
context.strokeRect(0, 0, canvas.width, canvas.height); // Rechteck nur mit Rahmen
context.strokeRect(0, 0, canvas.width, canvas.height);
context.fillStyle = "rgb(0, 0, 0)";
context.fillRect(50, 30, 1, 332); // Senkrecht
context.fillRect(50, 362, 630, 1); // Wagerecht
if (daten != 0){ // Wenn Daten vorhanden
var xpos = 600 /daten; // variable für x Position beginn der Zeichnung
var breite = xpos - (xpos /4);
var abstand = breite / 2;
context.fillStyle = "rgb( 255, 219 , 50)";
context.fillRect((abstand + 50) , 360, breite , ((pvdaten[0]/10) *-1));
for (var i = 1 ; i< daten; i++ ){
context.fillStyle = "rgb( 255, 219 ,"+ (50+i) +")"; // gelbe balken mit 1 Farbunterschied
context.fillRect( ((i* xpos) + abstand + 50) , 360, breite , ((pvdaten[i]/10) *-1)); // x Position , y position, breite, länge
}
context.fillStyle = 'black';
context.font = '10pt Arial';
context.textAlign = 'center';
context.textBaseline = 'middle';
context.fillText(zeit[0] , (breite + 50), 380);
for (var i = 1 ; i< daten; i++ ){
context.fillText(zeit[i] , ((i* xpos) + breite + 50) , 380);
}
}
context.textAlign = 'center';
context.fillRect(50, 310, 630, 1);
context.fillText('0500', 20, 310);
context.fillRect(50, 260, 630, 1);
context.fillText('1000', 20, 260);
context.fillRect(50, 210, 630, 1);
context.fillText('1500', 20, 210);
context.fillRect(50, 160, 630, 1);
context.fillText('2000', 20, 160);
context.fillRect(50, 110, 630, 1);
context.fillText('2500', 20, 110);
context.fillRect(50, 60, 630, 1);
context.fillText('3000', 20, 60);
context.fillText( 'PV Anlagendaten ' + datum + ' , ' + anlage, 300, 20);
}
}
function position(){
var element = document.getElementById('solardaten');
if(element.getContext) {
var context = element.getContext('2d');
var imgData;
var xx = maus_pos('x'); // x Mausposition im Canvas
var yy = maus_pos('y');
imgData = context.getImageData(xx , yy , 1, 1); // Farbe der Position ermitteln, Farbe (RG)B ist ab 50 immer 1 + je Balken
}
if (imgData.data[2] > 49){ // Wenn der farbe > 50 ist
var oeffnedatei = pfad[imgData.data[2] -50] + "/" + pfad[imgData.data[2] -50]+ "_" + datum + ".js";
datei_laden(oeffnedatei);
drawCanvas();
}
}
function maus_pos(r) {
context = document.getElementById('solardaten');
if (context.getBoundingClientRect) { // Internet Explorer, Firefox 3+, Google Chrome, Opera 9.5+, Safari 4+
var rect = context.getBoundingClientRect (); // Anfangskoordinaten des Canvas
x = rect.left;
y = rect.top;
w = rect.right - rect.left; // wird nicht benötigt
h = rect.bottom - rect.top; // wird nicht benötigt
}
else { alert ("Your browser does not support this example!"); }
evd = window.event;
var rpos = 0;
var pos = { left: evd.clientX, top: evd.clientY }; // Aktuell Mausposition im Fenster
if (r == 'x' ){ rpos = pos.left - x; }
if ( r == 'y'){ rpos = pos.top - y; }
return rpos;
}
function datei_laden(datei){
jsTag = document.createElement('script') ; // Code der die Javadatei im Häder ersetzt
jsTag.type = "text/javascript";
jsTag.src = datei;
document.getElementsByTagName('head')[0].appendChild(jsTag); // add dom node to head
document.getElementById("Ansicht").innerHTML = jsTag.type; // Anzeige von daten
document.getElementById("Dateiname").innerHTML = jsTag.src;
drawCanvas();
}
</script>
<body>
<h1>Solaranlagenleistung</h1>
<canvas id="solardaten" width ="700" height ="400" onclick = position()>
Sorry no Canvas
</canvas>
<br>
<button onclick="datei_laden('alle_2016.js')"> Hauptseite </button>
<p id="Dateiname">Dateiname</p>
<p id="Ansicht">Monat</p>
</body>
</html>dazu gibt es dann externe JS Dateien wie diese (alle_2016.js)
Code:
// JavaScript Document
var meinpfad="pv_daten"; // hauptverzeichnis , name , 1 verzeichnis , name, 2 verzeichnia
var dateien = ["2016" , "2016"]; // Name der Dateien (davor / danach)
var datum = "2016";
var anlage = "Alle Anlagendaten"; // String für Jahr / Monat / Tag // Anlage
var daten = 3;
var pfad = [ "coch9" , "coch21" , "fak1"] ; // Anzahl gesammelter Daten
var zeit = [ "Cochst Gtb 9", "Cochst Gtb 21", "Falkenberg 1"];
var einheit = "x 10 KW/h" ;
var pvdaten = [ 2000, 1200, 380]; // PV Leistung
