{"id":4093,"date":"2024-01-09T20:28:41","date_gmt":"2024-01-09T19:28:41","guid":{"rendered":"https:\/\/cbrell.de\/blog\/?p=4093"},"modified":"2024-01-09T20:54:10","modified_gmt":"2024-01-09T19:54:10","slug":"svg-diagramm-erzeugen-mit-python-und-c-im-vergleich","status":"publish","type":"post","link":"https:\/\/cbrell.de\/blog\/svg-diagramm-erzeugen-mit-python-und-c-im-vergleich\/","title":{"rendered":"SVG Diagramm erzeugen mit Python und C# im Vergleich"},"content":{"rendered":"

Gerade im IoT-Umfeld<\/a> nehmen die Datenmengen gerne schwindelerregende Umf\u00e4nge an. Die einzige Chance, den \u00dcberblick zu behalten, ist eine geeignete Datenvisualisierung. Der erste Schritt bei Zeitreihendaten ist die Erstellung einer Infografik in Form eines xy-Liniendiagramms. Dazu sind grunds\u00e4tzlich keine Grafiktools notwendig, eine einfaches in Python oder C# geschriebenes Programm gen\u00fcgt. Um absch\u00e4tzen zu k\u00f6nnen, welche Programmierumgebung angenehmer ist, sind hier der Python- und der C#-Quellcode f\u00fcr das gleiche Ergebnis dargestellt.<\/em><\/p>\n

09.01.2024<\/p>\n

Das Anwendungsszenario<\/h2>\n

Das Beispiel verwendet Daten, die von einer WLAN-Steckdose<\/a> gesammelt und im Internet gespeichert werden. Daten f\u00fcr bis zu drei Tagen sind \u00fcber einen Webservice im CSV-Format ladbar. Die Daten enthalten einen Unix-Zeitstempel, einen menschenlesbaren Zeitstring, die jeweils aktuelle durch die WLAN-Steckdose gemessene Leistung in Watt und die \u00fcber die Zeit kumulierte\u00a0 (integrierte) Leitung sprich Energie in Kilo-Wattstunden.<\/p>\n

Aus den Daten wird eine x-y-Liniengrafik erzeugt und auf der eigenen Festplatte abgespeichert. Das Programm wurde zun\u00e4chst mit Python entwickelt und dann – m\u00f6glichst eins zu eins – in Dot Net C# umgesetzt. Das f\u00fchrt zu einem wenig sch\u00f6nen C#-Code, l\u00e4sst aber den Vergleich zwischen Python und C# als Programmiersprachen zu.<\/p>\n

Pers\u00f6nliche Wertung (Achtung subjektiv): Nach einigen Experimenten mit solchen ETL-Prozessen bin ich f\u00fcr mich zum Schluss gekommen, dass ich mit Python schneller zu einem brauchbaren Ergebnis gelange. Dabei bin ich weder Python- noch C# \/ Dot Net Fan.<\/p>\n

Die erzeugte Grafik<\/h2>\n

\"Screenshot<\/a><\/p>\n

Abb. 1: Die von den Programmen erzeugte SVG-Grafik, hier als Screenshot im Browse Chrome. Dargestellt sind in der x-Achse die Zeit beginnend mit vorgestern Null Uhr bis jetzt, in schwarz die von der WLAN-Steckdose gemessene Leistung, in rot die kumulierte Leistung sprich Energie. Sowohl Leistung als auch Energie sind in der y-Achse so skaliert, dass sie die Zeichenfl\u00e4che ausf\u00fcllen.<\/p>\n

Vorgehen und Programmierung<\/h2>\n

Python mit Thonny<\/h3>\n

F\u00fcr die Programmierung des Python-Programms diente die einfache IDE Thonny. Thonny bringt schon die aktuelle Python-Version mit und ist mit einem Mausklick zu installieren.<\/p>\n

C# mit Visual Studio Code<\/h3>\n

F\u00fcr die Programmierung in C# wurde Dot Net in der aktuellen Version (hei\u00dft: ist in einem Jahr hoffnungslos veraltet) und Visual Studio Code verwendet. Zun\u00e4chst wurde im Terminal ein Hello-World-Programm erzeugt mit „dotnet new console“, dann der Python Quelltext im Edotor einf\u00fcgt und manuell in C# \u00fcbersetzt. Da Python nicht typisiert ist, f\u00fchrt das zu einigen umst\u00e4ndlichen Konstrukten. Um die Vergleichbarkeit zu erhalten, wurden auch in C# Listen und keine starren Arrays verwendet.<\/p>\n

In der aktuellen Visual Studio Code Version gen\u00fcgt es, lediglich f\u00fcr den WebClient „using System.Net“ einzubinden.<\/p>\n

Quelltexte:<\/h3>\n

Python<\/h4>\n
\r\n#!\/usr\/bin\/env python3\r\n# -------------------------------\r\n# SVG-Liniengrafik\r\n# Datenvisualisierung mit Python\r\n# Claus Brell\r\n# 06.01.2024\r\n# -------------------------------\r\n# Ablauf:\r\n#   Stage 1: Daten laden von Internetquelle\r\n#   Stage 2: Daten umformen \/ anpassen\r\n#   Stage 3: SVG-Grafik erzeugen\r\n# -------------------------------\r\n# Vorbereitungen\r\n# -------------------------------\r\n# Import f\u00fcr Internet-Zugriff\r\nimport requests\r\nimport sys\r\n# initialisieren, sonst kann man nichts anh\u00e4ngen\r\n# f\u00fcr die x-Achse\r\nlisteZeit=[]\r\nlisteZeitstempel=[]\r\n# f\u00fcr die y-Achse\r\nlisteLeistung=[]\r\nlisteEnergie=[]\r\n# --------------------------------\r\n# SVG-Rohling festlegen\r\n# --------------------------------\r\n# polyLineErsatz wird die transformierten Daten aufnehmen\r\npolyLineErsatz1=''\r\npolyLineErsatz2=''\r\n# mehrzeiliger String mit """\r\nsvgRahmen="""<svg width="800" height="400" viewBox="0 0 800 400" xmlns="http:\/\/www.w3.org\/2000\/svg">\r\n<desc>Liniengrafik mit Daten aus 2024<\/desc>\r\n<!-- x und y Achse           -->\r\n<line x1="50" y1="350" x2="750" y2="350" stroke="#0a0a0a" stroke-width="2" \/>\r\n<line x1="50" y1="350" x2="50" y2="50" stroke="#0a0a0a" stroke-width="2" \/>\r\n<!-- Beschriftung -->\r\n<!-- maximale Leistung -->\r\n<text x="50" y="40" fill="#000000" font-size="16" text-anchor="middle">#*3*#W<\/text>\r\n<!-- maximale Energie -->\r\n<text x="#*4*#" y="40" fill="#ff0000" font-size="16" text-anchor="right">#*5*#kWh<\/text>\r\n<!-- Startzeitpunkt -->\r\n<text x="50" y="370" fill="#000000" font-size="16" text-anchor="left">#*6*#<\/text>\r\n<!-- Endezeitpunkt -->\r\n<text x="#*4*#" y="370" fill="#000000" font-size="16" text-anchor="right">#*7*#<\/text>\r\n<!-- Polygonzug zeichnen     -->\r\n<!-- f\u00fcr Leistung            -->\r\n<polyline points="#*1*#" fill="none" stroke="black"\/>\r\n<!-- f\u00fcr Energie             -->\r\n<polyline points="#*2*#" fill="none" stroke="red"\/>\r\n<\/svg>\r\n"""\r\n# ---------------------------------------\r\n# Stage 1 Daten laden von Internetquelle\r\n# (Daten Speichern wird hier aus didaktischen Gr\u00fcnden unerschlagen)\r\n# ---------------------------------------\r\nprint('Stage 1 Daten von Internet-Quelle laden') # Nutzerbegl\u00fcckung\r\nprint()\r\n\r\nurl='https:\/\/clabremo.de\/shelly\/WS\/getshellycsvWS.php?shellyNr=192.168.1.81'\r\nprint("Aufruf :", url)                           # Nutzerbegl\u00fcckung \r\nresponse = requests.get(url)\r\nprint("--> ",response)                      # Nutzerbegl\u00fcckung\r\n# -----------------------------------\r\n# Daten in Listen\r\n# -----------------------------------\r\n# R\u00fcckgabeobjekt enth\u00e4lt den Inhalt der Internet-Ressource\r\n# Daraus eine Liste von Zeilen erzeugen\r\ndatenstring=response.text\r\nzeilen=datenstring.split("\\r\\n")\r\nanzahlZeilen=len(zeilen)\r\nprint("Anzahl Zeilen: ",anzahlZeilen) # Nutzerbegl\u00fcckung\r\n# Jede Zeile in Datenfelder zerlegen und in separate Listen packen\r\n# Start mit 1, da in Zeile 0 die Spaltenbezeichnungen stehen\r\nzeileNr=1 \r\n# Leider hat Python kein sch\u00f6nes for-Konzept, also while-Schleife verwenden\r\nwhile zeileNr<(anzahlZeilen-1):\r\n    werte=zeilen[zeileNr].split(';')\r\n    # WARTUNG print(werte)\r\n    # ACHTUNG: werte sind Strings, damit kann man nicht rechnen ...\r\n    # also: in Ganzzahlen konvertieren mit int()\r\n    listeZeitstempel.append(int(werte[2]))\r\n    listeZeit.append(werte[3])       # Zeit lesbar, als String belassen\r\n    listeLeistung.append(float(werte[4]))   \r\n    listeEnergie.append(float(werte[5]))\r\n    zeileNr=zeileNr+1\r\n# Nutzerbegl\u00fcckung: Einen Teil der Listen ausgeben\r\nprint('Ergebnis-Listen (Auszug)')\r\nprint('..............................')\r\nprint('Nr \\t Zeit \\t Leistung \\t Energie')\r\nzeileNr=0\r\nwhile zeileNr<anzahlZeilen and zeileNr<10:\r\n    print(zeileNr, '\\t', listeZeit[zeileNr], '\\t', listeLeistung[zeileNr], '\\t', listeEnergie[zeileNr])\r\n    zeileNr=zeileNr+1\r\nzeileNr=anzahlZeilen-10\r\nprint('..............................')\r\nwhile zeileNr<(anzahlZeilen-2):\r\n    print(zeileNr, '\\t', listeZeit[zeileNr], '\\t', listeLeistung[zeileNr], '\\t', listeEnergie[zeileNr])\r\n    zeileNr=zeileNr+1\r\nprint ("Daten in Listen umkopiert.")\r\n\r\n# ------------------------\r\n# Stage 2 Daten umformen \/ anpassen\r\n# ------------------------\r\n# Es folgt ein mehrfach verketteter Dreisatz, um die Daten an den viewBox des SVG anzupassen\r\n# viewBox="0 0 800 400"\r\n# maximaler y-Wert: 50\r\n# minimaler y-Wert: 400-50\r\n# minimaler x-Wert: 50\r\n# maximaler x-Wert: 800-50\r\nyMin=50\r\nyMax=350\r\nyDelta=yMax-yMin\r\nxMin=50\r\nxMax=750\r\nxDelta=xMax-xMin\r\n# Aufbereiten der Daten, x-Werte m\u00fcssen nur einmal umgerechnet werden\r\nxZeitstempel=[]\r\nyLeistung=[]\r\nyEnergie=[]\r\n# ein paar Hilfsdaten\r\nmaxZeitstempel=max(listeZeitstempel)\r\nminZeitstempel=min(listeZeitstempel)\r\ndeltaZeitstempel=3*24*60*60 # drei Tage\r\nmaxLeistung=max(listeLeistung)\r\nmaxEnergie=max(listeEnergie)\r\nprint('maximale Leistung: ',maxLeistung,' Engergie geerntet: ',maxEnergie) # Nutzerbegl\u00fcckung\r\n\r\n# ------------------------------------------\r\n# Die folgenden Zeilen enthalten die eigentliche\r\n# "Magie" des Programms ...\r\n# ------------------------------------------\r\nzeileNr=1 \r\nwhile zeileNr<(anzahlZeilen-2):\r\n    xZeitstempel.append(xMin+int(round((listeZeitstempel[zeileNr]-minZeitstempel)\/deltaZeitstempel*xDelta)))\r\n    yLeistung.append(yMax-int(round(listeLeistung[zeileNr]\/maxLeistung*yDelta)))\r\n    yEnergie.append(yMax-int(round(listeEnergie[zeileNr]\/maxEnergie*yDelta)))\r\n    zeileNr=zeileNr+1\r\n# Nutzerbegl\u00fcckung: Einen Teil der Listen ausgeben\r\nprint('Daten-Umformung (Auszug)')\r\nprint('..............................')\r\nprint('Nr \\t Zeit \\t Leistung \\t Energie')\r\nzeileNr=0\r\nwhile zeileNr<anzahlZeilen and zeileNr<10:\r\n    print(zeileNr, '\\t', xZeitstempel[zeileNr], '\\t', yLeistung[zeileNr], '\\t', yEnergie[zeileNr])\r\n    zeileNr=zeileNr+1\r\nzeileNr=anzahlZeilen-10\r\nprint('..............................')\r\nwhile zeileNr<(anzahlZeilen-3):\r\n    print(zeileNr, '\\t', xZeitstempel[zeileNr], '\\t', yLeistung[zeileNr], '\\t', yEnergie[zeileNr])\r\n    zeileNr=zeileNr+1\r\nprint ("Daten an SVG angepasst.")\r\n\r\n# ------------------------\r\n# Stage 3 svg modifizieren\r\n# ------------------------\r\n# f\u00fcr jeden Wert einen Punkt erzeugen\r\nfor i in range(1,anzahlZeilen-3):\r\n    x_str=str(xZeitstempel[i])\r\n    yL_str=str(yLeistung[i])\r\n    yE_str=str(yEnergie[i])\r\n    polyLineErsatz1+=x_str+","+yL_str+" \\r\\n"\r\n    polyLineErsatz2+=x_str+","+yE_str+" \\r\\n"\r\n    # Nutzerbegl\u00fcckung sys.stdout.write('.')\r\nprint ()\r\n# Kontrolle\r\n# print ("polyline-Ersatz")\r\n# print ("---------------")\r\n# print (polyLineErsatz1)\r\n# print (polyLineErsatz2)\r\n# letzter Schritt: Platzhalter in svg ersetzen\r\nsvgOut=svgRahmen.replace("#*1*#",polyLineErsatz1)\r\nsvgOut=svgOut.replace("#*2*#",polyLineErsatz2)\r\nsvgOut=svgOut.replace("#*3*#",str(maxLeistung))\r\nsvgOut=svgOut.replace("#*4*#",str(max(xZeitstempel)))\r\nsvgOut=svgOut.replace("#*5*#",str(listeEnergie[anzahlZeilen-3]))\r\nsvgOut=svgOut.replace("#*6*#",listeZeit[1])\r\nsvgOut=svgOut.replace("#*7*#",listeZeit[anzahlZeilen-3])\r\n\r\n# speichern\r\n# Datei \u00f6ffnen, String hineinschreiben, schlie\u00dfen\r\ndatei = open('liniengrafik.svg','w')\r\ndatei.write(svgOut)\r\ndatei.close()\r\nprint ("Daten in linengrafik.svg gespeichert")\r\nprint ("----- fertig -----")\r\n<\/pre>\n
Listing 1: Python Quelltext<\/p>\n
C#<\/h4>\n
 <\/p>\n
\r\n\/\/ Noch aus der Python-Datei: #!\/usr\/bin\/env python3\r\n\/\/ -------------------------------\r\n\/\/ SVG-Liniengrafik\r\n\/\/ Datenvisualisierung mit Python >>> Umsetzung in C# \/ Dot Net\r\n\/\/ Claus Brell\r\n\/\/ 06.01.2024 >>> 08.01.2024\r\n\/\/ -------------------------------\r\n\/\/ Ablauf:\r\n\/\/   Stage 1: Daten laden von Internetquelle\r\n\/\/   Stage 2: Daten umformen \/ anpassen\r\n\/\/   Stage 3: SVG-Grafik erzeugen\r\n\/\/ -------------------------------\r\n\/\/ Vorbereitungen\r\n\/\/ -------------------------------\r\n\/\/ using System;    \/\/funktioniert auch so\r\n\/\/ using System.IO; \/\/funktioniert auch so\r\nusing System.Net; \/\/ entspricht Import f\u00fcr Internet-Zugriff\r\n\/\/ Das Folgende braucht man in Python nicht ...\r\n\/\/ ACHTUNG: Keinen expliziten namespace verwenden\r\n\r\nclass Program {\r\n static void Main(string[] args) {\r\n\r\n\/\/ initialisieren, sonst kann man nichts anh\u00e4ngen\r\n\/\/ f\u00fcr die x-Achse\r\n\/\/ so gehts: List<double> wertedummy =new List<double>() {1,2,3,4,5,6}; \/\/ vorbelegen\r\nList<string> listeZeit=new List<string>();\r\nList<int> listeZeitstempel=new List<int>();\r\n\/\/ f\u00fcr die y-Achse\r\nList<double> listeLeistung=new List<double>();\r\nList<double> listeEnergie=new List<double>();\r\n\/\/ --------------------------------\r\n\/\/ SVG-Rohling festlegen\r\n\/\/ --------------------------------\r\n\/\/ polyLineErsatz wird die transformierten Daten aufnehmen\r\nstring polyLineErsatz1="";\r\nstring polyLineErsatz2="";\r\n\/\/ mehrzeiliger String mit (""" in Python), in Dot Net kein Problem\r\nstring svgRahmen=@"<svg width=""800"" height=""400"" viewBox=""0 0 800 400""\r\nxmlns=""http:\/\/www.w3.org\/2000\/svg"">\r\n<desc>Liniengrafik mit Daten aus 2024<\/desc>\r\n<!-- x und y Achse           -->\r\n<line x1=""50"" y1=""350"" x2=""750"" y2=""350"" stroke=""#0a0a0a"" stroke-width=""2"" \/>\r\n<line x1=""50"" y1=""350"" x2=""50"" y2=""50"" stroke=""#0a0a0a"" stroke-width=""2"" \/>\r\n<!-- Beschriftung -->\r\n<!-- maximale Leistung -->\r\n<text x=""50"" y=""40"" fill=""#000000"" font-size=""16"" text-anchor=""middle"">#*3*#W<\/text>\r\n<!-- maximale Energie -->\r\n<text x=""#*4*#"" y=""40"" fill=""#ff0000"" font-size=""16"" text-anchor=""right"">#*5*#kWh<\/text>\r\n<!-- Startzeitpunkt -->\r\n<text x=""50"" y=""370"" fill=""#000000"" font-size=""16"" text-anchor=""left"">#*6*#<\/text>\r\n<!-- Endezeitpunkt -->\r\n<text x=""#*4*#"" y=""370"" fill=""#000000"" font-size=""16"" text-anchor=""right"">#*7*#<\/text>\r\n<!-- Polygonzug zeichnen     -->\r\n<!-- f\u00fcr Leistung            -->\r\n<polyline points=""#*1*#"" fill=""none"" stroke=""black""\/>\r\n<!-- f\u00fcr Energie             -->\r\n<polyline points=""#*2*#"" fill=""none"" stroke=""red""\/>\r\n<\/svg>\r\n";\r\n\/\/ ---------------------------------------\r\n\/\/ Stage 1 Daten laden von Internetquelle\r\n\/\/ (Daten Speichern wird hier aus didaktischen Gr\u00fcnden unterschlagen)\r\n\/\/ ---------------------------------------\r\nConsole.WriteLine("Stage 1 Daten von Internet-Quelle laden");\/\/ Nutzerbegl\u00fcckung\r\n\r\nstring url="https:\/\/clabremo.de\/shelly\/WS\/getshellycsvWS.php?shellyNr=192.168.1.81";\r\nConsole.WriteLine("Aufruf: "+url);                           \/\/ Nutzerbegl\u00fcckung \r\nstring response = "";\r\n\/\/Anlegen eines Webclients. Dieser \u00fcbernimmt das Herunterladen der Daten.\r\n\/\/ Lassen Sie sich durch die "Veraltet-Warnung" nicht verbl\u00fcffen\r\nWebClient myWebClient = new WebClient();\r\n\/\/ Datenstrom zur URL aufmachen in zwei Schritten\r\n\/\/ WARTUNG Console.WriteLine("Url: "+url);\r\nStream data=myWebClient.OpenRead(url);\r\nStreamReader reader=new StreamReader(data);\r\n\/\/ Kompletten Inhalt der R\u00fcckgabe in einen String einlesen\r\nConsole.Write("Beginne Daten Einlesen ...");\r\nresponse=reader.ReadToEnd();\r\nConsole.Write("Einlesen beendet, Enter dr\u00fccken (1) ...");\r\n\/\/ WARTUNG Console.ReadLine();\r\n\/\/ Verbindung wieder schlie\u00dfen\r\nreader.Close();\r\ndata.Close();\r\nConsole.WriteLine("\\r\\nresponse: ");\r\nConsole.WriteLine(response.Substring(0,512)); \r\nConsole.WriteLine(response.Substring(response.Length-512));                    \/\/ Nutzerbegl\u00fcckung\r\n\/\/ -----------------------------------\r\n\/\/ Daten in Listen\r\n\/\/ -----------------------------------\r\n\/\/ R\u00fcckgabeobjekt enth\u00e4lt den Inhalt der Internet-Ressource\r\n\/\/ Daraus eine Liste von Zeilen erzeugen\r\nstring[] zeilen=response.Split("\\r\\n"); \/\/ https:\/\/learn.microsoft.com\/de-de\/dotnet\/api\/system.string.split?view=net-8.0\r\nint anzahlZeilen=zeilen.Length;\r\nConsole.Write("Anzahl Zeilen: "); \/\/ Nutzerbegl\u00fcckung\r\nConsole.WriteLine(anzahlZeilen); \/\/ Nutzerbegl\u00fcckung\r\n\/\/ Jede Zeile in Datenfelder zerlegen und in separate Listen packen\r\n\/\/ Start mit 1, da in Zeile 0 die Spaltenbezeichnungen stehen\r\nint zeileNr=1; \r\n\/\/ Leider hat Python kein sch\u00f6nes for-Konzept, also while-Schleife verwenden\r\n\/\/ Zum Vergleich hier vergleichbare Programmierung\r\nConsole.WriteLine("Umformung... Enter dr\u00fccken (2) ...");\r\n\/\/ WARTUNG Console.ReadLine();\r\nwhile (zeileNr<(anzahlZeilen-1)){\r\n    \/\/ WARTUNG Console.Write('.');\r\n    string[] werte=zeilen[zeileNr].Split(';');\r\n    \/\/ WARTUNG print(werte)\r\n    \/\/ ACHTUNG: werte sind Strings, damit kann man nicht rechnen ...\r\n    \/\/ also: in Ganzzahlen konvertieren mit int()\r\n    listeZeitstempel.Add(Convert.ToInt32(werte[2])); \/\/https:\/\/learn.microsoft.com\/de-de\/dotnet\/api\/system.convert.toint32?view=net-8.0\r\n    listeZeit.Add(werte[3]);       \/\/ Zeit lesbar, als String belassen\r\n    \/\/ ACHTUNG: eingedeutschtes DOT NET verwirft Punkt als Dezmaltrenner und rechnet falsch!!!!!\r\n    listeLeistung.Add(Convert.ToDouble(werte[4].Replace(".",","))); \/\/ Korrigiert DOT NET Unsinn  \r\n    listeEnergie.Add(Convert.ToDouble(werte[5].Replace(".",","))); \/\/ Korrigiert DOT NET Unsinn\r\n    zeileNr++;\r\n} \/\/ Ende while\r\n\/\/ Nutzerbegl\u00fcckung: Einen Teil der Listen ausgeben\r\nConsole.WriteLine("Ergebnis-Listen (Auszug) Enter dr\u00fccken (3)");\r\n\/\/ WARTUNG Console.ReadLine();\r\nConsole.WriteLine("..............................");\r\nConsole.WriteLine("Nr \\t Zeit \\t\\t Leistung \\t Energie");\r\nzeileNr=0;\r\nwhile(zeileNr<anzahlZeilen & zeileNr<10){\r\n    Console.Write(zeileNr);\r\n    Console.Write("\\t");\r\n    Console.Write(listeZeit[zeileNr]);\r\n    Console.Write("\\t");\r\n    Console.Write(listeLeistung[zeileNr]);\r\n    Console.Write("\\t");\r\n    Console.WriteLine(listeEnergie[zeileNr]);\r\n    zeileNr++;\r\n}\r\nzeileNr=anzahlZeilen-10;\r\nConsole.WriteLine("..............................");\r\nwhile (zeileNr<(anzahlZeilen-2)){\r\n    Console.Write(zeileNr);\r\n    Console.Write("\\t");\r\n    Console.Write(listeZeit[zeileNr]);\r\n    Console.Write("\\t");\r\n    Console.Write(listeLeistung[zeileNr]);\r\n    Console.Write("\\t");\r\n    Console.WriteLine(listeEnergie[zeileNr]);\r\n    zeileNr++;\r\n}\r\nConsole.WriteLine("Daten in Listen umkopiert.");\r\n\r\n\/\/ ------------------------\r\n\/\/ Stage 2 Daten umformen \/ anpassen\r\n\/\/ ------------------------\r\n\/\/ Es folgt ein mehrfach verketteter Dreisatz, um die Daten an den viewBox des SVG anzupassen\r\n\/\/ viewBox="0 0 800 400"\r\n\/\/ maximaler y-Wert: 50\r\n\/\/ minimaler y-Wert: 400-50\r\n\/\/ minimaler x-Wert: 50\r\n\/\/ maximaler x-Wert: 800-50\r\nint yMin=50;\r\nint yMax=350;\r\nint yDelta=yMax-yMin;\r\nint xMin=50;\r\nint xMax=750;\r\nint xDelta=xMax-xMin;\r\n\/\/ Aufbereiten der Daten, x-Werte m\u00fcssen nur einmal umgerechnet werden\r\nList<int> xZeitstempel=new List<int>();\r\nList<int> yLeistung=new List<int>();\r\nList<int> yEnergie=new List<int>();\r\n\/\/ ein paar Hilfsdaten\r\nint maxZeitstempel=listeZeitstempel.Max();\r\nint minZeitstempel=listeZeitstempel.Min();\r\nint deltaZeitstempel=3*24*60*60; \/\/ drei Tage\r\ndouble maxLeistung=listeLeistung.Max();\r\ndouble maxEnergie=listeEnergie.Max();\r\nConsole.Write("kleinster Zeitstempel: ");\r\nConsole.Write(minZeitstempel); \/\/ Nutzerbegl\u00fcckung\r\nConsole.Write(" gr\u00f6\u00dfter Zeitstempel: ");\r\nConsole.Write(maxZeitstempel); \/\/ Nutzerbegl\u00fcckung\r\nConsole.Write(" Delta: ");\r\nConsole.WriteLine(deltaZeitstempel); \/\/ Nutzerbegl\u00fcckung\r\nConsole.Write("erster Zeitstempel: ");\r\nConsole.Write(listeZeitstempel[0]); \/\/ Nutzerbegl\u00fcckung\r\nConsole.Write(" letzter Zeitstempel: ");\r\nConsole.WriteLine(listeZeitstempel[anzahlZeilen-3]); \/\/ Nutzerbegl\u00fcckung\r\nConsole.Write("maximale Leistung: ");\r\nConsole.Write(maxLeistung); \/\/ Nutzerbegl\u00fcckung\r\nConsole.Write(" Energie geerntet: "); \/\/ Nutzerbegl\u00fcckung\r\nConsole.WriteLine(maxEnergie); \/\/ Nutzerbegl\u00fcckung\r\n\/\/ ------------------------------------------\r\n\/\/ Die folgenden Zeilen enthalten die eigentliche\r\n\/\/ "Magie" des Programms ...\r\n\/\/ ------------------------------------------\r\nzeileNr=0;\r\nwhile (zeileNr<(anzahlZeilen-2)){\r\n    xZeitstempel.Add(xMin+(int)Math.Round((double)(listeZeitstempel[zeileNr]-minZeitstempel)\/(double)deltaZeitstempel*(double)xDelta));\r\n    yLeistung.Add(yMax-(int)Math.Round((double)(listeLeistung[zeileNr]\/maxLeistung*yDelta)));\r\n    yEnergie.Add(yMax-(int)Math.Round((double)(listeEnergie[zeileNr]\/maxEnergie*yDelta)));\r\n    \/\/ WARTUNG Console.WriteLine(zeileNr);\r\n    \/\/ WARTUNG Console.WriteLine(xZeitstempel[zeileNr]);\r\n    zeileNr++;\r\n    \r\n}\r\n\/\/ Nutzerbegl\u00fcckung: Einen Teil der Listen ausgeben\r\nConsole.WriteLine("\\r\\nDaten-Umformung (Auszug)");\r\nConsole.WriteLine("..............................");\r\nConsole.WriteLine("Nr \\t Zeit \\t Leistung \\t Energie");\r\nzeileNr=0;\r\nwhile (zeileNr<anzahlZeilen & zeileNr<10){\r\n    Console.Write(zeileNr);\r\n    Console.Write('\\t');\r\n    Console.Write(xZeitstempel[zeileNr]);\r\n    Console.Write('\\t');\r\n    Console.Write(yLeistung[zeileNr]);\r\n    Console.Write('\\t');\r\n    Console.WriteLine(yEnergie[zeileNr]);\r\n    zeileNr++;\r\n}\r\nzeileNr=anzahlZeilen-10;\r\nConsole.WriteLine("..............................");\r\nwhile (zeileNr<(anzahlZeilen-3)){\r\n    Console.Write(zeileNr);\r\n    Console.Write('\\t');\r\n    Console.Write(xZeitstempel[zeileNr]);\r\n    Console.Write('\\t');\r\n    Console.Write(yLeistung[zeileNr]);\r\n    Console.Write('\\t');\r\n    Console.WriteLine(yEnergie[zeileNr]);    \r\n    zeileNr++;\r\n}\r\nConsole.WriteLine("Daten an SVG angepasst.");\r\n\r\n\/\/ ------------------------\r\n\/\/ Stage 3 svg modifizieren\r\n\/\/ ------------------------\r\n\/\/ f\u00fcr jeden Wert einen Punkt erzeugen\r\nstring x_str, yL_str, yE_str;\r\nfor (int i=1;i<(anzahlZeilen-3);i++){\r\n    x_str=xZeitstempel[i].ToString();\r\n    yL_str=yLeistung[i].ToString();\r\n    yE_str=yEnergie[i].ToString();\r\n    polyLineErsatz1+=x_str+","+yL_str+" \\r\\n";\r\n    polyLineErsatz2+=x_str+","+yE_str+" \\r\\n";\r\n    \/\/ Nutzerbegl\u00fcckung sys.stdout.write('.')\r\n}\r\n\r\n\/\/ Kontrolle (noch Zeilen aus Python Programm)\r\n\/\/ print ("polyline-Ersatz")\r\n\/\/ print ("---------------")\r\n\/\/ print (polyLineErsatz1)\r\n\/\/ print (polyLineErsatz2)\r\n\/\/ letzter Schritt: Platzhalter in svg ersetzen\r\nstring svgOut=svgRahmen.Replace("#*1*#",polyLineErsatz1);\r\nsvgOut=svgOut.Replace("#*2*#",polyLineErsatz2);\r\nsvgOut=svgOut.Replace("#*3*#",maxLeistung.ToString());\r\nsvgOut=svgOut.Replace("#*4*#",Convert.ToString(xZeitstempel.Max()-75)); \/\/ etwas nach links verschieben\r\nsvgOut=svgOut.Replace("#*5*#",Convert.ToString(listeEnergie[anzahlZeilen-3]));\r\nsvgOut=svgOut.Replace("#*6*#",listeZeit[1]);\r\nsvgOut=svgOut.Replace("#*7*#",listeZeit[anzahlZeilen-3]);\r\n\/\/ speichern\r\n\/\/ Datei \u00f6ffnen, String hineinschreiben, schlie\u00dfen\r\n\/\/ Das geht in C# einfacher als in Python\r\nFile.WriteAllText("liniengrafikDotNet.svg", svgOut); \r\nConsole.WriteLine("Daten in liniengrafikDotNet.svg gespeichert");\r\nConsole.WriteLine("----- fertig -----");\r\n\r\n } \/\/ Ende main\r\n}\/\/ Ende class\r\n\/\/ Achtung: kein Ende namespace\r\n<\/pre>\n
Listing 3: C# Quelltext<\/p>\n
 <\/p>\n
Anhang<\/h2>\n
Quellen<\/h3>\n
SVG Grafiken erzeugen mit chatGPT<\/a><\/p>\n
SVG Tutorials<\/p>\n
\u00dcbersicht von Tutorials auf selfhtml: https:\/\/wiki.selfhtml.org\/wiki\/SVG\/Tutorials<\/a><\/p>\n
Ein HTML-Seminar, das SVG beleuchtet: https:\/\/www.html-seminar.de\/svg-in-websites-nutzen.htm<\/a><\/p>\n
Glossar<\/h3>\n
ETL-Prozess<\/h4>\n
Extract, Transform, Load (ETL) ist ein Prozess, bei dem Daten aus mehreren, oft unterschiedlich oder auch gar nicht strukturierten Datenquellen geladen, umgeformt und dann in einer Zieldatenbank – das kann auch eine einfache Datei sein – zusammengef\u00fchrt werden. Eingesetzt werden ETL-Prozesse z.B. beim data-warehousing. Mittels ETL zusammengef\u00fchrte Daten werde oft visualisiert, um sie einer schnellen Beurteilung zug\u00e4nglich zu machen.<\/p>\n
Autor und Lizenz<\/h3>\n
Autor:<\/strong>\u00a0Prof. Dr. rer. nat. Claus Brell, aktuelle Projekte:\u00a0Biene40<\/a>,\u00a0AI4Bee<\/a>
\nLizenz:<\/strong>\u00a0CC BY<\/p>\n
<\/p>\n
Inhalte des Beitrages k\u00f6nnen Sie entsprechen der Lizenz verwenden. Unter dieser Lizenz ver\u00f6ffentlichte Werke darf jedermann f\u00fcr private, gewerbliche und sonstige Zwecke nutzen ver\u00e4ndern und auch neu ohne CC-Lizenz vermarkten. Als Urheber mache ich keine Rechte geltend.<\/p>\n
 <\/p>\n
<\/p>\n
 <\/p>\n
Teile diesen Beitrag.<\/div>