mysql — сгенерированный PHP график. Ошибка CSS. Масштаб неправильный. SVG-Полигоны

Я написал скрипт, который использует SVG-Poligons для отображения диаграммы.

Ситуация. У меня есть продукт, который имеет максимальную цену и минимальную цену. Я собираю эту информацию каждый понедельник (так называемый цикл).

Моя система рассчитывает базовую цену и процент выигрыша по продукту и устанавливает собственную цену.

пример

cycle | max   | min  | own
1     | 10.99 | 9.00 | 12.90
2     | 10.50 | 9.50 | 11.90
3     |  9.00 | 8.00 |  9.50

Теперь я рисую Полигоны со значениями. Чтобы сделать это, я должен масштабировать max-min-own Price до 100% из-за полигонов. Выглядит так

                   /B
/ |
/  |
/   |
A    |
|    |
|   /D
| /
C/

• A = Cycle1 Макс.
• B = Cycle2 Макс.
• C = цикл1 мин.
• D = цикл2 мин.

Графика отличается. из легенды … это просто визуальный.

Это мой выход в данный момент

Но это должно быть масштабировано таким образом

<?php
$sql_table_low = "SELECT t1.run_cycle,t1.ean,t1.shop,t1.price_total,t1.timestamp_update,t2.newprice FROM Horn_UPM_Product_Price_History as t1 inner join Horn_UPM_Product_Price_Change_History as t2 on t1.ean = t2.ean WHERE t1.ean = '".$artikel."' order by run_cycle,price_total";
// $content .= $sql_table_low;
$q = $readConnection->fetchAll($sql_table_low);
foreach($q as $row)
{
$graph_raw[$row['run_cycle']][] = $row;
}
$g['maxheight-row'] = 0;
foreach($graph_raw as $row2)
{

// $content .= "<br />".$row2[0]['shop'].'--'.$row2[(count($row2)-1)]['shop']."<br />";
$graph[$row2[0]['run_cycle']] = array("low" => $row2[0]['price_total'],"low_shop" => $row2[0]['shop'],"high" => $row2[(count($row2)-1)]['price_total'],"high_shop" => $row2[(count($row2)-1)]['shop'],"timestamp" => $row2[0]['timestamp_update'],"price_set" => $row2[0]['newprice']);
if($row2[(count($row2)-1)]['price_total']>$g['row-max'])
{
$g['row-max'] = $row2[(count($row2)-1)]['price_total'];
}
if($row2[0]['price_total']<$g['row-min'])
{
$g['row-min'] = $row2[(count($row2)-1)]['price_total'];
}
}
$content .= '<br><br>';

// ------------- Settings
$g['maxwidth'] = 800;
$g['maxheight'] = 600; // = 100%
$g['scale_hight'] = 600;
$g['dotsize'] = 6;
$g['dotcolor_height'] = 'green';
$g['dotcolor_low'] = 'red';
$g['dotcolor_fix'] = 'orange';
$g['linecolor'] = 'red';
$g['scale_multi'] = 50;
// DONT CHANGE AFTER THIS LINE
$g['colwidth'] = $g['maxwidth'] / count($graph);
$g['row_pixel_ratio'] = $g['maxheight'] / ($g['row-max']-$g['row-min']+100);
$content .= '<div style="background:white;position:relative;width:'.$g['maxwidth'].'px;height:'.$g['maxheight'].'px;display:block;">';

$row_count = 1;
$height_old=0;
$low_old=0;
$fixo_price_old_scale=floor(($standartfixprice * 100) / $g['row-max']);
$fixo_price_old=$standartfixprice;

