在inoERP中重叠两个Pie SVG图表

Question

I have two sets of data 1. Purchased orders received before the need by date. 2. Purchase orders received after the need by date.

Currently we are using inoERP pie chart to show two graphs side by side to compare.

Now, I want to combine the two a single over-lapping SVG chart.i.e Left side showing all data from x <=-3 and right side x >=3 .Any data between -3 & +3 will be in the overlapping period.

I dropped a mail to the their team but got the reply that they wont do any free customization of features not available in Oracle / SAP. So, I would like to know if there is any way to achieve this.

I looked into the code of the product and it's using below code

private function _draw_pie() {
  if ((empty($this->_data)) || (!is_array($this->_data))) {
   return;
  }
  $x_cordinate = $this->_left_margin;
  $y_cordinate = $this->_top_margin;
  $this->_prepare_pie();
  $title_yaxis = 10;

  if ($this->_chart_width > $this->_chart_height) {
   $radius = ($this->_chart_height / 2);
  } else {
   $radius = ($this->_chart_width / 2);
  }
  $title_xaxis = $this->_left_margin + $radius;
  $cx = $x_cordinate + $radius;
  $cy = $y_cordinate + $radius;
  $sum_of_elements = array_sum($this->_data);
  if ($sum_of_elements <= 0) {
   echo "<br> Wrong data selection. No value in value field";
   return;
  }

  $legend_yaxis = $this->_top_margin;
  $legend_xaxis = $cx + $radius * 1.2;

  $chart = "<div class='chart_name'>" . $this->_chart_name . '</div>';
  if ($this->_chart_type != 'donut') {
   $pie_chart_height = 2.5 * $radius;
   $chart .= "<svg class='chart pie' width=\"$this->_chart_width_orginal\" height=\"{$pie_chart_height}\">";
  } else {
   $chart .= "<svg class='chart pie' width=\"$this->_chart_width_orginal\" height=\"$this->_chart_height_orginal\">";
  }
  $chart .= '<text x="' . $title_xaxis . '" y="' . $title_yaxis . '"     class="chart_xaxis_title" >' . $this->_x_axis_text . '   </text>';

  $last_x = $radius;
  $last_y = 0;
  $cum_val = $cum_segment = 0;
  $count = 0;
  $large_arc = 0;
  $chart .= "<g transform=\"translate(0,0)\">";

  foreach ($this->_data as $key => $value) {
   $cum_val += $value;
   $div_class = 'pie_element value cluster_class_' . $count;
   if ((($value / $sum_of_elements) * 360) > 180) {
    $large_arc = 1;
   } else {
    $large_arc = 0;
   }
   $cum_segment += ($value / $sum_of_elements) * 360;
   $last_y_m = -($last_y);
   $next_x = $radius * cos(deg2rad($cum_segment));
   $next_y = $radius * sin(deg2rad($cum_segment));
   $end_point_x = ($next_x - $last_x);
   $end_point_y = -($next_y - $last_y);
   $chart .= "<path id=\"pie_path_$count\" d=\"M$cx,$cy
                l$last_x, $last_y_m
              a$radius,$radius 0 $large_arc,0 $end_point_x,$end_point_y z \"
          style=\"stroke:#660000; \" class=\"$div_class\"/>";
   $last_x = $next_x;
   $last_y = $next_y;
   $count++;
  }
  $chart .= '</g>';
  $key_count = 0;
  foreach ($this->_data as $key => $value) {
   $cluster_class = 'pie_element cluster_class_' . $key_count;
   $legend_y_axis_rect = $legend_yaxis - 10;
   $chart .= "<rect x=\"$legend_xaxis\" y=\"$legend_y_axis_rect\" width=\"10\" height=\"10\" class=\" $key $cluster_class legend \"/>";
   $legend_xaxis += 15;
   $chart .= '<text x="' . $legend_xaxis . '" y="' . $legend_yaxis . '"  class="chart_pie_value " >' . round($value / $sum_of_elements * 100, 1) . '% </text>';
   $legend_xaxis += 45;
   if (strlen($key) > 15) {
    $legend_yaxis_os = 0;
    $legend_xaxis_os = 0;
    $key_a = explode(' ', $key);
    foreach ($key_a as $nl_k => $new_line) {
     $chart .= '<text x="' . $legend_xaxis . '" y="' . $legend_yaxis . '"  class="chart_legend_title" >' . $new_line . ' </text>';
     $legend_yaxis += 20;
     $legend_xaxis -= 60;
    }
    $legend_xaxis += 60;
   } else {
    $chart .= '<text x="' . $legend_xaxis . '" y="' . $legend_yaxis . '"  class="chart_legend_title" >' . $key . ' </text>';
    $legend_yaxis += 40;
    $legend_xaxis -= 60;
   }
   $key_count++;
  }
  $chart .= '<text x="' . $legend_xaxis . '" y="' . $legend_yaxis . '"  class="chart_pie_value" >   (Total : ' . $sum_of_elements . ')  </text>';
  if ($this->_chart_type != 'donut') {
   $chart .= '</svg>';
  }
  return $chart;
 }

Answer 1

I have an idea how you can do it. First find out the value of overlapping as a percentage of radius. Ex. if you are using radius of two circles as x then the value of the overlapping distance should be m*x (you have to calculate m dynamically by dividing total value to the overlapping value)

next draw the second circle by changing the center of the circle by that amoun