NAME

Tk::Chart::Lines - Extension of Canvas widget to create a line graph.

SYNOPSIS

#!/usr/bin/perl
use strict;
use warnings;
use Tk;
use Tk::Chart::Lines;

my $mw = MainWindow->new(
  -title      => 'Tk::Chart::Lines example',
  -background => 'white',
);
my $chart = $mw->Lines(
  -title  => 'My graph title',
  -xlabel => 'X Label',
  -ylabel => 'Y Label',
)->pack(qw / -fill both -expand 1 /);

my @data = (
  [ '1st', '2nd', '3rd', '4th', '5th', '6th', '7th', '8th', '9th' ],
  [ 1,     2,     5,     6,     3,     1.5,   1,     3,     4 ],
  [ 4,     2,     5,     2,     3,     5.5,   7,     9,     4 ],
  [ 1,     2,     52,    6,     3,     17.5,  1,     43,    10 ]
);

# Add a legend to the graph
my @legends = ( 'legend 1', 'legend 2', 'legend 3' );
$chart->set_legend(
  -title       => 'Title legend',
  -data        => \@legends,
  -titlecolors => 'blue',
);

# Add help identification
$chart->set_balloon();

# Create the graph
$chart->plot( \@data );

MainLoop();

DESCRIPTION

Tk::Chart::Lines is an extension of the Canvas widget. It is an easy way to build an interactive line graph into your Perl Tk widget. The module is written entirely in Perl/Tk.

You can set a background gradient color.

You can change the color, font of title, labels (x and y) of the graph. You can set an interactive legend. The axes can be automatically scaled or set by the code. With this module it is possible to plot quantitative variables according to qualitative variables.

When the mouse cursor passes over a plotted line or its entry in the legend, the line and its entry will be turned to a color (that you can change) to help identify it.

You can use 3 methods to zoom (vertically, horizontally or both).

BACKGROUND GRADIENT COLOR

You can set a background gradient color by using all methods of Tk::Canvas::GradientColor. By default, it is not enabled.

To enabled background gradient color the first time, you firstly have to call enabled_gradientcolor method and configure your color and type of gradient with set_gradientcolor.

$chart->enabled_gradientcolor();
$chart->set_gradientcolor(
    -start_color => '#6585ED',
    -end_color   => '#FFFFFF',
);

Please, read "WIDGET-SPECIFIC METHODS" in Tk::Canvas::GradientColor documentation to know all available configurations.

STANDARD OPTIONS

-background -borderwidth -closeenough -confine -cursor -height -highlightbackground -highlightcolor -highlightthickness -insertbackground -insertborderwidth -insertofftime -insertontime -insertwidth -relief -scrollregion -selectbackground -selectborderwidth -selectforeground -takefocus -width -xscrollcommand -xscrollincrement -yscrollcommand -yscrollincrement

Many options allow you to configure your graph as you want. The default configuration is already OK, but you can change it.

Options for all lines graph

Name: Title

Class: Title

Switch: -title

Title of your graph.

-title => 'My graph title',

Default : undef

Name: Titleposition

Class: TitlePosition

Switch: -titleposition

Position of title : center, left or right

-titleposition => 'left',

Default : center

Name: Titlecolor

Class: TitleColor

Switch: -titlecolor

Title color of your graph.

-titlecolor => 'red',

Default : black

Name: Titlefont

Class: TitleFont

Switch: -titlefont

Set the font for the title text. See also textfont option.

-titlefont => 'Times 15 {normal}',

Default : {Times} 12 {bold}

Name: Titleheight

Class: TitleHeight

Switch: -titleheight

Height for title graph space.

-titleheight => 100,

Default : 40

Name: Xlabel

Class: XLabel

Switch: -xlabel

The label to be printed just below the x-axis.

-xlabel => 'X label',

Default : undef

Name: Xlabelcolor

Class: XLabelColor

Switch: -xlabelcolor

Set x label color. See also textcolor option.

-xlabelcolor => 'red',

Default : black

Name: Xlabelfont

Class: XLabelFont

Switch: -xlabelfont

Set the font for the x label text. See also textfont option.

-xlabelfont => 'Times 15 {normal}',

Default : {Times} 10 {bold}

Name: Xlabelheight

Class: XLabelHeight

Switch: -xlabelheight