foreach(array_keys($graph) as $key)
{
// print_r($graph);
$height_new = $graph[$key]['high'];
$low_new = $graph[$key]['low'];
if($height_old==0){$height_old=$height_new;}
if($low_old==0){$low_old=$low_new;}// print_r($q2);
// $height_new = rand(0,100);

/*
$dot[1] = array(0,0);       // Oben Links   // x,y
$dot[2] = array(100,0);     // Oben Rechts  // x,y
$dot[3] = array(100,100);   // Unten Rechts // x,y
$dot[4] = array(0,100);     // Unten Links  // x,y

$dot1[1] = array(0, high_old)
$dot1[2] = array(colwidth, high_new)
$dot1[3] = array(colwidth, low_new)
$dot1[4] = array(0, low_old)

(($high_old * 100) / $g['row-max']);
(($high_new * 100) / $g['row-max']);
(($low_new * 100) / $g['row-max']);
(($low_old * 100) / $g['row-max']);

*/
$dot[1] = array('x' => 0, 'y' => 100 - floor(($height_old * 100) / $g['row-max']));
$dot[2] = array('x' => floor($g['colwidth']), 'y' => 100 - floor(($height_new * 100) / $g['row-max']));
$dot[3] = array('x' => floor($g['colwidth']), 'y' => 100 - floor(($low_new * 100) / $g['row-max'])+$g['scale_multi']);
$dot[4] = array('x' => 0, 'y' => 100 - floor(($low_old * 100) / $g['row-max'])+$g['scale_multi']);$sql_table_low_2 = "SELECT newprice*1.19 as fixprice FROM Horn_UPM_Product_Price_Change_History WHERE timestamp_unix < '".$graph[$key]['timestamp']."' AND ean = '".$artikel."' order by id DESC LIMIT 1";
// $content .= $sql_table_low_2;
$q2 = $readConnection->fetchRow($sql_table_low_2);
if(!isset($q2['fixprice']))
{
$fixo_price_new = 0;
$fixo_price_new_scale = 0;
}
else
{
$fixo_price_new = $q2['fixprice'];
$fixo_price_new_scale = 100-floor(($q2['fixprice'] * 100) / $g['row-max']);
}// $content .= 100 - floor(($height_old * 100) / $g['row-max']).'-';
// $content .= 100 - floor(($height_new * 100) / $g['row-max']).'-';
// $content .= 100 - floor(($low_new * 100) / $g['row-max']).'-';
// $content .= 100 - floor(($low_old * 100) / $g['row-max']).'|||';

// $content .= $dot[1]['y'].'-';
// $content .= $dot[2]['y'].'-';
// $content .= $dot[3]['y'].'-';
// $content .= $dot[4]['y'].'|||';$height_old=$height_new;
$low_old=$low_new;$fixo_price_old=$fixo_price_new;
$fixo_price_old_scale=$fixo_price_new_scale;
// print_r($dot);

$content .= '
<div style="position:absolute;left:'.floor($g['colwidth']*($key-1)).'px;width:'.floor($g['colwidth']).'px">
<svg id="svg-'.$row_count.'" class="clip-svg" style="height:200px;">
<rect class="svg-bg-'.$row_count.'" width="'.floor($g['colwidth']).'" height="200" fill="#e6e6ff" />
</svg>
<svg id="svg-defs" style="height:0;">
<defs>
<clipPath id="clip-'.$row_count.'">
<polygon points="'.$dot[1]['x'].' '.$dot[1]['y'].', '.$dot[2]['x'].' '.$dot[2]['y'].', '.$dot[3]['x'].' '.$dot[3]['y'].', '.$dot[4]['x'].' '.$dot[4]['y'].'" />
<!-- <polygon points="0 0, '.$dot[2]['x'].' 0, '.$dot[3]['x'].' '.$dot[3]['y'].', '.$dot[4]['x'].' '.$dot[4]['y'].'" /> -->
</clipPath>
</defs>
</svg>
<style>
.svg-bg-'.$row_count.' { clip-path: url(#clip-'.$row_count.'); }
</style>

<div class="dot_high" style="z-index:1000;position:absolute;top:'.$dot[2]['y'].'px;left:'.($g['colwidth']-$g['dotsize']/1.5).'px;height:'.$g['dotsize'].'px;width:'.$g['dotsize'].'px;background:'.$g['dotcolor_height'].';display:block;"></div>
<div class="dot_low" style="z-index:1000;position:absolute;top:'.($dot[3]['y']-$g['dotsize']/1.5).'px;left:'.($g['colwidth']-$g['dotsize']/1.5).'px;height:'.$g['dotsize'].'px;width:'.$g['dotsize'].'px;background:'.$g['dotcolor_low'].';display:block;"></div>
<div class="dot_fix" style="z-index:1000;position:absolute;top:'.($fixo_price_new_scale-$g['dotsize']/1.5).'px;left:'.($g['colwidth']-$g['dotsize']/1.5).'px;height:'.$g['dotsize'].'px;width:'.$g['dotsize'].'px;background:'.$g['dotcolor_fix'].';display:block;"></div>
</div>';

$row_count++;

}

Как пояснил код работает. но это неправильно масштабируется (100%) ..