problema: tenho duas matrizes diferentes - por exemplo:

[0,21, 0,001, 0,0245, 0,31, 0,05, ...]

[1234, 1342, 1232, 1625, 2200, 2205, 1804, ...]

[5, 12, 42, 2, 32, 42, ...]

meu problema agora é: estou procurando um algoritmo para calcular um caminho SVG para um gráfico simples como:

meu problema atual é o algoritmo geral e o cálculo da caixa de exibição para cada SVG.

no momento eu armazenei um exemplo como:

{
  "path": ".....",
  "min_value": 2, // min. value of array
  "max_value": 31, // max. value of array
  "raw_data": [2, 3, 3, 5, 25, 31],
}

EDIT: Agora eu adicionei o cálculo da etapa dinâmica como:$step = (($width/$height) * (max($points)-min($points)))/count($points);

então o código atual se parece com:

$width=200;
$height=50;
$paths = '';
$i= 0;
$j = 0;
$step = (($width/$height) * (max($points)-
min($points)))/count($points);
foreach($points as $point) {
    if($j == 0) {
        $paths = 'M 0 '.$point;
    }
     else if($j == 1) {
        $paths .= ' L '.$i.' '.$point;
     }
     else {
        $paths .= ' '.$i.' '.$point;
     }
     $i+=$step;
     $j++;
 }
 $viewbox = '0 0 '.(count($points)+1).' '.(max($points)+1);

agora parece muito melhor - mas ainda tem o seguinte problema: valores pequenos (todos <1.0) e largura do traço = 1 px:

<svg width="200" height="50" viewBox="0 0 31 1.99" style="background-color: white;">
        <path fill="none" stroke="blue" stroke-width="1px" d="M 0 0.91 L 0.12333333333333 0.16 0.24666666666667 0.285 0.37 0.845 0.49333333333333 0.87 0.61666666666667 0.14 0.74 0.935 0.86333333333333 0.955 0.98666666666667 0.51 1.11 0.855 1.2333333333333 0.41 1.3566666666667 0.97 1.48 0.115 1.6033333333333 0.095 1.7266666666667 0.885 1.85 0.49 1.9733333333333 0.83 2.0966666666667 0.115 2.22 0.555 2.3433333333333 0.99 2.4666666666667 0.23 2.59 0.21 2.7133333333333 0.14 2.8366666666667 0.265 2.96 0.435 3.0833333333333 0.11 3.2066666666667 0.485 3.33 0.725 3.4533333333333 0.48 3.5766666666667 0.065"/>
    </svg>

valores grandes (todos> 1000.0) e largura do traço = 100 px:

<svg width="200" height="50" viewBox="0 0 31 4797.885" style="background-color: white;">
        <path fill="none" stroke="blue" stroke-width="1px" d="M 0 3401.91 L 185.99666666667 3515.16 371.99333333333 4007.285 557.99 4149.845 743.98666666667 4141.87 929.98333333333 4176.14 1115.98 4227.935 1301.9766666667 4416.955 1487.9733333333 4594.51 1673.97 4486.855 1859.9666666667 4302.41 2045.9633333333 4413.97 2231.96 4584.115 2417.9566666667 4740.095 2603.9533333333 4796.885 2789.95 4629.49 2975.9466666667 4567.83 3161.9433333333 4484.115 3347.94 4383.555 3533.9366666667 4363.99 3719.9333333333 4362.23 3905.93 4352.21 4091.9266666667 4236.14 4277.9233333333 4120.265 4463.92 4049.435 4649.9166666667 4046.11 4835.9133333333 4138.485 5021.91 4165.725 5207.9066666667 4242.48 5393.9033333333 4358.065"/>
    </svg>

todos os gráficos devem usar 100% do espaço em largura e altura com a mesma largura de traçado.