Height for x label space.

-xlabelheight => 50,

Default : 30

Name: Xlabelskip

Class: XLabelSkip

Switch: -xlabelskip

Print every xlabelskip number under the tick on the x-axis. If you have a dataset wich contain many points, the tick and x values will be overwrite on the graph. This option can help you to clarify your graph. Eg:

# ['leg1', 'leg2', ...'leg1000', 'leg1001', ... 'leg2000'] => There are 2000 ticks and text values on x-axis.
-xlabelskip => 1 => ['leg1', 'leg3', 'leg5', ...]        # => 1000 ticks will be display.

See also -xvaluesregex option.

-xlabelskip => 2,

Default : 0

Name: Xvaluecolor

Class: XValueColor

Switch: -xvaluecolor

Set x values colors. See also textcolor option.

-xvaluecolor => 'red',

Default : black

Name: Xvaluespace

Class: XValueSpace

Switch: -xvaluespace

Width for x values space.

-xvaluespace => 50,

Default : 30

Name: Xvalueview

Class: XvalueView

Switch: -xvalueview

View values on x-axis.

-xvalueview => 0, # 0 or 1

Default : 1

Name: Xvaluesregex

Class: XValuesRegex

Switch: -xvaluesregex

View the x values which will match with regex. It allows you to display tick on x-axis and values that you want. You can combine it with -xlabelskip to display many dataset.

...
['leg1', 'leg2', 'data1', 'data2', 'symb1', 'symb2']
...

-xvaluesregex => qr/leg/i,

On the graph, just leg1 and leg2 will be display.

Default : qr/.+/

Name: Ylabel

Class: YLabel

Switch: -ylabel

The label to be printed next to y-axis.

-ylabel => 'Y label',

Default : undef

Name: Ylabelcolor

Class: YLabelColor

Switch: -ylabelcolor

Set the color of y label. See also textcolor option.

-ylabelcolor => 'red',

Default : black

Name: Ylabelfont

Class: YLabelFont

Switch: -ylabelfont

Set the font for the y label text. See also textfont option.

-ylabelfont => 'Times 15 {normal}',

Default : {Times} 10 {bold}

Name: Ylabelwidth

Class: YLabelWidth

Switch: -ylabelwidth

Width of space for y label.

-ylabelwidth => 30,

Default : 5

Name: Yvaluecolor

Class: YValueColor

Switch: -yvaluecolor

Set the color of y values. See also valuecolor option.

-yvaluecolor => 'red',

Default : black

Name: Yvalueview

Class: YvalueView

Switch: -yvalueview

View values on y-axis.

-yvalueview => 0, # 0 or 1

Default : 1

Name: Yminvalue

Class: YMinValue

Switch: -yminvalue

Minimum value displayed on the y-axis. See also -interval option.

-yminvalue => 10.12,

Default : 0

Name: Ymaxvalue

Class: YMaxValue

Switch: -ymaxvalue

Maximum value displayed on the y-axis. See also -interval option.

-ymaxvalue => 5,

Default : Computed from data sets

Name: interval

Class: Interval

Switch: -interval

If set to a true value, -yminvalue and -ymaxvalue will be fixed to minimum and maximum values of data sets. It overwrites -yminvalue and -ymaxvalue options.

-interval => 1, # 0 or 1

Default : 0

Name: Labelscolor

Class: LabelsColor

Switch: -labelscolor

Combine xlabelcolor and ylabelcolor options. See also textcolor option.

-labelscolor => 'red',

Default : undef

Name: Valuescolor

Class: ValuesColor

Switch: -valuescolor

Set the color of x, y values in axes. It combines xvaluecolor and yvaluecolor options.

-valuescolor => 'red',

Default : undef

Name: Textcolor

Class: TextColor

Switch: -textcolor

Set the color of x, y labels and title text. It combines titlecolor, xlabelcolor and ylabelcolor options.

-textcolor => 'red',

Default : undef

Name: Textfont

Class: TextFont

Switch: -textfont

Set the font of x, y labels and title text. It combines titlefont, xlabelfont and ylabelfont options.

-textfont => 'Times 15 {normal}',

Default : undef

Name: Longticks

Class: LongTicks

Switch: -longticks

If longticks is a true value, x and y ticks will be drawn with the same length as the axes. See also -xlongticks and -ylongticks options.

