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

Message ListMessage List     Post MessagePost Message

  ChartDirector inside Joomla!
Posted by ion on Jun-06-2009 21:40
After a lot effort I managed to get ChartDirector working on a shared hosting web server. ChartDirector loads up and renders the charts just fine when I use it from within a PHP page outside my Joomla! package.
But when I try to render a chart from within a Joomla! page/article, two things happen:

a) Using direct output like:

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

results in random ascii characters being rendered in place of where the chart is supposed to be. I suppose this is the ascii interpretation of the png output, suggesting that the header command failed.

b) Using indirect output like:

  $chart1URL = $f->makeSession("chart1");
  $imageMap = $f->getHTMLImageMap("","","onMouseOver='Tip(\\"{field0}\\")' onmouseout='UnTip()'");

followed of course by the proper HTML code:

  <html>
  <body leftMargin=0 topMargin=0>
    <img src="myimage.php?<?php echo $chart1URL?>" border="0" usemap="#map1">
    <map name="map1">
      <?php echo $imageMap?>
    </map>
   </body>
  </html>

results in nothing at all. No image, no error.

The exact same page producing the chart is tested and working in my web server outside the Joomla! package. So the configuration is correct. Inside Joomla!, Chartdirector does load and it seems that it does try to render the chart but for some reason it fails to output it in a useful manner.

Any ideas/suggestions would be greatly appreciated.
I would prefer to use some form of the second (indirect) type of output because it gives me the option to integrate dhtml tooltips as well.
Thanks in advance.

  iframe
Posted by ion on Jun-06-2009 23:06
I forgot to say that in a iframe everything works fine too. I was just hoping for a more elegant solution.
And please don't waste your time over it. Just let me know if you have any idea that will point me to the right direction.  Thanks again.

  Re: iframe
Posted by Peter Kwan on Jun-09-2009 03:04
Hi ion,

I have never used Joomla! before. Also, I am not sure how you "render a chart from within a Joomla! page/article".

Anyway, no matter what you do, please be aware of the HTML and HTTP standard. The followings are some rules in writing HTML:

(1) It is illegal to include any image in HTML. No HTML web page can contain any image. It can only contain <IMG> tags (or <IFRAME> tags, or as URL in certain CSS atrtibutes, etc..) The image must be loaded from a separate HTTP connection. If you put any image in HTML, the browser will treat the image as HTML, and you will probably see garbage text. This applies to any image (including normal static images).

(2) Each HTML web page should only contain one <HTML> tag and ends with an </HTML> tag. You cannot put multiple <HTML> tags in the same HTML web page. This is illegal in HTML.


In your case, I think your Joomla! page/article is output as an HTML web page. So it is illegal to output the chart image in that page because of (1) above, otherwise you will see garbage text. To output a chart image, you may use the following methods:

(a) Insert <IMG SRC="createMyChart.php"> into your Joomla! page/article.

In the above, "createMyChart.php" is your charting script. It can be a standard PHP script. It may be possible to use a Joomla! page for "createMyChart.php" as well, provided your Joomla! page does not output HTML but output images (the output MIME type must be image/png instead of text/html). Most web frameworks allow you to output non-HTML contents, as 95% of a typical web page is non-HTML - most of them are images or videos or other things. However, as I have not used Joomla! before, I am not sure of Joomla! allows non-HTML contents.

(b) Create the chart normally in your Joomla! page/article, but do not output it. Just store it in a session variable using:

  $chart1URL = $f->makeSession("chart1");
  $imageMap = $f->getHTMLImageMap("","","onMouseOver='Tip(\\"{field0}\\")' onmouseout='UnTip()'");

In your Joomla! page/article, just output the <IMG> tag.

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

Again, note that I have never used Joomla! before, and I am not sure if the above is the correct syntax in Joomla!. In any case, you do not need to output <HTML> and <BODY> tags again, as it is illegal in HTML to have more than one <HTML> tags in the same web page. (Since your existing Joomla! page/article is already outputting HTML, it should have already output an <HTML> tag.)

Hope this can help.

Regards
Peter Kwan

  Re: iframe
Posted by Manfred on Jun-10-2010 23:58
Hi Peter,
it works in Joomla like you wrote. It is a more difficult task to setup ChartDir as amodule using the Joomla framework. Has anybody a solution for that?

Regards,
Manfred

  ChartDirector in Joomal
Posted by mr.goose on Jul-31-2012 07:12
Like several other users, I'm really struggling trying to make ChartDirector work with Joomla.  Joomla will only output HTML. SO somehow I need to pass the data on the page into the chart and then display the chart object as a graphic.. I can display an empty chart. I can get the data I need by looping through the dataset and echoing it:-

$k = 0;
for ($i=0, $n=count( $this->items ); $i < $n; $i++) {
    $row = &$this->items[$i];
    $timestamps = $row->timestamp.",".$timestamps;
    $readings = $row->reading.",".$readings;
    $k = 1 - $k;
    }
##echo the data comma separated to prove it is available.
echo $readings . "<br />" .$timestamps;

But then I'm stuck.

What exactly do you mean by "Create the chart normally in your Joomla! page/article"

Do you mean I should copy and paste the code that creates the chart into my Joomla page, leaving out the lines

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

or what?

