ASE Home Page Products Download Purchase Support About ASE
ChartDirector Support
 Forum HomeForum Home   SearchSearch

Message ListMessage List     Post MessagePost Message

  filter by combobox data mysql glassmultibar chart
Posted by frenky tambunan on Sep-25-2012 15:03
| Reply | Monitor
Attachments:
Hi Peter,

I want to make a chart that using filtered combobox value, on chartdir sample code that i see is like this :

<?php
require_once("../buatchart/lib/phpchartdir.php");


# The currently selected year
if (isset($_GET["year"]))
    $selectedYear = $_GET["year"];
else
    $selectedYear = 2001;

# SQL statement to get the monthly revenues for the selected year.
$SQL =
    "Select Software, Hardware, Services From revenue Where Year(TimeStamp) = ".
    "$selectedYear Order By TimeStamp";

#
# Connect to database and read the query result into arrays
#

mysql_connect("localhost", "pmrfb", "123456");
mysql_select_db("sample");
$result = mysql_query($SQL);

while ($row = mysql_fetch_row($result)) {
    $software[] = $row[0];
    $hardware[] = $row[1];
    $services[] = $row[2];
}

# Serialize the data into a string to be used as HTTP query parameters
$httpParam = sprintf("year=%s&software=%s&hardware=%s&services=%s", $selectedYear,
    join(",", $software), join(",", $hardware), join(",", $services));

#
# The following code generates the <option> tags for the HTML select box, with the
# <option> tag representing the currently selected year marked as selected.
#

$optionTags = array_pad(array(), 2001 - 1990 + 1, null);
for($i = 1990; $i < 2001 + 1; ++$i) {
    if ($i == $selectedYear) {
        $optionTags[$i - 1990] = "<option value='$i' selected>$i</option>";
    } else {
        $optionTags[$i - 1990] = "<option value='$i'>$i</option>";
    }
}
$selectYearOptions = join("", $optionTags);
?>
<html>
<body style="margin:5px 0px 0px 5px">
<div style="font-size:18pt; font-family:verdana; font-weight:bold">
    Database Integration Demo (2)
</div>
<hr style="border:solid 1px #000080" />
<div style="font-size:10pt; font-family:verdana; width:600px">
This example demonstrates creating a chart using data from a database. The database
query is performed in the containing HTML page. The data are then passed to the chart
generation pages as HTTP GET parameters.
<ul>
    <li><a href="viewsource.php?file=<?php echo $_SERVER["SCRIPT_NAME"]?>">
        View containing HTML page source code
    </a></li>
    <li><a href="viewsource.php?file=dbdemo2a.php">
        View chart generation page source code for upper chart
    </a></li>
    <li><a href="viewsource.php?file=dbdemo2b.php">
        View chart generation page source code for lower chart
    </a></li>
</ul>
<form>
    I want to obtain the revenue data for the year
    <select name="year">
        <?php echo $selectYearOptions?>
    </select>
    <input type="submit" value="OK">
</form>
</div>

<img src="report.php?<?php echo $httpParam?>">
<img src="dbdemo2b.php?<?php echo $httpParam?>">
</body>
</html>


My question is :
1. how to make combo box that came from my sql table that being parsed into glass multibar chart. In the sample code is using year, but i want to modify it into "AREA".
area example : JKT1, JKT2, SMT1, SMT2, JKT-SMT

2. How to parse from combo box value into chart (here with my file) so that when the combo box value change, the value in the chart is change too... I also attach an excel file which is the file that i'm gonna change to be a php chart using chartdir.


Sorry for my bad english. Thank you for your advance.

Frenky Tambunan
report_2.php
report_2.php
2.12 Kb
DATA WEEKLY REPORT - NEW DRAFT.xls
DATA WEEKLY REPORT - NEW DRAFT.xls
204.50 Kb

  Re: filter by combobox data mysql glassmultibar chart
Posted by Peter Kwan on Sep-26-2012 04:20
| Reply | Monitor
Hi frenky,

1. First, you need to fill the combo box with data from your SQL query. This part should be unrelated to ChartDirector, and is just normal PHP/SQL/HTML code. There should be a lot of examples from the Internet.

$query = mysql_query($myQueryToSelectTheAreas);
while ($row = mysql_fetch_array($query)) {
    if ($row[0] == $selectedArea) {
        $optionTags[$i - 1990] = "<option value='$row[0]' selected>$row[0]</option>";
    } else {
        $optionTags[$i - 1990] = "<option value='$row[0]'>$row[0]."</option>";
    }
}

