Writing svg histogram with php

View project onGitHub


Writing svg histogram with php

How to use ?

First, data must be in an php array (one or two dimensions). Then, an instance of phpGraph class have to be called after an inclusion of phpGraph.php file in your project. Then, the main method called draw is used, with or withour options. It's up to you.

Add phpGraph_style.css to header of your page for display graph.

<!DOCTYPE html>
<html lang="fr">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <link rel="stylesheet" type="text/css" href="phpGraph_style.css" media="all">
<body> (...)

By default, it's a line histogram which is displaying.

To resume :


$data = array(
  'serie 1' => 10,
  'serie 2' => 38,
  'serie 3' => 23,
  'serie 4' => -15

$G = new phpGraph();

echo $G->draw($data);

Options available :

 //All options available
$options = array(
  'width' => null,// (int) width of grid
  'height' => null,// (int) height of grid
  'paddingTop' => 10,// (int)
  'type' => 'line',// (string) line, bar, pie, ring, stock or h-stock (todo curve)
  'steps' => null,// (int) 2 graduations on y-axis are separated by $steps units. "steps" is automatically calculated but we can set the value with integer. No effect on stock and h-stock charts
  'filled' => true,// (bool) to fill lines/histograms/disks
  'tooltips' => false,// (bool) to show tooltips
  'circles' => true,// (bool) to show circles on graph (lines or histograms). No effect on stock and h-stock charts
  'stroke' => '#3cc5f1',// (string) color of lines by default. Use an array to personalize each line
  'background' => "#ffffff",// (string) color of grid background. Don't use short notation (#fff) because of $this->__genColor();
  'opacity' => '0.5',// (float) between 0 and 1. No effect on stock and h-stock charts
  'gradient' => null,// (array) 2 colors from left to right
  'titleHeight' => 0,// (int) Height of main title
  'tooltipLegend' => '',// (string or array) Text display in tooltip with y value. Each text can be personalized using an array. No effect on stock and h-stock charts
  'legends' => '',// (string or array or bool) General legend for each line/histogram/disk displaying under diagram
  'title' => null,// (string) Main title. Title wil be displaying in a tooltip too.
  'radius' => 100,// (int) Radius of pie
  'diskLegends' => false,// (bool) to display legends around a pie
  'diskLegendsType' => 'label',// (string) "data", "pourcent" or "label" to display around a pie as legend
  'diskLegendsLineColor' => 'darkgrey',// (string) color of lines which join pie to legends
  'responsive' => true,// (bool) to avoid svg to be responsive (dimensions fixed)
  'paddingLegendX' => 10,//We add 10 units in viewbox to display x legend correctly

Structure of array for stock and h-stock charts

Be carefull, for stock graph, array structure must be the same as the array below :

$a = array(
  'index 1' => array(
    'open' => value,
    'close' => value,
    'max' => value,
    'min' => value
  'index 2' => array(
    'open' => value,
    'close' => value,
    'max' => value,
    'min' => value

See examples for more details.

Licence :