And then how do I actually turn the chart that I have "created normally" into a session variable. Could you post a working example please because I cannot understand it?

I have been struggling with this for weeks. Please explain. I'm sure lots of Joomla users would appreciate it. :-)

Many thanks. G.

  Re: ChartDirector in Joomal
Posted by Peter Kwan on Jul-31-2012 08:19
Hi mr.goose,

From your description, it seems the issue you are encountering is that the data must come from a Joomla page, and you are not sure how to pass the data to the charting code.

Your understanding of "Create the chart normally in your Joomla! page/article, but do not output it." is absolutely correct. Just use the same charting code, but leave out the output code:

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

Instead, replace them with:

  $chart1URL = $f->makeSession("chart1");

(If you need image map for tooltips, you can also add them. See the sample code in the "Clickable Charts" section of the ChartDirector documentation).

The above code does not output the chart to the browser. It just stores the chart on the server. It is like creating the chart as an image file on the server hard disk. However, instead of using an image file, we store the chart as a PHP session variable.

Then in your Joomla page, you can add the line:

<img src="getchart.php?<?php echo $chart1URL?>">

When the browser sees the above line, will will load the image using "getchart.php" from separate HTTP connection. The "getchart.php" is a standard PHP script that comes with ChartDirector (in "ChartDirector/phpdemo"). It is a PHP script that loads the image from a session variable.

(If the chart image is stored as an image file on the server hard disk, the SRC in the <IMG> tag would be the URL of the image file. However, the image file is stored as a session variable instead, so we need to use a special script "getchart.php" to read it back. The "myimage.php" in this thread is the old filename for this script.)

Note that if the issue in your case is passing data, there are some other options you may consider:

(a) Pass the data as a query parameter to a charting script. It is like:

<IMG SRC="createMyChart.php?data=1,2,3,4,....">

except that the data=1,2,3,4,... would need to be dynamically created by your code. As most browsers limit the URL length to around 2 Kbytes, this works only if the amount of data is small (eg. for a chart with less than 100 data values).

(b) Pass the data as PHP session variables. You can then retrieve the data from the charting script ("createMyChart.php" above) from the session variable, as the PHP session variable is presistent.

(c) Do not pass the data at all, but pass the source of the data. For example, if the data are from an SQL query, or from a text file, etc, you can pass the SQL query or the file name of the text file to the charting script. The charting script can then retrieve the data. As the SQL query or the file name is likely shorter than 2 Kbytes, they can readily be passed as query parameters (or as cookies or using any common mechanism for parameter passing).

Hope this can help.

Regards
Peter Kwan

  Re: ChartDirector in Joomal
Posted by mr.goose on Aug-14-2012 07:40
Hi Peter thanks for your response. I am still struggling with this.


Couple of problems...

1. Replacing:-

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

with:-

$chart1URL = $f->makeSession("chart1");

generates a php error. I think $f should be $c shouldn't it?

2. Even if I use the correct variable, the phpsession method doesn't seem to work.

The img tag it produces looks like this:-
<img src="http://mysite.com/getchart.php?img=chart2&id=hr6i3ifgk5j51bbiea1esaiu0650294bbe5ebde&"> And I get no chart.

I have checked that the getchart.php file is in the right place. What am I doing wrong?

  Re: ChartDirector in Joomal
Posted by Peter Kwan on Aug-14-2012 23:42
Hi mr.goose,

Sorry for my mistake. Your are absolutely right. The makeSession code should be $c instead of $f.

To diagnose the problem, instead of using:

$c->makeChart("/path/to/www/charts/aaa.png");

Then in the URL, you may use:

<img src="/charts/aaa.png">

(Note: The above assumes that the file system path for the URL "/charts/aaa.png" is "/path/to/www/charts/aaa.png". Please change the path names to the ones actually used by your system.)

With the above code, you can check if the file "/path/to/www/charts/aaa.png" is actually created. Note that in some systems, the web server may be running using a special account that represents the anonymous user, and may be unable to write to any directory. To avoid uncertainties, for testing, please create the "/path/to/www/charts" and allow everyone to have read/write access to that directory.

If the above works, and you would like to use this method in your real system, you would need to add some more code as follows:

- For a real system, the "aaa.png" needs to be replaced with a unique file name (otherwise two users accessing the web page at the same time may overwrite each others image files).

- Before calling makeChart, there should be some code to clean up the old files in "/path/to/www/charts". For example, the code can delete all image files in "/path/to/www/charts" older than 600 seconds. The code only needs only to run rarely (eg 1% of the time - you may create a random number from 0 to 100, and run the code only if the number >= 99). In this way, the clean up code will only have a very small overhead to your system.

If you prefer to use the makeSession method, you may check the URL of the <img> tag to see why it does not work. (In your message, the  Please copy the URL in the <img> tag quickly to your browser address bar to load it directly. This should output an error message that may indicate the cause of the problem. (Please ensure your PHP is configured to display error messages to the browser.) See:

http://www.chartdir.com/forum/download_thread.php?site=chartdir&bn=chartdir_faq&thread=1117817200

Please kindly let me know what is the error message.

Regards
Peter Kwan

  Re: ChartDirector in Joomal
Posted by mr.goose on Aug-15-2012 00:43
Thanks Peter I will try it now and report back when I have some news.