2. First, you need to get the selected area, with a default value for the first chart (in which no area is selected):

# The currently selected year
if (isset($_GET["area"]))
    $selectedArea = $_GET["area"];
else
    $selectedArea= "JKT1";

Then you need to create an SQL query based on the $selectedArea, so that it selects the area you want. The SQL query depends on your database schema and would need to be written by yourself. Then you can use PHP code to obtain the query result, and use them to create the chart.

Hope this can help.

Regards
Peter Kwan

  Re: filter by combobox data mysql glassmultibar chart
Posted by franky doank on Sep-26-2012 08:52
| Reply | Monitor
Attachments:
Thank You Peter,

Now I can Parse my "area" from mysql into combobox, just like script below :

<html>
<body style="margin:5px 0px 0px 5px">
<div style="font-size:18pt; font-family:verdana; font-weight:bold">
    Database Integration Demo (2)
</div>
<hr style="border:solid 3px #F30" />
<div style="font-size:10pt; font-family:verdana; width:600px">
<form>

    <?php
require_once("../buatchart/lib/phpchartdir.php");

if (isset($_GET["area"]))
$selectedArea = $_GET["area"];
else
$selectedArea= "JKT1";

# The currently selected area

mysql_connect("localhost","pmrfb","123456") or die(mysql_error());
mysql_select_db("rfb_performance") or die (mysql_error());

echo "Filter By : <select name=\\"area\\" id=\\"area\\">";
$myQueryToSelectTheAreas="SELECT area FROM tbl_area";
$query = mysql_query($myQueryToSelectTheAreas);
while ($row = mysql_fetch_array($query)) {
if ($row[0] == $selectedArea) {
$optionTags[$i - 1990] = "<option value='$row[0]' selected>$row[0]</option>";
echo "<option value='$row[0]' selected>$row[0]</option>";
} else {
$optionTags[$i - 1990] = "<option value='$row[0]'>$row[0].</option>";
echo "<option value='$row[0]'>$row[0]</option>";
}
}

    echo "</select>";
?>

    <input type="submit" value="OK">
</form>
</div>

<img src="dbdemo2a.php?<?php echo $httpParam?>">
<img src="report.php?year=<?php echo $httpParam?>">



<img src="dbdemo2b.php?<?php echo $httpParam?>">
</body>
</html>


As I want to parse the combo box value into the chart :
Where i should write the code to get my query with the combo box value? In my script above or in "report.php"? what it should be like?

how to use this script in order to parse my query into the chart:
# Serialize the data into a string to be used as HTTP query parameters
$httpParam = sprintf("year=%s&software=%s&hardware=%s&services=%s", $selectedYear,
    join(",", $software), join(",", $hardware), join(",", $services));

I also attach my sql file in need to queried to the chart, on my picture the table that i want to use is "tbl_OS" and "tbl_OS_plan" so that it can be like chart on the picture.

Sorry if I ask too much, because I am very new in php and I only work in desktop application before this (VB6). I really need your guidance to make this happen. Thank you in your advance.

Frenky Tambunan
chart.jpg
rfb_performance.sql
rfb_performance.sql
26.98 Kb

  Re: filter by combobox data mysql glassmultibar chart
Posted by Peter Kwan on Sep-27-2012 00:15
| Reply | Monitor
Hi franky,

The are in your combo box is in $_GET["area"]. Note that in your current code, you need to press the "OK" button after the user has modified the combo box to submit the combo box contents to the server. If you do not want the user to have to press the OK button, you may use an onchange event handler on the SELECT element (the combo box) to trigger some Javascript code that sends the FORM to the server.

On the server side, the selection in the combo box is in the $selectedArea variable:

if (isset($_GET["area"]))
$selectedArea = $_GET["area"];
else
$selectedArea= "JKT1";

You can put your SQL statement (which should depend on $selectedArea) immediately after the above code to query your database for the necessary data. This is then similar to the example "Pass Data as HTTP Query Parameters".

Alternatively, you may pass the contents of $selectedArea to another script that actually generates the chart, and perform the SQL in that script.

<img src="createMyChart.php?area=<?php echo $selectedArea?>">

