gdipCharts - draw charts on your GUI using GDI+

Post your working scripts, libraries and tools for AHK v1.1 and older
User avatar
nnnik
Posts: 4500
Joined: 30 Sep 2013, 01:01
Location: Germany

gdipCharts - draw charts on your GUI using GDI+

08 May 2017, 04:04

gdipCharts
Draw charts on your GUI using GDI+
ImageImage
Github Repository
Github Wiki + Tutorial

I am currently doing a rewrite of an old library that allowed it's users to draw Graphs using gdiplus.
The original script can be found here: https://github.com/Nigh/gdiChartLib
It had some issues. It was not really dynamic and didn't allow features such as scrolling etc.
That's why I am creating a new enhanced version of the Script.
Recommends AHK Studio
Helgef
Posts: 4709
Joined: 17 Jul 2016, 01:02
Contact:

Re: gdipCharts - draw charts on your GUI using GDI+

08 May 2017, 09:24

Hi nnnik. First, this looks very interesting, thanks for sharing.
However, I'm having a slight issue with a simple example, I'm trying to plot y=sin(x) for x ∈ (-π,π), it is fine for x ∈ (0,π), see example code,

Code: Select all

#Include gdipChart.ahk

SetBatchLines,-1

GUI,New
GUI +hwndGUI1
GUI,Show, w600 h400

gdipChart.drawAxis:="" ; :P
chart1 := new gdipChart( GUI1, "", [ 0, 0, 3.14, 1 ] )
data:=[[-3.140000,-0.001593],[-2.878333,-0.260229],[-2.616667,-0.501149],[-2.355000,-0.707951],[-2.093333,-0.866556],[-1.831667,-0.966166],[-1.570000,-1.000000],[-1.308333,-0.965754],[-1.046667,-0.865760],[-0.785000,-0.706825],[-0.523333,-0.499770],[-0.261667,-0.258691],[-0.000000,-0.000000],[0.261667,0.258691],[0.523333,0.499770],[0.785000,0.706825],[1.046667,0.865760],[1.308333,0.965754],[1.570000,1.000000],[1.831667,0.966166],[2.093333,0.866556],[2.355000,0.707951],[2.616667,0.501149],[2.878333,0.260229],[3.140000,0.001593]]
stream := chart1.addDataStream( data, 0xFF00FF00 )
stream.setVisible()
chart1.setVisible()
return

GUIClose:
ExitApp
But if I change chart1 := new gdipChart( GUI1, "", [ 0, 0, 3.14, 1 ] ) to chart1 := new gdipChart( GUI1, "", [ -3.14, -1, 3.14, 1 ] ) I just get the part (x,y)∈(-π,0)x(0,-1). Am I missunderstanding the field settings?
Spoiler
User avatar
nnnik
Posts: 4500
Joined: 30 Sep 2013, 01:01
Location: Germany

Re: gdipCharts - draw charts on your GUI using GDI+

08 May 2017, 09:55

Thanks for your response :)
Yes you are misunderstanding - or rather since I wrote this in a hurry I might have been unclear in the documentation.
[ x, y, w, h ] where x and y define the start point and w and h the width and height.
In your case you need to use [ -Pi, -1, 2*Pi, 2 ] since the width of the field between -Pi and Pi is 2*Pi and the width of the field between -1 and 1 is 2.
Recommends AHK Studio
Helgef
Posts: 4709
Joined: 17 Jul 2016, 01:02
Contact:

Re: gdipCharts - draw charts on your GUI using GDI+

08 May 2017, 10:08

:bravo: Thanks!
Spoiler
User avatar
nnnik
Posts: 4500
Joined: 30 Sep 2013, 01:01
Location: Germany

Re: gdipCharts - draw charts on your GUI using GDI+

08 May 2017, 10:22

D:
What happened to the axis?
Recommends AHK Studio
Helgef
Posts: 4709
Joined: 17 Jul 2016, 01:02
Contact:

Re: gdipCharts - draw charts on your GUI using GDI+

08 May 2017, 10:27

The axes seems to be fixed to intersect at lower left corner of the chart, regardless of the field. So I did gdipChart.drawAxis:="" since they where confusing me. :oops:
User avatar
nnnik
Posts: 4500
Joined: 30 Sep 2013, 01:01
Location: Germany

