csv zu einer HTML Tabelle und ein Diagramm

Mit Dygraphs habe ich keine Option gefunden die sagt Spalte 1 = Y + Spalte 25 = X, nur mit der Option visibility kann man das Diagramm einschränken was nicht funktioniert hat. Die letzte Spalte hat irgendwie nicht existiert.
Zum Vergrößern anklicken....
Wenn es nicht mit Dygraphs geht, dann mit Sicherheit, indem man die CSV-Datei parst und konvertiert. Poste doch mal ein paar Beispielzeilen.
 
Hallo,

Code: 
Year,ZA,NA,BW,MG,ZW,AO,ZM,KE,NG,CF,GH,CM,CD,ET,UG,EG,DZ,MA,MR,NE,SD,TN,SO,All
2000,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
2001,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
2002,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
2003,10,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,10
2004,12,6,6,0,8,8,6,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,46
2005,13,6,7,0,9,8,7,3,3,3,6,5,7,5,5,3,1,0,0,0,0,0,0,91
2006,17,9,10,0,11,8,7,3,3,3,6,7,8,9,7,4,1,3,1,3,0,0,0,121
2007,19,9,10,0,10,7,9,3,3,6,6,11,12,11,9,5,3,5,1,6,1,3,3,151
2008,24,9,11,0,12,10,10,3,6,6,7,14,15,17,11,6,3,7,1,6,3,4,4,190
2009,26,12,13,0,13,14,12,6,6,6,7,13,18,14,19,7,4,8,2,7,3,6,6,221
2010,29,12,16,0,14,16,16,6,6,6,8,15,21,20,20,7,6,9,2,11,4,7,7,257
2011,35,12,20,0,16,17,16,6,6,9,8,18,23,25,25,8,7,16,2,12,4,8,10,304
2012,39,15,19,0,17,16,17,6,9,9,9,20,26,28,28,9,8,20,3,13,6,9,12,339
2013,38,15,24,0,19,18,20,6,9,9,10,24,27,30,31,10,8,23,3,16,6,13,14,372
2014,43,15,26,0,20,20,19,9,9,9,12,26,30,37,35,11,9,24,3,19,7,19,15,418
2015,49,17,30,0,21,21,20,9,12,10,15,26,31,45,37,13,11,27,3,23,16,24,20,480
2016,53,23,39,0,28,26,20,9,12,10,17,29,34,49,40,15,11,31,4,27,16,32,21,547

Das ist ein Beispiel. Wie gesagt ich brauche für die grafische Aufarbeitung nur das Jahr und All.

Danke | Schönen Abend
Silvio
 
Ich habe mal etwas aufgebaut: Parsen und Konvertieren dieser CSV-Datei, Anzeige als Grafik mit dem Code aus deiner Textdatei:
Code: 
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta name="author" content="Claus">
        <meta name="editor" content="html-editor phase 5">
        <link rel="stylesheet" href="css/font-awesome-4.6.3/css/font-awesome.min.css">
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
        <script type="text/javascript" src="js/papaparse.min.js"></script>
        <script type="text/javascript" src="js/dygraph-combined.js"></script>
    </head>
    <body>
        <div id="graphdiv"></div>
        <script>
            // draw chart for employee
            // Darken a color
            function darkenColor(colorStr) {
            // Defined in dygraph-utils.js
            var color = Dygraph.toRGB_(colorStr);
                color.r = Math.floor((255 + color.r) / 2);
                color.g = Math.floor((255 + color.g) / 2);
                color.b = Math.floor((255 + color.b) / 2);
                return 'rgb(' + color.r + ',' + color.g + ',' + color.b + ')';
            }

            // This function draws bars for a single series. See
            // multiColumnBarPlotter below for a plotter which can draw multi-series
            // bar charts.
            function barChartPlotter(e) {
                var ctx = e.drawingContext;
                var points = e.points;
                var y_bottom = e.dygraph.toDomYCoord(0);

                ctx.fillStyle = darkenColor(e.color);

                // Find the minimum separation between x-values.
                // This determines the bar width.
                var min_sep = Infinity;
                for (var i = 1; i < points.length; i++) {
                  var sep = points[i].canvasx - points[i - 1].canvasx;
                  if (sep < min_sep) min_sep = sep;
                }
                var bar_width = Math.floor(2.0 / 3 * min_sep);

                // Do the actual plotting.
                for (var i = 0; i < points.length; i++) {
                  var p = points[i];
                  var center_x = p.canvasx;

                  ctx.fillRect(center_x - bar_width / 2, p.canvasy,
                      bar_width, y_bottom - p.canvasy);

                  ctx.strokeRect(center_x - bar_width / 2, p.canvasy,
                      bar_width, y_bottom - p.canvasy);
                }
            }
            var url = window.location.pathname;
            var csvfilename = url.substring(url.lastIndexOf('/') + 1).replace(/\.html$/, ".csv");
            var filename = "csv/" + csvfilename;
            Papa.parse(filename, {
                delimiter: ",",
                download: true,
                complete: function (data) {
                    var indata = data.data;
                    var outdata = [];
                    for (var i = 1; i < indata.length; i++) outdata.push([indata[i][0], indata[i][24]])
                    var g = new Dygraph(
                        document.getElementById("graphdiv"),
                        outdata,
                        {
                            animatedZooms: true,
                            plotter: barChartPlotter,
                            title: 'Employee',
                            valueRange: [0, 550]
                        }
                    );
                }
            });
        </script>
    </body>
</html>
 
Zuletzt bearbeitet:
Okay vielen Dank. Das werde ich morgen probieren und berichten. Jetzt ist Zeit für das Entspannen.

Danke & Schönen Abend
Silvio
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück