Veranderlijke gegevens van website overbrengen in grafiek

240diesel
Gepost zaterdag 2 november 2019 20:56:20

Goedenavond,

graag roep ik jullie hulp in om zo simpel mogelijk de moderne variant te maken van dit wonderschone apparaat;

Wat heb ik zelf al tot stand kunnen brengen?
Ik heb een datataker DT80 welke de meetgegevens verzameld en op een ingebouwde website weergeeft;

Die gegevens laat ik iedere 3 minuten verversen en ik zou heel graag een koppeling maken welke zoiets tot stand kan brengen;

Een grafiek welke net als het schrijvende apparaat van de bovenste foto steeds ververst zodat ik "realtime" de waarden kan observeren.

Het liefst heb ik iets dat heel dicht bij de bron blijft zonder gelijk gebruik te moeten maken van gigantische programma's waarvoor ik ook weer een week moet studeren. Denk nu niet dat ik lui aangelegd ben, het voortraject heeft al heel wat hoofdbrekens gekost en soms hoop je gewoon op een meevaller.

Al vast hartelijk bedankt, groet Jan

EDIT , ik heb klein beetje ervaring met parsen / ontleden, ik zou misschien de gegevensstroom kunnen ontleden en dan naar excel overbrengen om daar tot grafiek te verwerken?

deKees
Gepost zaterdag 2 november 2019 21:26:52

Wow, kostbaar apparaat zo een datataker.

Ik zie in de manual dat je custom web pages kunt installeren. Dan kun je in de web-pages een grafiek gaan tekenen.

Dat is wel even puzzelen, want je hebt nogal wat nodig:
-- HTML om de teksten in je pagina te zetten.
-- CSS voor de opmaak.
-- SVG om de grafiek te tekenen.
-- Javascript om alles aan elkaar te koppelen.
-- DT80 custom web page API om de gegevens van de DT80 te halen.

Progger
Gepost zaterdag 2 november 2019 21:28:36

kan die datataker dat niet? heb je al geprobeerd met een USB geheugen erin hem te laten loggen?

wat krijg je dan voor bestand? (zie tabblad files)

kun je dit bestanden downloaden of ook in de browser bekijken?

GMT+1
deKees
Gepost zaterdag 2 november 2019 21:36:15

Data kun je downloaden via ftp. File format is standaard csv dus die kun je zo inlezen in excel. En dan kun je daar inderdaad grafieken van maken.

Maar dat is nogal bewerkelijk om dat telkens te doen.
Een custom web-page in de DT80 zal wel makkelijker werken.

240diesel
Gepost zaterdag 2 november 2019 21:36:32

@ deKees, jazeker, ik heb geluk gehad met dit beestje, via marktplaats aan kunnen schaffen voor een schappelijke prijs.

De DT80 kan ongelooflijk veel, ik heb vierkante ogen van het lezen van de manual, ruim 400 pagina's , van ellende maar laten printen bij profi printshop om rustig op de bank door te lezen.
Je noemt een rijtje dat mij heel vaag "bekend" voorkomt (klok / klepel)....

@progger, ja ik kan hem via commando unloaden, krijg dan .dbd bestanden. het ding kan zelf ongelooflijk veel. ik zal eens kijken of ik zo'n bestand kan weergeven hier.

Wat het ook een beetje lastig maakt is het feit dat ik versie 1 heb van de DT80, die is niet compatibele met de nieuwste software waarmee je moeiteloos mijn wensen van grafieken kunt verwezenlijken ; dEX

Hartelijk dank voor jullie input!

Shiptronic

Overleden

Gepost zaterdag 2 november 2019 21:38:29

Als er eits van een .csv file uitkomt , die in exel zetten ?

Wie de vraag stelt, zal met het antwoord moeten leren leven.
240diesel
Gepost zaterdag 2 november 2019 21:43:42

Eigenlijk geldt hier ook weer lees de handleiding / datasheet.

@ shiptronic, je hebt gelijk csv komt er uit op bepaald commando, en dan moet ik het idd in excel krijgen.

Het lezen van een medische bibliotheek maakt je nog geen chirurg :-)
In mijn geval is Excel, csv htmp smpt etc. etc. allemaal nieuw terrein en dat terwijl ik al een eind van mijn (metaalbewerkers)roots vandaan ben.

Ik ga mij eens wat inlezen op jullie suggesties, allen bedankt!

High met Henk

Special Member

Gepost zaterdag 2 november 2019 21:47:24

Ik zou het csv eerst maar eens in een database zetten.

Daar kun je dan je query op draaien om je grafieken te plotten. Kan gewoon met html5 al.
Gebruik je php, sql en html5

Veel info op php.net omtrent info van php i.c.m. Sql.

Voor het tekenen met html5 moet je ff zoeken..