Re: gdipCharts - draw charts on your GUI using GDI+

08 May 2017, 10:35

Yeah they are. However I plan to change that.
Recommends AHK Studio
User avatar
nnnik
Posts: 4500
Joined: 30 Sep 2013, 01:01
Location: Germany

Multi Color Update

08 May 2017, 15:03

I pushed a new update to Github.
I fixed a bug in the generation algorithm of the test data where it would exceed the limits.
I also added a new example to showcase the backgroundColor capabilities and the new setFreezeRedraw() functionality.
Recommends AHK Studio
User avatar
jNizM
Posts: 3183
Joined: 30 Sep 2013, 01:33
Contact:

Re: gdipCharts - draw charts on your GUI using GDI+

09 May 2017, 08:04

Feature-Request: see here
[AHK] v2.0.5 | [WIN] 11 Pro (Version 22H2) | [GitHub] Profile
User avatar
nnnik
Posts: 4500
Joined: 30 Sep 2013, 01:01
Location: Germany

Axes and Resizing Update

10 May 2017, 09:56

I have added automatic resizing for GUIs. For GUIControls you still need to tell the chart that it should redraw manually ( by calling chart.setControlRect() without parameters )

I have added functionality to further control the axes behaviour and looks.

Code: Select all

axes := chart.getAxes() ;Will give you access to the axes object to further control the axes
axes.setVisible( visibility ) ;Gives you control over the axes visibility
axes.setColor( color ) ;gives you control over the color
axes.setOrigin( point := [ x, y ] ) ;gives you control over the axes center position. This is relative to the fields size and if they are attached also relative to the fields position
axes.setAttached( isAttached ) ;attaches the axes to the underlying field moving it with the field
I have added examples for everything.
Helgef wrote:beep

Code: Select all

#Include gdipChart.ahk

SetBatchLines,-1

GUI,New
GUI +hwndGUI1
GUI,Show, w600 h400

chart1 := new gdipChart( GUI1, "", [ -3.14, -1, 6.28, 2 ] )
data:=[[-3.140000,-0.001593],[-2.878333,-0.260229],[-2.616667,-0.501149],[-2.355000,-0.707951],[-2.093333,-0.866556],[-1.831667,-0.966166],[-1.570000,-1.000000],[-1.308333,-0.965754],[-1.046667,-0.865760],[-0.785000,-0.706825],[-0.523333,-0.499770],[-0.261667,-0.258691],[-0.000000,-0.000000],[0.261667,0.258691],[0.523333,0.499770],[0.785000,0.706825],[1.046667,0.865760],[1.308333,0.965754],[1.570000,1.000000],[1.831667,0.966166],[2.093333,0.866556],[2.355000,0.707951],[2.616667,0.501149],[2.878333,0.260229],[3.140000,0.001593]]
stream := chart1.addDataStream( data, 0xFF00FF00 )
chart1.getAxes().setAttached( 1 )
stream.setVisible()
chart1.setVisible()
return

GUIClose:
ExitApp
This would be what you wanted right?
Recommends AHK Studio
Helgef
Posts: 4709
Joined: 17 Jul 2016, 01:02
Contact:

Re: gdipCharts - draw charts on your GUI using GDI+

10 May 2017, 17:45

Perfect. :thumbup:
Cool new examples too :)
User avatar
jNizM
Posts: 3183
Joined: 30 Sep 2013, 01:33
Contact:

Re: gdipCharts - draw charts on your GUI using GDI+

11 May 2017, 03:31

Optional feature requests:
- Make the axis arrows optional (on / off)
- Add axis end line (crosswise to axis line) (on / off)
- Let users choose between axis arrows / corsswise end line or none
- Make axis pixel width optional (1px / 2px)
[AHK] v2.0.5 | [WIN] 11 Pro (Version 22H2) | [GitHub] Profile
User avatar
nnnik
Posts: 4500
Joined: 30 Sep 2013, 01:01
Location: Germany

Re: gdipCharts - draw charts on your GUI using GDI+

11 May 2017, 04:25

jNizM wrote:Optional feature requests:
- Make the axis arrows optional (on / off)
This is possible with Chart.getAxes().setVisible( true/false )
- Add axis end line (crosswise to axis line) (on / off)
I don't quite understand could you provide a picture or explain in detail?
Recommends AHK Studio
User avatar
jNizM
Posts: 3183
Joined: 30 Sep 2013, 01:33
Contact:

