pChart and CSS not compatible?

Question

turt2live 5 Junior Poster in Training

14 Years Ago

Hello,

[[All sample links may not work after the thread is solved, I will keep them up as long as I can though]]

I'm trying to make a graph work, which it does, not when CSS is present on a page though...

In my setup I use graph.php to create and generate a graph, it returns the image so it can be used in an <img> tag.

When I use graph.php by typing it directly into the browser it works exactly how I want it to.

Any help on how to fix the weird image "glitch" is appreciated.

is my graph.php page (sample output) and is where I am having issues. I have posted below my graph.php code, the code block where it is called, and the CSS file.

GRAPH.PHP

<?php   
header ('Content-Type: image/png');
 include("pChart/pData.class");   
 include("pChart/pChart.class");   
 
 // Dataset definition    
 $DataSet = new pData;   
	//Variables from GET
 $LEG_1 	= $_GET['leg1'];
 $LEG_2 	= $_GET['leg2'];
 $LEG_3 	= $_GET['leg3'];
 $LEG_4 	= $_GET['leg4'];
 $LEG_5 	= $_GET['leg5'];
 $Y_AXIS 	= $_GET['y'];
 $X_AXIS 	= $_GET['x'];
 $FILE	 	= $_GET['file'];
 $TITLE 	= $_GET['title'];
 $DataSet->ImportFromCSV($FILE,",",array(1,2),FALSE,0);   
 $DataSet->AddAllSeries();   
 $DataSet->SetAbsciseLabelSerie();   
 $DataSet->SetSerieName($LEG_1,"Serie1");   
 if($LEG_2 != null){$DataSet->SetSerieName($LEG_2,"Serie2");}
 if($LEG_3 != null){$DataSet->SetSerieName($LEG_3,"Serie3");}
 if($LEG_4 != null){$DataSet->SetSerieName($LEG_4,"Serie4");}
 if($LEG_5 != null){$DataSet->SetSerieName($LEG_5,"Serie5");}
 $DataSet->SetYAxisName($Y_AXIS);
 $DataSet->SetYAxisUnit("");
 $DataSet->SetXAxisName($X_AXIS);
 $DataSet->SetXAxisUnit("");
  
 // Initialise the graph   
 $Test = new pChart(800,300);
 $Test->setFontProperties("Fonts/tahoma.ttf",8);   
 $Test->setGraphArea(70,30,770,240);   
 $Test->drawFilledRoundedRectangle(7,7,793,293,5,240,240,240);   
 $Test->drawRoundedRectangle(5,5,795,295,5,230,230,230);   
 $Test->drawGraphArea(255,255,255,TRUE);
 $Test->drawScale($DataSet->GetData(),$DataSet->GetDataDescription(),SCALE_NORMAL,150,150,150,TRUE,35,2);   
 $Test->drawGrid(4,TRUE,230,230,230,50);
  
 // Draw the 0 line   
 $Test->setFontProperties("Fonts/tahoma.ttf",6);   
 $Test->drawTreshold(0,143,55,72,TRUE,TRUE);   
  
 // Draw the line graph
 $Test->drawLineGraph($DataSet->GetData(),$DataSet->GetDataDescription());   
 $Test->drawPlotGraph($DataSet->GetData(),$DataSet->GetDataDescription(),3,2,255,255,255);   
  
 // Finish the graph   
 $Test->setFontProperties("Fonts/tahoma.ttf",8);   
 $Test->drawLegend(75,35,$DataSet->GetDataDescription(),255,255,255);   
 $Test->setFontProperties("Fonts/tahoma.ttf",10);   
 $Test->drawTitle(60,22,$TITLE,50,50,50,785);   
 $filename = "temp/chart_".(time()*rand(1,100)).".png";
 $Test->Stroke();
?>

Code block containing calls to graph.php:

<div id="content">
    <center>
      <h2>Global Statistics</h2>
	  <p>These charts display data for all servers, if you would like charts for an individual server please visit the <a href='' class='footer_link'>home</a> page and choose a server.</p>
	  	<img src=" of the Day&y=Number of People Online&leg1=New Users&leg2=All Users&leg3=Average Users&file= in the Past 24 Hours">
		<img src=" of the Day&y=Number of People Online&leg1=New Users&leg2=All Users&leg3=Average Users&file= in the Past 1 Week">
		<img src=" of the Day&y=Number of People Online&leg1=New Users&leg2=All Users&leg3=Average Users&file= in the Past 1 Month">
		<img src=" of the Day&y=Number of People Online&leg1=New Users&leg2=All Users&leg3=Average Users&file= Online of All Time">
    </center>
  </div>

CSS File:

@charset "utf-8";
/* CSS Document */

/* -- General Stylings --
------------------------*/
@font-face {
    font-family: "minecraft";
    src: url("");
}
body {
    font-family: Garamond, Arial, sans-serif;
    background-image: url("");
    color: #c0c0c0;
}
#wrap {
    width: 960px;
    margin: 0 auto;
}
#content {
    background-image: url("");
    padding: 3px 15px 15px 15px;
    margin-top: 15px;
	text-align: left;
	border-radius: 15px;
	box-shadow: 0px 5px 5px 0px rgba(68,68,68,0.6);
}
#content img {
    padding: 1px;
    margin: 3px;
    border: 1px solid #7f7f7f;
}
#content #block-left {
    float: left;
    width: 450px;
	border-right: 2px solid #7f7f7f;
}
#content #block-right{
    float: right;
    width: 450px;
}
#header {
    background-image: url("");
    padding: 3px 15px 15px 15px;
    margin-top: 15px;
	text-align: center;
	border-radius: 15px;
	box-shadow: 0px 5px 5px 0px rgba(68,68,68,0.6);
	font-family: "minecraft", Arial, sans-serif;
	
}
#slider-wrap {
    margin: 0 auto;
    width: 910px;
    text-align: center;
}
.clear {
    clear: both;
}
#footer {
    margin: 0 auto;
    width: 600px;
    text-align: center;
    color: #666;
    margin-top: 15px;
    font-size: 10pt;
	font-family: "minecraft", Arial, sans-serif;
}
/* -- Navigation --
--------------------------------------*/
#nav {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    font-family: "minecraft", Arial, sans-serif;
}
#nav ul {
    margin-bottom: 23px;
}
#nav ul li {
    display: inline;
}
#nav a:link, #nav a:visited {
    color: #c0c0c0;
    text-decoration: none;
    padding: 4px 7px;
}
#nav a:hover {
    color: #000;
    background-color: #7f7f7f;
	border-radius: 15px;
}

/* Custom Formatting */
.update_frame{
	width:450px;
	height: 100%;
}

.footer_link{
	color: #696969;
}

.picture_error_caption{
	font-size: 10px;
	float: right;
}

html-css php

Edited 14 Years Ago by turt2live because: n/a

2 Contributors
2 Replies
371 Views
15 Hours Discussion Span
Latest Post 14 Years Ago Latest Post by turt2live

Dani AI

Generated 9 Months Ago

Short expert note tied to the replies from and :

The symptom is exactly what suggested — the chart is being output as a PNG with an alpha channel, so whatever background the page (or container) provides shows through. pChart’s output path can preserve alpha (the library sets GD’s alpha flags before calling imagepng), so a dark page background will make the “transparent” parts look wrong unless you explicitly give the image a solid backing. (pChart’s render/stroke behavior; PHP’s imagesavealpha/imagealphablending). pChart render/Stroke example · imagesavealpha / imagealphablending docs.

Quick fixes (fastest / least invasive)

Add a white background behind the generated image in CSS. This is the simplest, non-server change:

#content img {
  background-color: #fff;
  display: block; /* avoids inline-gap issues */
}

That forces a white backing for the PNG on the page (works for replaced elements). CSS background docs.

Robust server-side options

Turn off PNG alpha in pChart (or switch output to JPEG) so the image is flattened at generation time. People have had success replacing PNG output with JPEG in pChart’s output stage when transparency is unwanted (tradeoff: JPEG is lossy). StackOverflow discussion about switching to JPEG.
Or flatten the PNG on the server with GD (grab the PNG bytes, paint a white truecolor canvas, copy the PNG over it, then output JPEG/PNG). Example approach (generic — adapt paths/headers):

$pngData = file_get_contents('path/to/generated.png');
$src = imagecreatefromstring($pngData);
$w = imagesx($src); $h = imagesy($src);
$dst = imagecreatetruecolor($w,$h);
$white = imagecolorallocate($dst,255,255,255);
imagefilledrectangle($dst,0,0,$w,$h,$white);
imagecopy($dst,$src,0,0,0,0,$w,$h);
header('Content-Type: image/jpeg');
imagejpeg($dst, NULL, 90);
imagedestroy($src); imagedestroy($dst);

(See PHP GD functions: imagecreatefromstring, imagecreatetruecolor, imagejpeg). imagecreatefromstring doc · imagejpeg doc.

Extra tips

If you edit pChart’s output code, watch for accidental whitespace/newlines before headers (that can corrupt binary PNG output). Also prefer flattening to white (server-side) if you need perfect, artifact-free chart text; JPEG compression can soften vector/text details.

All 2 Replies

pritaeas 2,276 Most Valuable Poster

14 Years Ago

The outputted image is a transparent PNG. Either change the output format (if possible), or put the image in a white background.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

turt2live 5 Junior Poster in Training · Answer 1 · 2011-10-28T17:47:24+00:00

turt2live 5 Junior Poster in Training

14 Years Ago

I never thought of that, thank you :)

pChart and CSS not compatible?

Dani AI

Recommended Answers Collapse Answers

All 2 Replies

Recommended Answers