Skip to content
This repository

Line chart 

martinsik edited this page · 3 revisions

Line chart generated by GoogleChartGenerator

Line charts are mostly covered in the Basics tutorial so if you haven't read it yet, do it now.

To use line charts you need two namespaces:

use GoogleChartGenerator\Chart\LineChart\LineChart;
use GoogleChartGenerator\Chart\LineChart\Line;

Lines

Lines in GoogleChartGenerator works as data collections. You can set title, color and width for every line with their getter/setter methods (see the list below). For list of all methods common for all data collections see Basics tutorial.

Usually you are interested only in y values, but you can specify also x values:

$line = new Line(array(2 => 50, 3 => 30, 4 => 35, 5 => 45, 6 => 20));

// of course you can add values later
$line->add(10);
// $line->add(value, key);
$line->add(12, 15);
$line->add(array(15, 20, 30));

Chart's x axis range will automatically optimize according to minimum and maximum values among all your lines in your chart. In any case, you can specify axis range manualy (see Axis and Grids).

List of useful public methods

void setTitle(string $title) - set line's title
void setWidth(integer $width) - set line's width
void setColor(string $color) - set line's color
string getTitle() - get line's title
string getWidth() - get line's width
string getColor() - get line's color

Line chart

The only important method for line chart is addLine. Basically, it's just an alias for addData because addLine is more self-explanatory.

Sparkline

Sparkline is a special type of line chart that has neither grid nor axis.

You can turn any line chart into sparkline whenever you want by setting sparkline option to true (false by default).

$chart->setSparkline(true);

Again, you can set this option right in the chart constructor. Eventually, to render just the line you might want to disable chart's title by setting it to null:

$chart = new LineChart(array('title' => null, 'size' => '180x80', 'sparkline' => true));
$chart->addLine(new Line(array(5,6,14,8,11,3,2,29,35,26,40,29,51,60,57,6,2,1), // data
                         array('color' => '880000'))); // options

Result is pretty simple:

Sparkline

Order of Lines

Sometimes the order in which lines are being rendered in the chart is important for you. First added line is also rendered first.

$chart = new LineChart(array('title' => null, 'size' => '180x120', 'legend' => 'b'));
$chart->getXAxis()->setEnabled(false);
$chart->getYAxis()->setEnabled(false);
$chart->addLine(new Line(array(5,24,18,8,11,27,26,29,35,20), // data
                         array('width' => 3, 'title' => 'blue', 'color' => '0070C0'))); //options
$chart->addLine(new Line(array(8,11,25,2,29,35,8,40,29,23), // data
                         array('width' => 3, 'title' => 'orange', 'color' => 'F07200'))); //options

Order of lines in a line chart

The blue line is at the bottom and the orange line overlays it. Now we'll switch last two lines:

$chart->addLine(new Line(array(8,11,25,2,29,35,8,40,29,23), // data
                         array('width' => 3, 'title' => 'orange', 'color' => 'F07200'))); //options
$chart->addLine(new Line(array(5,24,18,8,11,27,26,29,35,20), // data
                         array('width' => 3, 'title' => 'blue', 'color' => '0070C0'))); //options

Order of lines in a line chart

Now the orange line is at the bottom and the blue line overlays it.

List of useful public methods

void addLine(Line $line) - add a line to the chart
void setSparkline(boolean $sparkline) - set this chart as a sparkline
boolean getSparkline() - get whether is chart a sparkline

Legend, Axis and Grids

Legend is explained in the Basics tutorial.

Axis and grids are covered in the Axis and Grids tutorial.

Something went wrong with that request. Please try again.