Re: gdipCharts - draw charts on your GUI using GDI+

11 May 2017, 05:34

chart.getAxes().setVisible(option)

option := 0 -> show no axes

option := 1 -> draw just the axes as a pure line (no arrowhead)

option := 2 -> draw arrowhead at the end of the axes (example image from google)
Image

option := 3 -> draw a line at the end of the axes (example image from google)
Image
[AHK] v2.0.5 | [WIN] 11 Pro (Version 22H2) | [GitHub] Profile
User avatar
nnnik
Posts: 4500
Joined: 30 Sep 2013, 01:01
Location: Germany

Grid Update

11 May 2017, 16:27

I added your suggestions to my to do List for this project - that has grown way beyond anything I would have imagined in the beginning.
So far I think I have completed most basic functionality. In this update I'm going to introduce grids.
Currently Grids are visible by default - they scale automatically however I don't like how I it currently - I might change how it is done in the future.
The Grid is on the field not attached to the window and I don't plan to add a feature for that.
Here are the new functions:

Access Grid functionality:

Code: Select all

grid := chart.getGrid()
Set the grids color:

Code: Select all

grid.setColor( ARGB )
Default is 0x7E7E7E

Set the grids visibility:

Code: Select all

grid.setVisible( visibility )
Default is 1

Set the grids origin:

Code: Select all

grid.setOrigin( point )
Point is an array like [ x, y ]. Default is [ 0, 0 ]

Set the grids size:

Code: Select all

grid.setFieldSize( size )
Size is an array like [ x, y ]. Default is [ 1, 1 ]

Set how the grid is scaled:

Code: Select all

grid.setFieldsPerView( amount )
amount is the number of Grid Fields that should be visible in the current view.
The grids size gets scaled by 2**x, where x is a rounded number that's closest to achieving the specified number of visible fields.
Default is 10.


Save a screenshot of the current Graph:

Code: Select all

chart.flushToFile( fileName )
This method is not new. However so far I haven't mentioned it. You can see how it works in my Test Screenshot.ahk.
Here I'd like to thank Helgef for providing the sinus example.
Recommends AHK Studio
User avatar
nnnik
Posts: 4500
Joined: 30 Sep 2013, 01:01
Location: Germany

Re: gdipCharts - draw charts on your GUI using GDI+

12 May 2017, 02:44

I have tweaked scaling a little bit. Now it also scales it in a way that makes the grid appear almost quadratically towards the user.
Recommends AHK Studio
Helgef
Posts: 4709
Joined: 17 Jul 2016, 01:02
Contact:

Re: Grid Update

12 May 2017, 11:58

nnnik wrote: Here I'd like to thank Helgef for providing the sinus example.
nnnik, you are welcome, I tried to add an example script on github, if you don't want it there, I'll post here. You can use it to make a better version of the screenshot in the first post, there are too few points in that one.

Cheers.
guest3456
Posts: 3454
Joined: 09 Oct 2013, 10:31

Re: Grid Update

12 May 2017, 12:10

nnnik wrote:that has grown way beyond anything I would have imagined in the beginning.
https://en.wikipedia.org/wiki/Hofstadter%27s_law

User avatar
nnnik
Posts: 4500
Joined: 30 Sep 2013, 01:01
Location: Germany

Re: gdipCharts - draw charts on your GUI using GDI+

12 May 2017, 12:20

Ever since your post and jNizMs examples I have been thinking about adding something like this to gdipChart.ahk directly.
For now I have just merged your example ( Though I need to review the code and test it myself ).
I also want to make it possible to draw with Beziers instead of simple lines. However styling is not a priority even if I had time.
Recommends AHK Studio
User avatar
nnnik
Posts: 4500
Joined: 30 Sep 2013, 01:01
Location: Germany

Re: Grid Update

12 May 2017, 12:21

guest3456 wrote:
nnnik wrote:that has grown way beyond anything I would have imagined in the beginning.
https://en.wikipedia.org/wiki/Hofstadter%27s_law
That's a cool article. Good to know :)
Recommends AHK Studio

Return to “Scripts and Functions (v1)”

Who is online

Users browsing this forum: DaveT1 and 110 guests