[Bericht gewijzigd door High met Henk op zaterdag 2 november 2019 21:49:13 (32%)

E = MC^2, dus de magnetische compatibiliteit doet kwadratisch mee???
240diesel
Gepost zaterdag 2 november 2019 22:01:11

Dankjewel Henk, ik lees het een beetje zo;

Had gehoopt op iets simpelers maar begrijp van jullie dat je het beroep van IT-er er niet even bij leert op zaterdagavond...
Ik ga mij ook in de door jou gebruikte termen eens verdiepen.

Gij Kieken
Gepost zaterdag 2 november 2019 22:44:01

Zoek eens op PLX-daq.(Neem de versie van Net-Devil)
Dit is vba code voor excel om dergelijke dingen te loggen en allerhande grafiekjes te maken.
Ik gebruik het met Arduino.
De communicatie gaat over usb.
Misschien heb je er iets aan?

240diesel
Gepost zaterdag 2 november 2019 23:49:11

Dankjewel, daar ga ik ook eens naar kijken :-)

deKees
Gepost zondag 3 november 2019 00:24:40

Hierbij een voorbeeld van een HTML pagina met een grafiek.
Met HTML5, CSS, Javascript, SVG.
Misschien kun je die in de DT80 zetten en aan je data koppelen.

code:


<!DOCTYPE HTML>

<style>
   svg
   {  background-color : hsl(60,100%,90%);
      background-opacity          : 0.1;
   }

   line
   {  stroke-width   : 1px;
   }

   polyline
   {  fill           : none;
      stroke-width   : 1px;
   }
</style>

<script>
   Width  = 1000;
   Height =  400;
   Margin =   40;
   Delta  =   20;

   // Javascript function to draw a line using SVG instructions.
   // - Move origin (0,0) to bottom-left corner
   function SvgLine(x1,y1,x2,y2,Color)
   {  document.write(`<line x1='${x1}' y1='${Height - y1}' x2='${x2}' y2='${Height - y2}' stroke='${Color}'/>`);
   }

   function SvgText(x,y,TextLine,Color)
   {  document.write(`<text x='${x}' y='${Height - y}' fill='${Color}'>${TextLine}</text>`);
   }

   function SvgPlot(Data, Color)
   {  x     = Margin;
      Delta = (Width - (2 * Margin)) / Data.length;
      document.write(`<polyline points='`);
      for(i=0; i < Data.length; i += 1)
      {  document.write(` ${x},${Height - Margin - Data[i]} `);
         x += Delta;
      }
      document.write(`' stroke='${Color}'/>`);
  }
</script>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1000" height="400">
   <g>
      <script>
         // Draw a raster
         for(y = Margin; y + Margin < Height; y += Delta)
         {  SvgLine(Margin, y, Width - Margin, y, "hsla(0,100%,90%, 80%)");
         }
         for(x = Margin; x + Margin < Width; x += Delta)
         {  SvgLine(x, Margin, x, Height - Margin, "hsla(0,100%,90%, 80%)");
         }

         // Draw axes
         SvgLine(Margin, Margin, Width - Margin, Margin,  "hsla(0,100%,20%, 100%)");
         SvgLine(Margin, Margin, Margin, Height - Margin, "hsla(0,100%,20%, 100%)");

         var Color1 = "hsla(120,100%,40%,100%)"; // Green
         var Color2 = "hsla(240,100%,60%,100%)"; // Blue
         var Color3 = "hsla(360,100%,60%,100%)"; // Red

         // Write some texts
         SvgText(Margin + 10, 350, "Temp Oven",   Color1);
         SvgText(Margin + 10, 330, "Temp Buiten", Color2);
         SvgText(Margin + 10, 310, "Temp Motor",  Color3);

         // Draw data line 1
         var Data = [ 10, 20, 10, 20, 30 ];
         SvgPlot(Data, Color1);

         // Draw data line 2
         var Data = [ 50, 60, 70, 90, 120, 100, 140 ];
         SvgPlot(Data, Color2);

         // Draw data line 3
         var Data = [ 100, 110, 112, 110, 130, 140, 135, 150, 160, 175, 180, 185, 200, 250, 220, 250, 175 ];
         SvgPlot(Data, Color3);

      </script>
   </g>
</svg>
240diesel
Gepost zondag 3 november 2019 00:31:55

Kees heel hartelijk bedankt! Dat is een hele lap code. Ik ga het proberen en zal me dan zeker even terug melden.

bprosman

Golden Member

Gepost zondag 3 november 2019 07:53:25

RRDTool word hier heel vaak voor gebruikt.

https://oss.oetiker.ch/rrdtool/index.en.html

De jongere generatie loopt veel te vaak zijn PIC achterna.
flipflop
Gepost zondag 3 november 2019 09:44:26

