Liniendiagramm

[Nmk]

Moin Moin,

hat vielleicht jemand eine Idee wie ich ein Liniendiagramm realisieren kann? Wenn ich die "Suche" im Griff habe, konnte ich nichts brauchbares finden. Am Ende soll das Diagramm eine Zeitleiste darstellen in der 4 Linien den Monatsdurchschnitt von vier Parametern wiedergeben.

Das Problem ist auch, dass die Größe meiner Gui variable ist. Da ich selbst noch weit davon entfernt bin, dass sowas in meinem Kopf entsteht, freue ich mich über jeden Ansatz.

Gruß

Nmk

[jNizM]

https://github.com/Nigh/gdiChartLib

[just me]

Moin,

wenn Du auf Excel zugreifen kannst und Dich mit Excel Charts auskennst, könnte auch XLC Lib - generate and export Excel Charts interessant sein.

[BoBo]

Ad hoc fällt mir D3.js, oder jqPlot, oder Google Charts ein.

[hoppfrosch]

Meine Allzweckwaffe für schnelle Diagramme: Ploticus:

• Mit der Scriptsprache der Wahl ein Ploticus-Skript erstellen
• Mit Ploticus den eigentlichen Graphen im gewünschten Format erzeugen
• Graph in GUI einbinden

[Jovannb]

Hi

imagemagick kann das auch

[Nmk]

Moin Moin,

letzte Woche war ich außer Gefecht gesetzt, daher komme ich erst jetzt dazu, mich damit auseinanderzusetzen.

Vielen Dank für die vielen Ansätze und das damit verbundene Aufzeigen, dass ich die Suche wohl nicht im Griff habe. gdiChartLib habe ich einmal kurz getestet. Im Grunde genau das, was ich brauche. Es benötigt aber viel Zeit zur Erstellung und lässt sich nicht skalieren. XLCLib führt bei mir zu einer Fehlermeldung (0x80070057 – Der angegebene Wert liegt außerhalb des zulässigen Bereichs. / 128: Param.Transparency). Nachteil bei XLCLib ist, dass Excel vorhanden sein muss.

Meine Diagramme müssen sehr schnell erzeugt werden. Über ein DDL kann man Ansichten wechseln und in dem Moment wo das passiert, sollte das entsprechende Diagramm schon da sein. Ich kann größtenteils Balkendiagramme verwenden. Dabei habe ich an „Progress“ gedacht:

Code: Select all

#NoEnv
SendMode Input
SetWorkingDir %A_ScriptDir%
;--------------------

	BChart()
Return

BChart(){

	Global
		
	Gui, BChart:New, +Resize +Caption +E0x200 -MinimizeBox -MaximizeBox +AlwaysOnTop +OwnDialogs -ToolWindow
	Gui, Color, White
	Gui, Margin, 2, 2

	Gui, Font, s9 Norm cBlack, Ms Shell Dlg 2
	
	Gui Add, Text, xm ym w50 h30 +0x200 +Center +Border, 1
	Gui Add, Text, x+m yp w50 h30 +0x200 +Center +Border, 2
	Gui Add, Text, x+m yp w50 h30 +0x200 +Center +Border, 3
	Gui Add, Text, x+m yp w50 h30 +0x200 +Center +Border, 4

	Gui, Add, Progress, hWndhMGuiBar1 xm y+m w50 h150 c0x4472C4 BackgroundFFFFFF +Smooth +Vertical vBar1, 30 ; blue
	Gui, Add, Progress, hWndhMGuiBar2 x+m yp w50 h150 c0xED7D31 BackgroundFFFFFF +Smooth +Vertical vBar2, 50 ; orange
	Gui, Add, Progress, hWndhMGuiBar3 x+m yp w50 h150 c0xA5A5A5 BackgroundFFFFFF +Smooth +Vertical vBar3, 70 ; grey
	Gui, Add, Progress, hWndhMGuiBar4 x+m yp w50 h150 c0xFFC000 BackgroundFFFFFF +Smooth +Vertical vBar4, 40 ; yellow

	Gui, Font, s7 Norm cBlack, Ms Shell Dlg
	
	Gui Add, Text, xm y+0 w50 h20 +0x200 +Center +Border, 1
	Gui Add, Text, x+m yp w50 h20 +0x200 +Center +Border, 2
	Gui Add, Text, x+m yp w50 h20 +0x200 +Center +Border, 3
	Gui Add, Text, x+m yp w50 h20 +0x200 +Center +Border, 4

	Gui, Add, StatusBar

	Gui, Show, AutoSize, Progress Chart
		
	Return
	
	
	BChartExit:
	BChartGuiClose:
	BChartGuiEscape:
		ExitApp

}

