How to render overlaying graphs in PHP with limit areas in the background

Question

I need to render 2 graphs in 1 image. Values of 1st will be product prices (bar chart), and 2nd will be price ranges. What I want to do, is render areas of those ranges and on top of them render actual prices of products, so I can see if product is in range of 1st level etc.

Ex.:

Ranges:
1st price level: 100-300
2nd price level: 400-700
3rd price level: 900-1500

Product prices:
Product A: 70
Product B: 170
Product C: 250
Product D: 570
Product E: 1270
Product F: 1800

Now, the graph should display normal bar chart of prices, but also 3 horizontal areas (or 3 different backgrounds). A should be able to see which products are ok, and which products have some crazy price (like Product F is overpriced etc.)

I've tried PHPGraphLib, but didn't find the right solution. The closest result was similar to Example 6, where i set 6 Goal lines (from-to combination), but it's not very clear and difficult to see.

Now I'm trying to work this out in PHPlot - I managed to join 2 graphs in 1 image - bar chart for products, and area graph for the price levels, but it seems not to be the easiest and correct solution. Is there a way how to do this in these libraries?

EDIT:

PHPGraphLib code:

$graph = new PHPGraphLib(500, 350);
$data = array();
// product prices
$data['prod_a'] = 70;
$data['prod_b'] = 170;
$data['prod_c'] = 250;
$data['prod_d'] = 570;
$data['prod_e'] = 1270;
$data['prod_f'] = 1800;

$graph->addData($data);
$graph->setBarColor('#cccccc');
$graph->setDataValues(true);
$graph->setLegend(true);
$graph->setLegendTitle('OKPC');

// price levels
$graph->setGoalLine(100, "#ff0000", "dashed");
$graph->setGoalLine(300, "#ff0000", "solid");
$graph->setGoalLine(400, "#00ff00", "dashed");
$graph->setGoalLine(700, "#00ff00", "solid");
$graph->setGoalLine(900, "#0000ff", "dashed");
$graph->setGoalLine(1500, "#0000ff", "solid");

$graph->createGraph();

PHPlot code:

// product prices
$data1 = array(
    array('prod_a', 100, 300, 400, 700, 900, 1500),
    array('prod_b', 100, 300, 400, 700, 900, 1500),
    array('prod_c', 100, 300, 400, 700, 900, 1500),
    array('prod_d', 100, 300, 400, 700, 900, 1500),
    array('prod_e', 100, 300, 400, 700, 900, 1500),
    array('prod_f', 100, 300, 400, 700, 900, 1500),
);
// price levels
$data2 = array(
    array('prod_a', 70),
    array('prod_b', 170),
    array('prod_c', 250),
    array('prod_d', 570),
    array('prod_e', 1270),
    array('prod_f', 1800),
);

$plot = new PHPlot(800, 600);
$plot->SetImageBorderType('plain');
$plot->SetPrintImage(False);

// Plot 1
$plot->SetDrawPlotAreaBackground(True);
$plot->SetPlotType('area');
$plot->SetDataType('text-data');
$plot->SetDataValues($data1);
$plot->SetPlotAreaWorld(NULL, 0, NULL, 3000);
$plot->SetXTickLabelPos('none');
$plot->SetXTickPos('none');
$plot->SetYLabelType('data', 0);
$plot->DrawGraph();

// Plot 2
$plot->SetDrawPlotAreaBackground(False);
$plot->SetDrawYGrid(False);
$plot->SetPlotType('linepoints');
$plot->SetDataValues($data2);
$plot->SetYTickPos('plotright');
$plot->SetYTickLabelPos('plotright');
$plot->SetDataColors('black');
$plot->DrawGraph();

$plot->PrintImage();

@MarcinNabiałek just posted code for both graphs. It kinda works, but I think it can be certainly done better. I'll be glad for any help/alternative solution. — WellBloud, Jun 09 '14 at 07:15

score 0 · Accepted Answer · answered Feb 20 '15 at 10:10

I noticed this question is no longer active, so I want to post my solution for anyone else. In the end, I dropped both PHPlot and PHPGraphLib and insted used a javascript solution with FusionCharts.

It's easy to set up and rendered graphs are more view-friendly. You can add multiple graphs in one result, as well as needed backgrounds - for those i used multiple trendzones. Works as a charm.

How to render overlaying graphs in PHP with limit areas in the background

1 Answers1