Dat loggen had voor een paar 10-tjes met een Raspberry Pi en een klein Python scriptje gekund. Weergeven op een website (is niet zo mijn ding, maar) kan ook vrij eenvoudig met PHP of zo. Voordeel is dat je alles zelf in de hand hebt en je niet zo'n kapitaal geld hoeft uit te geven.

"We cannot solve our problems with the same thinking we used when we created them" - Albert Einstein
Boudie
Gepost zondag 3 november 2019 16:29:02

Ik maakte grafieken voor websites altijd met gnuplot:
http://www.gnuplot.info

Vervangen DOOR.
240diesel
Gepost maandag 4 november 2019 20:29:56

Wat een info allemaal, fantastisch wàt een mogelijkheden allemaal. Ik ben e.e.a. nog steeds aan het bekijken, dat heeft nog wel even nodig!

Ben dus niet afgehaakt, integendeel, maar heb gewoon nog paar dagen nodig.

Zoals jullie vast ook wel kennen, in je zoektocht naar info over aangedragen suggesties door jullie kom je dan nòg weer andere alternatieven tegen. Zo kwam ik "THINGSPEAK" tegen, dat lijkt ook behoorlijk te kunnen voldoen aan mijn wensen.......

Het meest aansprekend vind ik de oplossing van Kees, lijkt het dichtst bij de bron te blijven; de bestaande "ingebouwde website" naar mijn wensen aanpassen. Ik heb voorzover ik dat in kan schatten nog veel kennis te kort voor die oplossing. Aangezien ik nog veel andere zaken op mijn bordje heb liggen heb ik besloten die kennis niet te gaan vergaren.

En ja, de suggestie van flipflop lijkt ook een heel terechte......zelfs met een arduino aan thingspeak LIJKT het een peulenschil om mijn wensen te verhullen.Ja dan is het inderdaad tientjeswerk. (Gelukkig had ik mijn datataker voor 125,- ipv de nieuwprijs van 2500)

Boudi en Bprosman, jullie ook bedankt, de suggesties zijn niet terzijde gelegd, ook die staan nog open.

Wordt dus zeker nog vervolgd!

Nogmaals dank, groet Jan

K7Jz
Gepost dinsdag 5 november 2019 21:30:33

Ik ben zelf ook wat zoekende op het gebied van meetgegevens en grafieken. Ik heb de plaatjes bijdehand dus ik post ze even:

1 RRDTool, draait al 25 jaar, ik vind de grafieken wat achterhaald en je moet er wel even mee aan de slag, ik heb hier via een pakket genaamd Munin wat geëxperimenteerd . Bijvoorbeeld: Tweede Y as.. lastig! Een jaar of een uur bekijken is 1 klik

2 Grafana. De ultieme open source grafieken tool, slurpt alle data op die je maar kan vinden. Automatisch CSV/Excel invoeren zal geen probleem zijn. Draait op Windows, Linux en Mac. Wel wat complexer. 3 klikken. Een jaar of een uur bekijken is 1 klik

3. Highcharts (lijkt beetje op vb van dekees)

Javascript, redelijk simpel maar je moet echt tijd stoppen in de grafiek, even snel een nieuwe grafiek op de rechter Y as is typwerk.Een jaar of een uur bekijken: typewerk, data wordt te groot etcetera.

Het voordeel van nr 3 is dat eigenlijk alles in de browser gebeurd. Wat javascript en de CSV file aanleveren en je hebt verder geen software, databases, servertjes e.d. nodig.

Gnuplot lijkt me zéér bewerkelijk.

240diesel
Gepost woensdag 6 november 2019 17:44:11

Dankjewel voor het delen en toelichten, ik ga uit jouw selectie er ook eentje proberen.

Heb al wat zitten frutten met "thingspeak" dat is zó makkelijk dat het bijna niet leuk meer is ;-)

Pertinax
Gepost woensdag 6 november 2019 17:57:30

De grafiekjes in Thingspeak zijn wat beperkt.
Je kan Matlab gebruiken maar daar ben ik van af gestapt nadat ik een voorbeeld via highcharts gevonden had.
De data wordt wel nog verstuurd naar en opgeslagen bij Thingspeak. Highcharts haalt die data op geeft die in een grafiek weer.
Voordeel is dat met één klik verschillende tijdsintervallen kan bekijken.
Link naar onderstaande grafiek: klik

Mijn thuis is waar mijn Weller staat
240diesel
Gepost woensdag 6 november 2019 19:04:36

Schitterend zeg, ik ben onder de indruk, leuk om zelf even te mogen spelen met de grafiek in de link, dankjewel!

Bijna dagelijks sta ik weer te kijken hoe mogelijkheden maar blijven toenemen op allerhande gebied.

240diesel
Gepost donderdag 21 november 2019 21:20:50

