php-gtk2 Cookbook: How to dynamically scale a bar graph using scrollbars - Part 1 - y direction?

Google's CSE Search

Latest Comments

DirectPHP plugin
	yesterday @ 02:25
	Jose1974: Fantastic job!!! And only 4Kb!!! Incredible, fantistic, no words, congratulation...
How to display multiple marker...
	May 17 @ 22:04
	Rk: I have another example http://www.etechpulse.com/2013/05/how-to-show-google-map-...
Yahoo Stock Quote (AJAX module...
	May 17 @ 04:43
	kufer: Hi guys I?ve a problem using your module I installed it successfully and I?m usi...
DirectPHP plugin
	May 16 @ 09:50
	Netsistence: As suggested by someone at the joomla forum I decided to reïnstall Joomla, using...
DirectPHP plugin
	May 16 @ 01:02
	Netsistence: Looking at joomla forum last night, found more issues on this error for Joomla 3...
DirectPHP plugin
	May 15 @ 21:04
	kksou: Hi, You mentioned that you're using PHP version 5.3.3-7 + Squeeze3 Could it be b...
DirectPHP plugin
	May 15 @ 11:56
	Netsistence: Hi, I tried new installation on the same server Get the same error. On the same ...
DirectPHP plugin
	May 15 @ 08:59
	kksou: Hi, That's really strange, because I just tried installing it on a fresh install...
Yahoo Currency Converter - AJA...
	May 15 @ 08:10
	rocketero: Thank you guys for all the input and help. apparently as Dusan and you Kksou sai...
DirectPHP plugin
	May 15 @ 08:08
	Netsistence: Sorry, forgot to answer that part of your question. Yes, the error comes up whil...

Twitter News

Twitter News (total 20)

PHP-GTK2 eBooks

Main Menu

Home

Sample Codes

List all sample codes

Browse all sample codes

RSS Feed (PHP-GTK2)

Joomla Samples Menu

Links

Kenneth Chen's Blog
Restaurants Review
Powerpoint Resources

PHP-GTK2 Newsletter

PHP-GTK2 Tips & Techniques
FREE Newsletter
by kksou

Your privacy is respected.

Sample Code 445: How to dynamically scale a bar graph using scrollbars - Part 1 - y direction?

Written by kksou

Friday, 29 February 2008

Problem

This is in response to Paamayim's post titled 'smooth scrolling for a gtkimage drawing'.

He has set up a bar graph and wants to allow the user to dynamically change the scale of the x-axis and y-axis through the scrollbars as shown below.

As there are quite a number of techniques involved, to make it easier to follow, I've spread the techniques over 5 parts:

Part 1 (this article) - adds the vscrollbar
Part 2 - aligns the graph to bottom left
Part 3 - adds the hscrollbar
Part 4 - adds both vscrollbar and hscrollbar
Part 5 - use only one scrollbar to control scaling of both axis

How to dynamically scale a bar graph using scrollbars - Part 1 - y direction?

Solution

First set up the bar graph using the technique as outlined in How to draw a simple bar graph using GD2?
Create a GtkAdjustment.
Then create a GtkVscrollbar and attach the GtkAdjustment to the vscrollbar.
The signal value-changed allows you to know when the user change the value through the scrollbar.

Sample Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

<?php
$window = new GtkWindow();
$window->set_title($argv[0]);
$window->connect_simple('destroy', array('Gtk','main_quit'));
$window->add($vbox = new GtkVBox());

// display title
$title = new GtkLabel("Dynamically scale a bar graph using scrollbars\n".
"Part 1: y-direction only with vscrollbar");
$title->modify_font(new PangoFontDescription("Times New Roman Italic 10"));
$title->modify_fg(Gtk::STATE_NORMAL, GdkColor::parse("#0000ff"));
$title->set_size_request(-1, 40);
$title->set_justify(Gtk::JUSTIFY_CENTER);
$alignment = new GtkAlignment(0.5, 0, 0, 0);
$alignment->add($title);
$vbox->pack_start($alignment, 0, 0);
$vbox->pack_start(new GtkLabel(), 0, 0);

setup_bargraph($vbox);

$window->show_all();
Gtk::main();

function setup_bargraph($vbox) {
    global $img;
    $vbox->pack_start($hbox = new GtkHBox());
    $img = new GtkImage();

    $adj = new GtkAdjustment(0.87, 0.87, 2, 0.1, .5); // note 1
    $vscrollbar = new GtkVScrollbar($adj); // note 2
    $vscrollbar->connect('value-changed', 'on_value_changed'); // note 3
    $adj->set_value(1); // note 4
    $adj->value_changed();

    $hbox->pack_start($img);
    $hbox->pack_start($vscrollbar, 0);
    $hbox->set_size_request(400, 400);
}

function draw_bargraph($x_scale, $y_scale) {
    global $img;
    $max_width = 360;
    $max_height = 200 * $y_scale;
    $margin = 40;
    $im = imagecreate($max_width, $max_height);
    $white = imagecolorallocate($im,255,255,255);
    $black = imagecolorallocate($im,0,0,0);
    $blue = imagecolorallocate($im,0,0,255);

    $data = array('120','160','300','240');
    imageline($im, 10, 5, 10, $max_height-$margin, $black );
    imageline($im, 10, $max_height-$margin,
                $max_width-$margin, $max_height-$margin, $black );

Note that this is only 70% of the sample code. You have to be a registered member to see the entire sample code. Please login or register.
Registration is free and immediate.
Have some doubt about the registration? Please read this forum article.

Explanation

We make use of the code from How to draw a simple bar graph using GD2? to set up the bar graph.

What's new here:

Create the GtkAdjustment.
Create the vscrollbar and binds the GtkAdjustment to the scrollbar.
Register for the signal value-changed.
Set the initial value to 1.
Get the current value of the Gtkadjustment/scrollbar.
Redraw the bar graph.

Note

This example serves mainly to illustrate the use of GtkAdjustment and GtkVScrollbar. I will leave it to you to optimize and polish the gd2 portion (for the display of the bar graph).

Add comment

JComments

< Prev		Next >

[ Back ]