-longticks => 1, #  0 or 1

Default : 0

Name: Longtickscolor

Class: LongTicksColor

Switch: -longtickscolor

Set the color of x and y ticks that will be drawn with the same length as the axes. See also -xlongtickscolor and -ylongtickscolor options.

-longtickscolor => 'red',

Default : undef

Name: XLongticks

Class: XLongTicks

Switch: -xlongticks

If xlongticks is a true value, x ticks will be drawn with the same length as the x-axis. See also -longticks.

-xlongticks => 1, #  0 or 1

Default : 0

Name: YLongticks

Class: YLongTicks

Switch: -ylongticks

If ylongticks is a true value, y ticks will be drawn with the same length as the axes. See also -longticks.

-ylongticks => 1, #  0 or 1

Default : 0

Name: XLongtickscolor

Class: XLongTicksColor

Switch: -xlongtickscolor

Set the color of xlongticks. See also -xlongtickscolor.

-xlongtickscolor => 'red',

Default : #B3B3B3

Name: YLongtickscolor

Class: YLongTicksColor

Switch: -ylongtickscolor

Set the color of ylongticks. See also -ylongtickscolor.

-ylongtickscolor => 'red',

Default : #B3B3B3

Name: Boxaxis

Class: BoxAxis

Switch: -boxaxis

Draw the axes as a box.

-boxaxis => 1, #  0 or 1

Default : 0

Name: Noaxis

Class: NoAxis

Switch: -noaxis

Hide the axes with ticks and values ticks.

-noaxis => 1, # 0 or 1

Default : 0

Name: Zeroaxis

Class: ZeroAxis

Switch: -zeroaxis

If set to a true value, the axes for y values will only be drawn. This might be useful in case your graph contains negative values, but you want it to be clear where the zero value is (see also zeroaxisonly and boxaxis).

-zeroaxis => 1, # 0 or 1

Default : 0

Name: Zeroaxisonly

Class: ZeroAxisOnly

Switch: -zeroaxisonly

If set to a true value, the zero x-axis will be drawn and no axes at the bottom of the graph will be drawn. The labels for X values will be placed on the zero x-axis. This works if there is at least one negative value in dataset.

-zeroaxisonly => 1, # 0 or 1

Default : 0

Name: Axiscolor

Class: AxisColor

Switch: -axiscolor

Color of the axes.

-axiscolor => 'red',

Default : black

Name: Xtickheight

Class: XTickHeight

Switch: -xtickheight

Set height of all x ticks.

-xtickheight => 10,

Default : 5

Name: Xtickview

Class: XTickView

Switch: -xtickview

View x ticks of graph.

-xtickview => 0, # 0 or 1

Default : 1

Name: Yticknumber

Class: YTickNumber

Switch: -yticknumber

Number of ticks to print for the y-axis.

-yticknumber => 10,

Default : 4

Name: Ytickwidth

Class: YtickWidth

Switch: -ytickwidth

Set width of all y ticks.

-ytickwidth => 10,

Default : 5

Name: Ytickview

Class: YTickView

Switch: -ytickview

View y ticks of graph.

-ytickview => 0, # 0 or 1

Default : 1

Name: Alltickview

Class: AllTickView

Switch: -alltickview

View all ticks of graph. Combines xtickview and ytickview options.

-alltickview => 0, # 0 or 1

Default : undef

Name: Linewidth

Class: LineWidth

Switch: -linewidth

Set width of all lines graph of dataset.

-linewidth => 10,

Default : 1

Name: Colordata

Class: ColorData

Switch: -colordata

This controls the colors of the lines. This should be a reference to an array of color names.

-colordata => [ qw(green pink blue cyan) ],

Default :

[ 'red',     'green',   'blue',    'yellow',  'purple',  'cyan',
  '#996600', '#99A6CC', '#669933', '#929292', '#006600', '#FFE100',
  '#00A6FF', '#009060', '#B000E0', '#A08000', 'orange',  'brown',
  'black',   '#FFCCFF', '#99CCFF', '#FF00CC', '#FF8000', '#006090',
],

The default array contains 24 colors. If you have more than 24 samples, the next line will have the color of the first array case (red).

Name: verbose

Class: Verbose

Switch: -verbose

