Messdaten auf SD-Karte in Webinterface visualisieren

[Hgerd (Gast)]

Hallo,

ich hab ein Board STM32-F400 EVAL mit dem ich Temperaturdaten auf eine 
SD Karte speichern kann.

messung;Datum;Messwert    (1 Messwert pro Sekunde

Jeden Tag wird eine neue Messdatei generiert bis die Karte mal voll ist.
Ich würde die Daten gerne mittels webinterface uIP visualisieren.
Ich habe das Beispiel schonmal installiert sowie mit FreeRTOS.

Ich kann bereits auf die CSV Dateien auf der Speicherkarte zugreifen.

Jetzt hab ich vergebens nach einer Javascript/Java basierten Lösung 
gesucht um die Messdaten zu visualiseren.
Wie geht das nun, das ich die Datei anklicke und ein Graf mir die Daten 
für den Tag visualisiert?

Ich hab bereits eine Java basierte Chart software gefunden 
(highcharts.com) blos der erwartet JSON oder Array Daten.

Gibts da nichts einfacheres oder vielleicht hat das sogar schon jemand 
gemacht oder kennt ein Projekt?

Gruß
Gerd

[Karl K. (leluno)]

z.B.
http://www.rgraph.net/download

Wenn du es zum laufen bringst, würde es mich für meinen Webserver auch 
interessieren

[Karl K. (leluno)]

<script>
    window.onload = function ()
    {
        // The data for the Line chart. Multiple lines are specified as seperate arrays.
        var data = [10,4,17,50,25,19,20,25,30,29,30,29];
    
        // Create the Line chart object. The arguments are the canvas ID and the data array.
        var line = new RGraph.Line("myLine", data)
        
        // The way to specify multiple lines is by giving multiple arrays, like this:
        // var line = new RGraph.Line("myLine", [4,6,8], [8,4,6], [4,5,3])
        
            // Configure the chart to appear as you wish.
            .Set('background.barcolor1', 'white')
            .Set('background.barcolor2', 'white')
            .Set('background.grid.color', 'rgba(238,238,238,1)')
            .Set('colors', ['red'])
            .Set('linewidth', 2)
            .Set('filled', true)
            .Set('hmargin', 5)
            .Set('labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'])
            .Set('gutter.left', 40)
        
            // Now call the .Draw() method to draw the chart.
            .Draw();
    }
</script>

Das sieht eigentlich nicht kompliziert aus. Ich habe leider keine 
html-Kenntnisse. Bindet man das Script in die webpage ein? Wie wird 
.Draw() eingebunden?

[Hgerd (Gast)]

ja das plotten ist kein Problem aber das parsen der "var data" daten von 
sd karte zu dem array bei 1000 messdaten ist schwierig.

[Karl K. (leluno)]

Wofür brauchst du bei einem  Graphen 1000 Messpunkte? Der Datentransfer 
von 1000 bytes kann aber auch kein großes Problem sein. jpgs werden ja 
auch übertragen. Notfalls aufteilen und mehrfach senden.

[Hgerd (Gast)]

Stimmt schon.

[mach mal (Gast)]

es wird moeglicherweise eine Javascript library geben, um so eine 
Visualisierung zu machen. Sonnst eine fuer php