Graf pomocou javascriptu

ⓢⓐⓟⓛⓔⓡ

Zdravím, hladam nejaky javascript na vygenerovanie čiaroveho grafu ale data potrebujem načitavat z externeho suboru bud .tsv alebo .csv . našiel som na githube toho dost ale vela ich je takych kde sa data zadavaju priamo a kedze v jave som uplne mimo tak tam moje hladanie skoncilo. Nasiel som niektore grafy ktore sa vykreslovali s externeho suboru ale nefunguju.. ani ked som cely example prekopiroval so vsetkymi subormy tak sa nevykreslil aj s povodnym .tsv suborom ani s mojim no proste nevykreslil. Chcel by som sa tymto spytat ci by ste mi vysvetlili ako je to mozne resp. ako to funguje (jedine co z javy viem, ze script sa spracovava na strane uzivatela ale aj to si pamatam este zo skoly a to bolo davno)

harrison314

Njaskor si ujasni v akom jazyku robis...
Potom si ujasni, ci to ma vykrreslit pomocou servovskych udajov,a lebo ci ma pouzibvatel uploadnut subor a tak ho vykreslit...

Kninic na citane CSV-cok je plno aj na grafy (napriklad Chart.js), staci to len spojit.

sharky-no

v prvom rade, java != javascript, zapis za usi, lebo sa ti budu ludia smiat.

vacsina grafov potrebuje mat presne urcenu strukturu dat, takze neverim, ze tvoj subor bude mat presne to co ten graf vyzaduje.

ja by som to riesil takto:

- na backende pripravil metodu, ktora bude pracovat s tvojim suborom, a data naformatuje do pozadovaneho tvaru

potom mas na vyber:
- rovno tieto data vlozit do HTML pri generovani stranky kde je aj graf (ja by som volil toto)
alebo
- nacitat tie data cez ajax

- a nakoniec vykreslil graf (ja pouzivam Highcharts, nemal som s nim ziadny problem, velmi dobre sa s nim daju vytvarat rozne typy grafov http://www.highcharts.com/demo)

ⓢⓐⓟⓛⓔⓡ

takze takto, mam arduino s ethernet shieldom tam bezi program v jazyku wiring na sd kartu uklada data mozem ich ukladat v akom formate chcem to nie je problem. konkretne teraz meriam termistorom teplotu a kazdych 30 sekund zapise udaj do suboru. mam dve stlpce cas a teplota tuto zavislost by som chcel vykreslit aj v grafe.
Presne tu je problem, ze kniznic je vela ale ja ich neviem spojit keby si mi to vedel ukazat na priklade bol by som ti vdacny.

harrison314

Pozri sa sem
tu mas aj priklad ako graf pouzit http://www.chartjs.org/docs/#line-chart
len tvoje data transformujes do vhodnej podoby pri vytvarani "obsahu" stranky.

ⓢⓐⓟⓛⓔⓡ

ale ja s javou nemam ziadne skusenosti prave preto som hladal hotove riesenie kde by som uz len prepisal example.tsv na napr. data.tsv skopiroval na stranku (konkretne na moje arduino) a slapalo by to. Stranku kde si postol je toto

Kód: Vybrať všetko

Data structure

var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
        {
            label: "My First dataset",
            fillColor: "rgba(220,220,220,0.2)",
            strokeColor: "rgba(220,220,220,1)",
            pointColor: "rgba(220,220,220,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(220,220,220,1)",
            data: [65, 59, 80, 81, 56, 55, 40]
        },
        {
            label: "My Second dataset",
            fillColor: "rgba(151,187,205,0.2)",
            strokeColor: "rgba(151,187,205,1)",
            pointColor: "rgba(151,187,205,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(151,187,205,1)",
            data: [28, 48, 40, 19, 86, 27, 90]
        }
    ]
};

ja tomu rozumiem ale ja to neviem prepisat tak aby to bralo data z mojho externeho suboru a uz vobec neviem ako by som ho mal rozparsovat a tak.

harrison314

nie je to java!

ved ty tu stranku na tom arduinu generujes nie?

ⓢⓐⓟⓛⓔⓡ

ano generujem ju ale html stranku nemam priamo v arduine (v programe ktory riadi čip) tam mam len http hlavicky a ptm hned nacitam cely html subor (ktory mam na SD karte) a vypisem ho clientovy. Hadam sa chapeme

harrison314

Tak budes musiet tvoje data pretransformovat do javascriptu ako uvadzas hore a potom ich s tej stranky nacitat,
malo by stacit klasicky cet sript tag a src.

ⓢⓐⓟⓛⓔⓡ

takze po dlhom hladani som konecne nasiel co som hladal (ak by niekto potreboval nieco taketo) http://dygraphs.com/tutorial.html
funguje mi to iba na webhostingu so suborom, ktory som vytrovil na arduine ale ked uplodnem htmlko do arduina tak objekt vytvori ale nevykresli Graf, ale mam pocit akoby ten javascript nevedel otvorit na tom arduine ten subor data.csv. neviem ci mam zmenit atributy nejakym zazrakom.