In the above HTML code, the $selectedArea is passed as the query parameter "area" to the script createMyChart.php. In the script createMyChart.php, you may retrieve the query parameter "area", query the database for the data, create the chart using the data, and return the chart to the browser. This style is similar to the "Direct Database Access" sample code.

Hope this can help.

Regards
Peter Kwan

  Re: filter by combobox data mysql glassmultibar chart
Posted by franky doank on Sep-27-2012 18:17
| Reply | Monitor
Attachments:
Once again, Thank You Peter...

Now I can parse the value into the chart.
I'm gonna ask you again, in your last explanation about :

"The are in your combo box is in $_GET["area"]. Note that in your current code, you need to press the "OK" button after the user has modified the combo box to submit the combo box contents to the server. If you do not want the user to have to press the OK button, you may use an onchange event handler on the SELECT element (the combo box) to trigger some Javascript code that sends the FORM to the server."

I've tried so many times and I didn't find any success. Maybe I'm too fool to understand the code... How can I change parse the combo box value without "submit" button? Herewith i copy my code in "dbdemo2test.php"

<html>
<body style="margin:5px 0px 0px 5px">
<div style="font-size:18pt; font-family:verdana; font-weight:bold">
    Database Integration Demo (2)
</div>
<hr style="border:solid 3px #F30" />
<div style="font-size:10pt; font-family:verdana; width:600px">
<form>

    <?php
require_once("../buatchart/lib/phpchartdir.php");


//# The currently selected year
//if (isset($_GET["year"]))
//    $selectedYear = $_GET["year"];
//else
//    $selectedYear = 2001;

if (isset($_GET["area"]))
$selectedArea = $_GET["area"];
else
$selectedArea= "JKT1";

# The currently selected year

mysql_connect("localhost","pmrfb","123456") or die(mysql_error());
mysql_select_db("rfb_performance") or die (mysql_error());

echo "Filter By : <select name=\\"area\\" id=\\"area\\">";
$myQueryToSelectTheAreas="SELECT area FROM tbl_area";
$query = mysql_query($myQueryToSelectTheAreas);
while ($row = mysql_fetch_array($query)) {
if ($row[0] == $selectedArea) {
$optionTags[$i - 1990] = "<option value='$row[0]' selected>$row[0]</option>";
echo "<option value='$row[0]' selected>$row[0]</option>";
} else {
$optionTags[$i - 1990] = "<option value='$row[0]'>$row[0].</option>";
echo "<option value='$row[0]'>$row[0]</option>";
}
}

    echo "</select>";
?>
<?php

mysql_connect("localhost","pmrfb","123456");
mysql_select_db("rfb_performance");
//$SQLku = "Select dec11, jan, feb From tbl_OS Where Area = "."$selectedArea";
$SQLku = "Select MONTH, OS, PLAN From os_tbl Where Area = "."'$selectedArea'";
$dataku = mysql_query($SQLku) or die(mysql_error());

while ($row = mysql_fetch_row($dataku)) {
$OS[] = $row[1];
$PLAN[] = $row[2];
}

# Serialize the data into a string to be used as HTTP query parameters
$httpParam = sprintf("area=%s&OS=%d&PLAN=%d",$selectedArea,join(",", $OS),join(",", $PLAN));
?>
    <input type="submit" value="OK">
</form>

</div>

<img src="report.php?<?php echo $httpParam?>">
</body>
</html>


And second, as My attachment before about the picture titled "OUTSTANDING PORTFOLIO", I'm having trouble to parse value that I want result just like in the picture...

mysql_connect("localhost","pmrfb","123456");
mysql_select_db("rfb_performance");
//$SQLku = "Select dec11, jan, feb From tbl_OS Where Area = "."$selectedArea";
$SQLku = "Select MONTH, OS, PLAN From os_tbl Where Area = "."'$selectedArea'";
$dataku = mysql_query($SQLku) or die(mysql_error());

