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

Message ListMessage List     Post MessagePost Message

  Simple Clickable Chart can't render on PHP page:
Posted by Simple Clickable Chart in PHP not working. on Sep-21-2016 04:44
Attachments:
Hi Peter:

I'm working on a ChartDirector Version for PHP which I suspect is 5.1.

When trying to render a simple clickable chart,  I get an error message which states that the ImageMap variable is undefined. I need to pass some arguments to the chart,  which usually works well with just PHP charts,  instead with a clickable chart that has some html added,  I find it hard to solve.

Here is my code:

1) for the clickable chart: chr_lin_clk.php
<?php
  require("lib/phpchartdir.php");

$data= explode(",", $_GET["data"]);
for ($h = 0; $h < count($data); ++$h)
     if ((int)$data[$h] == null) $data[$h] = NoValue;

$labels=explode(",", $_GET["labels"]);
#$labels = array_map(chartTime2, explode(",", $_GET["labels"])); //tranformo unix date a fecha legible
$title=($_GET["title"]);

# Create a XYChart WxH
$c = new XYChart(500, 300, Transparent);

# Set the plotarea at (30-x, 20-y) and of size 200-x X 200-y pixels
$c->setPlotArea(50, 20, 400, 188, 0xffffff, -1, 0x7F7F7F, 0xcccccc, 0xcccccc);

# Add a title to the chart using 18pts Times Bold Italic font
$c->addTitle($title, "arialbd.ttf", 10);
# Set the labels on the x axis.
$c->xAxis->setLabels($labels);
$c->xAxis->setLabelStyle("arial.ttf", 8, TextColor, 90);

$c->yAxis->setTickDensity(30);
$c->xAxis->setMargin(10, 10);
$c->yAxis->setTitle("cantidad", "arialb.ttf", 10);

$layer = $c->addLineLayer();
# Set the default line width to 2 pixels
$layer->setLineWidth(3);

$layer->setBorderColor(Transparent, softLighting(Top));

$dataSetObj = $layer->addDataSet($data,  0xcf4040, "");
$dataSetObj->setDataSymbol(SquareSymbol, 10);

# Enable data label on the data points. Set the label format to nn%.
$layer->setDataLabelFormat("{value|0}");
$layer->setDataLabelStyle("arial.ttf", 9.5, 0x1E90FF, 0);

#linea tendencia.
$trendLayerObj = $c->addTrendLayer($data,0x008000, 'Tendencia');

$c->xAxis->setColors(0x7F7F7F, 0x7F7F7F);

$c->yAxis->setColors(0x7F7F7F, 0x7F7F7F);

# Create the image and save it in a temporary location
$chart1URL = $c->makeSession("chart1");

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

?>

2) On the php page,  where the chart should be displayed:

<div class="row">
    <div class="col-xs-12 col-sm-6 ">
      <img  src="chr/chr_lin_clk.php<?php echo "?data=". $data_turnos."&labels=".$labels_turnos."&title=CLIENTES - NUEVO VEHICULO - ATENDIDOS EN RECEPCION";?>" class="center-block img-responsive">
<img src="chr/getchart.php?<?php echo $chart1URL?>" border="0" usemap="#map1">
<map name="map1">
    <?php echo $imageMap?>
</map>


3)  the error message:
Screenshot from 2016-09-20 15_38_36.png

  Re: Simple Clickable Chart can't render on PHP page:
Posted by Peter Kwan on Sep-22-2016 22:18
Hi,

Sorry for the late reply.

In HTML, the <IMG> tag is for an image. In your code, the "chr_lin_clk.php" is not an image. In fact, it does not output anything at all. So no chart would be displayed.

In HTML, the SRC in <IMG> is completed unrelated to your web page. You can even set the SRC in <IMG> to link to other people's web site. This would not allow your code to see the other web site's script or access its variables. That's why there is no $imageMap variable in your script.

To include some PHP script into other PHP script, please use the PHP include or require statement. For example:

require("chr_lin_clk.php");

Please note that the data cannot be passed using query parameters, as there is no query between chr_lin_clk.php and the containing script. Instead, just create the $data and $label arrays before using require("chr_lin_clk.php");, and the code in chr_lin_clk.php can access these variables.

Hope this can help.

Regards
Peter Kwan

  Re: Simple Clickable Chart can't render on PHP page:
Posted by Simple Clickable Chart in PHP not working. on Sep-23-2016 01:01
Attachments:
Hi Peter,  maybe I was not clear.

I indeed can render chartdirector .php chart's as files.  Actually I do it,  just to remember, the cart PHP file cannot have any html or text,  just PHP script.

I run this script as an example on my website, passing arguments to render the chart:
The code:
<div>
<img src="chr/chr_lin_1.php?data=23,5,43&labels=A,B,C&title=PHP Chart Test" >
</div>

