Messdaten auf SD-Karte in Webinterface visualisieren

Gast #3524473
Lesenswert?

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
#3524938
Lesenswert?

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

Antwort schreiben

Bitte melde dich an, um einen Beitrag zu schreiben.

oder

Mit Google-Account einloggen

Die Registrierung ist kostenlos und dauert nur eine Minute.

Jetzt registrieren