Diese Variante kann, mehr oder weniger gut, aber sehr schnell abgebildet werden, jedoch bereitet mir die Größenänderung in alle Richtungen noch Probleme. Außerdem wird es sehr aufwändig wenn mehrere Diagramme nebeneinander abgebildet werden sollen.

Zwischenzeitig habe ich gedacht eine HTML-Datei mit einzubetten und das Ganze mit CSS zu realisieren. Zumindest die Balkendiagramme. Jedoch habe ich mich gleich an HTML5 und CSS3 bedient und dabei wurde ich auch mit Fehlermeldungen bombardiert. Ideal wäre eine vektorbasierte Lösung.

Ich schaue mir erstmal die weiteren Möglichkeiten noch an.

Gruß

Nmk

[BoBo]

Möcht jetzt nicht lügen, aber eine (ältere?) version von google charts ermöglichte die übergabe der notwendigen parameter mit GET an den google server.
Ein solcher string ließ sich ohne probleme dynamisch mit ahk zusammenbauen und wurde mit geringer latenz als chart retourniert.

[Nmk]

Nach genauerer Betrachtung gefällt mir JQPlot und seine Möglichkeiten am besten. Google Charts ist allerdings auch sehr attraktiv.

@Bobo: Meinst du sowas (???):
http://chart.apis.google.com/chart?chs= ... |&chxt=x,y

Das funktioniert super und auch erstaunlich schnell, jedoch bekomme ich Darstellungsprobleme, wenn der Benutzer das Programmfenster in der Größe verändert. Was ist mit GET gemeint?

Ich versuche gerade eine HTML Frame in meine GUI einzubinden und z.B. das was folgt einzusetzen:

Code: Select all

<html>
<head>
<title>Google Charts Tutorial</title>
   <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
   <script type="text/javascript">
     google.charts.load('current', {packages: ['corechart','line']});  
   </script>