Warning will be print if necessary.

-verbose => 0,

Default : 1

Options for spline lines graph

Name: Bezier

Class: Bezier

Switch: -bezier

To create lines graph as Bézier curve. The curve crosses only by the extreme points (the first and the last).

-bezier => 1, # 0 or 1

Default : 0

Name: Spline

Class: Spline

Switch: -spline

To create lines graph as Bézier curve. The curve crosses by all points. The -bezier option has to be set to 1.

-spline => 1, # 0 or 1

Default : 0

Options for point lines graph

These options are specific to point lines graph creation.

Name: Pointline

Class: PointLine

Switch: -pointline

Set a true value to create point lines graph.

-pointline => 1, # 0 or 1

Default : 0

Name: Markersize

Class: MarkerSize

Switch: -markersize

The size of the markers used in points graphs, in pixels.

-markersize => 10, # integer

Default : 8

Name: Markers

Class: Markers

Switch: -markers

This controls the order of markers in points graphs. This should be a reference to an array of numbers:

-markers => [3, 5, 6],

 Available markers are: 
 
 1:  filled square 
 2:  open square 
 3:  horizontal cross
 4:  diagonal cross
 5:  filled diamond
 6:  open diamond
 7:  filled circle
 8:  open circle
 9:  horizontal line
 10: vertical line

Default : [1,2,3,4,5,6,7,8] Note that the last two are not part of the default list.

The Canvas method creates a widget object. This object supports the configure and cget methods described in Tk::options which can be used to enquire and modify the options described above.

add_data

$chart->add_data(\@newdata, ?$legend): This method allows you to add data in your graph. If you have already plot data using plot method and if you want to add new data, you can use this method. Your graph will be updade.

Data array reference

Fill an array of arrays with the values of the datasets (\@data). Make sure that every array has the same size, otherwise Tk::Chart::Lines will complain and refuse to compile the graph.
```
my @newdata = (1,10,12,5,4);
$chart->add_data(\@newdata);
```
If your last graph has a legend, you have to add a legend entry for the new dataset. Otherwise, the legend graph will not be display (see below).

$legend

my @newdata = (1,10,12,5,4);
my $legend = 'New data set';
$chart->add_data(\@newdata, $legend);

clearchart

$chart->clearchart: This method allows you to clear the graph. The canvas will not be destroy. It's possible to redraw your last graph using the redraw method.

delete_balloon

$chart->delete_balloon: If you call this method, you disable help identification which has been enabled with set_balloon method.

disabled_automatic_redraw

$chart->disabled_automatic_redraw

When the graph is created and the widget size changes, the graph is automatically re-created. Call this method to avoid resizing.

$chart->disabled_automatic_redraw;

display_values

$chart->display_values(\@data_point_value)

To plot the value of data near the points line graph, call this method to control in a generic manner.

my @data_point_value = (
  [ 9,   2,   5,     6,   3,   1,   1,   3,   4 ],        # The first line data
  undef,                                                  # The second line data
  [ 'A', 'B', undef, 'D', 'E', 'F', 'G', 'H', undef ],    # The third line data
);
$chart->display_values( \@data_point_value );

In this example, values are added above each point of the first and third lines. The second line is undef, no values are printed in the graph. B value is printed above the second point of the third line data.

enabled_automatic_redraw

$chart->enabled_automatic_redraw

Use this method to allow your graph to be recreated automatically when the widget size change. When the graph is created for the first time, this method is called.

$chart->enabled_automatic_redraw;

plot

$chart->plot(\@data, ?arg): To display your graph the first time, plot the graph by using this method.

\@data

Fill an array of arrays with the x values and the values of the datasets (\@data). Make sure that every array have the same size, otherwise Tk::Chart::Lines will complain and refuse to compile the graph.
```
my @data = (
    [ '1st', '2nd', '3rd', '4th', '5th', '6th', '7th', '8th', '9th' ],
    [ 1,     2,     5,     6,     3,     1.5,   1,     3,     4  ],
    [ 4,     2,     5,     2,     3,     5.5,   7,     9,     4  ],
    [ 1,     2,     52,    6,     3,     17.5,  1,     43,    10 ]
);
```
@data have to contain a least two arrays, the x values and the values of the datasets.

