|
LineChart imagemap issue |
Posted by vijay on Feb-21-2011 19:18 |
|
Hi,
I am unable to generate image map when we are using date type format on x axis (to support auto scale in action like y axis).
Please let me know steps to make htmlmap generate in such requirements.
Code sample been mentioned below.
my $data = [2,4,8,10,12};
my $labels = [perlchartdir::chartTime(2011, 2, 17, 0, 0, 0), perlchartdir::chartTime(2011, 2, 17, 1, 0, 0),
perlchartdir::chartTime(2011, 2, 17, 2, 0, 0), perlchartdir::chartTime(2011, 2, 17, 3, 0, 0),
perlchartdir::chartTime(2011, 2, 17, 4, 0, 0)];
my $c = new XYChart(350, 250);
$c->setPlotArea(30, 20, 300, 200);
my $linelayer=$c->addLineLayer($data);
$linelayer->setXData($labels);
$c->xAxis()->setMultiFormat(perlchartdir::StartOfDayFilter(),
"<*font=arialbd.ttf*>{value|mmm dd}", perlchartdir::AllPassFilter(),
"{value|hh:nn}");
my $imgMap = $chart->getHTMLImageMap("","","title=' US'"); |
Re: LineChart imagemap issue |
Posted by vijay on Feb-21-2011 21:26 |
|
I forgot to mention in the code about makeChart2 call. We are calling $c->makeChart2(perlchartdir::const('PNG')) menthod before calling getHTMLImageMap function. Even with this in place , HTMLImageMap function is returning null value. |
Re: LineChart imagemap issue |
Posted by vijay on Feb-21-2011 23:41 |
|
Even the below mentioned perl example is also not generating imagemap . It's returning null value. I am unable to find out issue here. Your early responsive will be a great help.
Regards,
Vijay
#!/usr/bin/perl
use perlchartdir;
# The value to display on the meter
my $value = 45;
# Create an AugularMeter object of size 200 x 200 pixels, with silver background,
# black border, 2 pixel 3D depressed border and rounded corners.
my $m = new AngularMeter(200, 200, perlchartdir::silverColor(), 0x00FFFFFF, 0);
$m->setRoundedFrame();
$m->setBackground(0x00FFFFFF,0x00FFFFFF,0);
# Set the meter center at (100, 100), with radius 85 pixels, and span from -135 to
# +135 degress
$m->setMeter(100, 100, 85, -135, 135);
# Meter scale is 0 - 100, with major tick every 10 units, minor tick every 5 units,
# and micro tick every 1 units
$m->setScale(0, 100, 10, 5, 1);
# Disable default angular arc by setting its width to 0. Set 2 pixels line width for
# major tick, and 1 pixel line width for minor ticks.
$m->setLineWidth(0, 2, 1);
# Set the circular meter surface as metallic blue (9999DD)
$m->addRing(0, 90, perlchartdir::metalColor(0x9999dd));
# Add a blue (6666FF) ring between radii 88 - 90 as decoration
$m->addRing(88, 90, 0x6666ff);
# Set 0 - 60 as green (99FF99) zone, 60 - 80 as yellow (FFFF00) zone, and 80 - 100 as
# red (FF3333) zone
$m->addZone(0, 60, 0x99ff99);
$m->addZone(60, 80, 0xffff00);
$m->addZone(80, 100, 0xff3333);
# Add a text label centered at (100, 135) with 15 pts Arial Bold font
$m->addText(100, 135, "Units", "arialbd.ttf", 15, $perlchartdir::TextColor,
$perlchartdir::Center);
# Add a text box centered at (100, 165) showing the value formatted to 2 decimal
# places, using white text on a black background, and with 1 pixel 3D depressed
# border
$m->addText(100, 165, $m->formatValue($value, "2"), "Arial", 8, 0xffffff,
$perlchartdir::Center)->setBackground(0x000000, 0x000000, -1);
# Add a semi-transparent blue (40333399) pointer at the specified value
$m->addPointer($value, 0x40333399);
# Output the chart
$m->makeChart("roundmeter1.png");
my $imageMap = $m->getHTMLImageMap("", "","title='Count {value|0}'");
print 'imagemap is'.$imageMap;
-------------------
Output is
imagemap is |
Re: LineChart imagemap issue |
Posted by vijay on Feb-22-2011 01:29 |
|
I am using ChartDirector Version 5.0.3. |
Re: LineChart imagemap issue |
Posted by Peter Kwan on Feb-22-2011 02:20 |
|
Hi vijay,
The image map for a line chart should work normally. If you think it does not work, would you mind to include the complete and exact code you are using, including the "print" statement that you use to print out the image map?
In your latter posts, you are using an AngularMeter, not a line chart. Currently, ChartDirector does not produce image map for meters, because in the majority of the cases, a meter only displays one value, and so only has one clickable point. Therefore, one may use simple HTML (eg. the <A> tag) to make the meter clickable and no image map would be needed.
For example, the following is a clickable meter with tooltips:
<a href="/cgi-bin/abcd.pl"><img src="... url for the meter image ..." title='xxxx'></a>
Hope this can help.
Regards
Peter Kwan |
Re: LineChart imagemap issue |
Posted by vijay on Feb-22-2011 03:33 |
|
Hi Peter,
Thanks for reply.
We are using chartdirectory along with mason .
chartmain.mi is getting called from mason and inturn it calls lineChart.mi script.
With print statement i am able to print image bit stream but imagemap is coming as null. Please take a look at this issue.
chartmain.mi:
<%perl>
my $chart = $m->comp("/gp/vendor/members/quarterdeck/chart/lineChart.mi", charttype=>1);
my $image=$chart->makeChart2(0);
print $image;
my $imageMap = $chart->getHTMLImageMap("", "","title='Count {value|0}'");
print 'imagemap is'.$imageMap;
</%perl>
/gp/vendor/members/quarterdeck/chart/lineChart.mi:
<%args>
$charttype
</%args>
<%init>
if ( $charttype eq 1 )
{
# The data for the line chart
my $data = [2,4,8,10,12];
# The labels for the line chart
my $labels = [perlchartdir::chartTime(2011, 2, 17, 0, 0, 0), perlchartdir::chartTime(2011, 2, 17, 1, 0, 0),
perlchartdir::chartTime(2011, 2, 17, 2, 0, 0), perlchartdir::chartTime(2011, 2, 17, 3, 0, 0),
perlchartdir::chartTime(2011, 2, 17, 4, 0, 0)];
# Create a XYChart object of size 250 x 250 pixels
my $c = new XYChart(350, 250);
# Set the plotarea at (30, 20) and of size 200 x 200 pixels
$c->setPlotArea(30, 20, 300, 200);
# Add a line chart layer using the given data
my $linelayer=$c->addLineLayer($data);
#$c->xAxis()->setLabels2($labels);
$linelayer->setXData($labels);
$c->xAxis()->setMultiFormat(perlchartdir::StartOfDayFilter(),
"<*font=arialbd.ttf*>{value|mmm dd}", perlchartdir::AllPassFilter(),
"{value|hh:nn}");
return ($c);
}
</%init>
Output
---------
PNG ��� IHDR��^���?���??d��&PLTE???���??????????????CC?pp???????KK????rr??ee????33??????????NN?????????????xx?LL?::?EE???cc?<<?XX?dd????ZZ?qq?????????????jj |
Re: LineChart imagemap issue |
Posted by Peter Kwan on Feb-22-2011 19:48 |
|
Hi vijay,
Would you mind to inform me how do you view the output, and how do you know that the image map is null?
If you can see the output in a browser as text, then the output is not a "binary stream" as according to the browser (otherwise the browser would not display it as text). The browser probably considers it as either "text/html" or "text/plain".
Note that many HTML tags are invisible if treated as HTML. For example, if you write "<span>aaa</span>", you can only see the "aaa" in a browser, but not the "<span>" or "</span>" tag. (You can see them if you view the output using a text editor instead.) In particular, the image map is not visible as according to HTML standard.
Also, according to HTTP standard, it is illegal to print both an image and an image map in the same HTTP connection. So in any case, the image map will not work, as the HTML is illegal.
To determine if the image map is there, you may write a simple perl script and execute it using a command shell and print the output to the command shell (not print to a stream and display using a browser). Also, you do not need to print the $image. (It is illegal that you print both the $image and the $imageMap in the same stream anyway.)
To create a web page with a chart an an image map, you need to create an image and an image map, and deliver them to the browser in two separate HTTP connections. This is a requirement of the HTML and HTTP standards. The image map should be included in the HTML part of the web page (the web page that contains the <IMG> tag). The image should be delivered in the HTTP connection referenced by the <IMG> tag. You may refer to the clickable charts sample code for some examples.
Hope this can help.
Regards
Peter Kwan |
Re: LineChart imagemap issue |
Posted by vijay on Feb-22-2011 23:02 |
|
Hi Peter,
Your explanation provided enough information to debug the issue. Now, it's working.
Thanks you.
Regards,
Vijay Reddy |
|