Het is al weer even geleden maar ik wil jullie toch graag even een update geven van de vorderingen rondom de openingsvraag.

Wat mij aanvankelijk een gigantisch moeilijk te leren code leek, de code die DeKees voor mij maakte, bleek later tóch wel te overzien. Ik heb op gegeven moment een online editor gezocht en de code van Kees er in geplakt. groot was mijn vreugde toen er ineens een grafiek gepresenteerd werd!!!

Het mooie van die editor https://www.w3schools.com/tryit/tryit.asp?filename=tryhtml_default is dat je na een klik op "run"direkt kunt zien welk effect een verandering heeft in de HTML tekst, ik heb mij er een paar uur kostelijk mee vermaakt kan ik jullie zeggen.

Vervolgens had ik de behoefte de grafiek "te voeren" met data welke de datalogger steeds beschikbaar stelt. Een simpel voorbeeldje in de Datataker manual heb ik vervolgens gebruikt om een SSI code in de door DeKees aangereikte code te verwerken. Toen dat ook nog eens lukte was de sensatie helemaal compleet!

Is hetgeen Kees aangereikt heeft nu echt het beste antwoord?
Hebben "de anderen" voor niets geantwoord?

Zeker niet, ik heb er van geleerd, mijn horizon kunnen verbreden en hoop die info wellicht ook nog eens toe te kunnen passen in een ander project.
Grootste motivatie om met een zelfbouw-webpagina verder te gaan is het feit dat de logger er al op berekend is en een eigen pagina bovendien nog veel meer mogelijkheden biedt om zaken weer te geven welke betrekking hebben op de bewuste machine. Ik bedoel dan niet zozeer data maar meer zaken als bijvoorbeeld een FAQ gedeelte waarin de operator wellicht antwoorden kan vinden op vragen omtrent het in de hand houden van parameters welke een alarm genereren.
Tweede motivatie voor deze aanpak is dat alle data en presentatie daarvan binnen het bedrijfsnetwerk blijven en er dus geen extra beveiligingsrisico is. De data lijkt nu net zo veilig als alle andere data binnen het bedrijfsnetwerk.(voor zover ik dat als leek kan beoordelen maar ik heb al contact met de administrator dus zal dat nog even goed doorspreken)

Om mezelf een beetje te bekwamen in HTML en CCS heb ik gisterenavond boeken gehaald in de bibliotheek, variërend van "Eigen website bouwen" voor 8-12 jarigen tot dikke boeken over HTML5 welke op ieder detail in te lijken gaan :-)

Vooral de kinderboeken helpen om de hoofdlijn vast te houden en je niet zo snel in details te verliezen. Het is tenslotte een compleet nieuwe wereld voor mij.

Iedereen dus nogmaals bedankt voor alle waardevolle bijdragen, omdat een praatje niet compleet is zonder een plaatje hier even de grafiek welke ik als proef al een kleine 2 weken heb lopen;

Wat ook nog een heel leerzaam en inzichtelijke site is ; https://canvasjs.com/html5-javascript-dynamic-chart/ hier kan je ook direct effecten zien van zaken welke je veranderd.

Als de nu nog kale pagina wat meer aangekleed raakt zal ik nog eens een filmfragmentje tonen om anderen ook te enthousiasmeren / inspireren met hetgeen ik hier opgestoken heb.

hartelijke groet, Jan

deKees
Gepost vrijdag 22 november 2019 00:11:13

Kijk dat vind ik leuk om te zien.
Gefeliciteerd.

walkura
Gepost zaterdag 23 november 2019 10:32:39

Dit lijkt mij echt een klusje voor VBA in Excel.
Gewoon periodiek je nieuwe data laten downloaden en ik een grafiekje zetten.
Excel is alles wat je hier voor nodig hebt.
(Wel even je developer tab activeren als je dit nog nooit gebruikt hebt)

"Stupidity is also a gift of God, but one mustn't misuse it." - Pope John Paul II
K7Jz
Gepost zaterdag 23 november 2019 13:47:32

Op 23 november 2019 10:32:39 schreef walkura:
Dit lijkt mij echt een klusje voor VBA in Excel.
Gewoon periodiek je nieuwe data laten downloaden en ik een grafiekje zetten.
Excel is alles wat je hier voor nodig hebt.
(Wel even je developer tab activeren als je dit nog nooit gebruikt hebt)

Dat kan toch al zonder VB? Externe databron, webquery, zoiets?

Puur web is mooier natuurlijk, dat werkt op tablets, telefoon, smart tv etc.

@240diesel, dat ziet er goed uit. Gefeliciteerd.

Nog een tip: druk tegelijk op alt en printscreen (prt srn), start vervolgens paint en dan ctrl en V tegelijk indrukken;)