What I can see is that the clickable chart has a different method to output the charts:

The standard methos for any chart, which I can render inside an html img tag:
  header("Content-type: image/png");
  print($c->makeChart2(PNG));

While the clickable chart:
  $chart1URL = $c->makeSession("chart1");

    $imageMap = $c->getHTMLImageMap("render.php?date={xLabel}", "",  "title='{xLabel}: {value|0}'");
   ?>
   <img src="getchart.php?<?php echo $chart1URL?>" border="0" usemap="#map1">
   <map name="map1">
  <?php echo $imageMap?>
  </map>

So it's clear that clickable charts cannot be called the way others can,  inside an img tag.  However I'm not doing so,  I'm calling byt the PHP include function,  it fails.

So how can I show clickable charts on my website?
I'm running a linux - apache server, 5.1 version of chartdirector.

Thanks in advance
Screenshot from 2016-09-22 11_51_33.png

  Re: Simple Clickable Chart can't render on PHP page:
Posted by Peter Kwan on Sep-23-2016 15:34
Attachments:
Hi,

ChartDirector can output both chart images and image maps. Normally, chart images are not included in HTML. The HTML only includes links to chart images using the IMG tag, like <img src="aaa.png">. If your code just produces the chart image, you can use <img src="mychart.php">

However, if your code also produces the image map, the image map must be included HTML, while the chart image is not included in HTML. Since HTML comes first (the browser will receive the HTML first, then sees the IMG tag and loads the image from the URL in the IMG tag), so your code should output the image map in the HTML part of the code first. That's why your code needs to be included in the HTML part, not referenced in the IMG tag.

Now, the image map and the chart image is generated together, but your code can only output the image map (as the image cannot be directly included in HTML). In our sample code, the image is stored in a session variable and not output. Then the getchart.php is used to output the image, like:

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

For your case, have you included the <IMG> tag in the HTML part of your code?

If you want to encapsulate the charting code into a function so that you can call it, you can just use create it as a regular PHP function. I have attached an example for your reference.

Hope this can help.

Regards
Peter Kwan
bbb.php
<?php
include("aaa.php");

$data = array(450, 560, 630, 800, 1100, 1350, 1600, 1950, 2300, 2700);
$labels = array("1996", "1997", "1998", "1999", "2000", "2001", "2002", "2003", "2004", "2005");
$title = "My Chart";
$myChart = drawChart("chart1", $title, $data, $labels);
?>
<!DOCTYPE html>
<html>
<body>
<?php echo $myChart ?>
</body>
</html>
aaa.php
<?php
require("lib/phpchartdir.php");

function drawChart($id, $title, $data, $labels)
{
    # Create a XYChart WxH
    $c = new XYChart(500, 300, Transparent);

    # Set the plotarea at (30-x, 20-y) and of size 200-x X 200-y pixels
    $c->setPlotArea(50, 20, 400, 188, 0xffffff, -1, 0x7F7F7F, 0xcccccc, 0xcccccc);

    # Add a title to the chart using 18pts Times Bold Italic font
    $c->addTitle($title, "arialbd.ttf", 10);
    # Set the labels on the x axis.
    $c->xAxis->setLabels($labels);
    $c->xAxis->setLabelStyle("arial.ttf", 8, TextColor, 90);

    $c->yAxis->setTickDensity(30);
    $c->xAxis->setMargin(10, 10);
    $c->yAxis->setTitle("cantidad", "arialb.ttf", 10);

    $layer = $c->addLineLayer();
    # Set the default line width to 2 pixels
    $layer->setLineWidth(3);

    $layer->setBorderColor(Transparent, softLighting(Top));

    $dataSetObj = $layer->addDataSet($data,  0xcf4040, "");
    $dataSetObj->setDataSymbol(SquareSymbol, 10);

    # Enable data label on the data points. Set the label format to nn%.
    $layer->setDataLabelFormat("{value|0}");
    $layer->setDataLabelStyle("arial.ttf", 9.5, 0x1E90FF, 0);

    #linea tendencia.
    $trendLayerObj = $c->addTrendLayer($data,0x008000, 'Tendencia');

    $c->xAxis->setColors(0x7F7F7F, 0x7F7F7F);

    $c->yAxis->setColors(0x7F7F7F, 0x7F7F7F);

    # Create the image and save it in a temporary location
    $chart1URL = $c->makeSession($id);

    # # Create an image map for the chart
    $imageMap = $c->getHTMLImageMap("rpt_dtl_trf_ass.php", "", "title='{xLabel}: {value|0}'");
    
    return "<img src='getchart.php?$chart1URL' border='0' usemap='#map_$id'><map name='map_$id'>$imageMap</map>";
}
?>