harrison314

to ako keby povies, ze ti manzelkine auto funguje, ale tvoj nie, povedzte mi v com je problem ....

Takze, hod sem zdrojaky.

ⓢⓐⓟⓛⓔⓡ

sorry vcera som bol rad, ze som nezaspal o takej hodine

tu su zdrojaky

Kód: Vybrať všetko

if (c == '\n' && currentLineIsBlank) {
          // send a standard http response header
          client.println("HTTP/1.1 200 OK");
          client.println("Content-Type: text/html");
          
          client.println("Connnection: close");
          client.println();
          client.println("<!DOCTYPE HTML>");
          client.println("<html>");
          client.println("<head>");
          client.println("<script src='//cdnjs.cloudflare.com/ajax/libs/dygraph/1.1.1/dygraph-combined.js'></script>");
          client.println("</head>");
          client.println("<title> Teplota </title>");
          client.println("<center>");
          if(minushodina < 10){
          client.print("0");
          }       
          client.print(minushodina);
          client.print(":");
          if(minuta < 10){
          client.print("0");
          }
          client.print(minuta);
          client.print(":");
          if(sekunda < 10){
          client.print("0");
          }
          client.print(sekunda);         
          
          client.print(" Teplota je : ");
          double teplota = temp.getTemp();
          client.print(teplota);
          client.println(" *C");
          client.print("<br><br> Server time up: ");
          client.print(millis()/1000);
          client.print(" sekund ");
            client.print(((millis()/1000)/60)/60);
            client.println(" hodin");        
          client.println("<br><br>");
          client.println("<FORM> <INPUT TYPE='button' onClick='history.go(0)' VALUE='Refresh'> </FORM> ");
          
          castxt = SD.open("graf.htm");
          
          if (castxt) {
            while(castxt.available()){
              client.write(castxt.read());
                         
              }
            castxt.close();
            Serial.println("graf.htm printed");
          }
          else{
            Serial.println("failed to open graf.htm");
          }
          client.println("</center>");
          client.println("</html>");
          myFile.close();
          break;
        }
              
        if (c == '\n') {
          // you're starting a new line
          currentLineIsBlank = true;
        } 
        else if (c != '\r') {
          // you've gotten a character on the current line
          currentLineIsBlank = false;
        }
      }

a este graf.htm

Kód: Vybrať všetko

<body>
<div id="graphdiv2"
  style="width:700px; height:500px;"></div>
<script type="text/javascript">
  g2 = new Dygraph(
    document.getElementById("graphdiv2"),
    "DATA.CSV", // path to CSV file
    {
      rollPeriod: 15,
      
      showRoller: true,
      errorBars: true,
      valueRange: [-15,40]
    }          // options
  );
</script>
</body>

a este takto vyzera zdrojak vygenerovany prehliadacom

Kód: Vybrať všetko

<!DOCTYPE HTML>
<html>
<head>
<script src='//cdnjs.cloudflare.com/ajax/libs/dygraph/1.1.1/dygraph-combined.js'></script>
</head>
<title> Teplota </title>
<center>
10:13:34 Teplota je : 8.02 *C
<br><br> Server time up: 27614 sekund 7 hodin
<br><br>
<FORM> <INPUT TYPE='button' onClick='history.go(0)' VALUE='Refresh'> </FORM> 

<body>
<div id="graphdiv2"
  style="width:700px; height:500px;"></div>
<script type="text/javascript">
  g2 = new Dygraph(
    document.getElementById("graphdiv2"),
    "DATA.CSV", // path to CSV file
    {
      rollPeriod: 15,
      
      showRoller: true,
      errorBars: true,
      valueRange: [-15,40]
    }          // options
  );
</script>
</body>
</center>
</html>

harrison314

V graf.htm odstran tagy body.

Ty este musis nejako naservirovat prehliadacu DATA.CSV, ked si ich vypita äpravdepodobne si ich ta libka natiahne ajaxom,
netusim ako sa to robi na danom zariadeni, to si budes musiet najst.

ⓢⓐⓟⓛⓔⓡ

diky ano uz som medzi casom sledoval komunikaciu http hlaviciek, prehliadac si pyta data.csv a javascript ale neviem ako odchytit poziadavku a nasledne ju vypisat

ak by niekoho nahodou napadlo ako bol by som mu velmi vdacny

sharky-no

uvedomujes si, ze ten subor s datami sa musi nachadzat vo webroote, t.j. ze sa k nemu dostanes cez URL adresu? javascript nedokaze citat z disku (resp. tento pripad to nebude).

ked sa k data.csv nedostanes cez URL tak ti to nebude nikdy takto fungovat...

ⓢⓐⓟⓛⓔⓡ

