Grafiek

Status
Niet open voor verdere reacties.
P

peba25

Gebruiker
Lid geworden
6 jul 2009
Berichten
70
Hallo,

Ik probeer een grafiek welke op de x as een tijdslabel heeft en op de y as een spanningslabel te creeren.
Ik heb een kWh meter welke systeemvariabel doorgeeft welke ik in een HTML pagina kan presenteren.
Het weergeven van deze parameters ziet er alsvolgt uit:

<script> document.write (sysvar(_ULN[0]),AUTOUPDATE)</script>. Hiermee wordt de lijnspanning ULN aansluiting 0 weergegeven.
Kan ik dit in een grafiek plaatsen? Dit zodat je een realtime trend krijgt van de actuele spanning?

Ik heb op internet al heel wat voorbeelden gezien maar weet niet hoe ik deze variable hier in kan meenemen.

Alvast bedankt.
PS; in de toekomst is het de bedoeling dat zo'n grafiek ook een history heeft zodat je terug kan kijken naar evt spanningsdipjes etc. Dit met mysql waarschijnlijk.
 
Zo, dat noem ik nou 'ns een vraag waar m'n html oren stijl van overeind gaan staan.
Ok, laat ik je op weg helpen, voor m'n parameters gaan dwarrelen.
:cool:

http://proto5.thinkquest.nl/~kle0026/Grafieken/grafieken.html

Ik begrijp dat je hier niet zoveel aan hebt.
Het maken van een html script is een vak apart, hierin een afbeelding maken iets voor excel of java.
googel 'ns met "html grafieken".
 
Laatst bewerkt:
Bedankt voor de hints. Tot nu helaas nog geen goed resultaat. Veel voorbeelden gevonden voor php. maar helaas draait dit niet op het device.

Er zal toch wel ergens iets van een trendview in javascript beschikbaar zijn??

zo iets probeer ik te maken weer te geven op een HTML pagina:

(oeps... beetje vreemd voorbeeld van het internet geplukt....)

sentiment-trend.jpg


Ik heb in Excel een webquery gemaakt en daarmee kan ik alreeds een grafiek maken met de gegevens uit het apparaat. Het nadeel hiervan is dat dit met een interval gaat van minimaal 1 minuut. Dit zou ik graag iedere seconde willen zien? Is dit in vba van excel te maken?

Thanks.
 
Ik heb ergens een javascript gevonden om een polyline te tekeningen mbv javascript.
Nu bestaat dit uit een vaste array van waardes.
Hoe zou je deze vaste waardes voor de x as kunnen veranderen voor een tijd gebasseerde x as? namelijk een x as die iedere seconden optelt en daarbij een y waarde presenteerd.


// define x,y coordinate points to graph
MyLine.x = [0, 23, 88, 175, 262, 327, 350, 327, 262, 175, 88, 23, 0];
MyLine.y = [175, 262, 327, 350, 327, 262, 175, 88, 23, 0, 23, 88, 175];
MyLine.labels = ['', '', '', '', '', '', '', '', '', '', '', '', ''];
 
ja, uiteraard kan dat. Het zou echter wel helpen als je de gehele code geeft, of een link naar de pagina, want er zal wat aan gesleuteld moeten worden.
 
het valt best mee; het enige wat je doet is om de zoveel seconde je array met waardes aanpassen (allemaal 1tje naar 'links' 'opschuiven'), en dan opnieuw je grafiek tekenen.

[js]
var waardeLijst; // = [1,6,3,2]; // is de begin-lijst, global, wordt aangepast door drawGraph


function gUpdate()
{
drawGraph(_GET[nieuweWaarde]_); //geen idee waar je deze vandaan wilt halen,
//maargoed, het is maar een voorbeeld

setTimeout("gUpdate();",1000); //1000 = om de 1 seconde
}

function drawGraph(nieuweWaarde)
{
//1. schuif array 'waardeLijst' op, plak nieuweWaarde erachter
//2. laat nieuwe grafiek daadwerkelijk zien
}

gUpdate();
[/js]
 
Laatst bewerkt:
Vegras zei:
het valt best mee; het enige wat je doet is om de zoveel seconde je array met waardes aanpassen (allemaal 1tje naar 'links' 'opschuiven'), en dan opnieuw je grafiek tekenen.

[js]
var waardeLijst; // = [1,6,3,2]; // is de begin-lijst, global, wordt aangepast door drawGraph


function gUpdate()
{
drawGraph(_GET[nieuweWaarde]_); //geen idee waar je deze vandaan wilt halen,
//maargoed, het is maar een voorbeeld

setTimeout("gUpdate();",1000); //1000 = om de 1 seconde
}

function drawGraph(nieuweWaarde)
{
//1. schuif array 'waardeLijst' op, plak nieuweWaarde erachter
//2. laat nieuwe grafiek daadwerkelijk zien
}

gUpdate();
[/js]
Klik om te vergroten...

Bedankt Vegras,


ik ben bezig met jouw voorbeeld te verwerken in de onderstaande code. Dit zodat ik een graph krijg met de meetwaardes van afgelopen minuut.
De variabele uln0 bevat steeds de actuele spanning.

Hoe vul ik nu een array met de metingen van de afgelopen minuut?

Code: 
<body>
<div id= "uln0" </div>
<script>
document.write ( sysvar("_ULN[0]", 3, AUTOUPDATE) );
var uln0 = ( sysvar("_ULN[0]", 3, AUTOUPDATE) );
</script></td>


   <p>Voltage L1-N</p>
<div id="myChart1a" style="width:800px; height:400px;"></div>

<script type="text/javascript">
  var chart = new EJSC.Chart
 ("myChart1a", 
    { 
	
      show_legend: true, 
      show_messages: false, 
      axis_bottom: { caption: "Timeline", formatter: new EJSC.DateFormatter({ format_string: "HH:NN:SS" }) }, 
      axis_left: { caption: "" }, 
	  allow_zoom: true  
} 
  ); 
  
  var myData = new Array(); 
  var ydata = new Array();
  
  
  // Populate array   
  var x = (new Date()).getTime() - 101000; 
  var y; 
  for (var i = 0; i < 100; i++) { 
    x += 1000; 
    y = uln0; 
    myData.push([x, y]); 
  } 
   
  // Add a new line series and save a reference 
  var myLineSeries = chart.addSeries(new EJSC.LineSeries( 
    new EJSC.ArrayDataHandler( myData ),
		{
		color: 'rgb(0,0,255)', 
		lineWidth: 2 
		}	

  )); 
  
   
  function updateSeries() { 
     
    // Remove the first element 
    myData.splice(0,1); 
     
    // x = current time 
    x = (new Date()).getTime(); 
     
    //  Y value 
    y = uln0; 
     
    // Append a new point 
    myData.push([x, y]); 
     
// Give the new data to the ArrayDataHandler 
    myLineSeries.getDataHandler().setArray(myData); 
     
    // Reload the series 
    myLineSeries.reload(); 
  }    
  // Run updateSeries() every second 
  window.setInterval(updateSeries, 500);
</script>
   
</body>

</html>
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan