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.

Here is my graph.php page (sample output) and here 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='http://mc.turt2live.com' class='footer_link'>home</a> page and choose a server.</p>
	  	<img src="http://turt2live.com/mc/graph.php?x=Hour of the Day&y=Number of People Online&leg1=New Users&leg2=All Users&leg3=Average Users&file=http://mc.turt2live.com/data/day.csv&title=Users in the Past 24 Hours">
		<img src="http://turt2live.com/mc/graph.php?x=Hour of the Day&y=Number of People Online&leg1=New Users&leg2=All Users&leg3=Average Users&file=http://mc.turt2live.com/data/week.csv&title=Users in the Past 1 Week">
		<img src="http://turt2live.com/mc/graph.php?x=Hour of the Day&y=Number of People Online&leg1=New Users&leg2=All Users&leg3=Average Users&file=http://mc.turt2live.com/data/month.csv&title=Users in the Past 1 Month">
		<img src="http://turt2live.com/mc/graph.php?x=Hour of the Day&y=Number of People Online&leg1=New Users&leg2=All Users&leg3=Average Users&file=http://mc.turt2live.com/data/alltime.csv&title=Users Online of All Time">
    </center>
  </div>

CSS File:

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

/* -- General Stylings --
------------------------*/
@font-face {
    font-family: "minecraft";
    src: url("http://mc.turt2live.com/lib/minecraft.ttf");
}
body {
    font-family: Garamond, Arial, sans-serif;
    background-image: url("http://mc.turt2live.com/images/bg.gif");
    color: #c0c0c0;
}
#wrap {
    width: 960px;
    margin: 0 auto;
}
#content {
    background-image: url("http://mc.turt2live.com/images/content_bg.png");
    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("http://mc.turt2live.com/images/content_bg.png");
    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;
}

Recommended Answers

All 2 Replies

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

I never thought of that, thank you :)

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.