If you don't have a value for a point in a dataset, you can use undef, and the point will be skipped.
```
[ 1,     undef,     5,     6,     3,     1.5,   undef,     3,     4 ]
```

-substitutionvalue => real number,

If you have a no real number value in a dataset, it will be replaced by a constant value.

Default : 0

my @data = (
     [     '1st',   '2nd', '3rd', '4th', '5th', '6th', '7th', '8th', '9th' ],
     [         1,    '--',     5,     6,     3,   1.5,     1,     3,     4 ],
     [ 'mistake',       2,     5,     2,     3,  'NA',     7,     9,     4 ],
     [         1,       2,    52,     6,     3,  17.5,     1,    43,     4 ],
);
$chart->plot( \@data,
  -substitutionvalue => '12',
);
 # mistake, -- and NA will be replace by 12

-substitutionvalue have to be a real number (ex : 12, .25, 02.25, 5.2e+11, etc ...)

\@data_to_display

Fill an array of arrays with the values of the data to display (\@data_to_display).

my @data_to_display = (
  [ 10, 30, 20, 30, 5, 41, 1, 23 ],
  [ 'A', 'B',    'C', 'D', 'E', 5.5,  'F', 'G', 4 ],
  [ 4,   'CPAN', 52,  6,   3,   17.5, 1,   43,  10 ]
);

If you does not want to display a value for a point, you can use undef, and the point value will be skipped.

[ 1,     undef,     5,     6,     3,     1.5,   undef,     3,     4 ]

-foreground => color,

Set color of text value.

Default : black
-font => string,

Set the font to text value.
```
-font  => 'Times 12 {bold}', 
```

redraw

Redraw the graph.

If you have used cleargraph for any reason, it is possible to redraw the graph. Tk::Chart::Lines supports the configure and cget methods described in the Tk::options manpage. If you use configure method to change a widget specific option, the modification will not be display. If the graph was already displayed and if you not resize the widget, call redraw method to resolv the bug.

...
$mw->Button(
-text    => 'Change xlabel', 
-command => sub { 
    $chart->configure(-xlabel => 'red'); 
  }, 
)->pack;
...
# xlabel will be changed but not displayed if you not resize the widget.
  
...
$mw->Button(
  -text => 'Change xlabel', 
  -command => sub { 
    $chart->configure(-xlabel => 'red'); 
    $chart->redraw; 
  } 
)->pack;
...
# OK, xlabel will be changed and displayed without resize the widget.

set_balloon

$chart->set_balloon(? %options): If you call this method, you enable help identification. When the mouse cursor passes over a plotted line or its entry in the legend, the line and its entry will be turn into a color (that you can change) to help the identification. set_legend method must be set if you want to enabled identification.

-background => string

Set a background color for the balloon.
```
-background => 'red',
```
Default : snow
-colordatamouse => Array reference

Specify an array reference wich contains 2 colors. The first color specifies the color of the line when mouse cursor passes over an entry in the legend. If the line has the same color, the second color will be used.
```
-colordatamouse => ['blue', 'green'],
```
Default : -colordatamouse => [ '#7F9010', '#CB89D3' ]
-morepixelselected => integer

When the mouse cursor passes over an entry in the legend, the line width increase.
```
-morepixelselected => 5,
```
Default : 2

set_legend

$chart->set_legend(? %options): View a legend for the graph and allow to enabled identification help by using set_balloon method.

-title => string

Set a title legend.
```
-title => 'My title',
```
Default : undef
-titlecolors => string

Set a color to legend text.
```
-titlecolors => 'red',
```
Default : black
-titlefont => string

Set the font to legend title text.
```
-titlefont => '{Arial} 8 {normal}',
```
Default : {Times} 8 {bold}
-legendcolor => color

Color of legend text.
```
-legendcolor => 'white',
```
Default : 'black'
-legendfont => string

Set the font to legend text.
```
-legendfont => '{Arial} 8 {normal}',
```
Default : {Times} 8 {normal}
-box => boolean

Set a box around all legend.
```
-box => 1, # or 0
```
Default : 0
-legendmarkerheight => integer

Change the heigth of marker for each legend entry.
```
-legendmarkerheight => 5,
```
Default : 10
-legendmarkerwidth => integer

Change the width of marker for each legend entry.
```
-legendmarkerwidth => 5,
```
Default : 10
-heighttitle => integer

