Multi-line graph with tight X-axis and aligned labels

The code below is the source for this graph.

<?php
// Multi-line graph with tight X-axis and aligned labels
require_once 'SVGGraph/autoloader.php';

function format_label($d, $k, $v)
{
  return "X: " . new Goat1000\SVGGraph\Number($k) . "\nY: " .
    new Goat1000\SVGGraph\Number($v);
}

$options = [
  'auto_fit' => true,
  'structure' => [
    'key' => 0,
    'value' => [1, 2, 3, 4],
  ],
  'data_label_font_weight' => 'bold',
  'marker_type' => 'square',
  'marker_size' => 4,
  'grid_division_h' => 10,
  'show_data_labels' => true,
  'data_label_filter' => ["10", "10+3", "10+6"],
  'data_label_type' => 'linebox',
  'data_label_position' => 'above 0 -10',
  'data_label_padding' => 4,
  'data_label_tail_end' => 'point',
  'data_label_tail_length' => 10,
  'data_label_fill' => ['#eef','#fee','#ffd'],
  'pad_top' => 40,
  'tooltip_padding' => 4,
  'back_shadow' => 3,
  'back_stroke_width' => 0,
  'back_colour' => '#fcfcfc',
  'show_shadow' => true,
  'shadow_opacity' => 0.3,

  'data_label_callback' => 'format_label',
  'tooltip_callback' => 'format_label',

  'axis_tightness_x' => 1,
  'data_label_align' => 'left',
  'tooltip_align' => 'left',
];

$values = [];
$m = 100;
$o = 120;
for($i = 0; $i <= 41; $i += 1) {
  $s = sin(deg2rad($i * 4)) * $m;
  $c = cos(deg2rad($i * 4)) * $m;
  $values[] = [ $i, $o + $s, $o + $c, $o + $s - $c ];
}

$graph = new Goat1000\SVGGraph\SVGGraph(670, 300, $options);
$graph->values($values);
$graph->render('MultiLineGraph');

Please note: the source code above comes from a script used to generate one of the example graphs on the site. This is simply a wrapper page to apply highlighting and make the source code easier to read, so there is no content here to describe what the source code is doing.

This site uses cookies - details here.