while ($row = mysql_fetch_row($dataku)) {
   $OS[] = $row[1];
$PLAN[] = $row[2];


the code above is about getting value from table where the field name is OS, but nothing results can be like the picture. FYI, I've attach my sql database file too...

Is there any wrong with my database structure or maybe there is any configuration with the chart script? Could you help me with this?

and my last question is, how to make a tooltip/imageMap? as my script in "report.php" below:

<?php
require_once("../buatchart/lib/phpchartdir.php");

#
# Retrieve the data from the query parameters
#

$selectedArea = $_REQUEST["area"];

$OS = explode(",", $_GET["OS"]);
$PLAN = explode(",", $_GET["PLAN"]);


# The data for the bar chart
//$data0 = array(100, 125, 245, 147, 67);
//$data1 = array(85, 156, 179, 211, 123);
//$data2 = array(97, 87, 56, 267, 157);
//$labels = array("Mon", "Tue", "Wed", "Thur", "Fri");
$labels = array("Dec11","Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sept", "Oct", "Nov", "Dec");

# Create a XYChart object of size 540 x 375 pixels
$c = new XYChart(520, 345);

# Add a title to the chart using 18 pts Times Bold Italic font
$c->addTitle("OUTSTANDING PORTFOLIO $selectedArea", "timesb.ttf", 14
);

# Set the plotarea at (50, 55) and of 440 x 280 pixels in size. Use a vertical
# gradient color from light blue (f9f9ff) to blue (6666ff) as background. Set border
# and grid lines to white (ffffff).
$c->setPlotArea(60, 60, 450, 250, $c->linearGradientColor(0, 55, 0, 335, 0xf9f9ff,
    0x6666ff), -1, 0xffffff, 0xffffff);

# Add a legend box at (50, 28) using horizontal layout. Use 10pts Arial Bold as font,
# with transparent background.
$legendObj = $c->addLegend(50, 28, false, "arialbd.ttf", 8);
$legendObj->setBackground(Transparent);

# Set the x axis labels
$c->xAxis->setLabels($labels);

# Draw the ticks between label positions (instead of at label positions)
$c->xAxis->setTickOffset(0.5);

# Set axis label style to 8pts Arial Bold
$c->xAxis->setLabelStyle("arialbd.ttf", 8);
$c->yAxis->setLabelStyle("arialbd.ttf", 8);

# Set axis line width to 2 pixels
$c->xAxis->setWidth(2);
$c->yAxis->setWidth(2);

# Add axis title
$c->yAxis->setTitle("Volume dalam jutaan rupiah");

# Add a multi-bar layer with 3 data sets
$layer = $c->addBarLayer2(Side);
$layer->addDataSet($OS, 0xffcc00, "OS");
$layer->addDataSet($PLAN, 0x00ff00, "PLAN");

# Set bar border to transparent. Use glass lighting effect with light direction from
# left.
$layer->setBorderColor(Transparent, glassEffect(NormalGlare, Left));

# Enable bar label for the whole bar
$layer->setAggregateLabelStyle('',8,0x000000FF);

# Configure the bars within a group to touch each others (no gap)
$layer->setBarGap(0.2, TouchBar);

# Create an image map for the chart
$imageMap = $c->getHTMLImageMap("", "",
    "title='{xLabel}: Rp. {value|0}M'");

# Output the chart
header("Content-type: image/png");
print($c->makeChart2(PNG));
?>

I've try many ways to make tooltip just like in "Simple Clickable Charts" documentation buat nothing happen when I view in my browser. I use Mozilla Firefox 14.0.1 and Internet Explorer 8 in my PC, is there any something wrogn with my code or maybe there's another way to do that?

That's all my question, and still need you advance to do this successfully.
localhost.sql
localhost.sql
38.17 Kb

  Re: filter by combobox data mysql glassmultibar chart
Posted by Peter Kwan on Sep-28-2012 02:19
| Reply | Monitor
Hi franky,

For the first question, to update the page when the combo box changes, please add an onchange event handler to the combo box (the SELECT tag) to automatically submit the form:

echo "Filter By : <select name=\\"area\\" id=\\"area\\" onchange=\\"document.forms[0].submit()\\">";


For the second question, as I have not seen your actual chart, it is hard for me to know what is the issue. Anyway, by reading your code, I think "OS=%d&PLAN=%d" should be "OS=%s&PLAN=%s".


For the third question, to implement tooltips, the key step is to create the chart in the HTML part of the code, and output the HTML image map (but not the chart), and store the chart in a session variable, and use getchart.php in the <IMG> tag to inform the browser to load chrat from the session variable. This is the method used in "Simple Clickable Charts" and other clickable chart sample code (includng "Database Clickable Chart").

The key structure are explained in "Clickable Charts Operation Overview" in the doucmentation.

In brief, you are probably aware that an HTML web page cannot include any image. it can only include <IMG> tags, not the images. The image must be loaded from another URL.

If you need to use tooltips, according to the HTML standard, you need to create an image map in HTML. So the chart needs to be generated in the HTML part of the web page in order to create the image map in that page. But it is forbidden to include the chart image in HTML, so the chart image needs to be stored in some place (which can be a temporary image file, or a a session variable). The HTML can only include the <IMG> tag, which contains a URL to load the stored chart image. If the chart image is stored in a session variable, the "getchart.php" can be used to load it. If the chart image is stored in a temporary image file, the URL in the <IMG> tag can point directly to that temporary file.

You cannot use something like <img src="report.php?year=<?php echo $httpParam?>"> to create a chart with tooltips. It is because the browser can only see the <img> tag after it has received the HTML web page. In other words, the report.php is invoked only after the HTML has been received by the browser. It is therefore too late to include the image map in the HTML web page.

Hope this can help.

Regards
Peter Kwan

  Re: filter by combobox data mysql glassmultibar chart
Posted by franky doank on Sep-28-2012 08:11
| Reply | Monitor
Attachments:
Many Thanks to You Peter,

Now I can view my chart from selected area just like the picture I've attach. It such a great studying from me. And I'm starting to enjoy with this.

As you reply in my last question, if you look at my new chart, there is shown well in all appearance expect the "Bar Label" that shows number from its database. It looks messy if you want to make this as report.

Then, is there any suggestion from you to make this looks nice, or maybe you can show another way to use "tooltips" so that I don't use this bar label anymore. But I think it's good to use "tooltips".

this is my code now for my "dbdemo2test.php" :

<html>
<body style="margin:5px 0px 0px 5px">
<div style="font-size:18pt; font-family:verdana; font-weight:bold">
    Database Integration Demo (2)
</div>
<hr style="border:solid 3px #F30" />
<div style="font-size:10pt; font-family:verdana; width:600px">
<form>

    <?php
require_once("../buatchart/lib/phpchartdir.php");

if (isset($_GET["area"]))
$selectedArea = $_GET["area"];
else
$selectedArea= "JKT1";

# The currently selected year

mysql_connect("localhost","pmrfb","123456") or die(mysql_error());
mysql_select_db("rfb_performance") or die (mysql_error());

//echo "Filter By : <select name=\\"area\\" id=\\"area\\">";
echo "Filter By : <select name=\\"area\\" id=\\"area\\" onchange=\\"document.forms[0].submit()\\">";
$myQueryToSelectTheAreas="SELECT area FROM tbl_area";
$query = mysql_query($myQueryToSelectTheAreas);
while ($row = mysql_fetch_array($query)) {
if ($row[0] == $selectedArea) {
$optionTags[$i - 1990] = "<option value='$row[0]' selected>$row[0]</option>";
echo "<option value='$row[0]' selected>$row[0]</option>";
} else {
$optionTags[$i - 1990] = "<option value='$row[0]'>$row[0].</option>";
echo "<option value='$row[0]'>$row[0]</option>";
}
}

    echo "</select>";
?>
<?php

mysql_connect("localhost","pmrfb","123456");
mysql_select_db("rfb_performance");
//$SQLku = "Select dec11, jan, feb From tbl_OS Where Area = "."$selectedArea";
$SQLku = "Select OS, PLAN From os_tbl Where Area = "."'$selectedArea'";
$dataku = mysql_query($SQLku) or die(mysql_error());

while ($row = mysql_fetch_row($dataku)) {
$Outstanding[] = $row[0];
$Plan[] = $row[1];
}

# Serialize the data into a string to be used as HTTP query parameters
$httpParam = sprintf("area=%s&Outstanding=%s&Plan=%s",$selectedArea,join(",", $Outstanding),join(",", $Plan));
?>
</form>

</div>

<img src="report.php?<?php echo $httpParam?>">
</body>
</html>


and this is my code for my "report.php" :

<?php
require_once("../buatchart/lib/phpchartdir.php");

#
# Retrieve the data from the query parameters
#

$selectedArea = $_REQUEST["area"];

$Outstanding = explode(",", $_GET["Outstanding"]);
$Plan = explode(",", $_GET["Plan"]);

# The data for the bar chart
$labels = array("Dec11","Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sept", "Dec");

# Create a XYChart object of size 540 x 375 pixels
$c = new XYChart(520, 345);

# Add a title to the chart using 18 pts Times Bold Italic font
$c->addTitle("OUTSTANDING PORTFOLIO $selectedArea", "timesb.ttf", 14
);

# Set the plotarea at (50, 55) and of 440 x 280 pixels in size. Use a vertical
# gradient color from light blue (f9f9ff) to blue (6666ff) as background. Set border
# and grid lines to white (ffffff).
$c->setPlotArea(60, 60, 450, 250, $c->linearGradientColor(0, 55, 0, 335, 0xf9f9ff,
    0x6666ff), -1, 0xffffff, 0xffffff);

# Add a legend box at (50, 28) using horizontal layout. Use 10pts Arial Bold as font,
# with transparent background.
$legendObj = $c->addLegend(50, 28, false, "arialbd.ttf", 8);
$legendObj->setBackground(Transparent);

# Set the x axis labels
$c->xAxis->setLabels($labels);

# Draw the ticks between label positions (instead of at label positions)
$c->xAxis->setTickOffset(0.5);

# Set axis label style to 8pts Arial Bold
$c->xAxis->setLabelStyle("arialbd.ttf", 8);
$c->yAxis->setLabelStyle("arialbd.ttf", 8);

# Set axis line width to 2 pixels
$c->xAxis->setWidth(2);
$c->yAxis->setWidth(2);

# Add axis title
$c->yAxis->setTitle("Volume dalam jutaan rupiah");

# Add a multi-bar layer with 3 data sets
$layer = $c->addBarLayer2(Side);
$layer->addDataSet($Outstanding, 0xffcc00, "Outstanding");
$layer->addDataSet($Plan, 0x00ff00, "Plan");

# Set bar border to transparent. Use glass lighting effect with light direction from
# left.
$layer->setBorderColor(Transparent, glassEffect(NormalGlare, Left));

# Enable bar label for the whole bar
$layer->setAggregateLabelStyle('',8,0x000000FF);

# Configure the bars within a group to touch each others (no gap)
$layer->setBarGap(0.2, TouchBar);

# Create the image
$chart1URL = $c->makeSession("chart1");

# Create an image map for the chart
$imageMap = $c->getHTMLImageMap("", "",
    "title='{xLabel} : Rp. {value|0} M'");

# Output the chart
header("Content-type: image/png");
print($c->makeChart2(PNG));
?>

<html>
<body style="margin:5px 0px 0px 5px">

<img src="getchart.php?<?php echo $chart1URL?>" border="0" usemap="#map1">
<map name="map1">
<?php echo $imageMap?>
</map>

</body>
</html>


When I try this without connects to the Database (using static data array) and make standalone file "report.php", It works fine for the tooltips. But when I combine with my "dbdemo2test.php" and "report.php", I can't see anything from "dbdemo2test.php", just blank. Coluld help me to this problem? Thank you.

Regards,
Frenky Tambunan
new_chart.jpg

  Re: filter by combobox data mysql glassmultibar chart
Posted by Peter Kwan on Sep-29-2012 00:13
| Reply | Monitor
Hi franky,

If you think there is insufficient space for the bar labels, you may rotate the labels by 90 degrees. To do this, please modify:

$layer->setAggregateLabelStyle('',8,0x000000FF);

to:

$layer->setAggregateLabelStyle('',8,0x000000FF,90);

You may also consider to put the bar labels under the axis labels. See the "Data Table (2)" sample code included in the ChartDirector download:

http://www.advsofteng.com/doc/cdphp.htm#datatable2.htm

For the tooltips, in your current code, "report.php" is used as an image. It is because you use the <img> tag to invoke "report.php". In HTML, the <img> tag is for images. If you use a non-image in the <img> tag, the browser will probably display a broken image (a "red X" symbol).

However, if you view the "report.php" (assuming you have removed the line that sets the "header" and "print" the image) directly by copying its URL to the browser address bar, it will work, because your browser will treat it as HTML.

To solve the problem, please ensure the charting code is in the HTML part of your web page. To do this, please simply copy your charting code to the first PHP script that outputs the HTML web page. More specifically, you may remove the line "$httpParam = .....", and put your charting code there. The charting code can directly use the $Outstanding and $Plan arrays (no need to use "explode" to obtain it from $_GET variables). For the <img> and <map> part of the "report.php", please use them to replace your existing <img> tag in the HTML page.

Hope this can help.

Regards
Peter Kwan

  Re: filter by combobox data mysql glassmultibar chart
Posted by franky doank on Sep-29-2012 07:37
| Reply | Monitor
Attachments:
Hello again Peter,

I've try to do as your suggest for my solution. I'd copy the charting code from "report.php" to "dbdemo2test.php". It works with the tooltip, but there's an error message when I preview this to browser, just like this picture.

I don't know why this happen. Herewith I copy my new code in "dbdemo2test.php" :

<html>
<body style="margin:5px 0px 0px 5px">
<style type="text/css">
body,td,th {
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
color:#F30;
}
</style>
<table width="100%" border="0">
  <tr>
    <td width="56%">
    <div style="font-size:18pt; font-family:verdana; font-weight:bold; color:#715448">
        RFB Portfolio Dashboard [BETA Version]
    </div>
    </td>
    <td width="44%" style="font-size:8pt; font-family:verdana; style=color:#715448" align="right">RFB-Portfolio-Dashboard.V1</td>
  </tr>
</table>

<hr style="border:solid 3px #F30" />
<div style="font-size:10pt; font-family:verdana; width:600px">
<form>
    <?php
//require_once("../buatchart/lib/phpchartdir.php");
if (isset($_GET["area"]))
$selectedArea = $_GET["area"];
else
$selectedArea= "JKT1";

# The currently selected year

mysql_connect("localhost","pmrfb","123456") or die(mysql_error());
mysql_select_db("rfb_performance") or die (mysql_error());

//echo "Filter By : <select name=\\"area\\" id=\\"area\\">";
echo "Filter By : <select name=\\"area\\" id=\\"area\\" onchange=\\"document.forms[0].submit()\\">";
$myQueryToSelectTheAreas="SELECT area FROM tbl_area";
$query = mysql_query($myQueryToSelectTheAreas);
while ($row = mysql_fetch_array($query)) {
if ($row[0] == $selectedArea) {
$optionTags[$i - 1990] = "<option value='$row[0]' selected>$row[0]</option>";
echo "<option value='$row[0]' selected>$row[0]</option>";
} else {
$optionTags[$i - 1990] = "<option value='$row[0]'>$row[0].</option>";
echo "<option value='$row[0]'>$row[0]</option>";
}
}

    echo "</select>";
?>
</form>
</div>
</body>

<table width="100%" border="0">
  <tr>
    <td>
    <?php
require_once("../buatchart/lib/phpchartdir.php");
# Serialize the data into a string to be used as HTTP query parameters
//$httpParam = sprintf("area=%s&Outstanding=%s&Plan=%s",$selectedArea,join(",", $Outstanding),join(",", $Plan));


mysql_connect("localhost","pmrfb","123456");
mysql_select_db("rfb_performance");
//$SQLku = "Select dec11, jan, feb From tbl_OS Where Area = "."$selectedArea";
$SQLku = "Select OS, PLAN From os_tbl Where Area = "."'$selectedArea'";
$dataku = mysql_query($SQLku) or die(mysql_error());

while ($row = mysql_fetch_row($dataku)) {
$Outstanding[] = $row[0];
$Plan[] = $row[1];
}


# The data for the bar chart
//$data0 = array(100, 125, 245, 147, 67);
//$data1 = array(85, 156, 179, 211, 123);
//$data2 = array(97, 87, 56, 267, 157);
//$labels = array("Mon", "Tue", "Wed", "Thur", "Fri");
$labels = array("Dec11","Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sept", "Dec");

# Create a XYChart object of size 540 x 375 pixels
$c = new XYChart(520, 345);

# Add a title to the chart using 18 pts Times Bold Italic font
$c->addTitle("OUTSTANDING PORTFOLIO $selectedArea", "calibrib.ttf", 14);

# Set the plotarea at (50, 55) and of 440 x 280 pixels in size. Use a vertical
# gradient color from light blue (f9f9ff) to blue (6666ff) as background. Set border
# and grid lines to white (ffffff).
$c->setPlotArea(60, 60, 450, 250, $c->linearGradientColor(0, 55, 0, 335, 0xf9f9ff,
0x6666ff), -1, 0xffffff, 0xffffff);

# Add a legend box at (50, 28) using horizontal layout. Use 10pts Arial Bold as font,
# with transparent background.
$legendObj = $c->addLegend(50, 28, false, "arialbd.ttf", 8);
$legendObj->setBackground(Transparent);

# Set the x axis labels
$c->xAxis->setLabels($labels);

# Draw the ticks between label positions (instead of at label positions)
$c->xAxis->setTickOffset(0.5);

# Set axis label style to 8pts Arial Bold
$c->xAxis->setLabelStyle("arialbd.ttf", 8);
$c->yAxis->setLabelStyle("arialbd.ttf", 8);

# Set axis line width to 2 pixels
$c->xAxis->setWidth(2);
$c->yAxis->setWidth(2);

# Add axis title
$c->yAxis->setTitle("Volume dalam jutaan rupiah");

# Add a multi-bar layer with 3 data sets
$layer = $c->addBarLayer2(Side);
$layer->addDataSet($Outstanding, 0xffcc00, "Outstanding");
$layer->addDataSet($Plan, 0x00ff00, "Plan");
//$layer->addDataSet($PLAN, 0x00ff00, "PLAN");
//$layer->addDataSet($feb, 0xff8800, "feb");

# Set bar border to transparent. Use glass lighting effect with light direction from
# left.
$layer->setBorderColor(Transparent, glassEffect(NormalGlare, Left));

# Enable bar label for the whole bar
$layer->setAggregateLabelStyle('',8,0x000000FF);

# Configure the bars within a group to touch each others (no gap)
$layer->setBarGap(0.2, TouchBar);

//# Create the image
$chart1URL = $c->makeSession("chart1");

# Create an image map for the chart
$imageMap = $c->getHTMLImageMap("", "",
"title='{xLabel} : {value|0} '");

# Output the chart
//header("Content-type: image/png");
//print($c->makeChart2(PNG));

?>

    </td>
    <td><img src="report.php?"></td>
  </tr>
</table>


<img src="getchart.php?<?php echo $chart1URL?>" border="0" usemap="#map1">
<map name="map1">
<?php echo $imageMap?>

</html>


Another question, If I want to make 4 chart in this method, then I must write the others 3 charting code in this one php file, is it right? Just like in script above.
chart_error1.jpg

  Re: filter by combobox data mysql glassmultibar chart
Posted by Peter Kwan on Oct-02-2012 00:50
| Reply | Monitor
Hi franky,

The error message means that your code outputs HTML first, without regarding what is required in the HTTP header. When PHP subsequently want to add something to the HTTP header, it finds that you have already output HTML, so it is unable to add to the HTTP header (as the header must be output first, followed by HTML).

When you send the HTML result to the browser, there are also HTTP headers, which contains information such as cookies, cache settings, character encoding settings, etc.. In your code, the first line of your code is already HTML (your code starts with <html>, which is HTML). So PHP outputs the default HTTP header, followed by HTML. Later in your file, you have some PHP code, and the PHP code needs to add a session cookie to the header, but it finds that it is no longer possible (because the PHP already outputs the default HTTP header and some HTML), and hence the error message.

To solve the problem, please put the PHP code at the top of your page, rather than HTML code. If you look at all our sample code, the first line in the code is always "<?php", not HTML.

I see that in your PHP code, you are directly echoing HTML, using something like:

echo "Filter By : <select name=\\"area\\" id=\\"area\\" ...........

That means that part of the PHP code is forced to be inserted in the middle of your HTML code. But for the other part, please put them at the top of your page.

Alternatively, instead of direct echoing, you may consider to store the "<select>" and other HTML output in a variable, and put everything at the top of your page before any HTML. Then in the HTML, you can just echo the variable. You may refer to our sample code on how the "<select>" box is constructed.

For outputting 4 charts in a page, it is up to you on how to designed your code. You can write a single function and calls it 4 times with different parameters for the 4 charts. For example, in the "Background and Wallpaper" sample code, we have 4 charts in the same web page, and they use the same code with different parameters. You may also put your code in other PHP files and "include" or "require" them in your main code. You may refer to PHP documentation on how to use "include" or "require".

Hope this can help.

Regards
Peter Kwan

  Re: filter by combobox data mysql glassmultibar chart
Posted by frenky tambunan on Oct-08-2012 14:56
| Reply | Monitor
Thank you for your advance solution. I will post you the result later while I'm having another question in another thread post... hehehehehe...

Many thanks to you for your support.

Regards
Frenky Tambunan