on sa nachadza vo webroote na cipe je modul s SD kartou a tam je ulozeny tam sa priebezne ukladaju nove data, lenze ja ked dam surovo adresu napr. 192.168.1.1/data.csv tak ono mi ho nenacita ono mi v prehliadaci otvori stranku ktoru generujem priamo v programe pretoze ja nijako nespracujem tu poyiadavku to je holy server bez nicoho preto ja potrebujem odchytit http poziadavku a poslat mu odpoved kde je ten subor co s nim ma robit ako je kodovany velkost a toto vsetko

takto vyzera http komunikacia .. prehliadac si pyta JS.JS a odpoved je uplne odveci pretoze tu odpoved mam na to aby mi fungovali html tagy lenze naraz nemozem poslat odpovede aj na JS.JS aj data.csv to musia byt samotne odpovede a postupne ich poslat. len praveze neviem ako odychtit kedy ktora poziadavka ide

Kód: Vybrať všetko

GET /JS.JS HTTP/1.1
Host: 212.26.166.122:125
Accept: image/webp,image/*,*/*;q=0.8
Accept-Encoding: gzip, deflate, lzma, sdch
Accept-Language: sk-SK,sk;q=0.8,cs;q=0.6,en-US;q=0.4,en;q=0.2
Referer: https://www.facebook.com/
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/47.0.2526.111 Safari/537.36 OPR/34.0.2036.50 (Edition Campaign 67)

HTTP/1.1 200 OK
Connnection: close
Content-Type: text/html

harrison314

Vies to spravit aj malim hekom, tak isto ako nacitavas graf.htm nacitaj aj data.csv

tak aby si mal na vystupe v HTMLvnutry tagu su tvoje data.

Kód: Vybrať všetko

    <script type="text/csv" id="myData">
        Po  12  45 #tu bude tvoje CSV
        Ut  45  45
        Str 78  96
    </script>

A potom kniznici das tie data pomocou

Kód: Vybrať všetko

var csvContent = document.getElementById('myData').innerHTML;

v podstte pouzijes csvContent namiesto "DATA.CSV" v graf.htm

//autoeditácia príspevku (29 Jan 2016, 11:47)
alebo nemisto "DATA.CSV" pouzijes

Kód: Vybrať všetko

functuion(){ return document.getElementById('myData').innerHTML; }

ⓢⓐⓟⓛⓔⓡ

presne takyto vyj** som hladal, ale ked takto nacitam data.csv tak po chvili nacita stranku vsetko vypise ako ma ale samozrejme nejde lebo chyba samotny JS.JS (v csvcku mam okolo 800riadkov) a ked som nacital aj JS.JS tak stranku uz ani nenacita (js.js ma cca 400kb) je to proste vela ? alebo cim mozem byt obmedzeny ?

//EDIT
tak upravil som to, nasiel som ten skript je aj na webe zdrojak vyzera takto ale nejde to aj tak

Kód: Vybrať všetko

<html>
<head>
<title> Teplota </title>
<script src='//cdnjs.cloudflare.com/ajax/libs/dygraph/1.1.1/dygraph-combined.js'></script>
</head>
<center>
12:35:52 Teplota je : 7.74 *C
<br><br> Server time up: 5 sekund 0 hodin
<br><br>
<FORM> <INPUT TYPE='button' onClick='history.go(0)' VALUE='Refresh'> </FORM> 
<script type='text/csv' id='myData'>
cas,teplota
2016/1/28 13:56,9.13
2016/1/28 13:57,8.95
2016/1/28 13:58,9.50
2016/1/28 13:59,9.50
2016/1/29 12:33,7.55
2016/1/29 12:34,7.65
2016/1/29 12:35,7.74
var csvContent = document.getElementById('myData').innerHTML;
</script>

<div id="graphdiv2"
  style="width:700px; height:500px;"></div>
<script type="text/javascript">
  g2 = new Dygraph(
    document.getElementById("graphdiv2"),
    csvContent, // path to CSV file
    {
      rollPeriod: 15,
      
      showRoller: true,
      errorBars: true,
      valueRange: [-15,40]
    }          // options
  );
</script>

</script>
</center>
</html>

format toho csvcka je dobry, tak ako to je mi to funguje na webhostingu

harrison314

Coe je v Js.JS ?

eMPiko

Nema byt ten riadok

Kód: Vybrať všetko

var csvContent = document.getElementById('myData').innerHTML;

v javascripte a nie v tom CSV?

Graf pomocou javascriptu

Graf pomocou javascriptu

Re: Graf pomocou javascriptu

Re: Graf pomocou javascriptu

Re: Graf pomocou javascriptu

Re: Graf pomocou javascriptu

Re: Graf pomocou javascriptu

Re: Graf pomocou javascriptu

Re: Graf pomocou javascriptu

Re: Graf pomocou javascriptu

Re: Graf pomocou javascriptu

Re: Graf pomocou javascriptu

Re: Graf pomocou javascriptu

Re: Graf pomocou javascriptu

Re: Graf pomocou javascriptu

Re: Graf pomocou javascriptu

Re: Graf pomocou javascriptu

Re: Graf pomocou javascriptu

Re: Graf pomocou javascriptu

Re: Graf pomocou javascriptu

Re: Graf pomocou javascriptu