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;
}