</head>
<body>
<div id="container" style="width: 1000px; height: 200px; margin: 0 auto"></div>
<script language="JavaScript">
function drawChart() {
   // Define the chart to be drawn.
   var data = new google.visualization.DataTable();
   data.addColumn('string', 'Month');
   data.addColumn('number', 'Tokyo');
   data.addColumn('number', 'New York');
   data.addColumn('number', 'Berlin');
   data.addColumn('number', 'London');
   data.addRows([
      ['Jan',  7.0, -0.2, -0.9, 3.9],
      ['Feb',  6.9, 0.8, 0.6, 4.2],
      ['Mar',  9.5,  5.7, 3.5, 5.7],
      ['Apr',  14.5, 11.3, 8.4, 8.5],
      ['May',  18.2, 17.0, 13.5, 11.9],
      ['Jun',  21.5, 22.0, 17.0, 15.2],
      ['Jul',  25.2, 24.8, 18.6, 17.0],
      ['Aug',  26.5, 24.1, 17.9, 16.6],
      ['Sep',  23.3, 20.1, 14.3, 14.2],
      ['Oct',  18.3, 14.1, 9.0, 10.3],
      ['Nov',  13.9,  8.6, 3.9, 6.6],
      ['Dec',  9.6,  2.5,  1.0, 4.8]
   ]);
   
   // Set chart options
   var options = {
      chart: {
         title: 'Average Temperatures of Cities',
         subtitle: 'Source: worldclimate.com'
      },   
      hAxis: {
         title: 'Month',         
      },
      vAxis: {
         title: 'Temperature',        
      }, 
      'width':1000,
      'height':200      
   };

   // Instantiate and draw the chart.
   var chart = new google.charts.Line(document.getElementById('container'));
   chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>

Mit JQPlot müsste das eigentlich auch Offline gehen. Da bin ich aber gerade noch weit von entfernt. Erst dachte ich das geht alles nicht mit AHK und nun habe ich die Wahl der Qual.

Ich bin noch nicht soweit, dass ich beurteilen kann welche Variante die Beste ist. Ich muss erstmal weiter tüfteln.

Nmk

[BoBo]

Bin nicht sicher ob das hier wirklich weiterhilft (möglicherweise etwas angestaubt).
Vll findet sich ja ein wissender, der dir hierzu mehr sagen, bzw etwas bzgl einer einbindung mit AHK raten kann.
Stichwort HTA-datei: [Einbinden von Skripts in eine grafische Benutzeroberfläche]

Ich hab mal den beispielcode von [hier] in eine HTA-datei (einfache text-datei mit datei-endung *.hta) gepasted. Wenn du ein solches dokument als template on-the-fly mit werten befüllst, solltest du eine schnelle darstellung deiner charts hinbekommen. Das HTA ist ein standard windows fenster und sollte sich demnach mit AHK manipulieren lassen (?).
Dieses statement war mal wieder ohne gewähr.

Spoiler

Code: Select all

<html>
  <head>
  <title>Meine Charts</title> 
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">

      // Load the Visualization API and the corechart package.
      google.charts.load('current', {'packages':['corechart']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.charts.setOnLoadCallback(drawChart);

      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {

        // Create the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Topping');
        data.addColumn('number', 'Slices');
        data.addRows([
          ['Mushrooms', 3],
          ['Onions', 1],
          ['Olives', 1],
          ['Zucchini', 1],
          ['Pepperoni', 2]
        ]);

        // Set chart options
        var options = {'title':'How Much Pizza I Ate Last Night',
                       'width':400,
                       'height':300};

        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>

  <body>
    <!--Div that will hold the pie chart-->
    <div id="chart_div"></div>
  </body>
</html>

    
<HTA:APPLICATION
    APPLICATIONNAME = "A Simple HTA Application"
    ICON = "599CD.ico"
    ID = "NAME"
    BORDER = "thick"
    CAPTION = "yes"
    SHOWINTASKBAR = "yes"
    SINGLEINSTANCE = "yes"
    SYSMENU = "yes"
    WINDOWSTATE="maximize"
    SCROLL = "no"
    SCROLLFLAT = "no"
    VERSION = "1.0"
    INNERBORDER = "yes"
    SELECTION = "yes"
    MAXIMIZEBUTTON = "yes"
    MINIMIZEBUTTON = "yes"
    NAVIGABLE = "yes"
    CONTEXTMENU = "yes"
    BORDERSTYLE = "normal"
/>

PS. [GET vs POST]

PPS. Auch nicht schlecht
[Google Charts Generator]

[nnnik]

Ich glaube am einfachsten wäre es wenn jemand die GDIChartLib neu schreibt.

[jNizM]

Feel free nnnik

[nnnik]

Ich arbeite im Moment an einer OOP Version von GDIp welche momentan noch keine Text Funktionalität enthält.
Wenn ich einen rewrite dieser Klasse machen würde, würde ich meine neue Klasse verwenden - die ich dafür erst erweitern müsste.
Das kann eine ganze Weile dauern, da Text momentan keine Priorität für mich hatte und ich mich noch nicht mit dem Thema eingehend beschäftigt habe.
Trotzdem werde ich mich an die Arbeit machen.

[nnnik]

Ich habe nun Text Funktionalität rudimentär eingebaut. Ich werde mich nun an das rewrite machen.

[nnnik]

Ich bin mittlerweile so weit: https://github.com/nnnik/gdiChartLib
Ich kann bald erste Zeichnungen erstellen und erste Daten ausgeben.
Dokumentiert ist das ganze noch gar nicht.
Bei meiner Version erstellt man einen Chart auf einer hWND, diese kann aber noch andere Sachen enthalten.
Man kann die Region die der Chart einnimmt festlegen mit setControlRect.
Bei meiner Version fügt man verschiedene DataStreams hinzu die jeweils ihre eigene Farbe/Namen/Daten haben.
Man kann alle Werte dabei dynamisch verändern. Über setVisiblity kann man den chart oder einen DataStream unsichtbar machen.

Ich bin jedoch ziemlich erschöpft und muss mich auf meine Klausuren konzentrieren also werde ich das Projekt fürs erste auf Eis legen.

[BoBo]

Ich bin jedoch ziemlich erschöpft und muss mich auf meine Klausuren konzentrieren also werde ich das Projekt fürs erste auf Eis legen.

Viel Erfolg/Glück, und danke für deinen Einsatz

[nnnik]

Ich hab dann doch nochmal weiter gemacht. Im Moment sieht es noch nicht nach viel aus - jedoch das Grundgerüst für die Verwendung steht.
Wenn man wollte könnte man damit jetzt schon erste Skripte schreiben.
Bis jetzt habe ich es hinbekommen den Verlauf darzustellen.
Jedoch fehlt jegliche Form von Axen oder Gitter in dem Skript.
Die Punkte werden auch noch Momentan falsch herum dargestellt.
Zudem werden immer alle Punkte gezeichnet - ob sie jetzt innerhalb des dargestellten Bereichs sind oder nicht.
Ich hab ein Margin hinzugefügt, hab wohl aber beim verrechnen des ganzen noch einen Fehler.
Zudem erwartet das Skript seine Daten sortiert entlang X und sortiert auch nicht selber um das sicherzustellen.

neueste Version Hier: https://github.com/nnnik/gdiChartLib

[Nmk]

Was würde ich dafür geben, wenn ich nur in meinem Kopf kramen müsste um so etwas entstehen zu lassen. Ich würde ja gerne meinen Beitrag dazu leisten. Vermutlich bin ich mal gerade dafür qualifiziert, um dir mit Palmenblättern frische Luft zu zu wedeln.

Ich habe am Wochenende eine ganze Menge rumprobiert und dabei eine gute Lösung zustande gebracht. Alles wird korrekt dargestellt und ist Responsive. Verwendet habe ich dafür Webapp.ahk und canvasjs.min.js. In dem Moment der Fertigstellung entdecke ich unten links im Chart in hellgrau "Trial Version". Kostet gerade mal 400 Schleifen. Ich kriege ein Fön. Und es ging mir bei dieser Hürde nur darum, es korrekt in meiner Gui abzubilden. Um die Übergabe der Werte habe mir noch gar keine Gedanken gemacht. Ein Schritt vor, zwei zurück. Das ist frustrierend.

Die HTA-Datei funktioniert super und scheint auch wesentlich unkomplizierter als der eigentliche Browser zu sein. Kann ich die Ausgabe irgendwie in meiner GUI abbilden? Also quasi wie mit einem ActiveX Control?

Gruß

Nmk

[nnnik]

Danke aber ich erwarte kaum, dass irgendjemand durch meinen chaotischen Code durchblickt.
( Will ich auch gar nicht da ich eigene Pläne für das Skript habe )
Ich werde wahrscheinlich Morgen weiterarbeite, da da die Klausur vorüber ist und ich vermutlich etwas Bestätigung brauche.
Dennoch habe ich bereits ein bisschen weitergearbeitet und einen weiteren Test hinzugefügt.
Zudem werden die Punkte jetzt richtig herum dargestellt und Achsen werden auch dargestellt.
Weiterhin werden jetzt nur die Punkte gezeichnet die innerhalb des X Bereichs liegen.
Ich habe auch einen weiteren Test geschrieben der zeigt wie man das FieldRect zu verwenden hat.
Die letzten Updates wie immer hier: https://github.com/nnnik/gdiChartLib

[BoBo]

... aber ich erwarte kaum, dass irgendjemand durch meinen chaotischen Code durchblickt.
( Will ich auch gar nicht da ich eigene Pläne für das Skript habe ...

BTW, auf der seite zu [webapp.ahk] wird auf [SVGraph] verwiesen, welches wiederum auf [d3] basiert, der grundlage für ein aktuelles fundstück: [c3].
Beide generieren charts ebenfalls aus einer csv datei, siehe [hier] )

Make up your mind - und falls langweile aufkommt: [Exo]