Change the height title legend space.
```
-heighttitle => 75,
```
Default : 30

zoom

$chart->zoom(integer);

Zoom the graph. The x-axis and y-axis will be zoomed. If your graph has a 300*300 size, after a zoom(200), the graph will have a 600*600 size.

$chart->zoom(50); # size divide by 2 => 150*150
...
$chart->zoom(200); # size multiplie by 2 => 600*600
...
$chart->zoom(120); # 20% add in each axis => 360*360
...
$chart->zoom(100); # original resize 300*300.

zoomx

Zoom the graph the x-axis.

# original canvas size 300*300
$chart->zoomx(50); # new size : 150*300
...
$chart->zoom(100); # new size : 300*300

zoomy

Zoom the graph the y-axis.

# original canvas size 300*300
$chart->zoomy(50); # new size : 300*150
...
$chart->zoom(100); # new size : 300*300

EXAMPLES

In the demo directory, you have a lot of script examples with their screenshot. See also the http://search.cpan.org/dist/Tk-Chart/MANIFEST web page of Tk::Chart.

AUTHOR

Djibril Ousmanou, <djibel at cpan.org>

BUGS

Please report any bugs or feature requests to bug-Tk-Chart at rt.cpan.org, or through the web interface at http://rt.cpan.org/NoAuth/ReportBug.html?Queue=Tk-Chart. I will be notified, and then you'll automatically be notified of progress on your bug as I make changes.

SUPPORT

You can find documentation for this module with the perldoc command.

perldoc Tk::Chart::Lines

You can also look for information at:

RT: CPAN's request tracker

http://rt.cpan.org/NoAuth/Bugs.html?Dist=Tk-Chart
AnnoCPAN: Annotated CPAN documentation

http://annocpan.org/dist/Tk-Chart
CPAN Ratings

http://cpanratings.perl.org/d/Tk-Chart
Search CPAN

http://search.cpan.org/dist/Tk-Chart/

ACKNOWLEDGEMENTS

COPYRIGHT & LICENSE

This program is free software; you can redistribute it and/or modify it under the same terms as Perl itself.

To install Tk::Chart, copy and paste the appropriate command in to your terminal.

cpanm

cpanm Tk::Chart

CPAN shell

perl -MCPAN -e shell
install Tk::Chart

For more information on module installation, please visit the detailed CPAN module installation guide.

	Global
`s`	Focus search bar
`?`	Bring up this help dialog

	GitHub
`g` `p`	Go to pull requests
`g` `i`	go to github issues (only if github is preferred repository)

	POD
`g` `a`	Go to author
`g` `c`	Go to changes
`g` `i`	Go to issues
`g` `d`	Go to dist
`g` `r`	Go to repository/SCM
`g` `s`	Go to source
`g` `b`	Go to file browse

	Search terms
module: (e.g. module:Plugin)
distribution: (e.g. distribution:Dancer auth)
author: (e.g. author:SONGMU Redis)
version: (e.g. version:1.00)

NAME

SYNOPSIS

DESCRIPTION

BACKGROUND GRADIENT COLOR

STANDARD OPTIONS

WIDGET-SPECIFIC OPTIONS

Options for all lines graph

Options for spline lines graph

Options for point lines graph

WIDGET METHODS

add_data

clearchart

delete_balloon

disabled_automatic_redraw

display_values

enabled_automatic_redraw

plot

redraw

set_balloon

set_legend

zoom

zoomx

zoomy

EXAMPLES

SEE ALSO

AUTHOR

BUGS

SUPPORT

ACKNOWLEDGEMENTS

COPYRIGHT & LICENSE

NAME

SYNOPSIS

DESCRIPTION

BACKGROUND GRADIENT COLOR

STANDARD OPTIONS

WIDGET-SPECIFIC OPTIONS

Options for all lines graph

Options for spline lines graph

Options for point lines graph

WIDGET METHODS

add_data

clearchart

delete_balloon

disabled_automatic_redraw

display_values

enabled_automatic_redraw

plot

redraw

set_balloon

set_legend

zoom

zoomx

zoomy

EXAMPLES

SEE ALSO

AUTHOR

BUGS

SUPPORT

ACKNOWLEDGEMENTS

COPYRIGHT & LICENSE

Module Install Instructions